রিঅ্যাক্ট ব্যাসিকসঃ জেএসএক্স(JSX) পরিচিতি

রিঅ্যাক্ট নিয়ে কাজ শুরু করার আগে একটা গুরুত্বপূর্ণ কিন্তু অপশনাল টপিক নিয়ে আজকে আলোচনা করবো। অপশনাল মানে এই না যে আপনি এটা স্কিপ করতে পারবেন। বরং আমার পরের লেখা সবগুলোই এটার উপর ডিপেন্ডেড। তাই এটা আপনার জন্যেও গুরুত্বপূর্ণ। আমরা আজকে জেএসএক্স (JSX) সিনট্যাক্স নিয়ে আলোচনা করবো।

রিঅ্যাক্ট এর প্রোজেক্ট এ আপনি এই টাইপ এর কোড অহরহ দেখবেনঃ

<h1>Hello World!</h1>

এটাকেই আসলে জেএসএক্স বলে। জেএসএক্স সিনট্যাক্স দেখতে অনেকটা এইচটিএমএল ( HTML) এর মতো। কিন্তু এটা এইচটিএমএলও না আবার জাভস্ক্রিপ্ট এর স্ট্রিংও না। বরং এটা জাভাস্ক্রিপ্ট এরই সিনট্যাক্স এক্সটেনশন। এটাকে অ্যাড করা হয়েছে ডেভেলপারদের সুবিধার জন্যে।

আমরা ব্যাবেল এর অনলাইন কম্পাইলার ইউজ করে জেএসএক্স কে ভিতর থেকে দেখবো। প্রথমে এই লিঙ্কে গিয়ে আমরা উপরের জেএসএক্স কোডটা বাম দিকে পেস্ট করবো। এবার ডানদিকে লক্ষ্য করুন, এটা হচ্ছে আসলে জেএসএক্স এর পূর্ণ ভার্শনঃ

দেখুন একটা নরমাল এইচটিএমএল কোড এর মতো দেখতে কোড কতো কমপ্লেক্স দেখা যাচ্ছে। আপনি এই কমপ্লেক্স ভার্শনও ইউজ করতে পারবেন আপনার রিঅ্যাক্ট অ্যাপ এ। কিন্তু এতো সাজানো গোছানো সিনট্যাক্স থাকতে এতো কমপ্লেক্স সিনট্যাক্স কে ইউজ করবে বলেন? আর তাই জেএসএক্স ইউজ করাটাই বুদ্ধিমানের কাজ।

এখন জেএসএক্স এর মেইন কাজ হচ্ছে রিঅ্যাক্ট এর ইলিমেন্ট তৈরি করা যেটা আমরা পরের পর্বে ইউজ করা শুরু করবো। আপাতত আগের পর্বে তৈরী করা ব্যাসিক ফাইলেই আপনি চাইলে জেএসএক্স প্র্যাক্টিস করতে পারেন। ফাইলটা ডাউনলোড করার পর আনজিপ করে সেইম ডিরেক্টরিতে কমান্ড লাইন ওপেন করে প্রয়োজনীয় ডিপেডেন্সিগুলো ডাউনলোড করে নিনঃ

npm i

সবকিছু ঠিকঠাক থাকলে এবার আপনি npm start লেখার সাথে সাথে আপনার রিঅ্যাক্ট অ্যাপ্লিকেশন চালু হয়ে যাবে। এবার এখানে আপনি কোড এডিটর ওপেন করে জেএসএক্স প্র্যাক্টিস করতে পারবেন।

জেএসএক্স এইচটিএমএলের মতো হলেও এটার বেশ ভলো কিছু ফাংশানালিটি আছে। যেমন আমরা চাইলে জেএসএক্স এর ভিতরে জাভাস্ক্রিপ্ট এর ভ্যারিয়েবলও ইন্সার্ট করতে পারিঃ

import React from "react";
import ReactDOM from "react-dom";
const variable = "Zonayed Ahmed";
ReactDOM.render(<h1>My Name is {variable}</h1>,document.getElementById("root"));

এখনি আপনাকে জানতে হবে না এই কোড কিভাবে কাজ করছে, শুধু এটুকু জানুন এভাবে জেএসএক্স এ ভ্যারিয়েবল নিয়েও কাজ করা যায়। একইরকম ভাবে ফাংশনও কল করতে পারবেনঃ

import React from "react";
import ReactDOM from "react-dom";
const aFunc = () => {
   return "Zonayed Ahmed";
};
ReactDOM.render(<h1>My Name is {aFunc()}</h1>, document.getElementById("root"));

আসলে এভাবে যেকোনো জাভাস্ক্রিপ্ট এক্সপ্রেশনকে লিখতে পারবেন জেএসএক্স এর ভিতরেঃ

import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>My Name is {true ? 'Zonayed Ahmed' : 'Ahmed Zonayed'}</h1>, document.getElementById("root"));

জেএসএক্স এ আপনি এইচটিএমএলের মতো করে এভাবে অ্যাট্রিবিউটও নিতে পারবেন। অ্যাট্রিবিউটের মতো দেখতে হলেও এটাকে মূলত প্রপস বলা হয়।প্রপস দিয়ে রিঅ্যাক্ট এ অন্যরকমের কাজ করা হয় যেগুলো আমরা আস্তে আস্তে দেখবো। তবে এপনি এভাবে অ্যাট্রিবিউট(এর মতো জিনিস)ও নিতে পারবেনঃ

<h1 anyName="anyvalue">Hello World!</h1>

এখন জেএসএক্স কে একটা ভ্যারিয়েবলের ভিতরেও ঢুকিয়ে রাখতে পারবেন এবং পরবর্তিতে আপনি যেখানে ইচ্ছা এই ভ্যারিয়েবলকে কল করে জেএসএক্সটাকে কাজে লাগাতে পারবেনঃ

const jsxVar = <h1>Hello World!</h1>;

একটা জেএসএক্স ভিতরে আরো অনেকগুলো জেএসএক্স চাইল্ড ইলিমেন্টও থাকতে পারবেঃ

<h1>
   Hello World! How are <span>you?</span>
   <span>My age is 21 years old!</span>
</h1>

এটা ঠিক এইচটিএমএল এর মতোই। শেষের ট্যাগ এ আপনার ক্লোজিং ব্র‍্যাকেট দিতে হবে।

সেইমভাবে আপনি মাত্র একটা জেএসএক্স ইলিমেন্টকেই ভ্যারিয়েবল এ স্টোর করতে পারবেন। এখন সেই ইলিমেন্ট এর ভিতরে যত ইচ্ছা চাইল্ড থাকতে পারবে। কিন্তু পুরোটা একটা ইলিমেন্টই হবেঃ

সঠিকঃ

<div>
   <h1>Hello CodeSandbox</h1>
   <h2>Start editing to see some magic happen!</h2>
</div>

ভুলঃ

<h1>Hello CodeSandbox</h1>
<div>
   <h2>Start editing to see some magic happen!</h2>
</div>

সেইমভাবে কোনো জেএসএক্স ইলিমেন্ট রিটার্ণ করতে চাইলে মাত্র একটা প্যারেন্ট ইলিমেন্টই রিটার্ণ করতে পারবেন। চাইল্ড যতোই থাকুক সমস্যা নাইঃ

...
return (<div>
   <h1>Hello CodeSandbox</h1>
   <h2>Start editing to see some magic happen!</h2>
</div>);
...

জেএসএক্স এইচটিএমএল এর মতো দেখা গেলেও এখানে আরো কিছু ট্রিক্স আছে। যদি আপনার জেএসএক্স এর কোনো চাইল্ড ইলিমেন্ট বা ভিতরে কিছু না থাকে তাহলে সেল্ফ ক্লোজিং ট্যাগ ইউজ করতে হবেঃ

<img src="..." />
<input ... />

আমরা ব্যাবেলে জেএসএক্স দেখার পর এমনকিছু দেখেছিলামঃ

React.createElement(
  "h1",
  null,
  "Hello World!"
);

এখানে React.createElement পিছনে একটা অবজেক্ট তৈরি করে ঠিক এভাবেঃ

const element = {
  type: 'h1',
  props: {
    className: null,
    children: 'Hello, world!'
  }
};

এখান থেকেই পরিষ্কারভাবে দেখা যাচ্ছে এটাও একটা অব্জেক্ট।

আশা করি জেএসএক্স নিয়ে কাজ করার জন্যে এখন আপনি প্রস্তুত। এখানে কিছু না বুঝলেও পরে আবার রিভিও করবেন এখানে এসে তাহলে ধরতে পারবেন কোনটা কি আর কেনোই বা এমনভাবে ইউজ করা হয়েছে। আর এখানে ব্যবহৃত সবগুলো কোডসহ কমপ্লিট রিঅ্যাক্ট প্রোজেক্টটি গিটহাবে রয়েছে। চাইলে গিটহাব থেকে দেখে নিতে পারেন বা ডাউনলোড করে প্র্যাক্টিস করতে পারেন।

আমার এই লেখা পূর্বে আমার ব্লগে প্রকাশিত হয়েছে। চাইলে আমার ব্লগ থেকে ঘুরে আসতে পারেন। ব্লগ থেকে সাবস্ক্রাইব করলে আমি নিজে থেকেই আমার নতুন লেখাগুলো আপনার ইমেইলে প্রতি শুক্রবার সকালে পাঠিয়ে দিবো। ভালো থাকবেন। হ্যাপী প্রোগ্রামিং!