ReactJS-এ JSX (JavaScript XML) একটি খুব গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এটি React কম্পোনেন্টগুলোর UI (User Interface) নির্মাণে ব্যবহৃত হয়। JSX সিনট্যাক্সটি HTML এবং JavaScript এর সংমিশ্রণ, যা React কোড লেখাকে অনেক সহজ এবং পাঠযোগ্য করে তোলে। এখানে JSX সিনট্যাক্স এবং এক্সপ্রেশনগুলোর বিস্তারিত আলোচনা করা হলো।
JSX Syntax
JSX সিনট্যাক্সের মধ্যে কিছু বিশেষ নিয়ম রয়েছে, যেগুলো ReactJS কোডে HTML-like ট্যাগ এবং JavaScript কোড মেশাতে সাহায্য করে। JSX ব্যবহারের মাধ্যমে আপনি কম্পোনেন্টের মধ্যে HTML, CSS এবং JavaScript একত্রে ব্যবহার করতে পারেন।
১. HTML-like Tags
JSX এ HTML-এর মতো ট্যাগ ব্যবহার করা যায়। তবে, এটি সম্পূর্ণভাবে JavaScript এর অংশ হিসেবে কাজ করে। যেমন:
const element = <h1>Hello, World!</h1>;
এখানে, <h1>Hello, World!</h1> একটি JSX ট্যাগ যা React কম্পোনেন্টের মধ্যে HTML-like উপাদান তৈরি করে।
২. Self-closing Tags
কিছু HTML ট্যাগ যেমন <img>, <input>, <br> ইত্যাদি ReactJS-এ self-closing বা স্ব-বন্ধনী হতে পারে। JSX এ এই ট্যাগগুলোকে অবশ্যই self-closing করতে হবে, অর্থাৎ শেষের স্ল্যাশ ("/") ব্যবহার করতে হবে। যেমন:
<img src="image.jpg" alt="Image" />
<input type="text" />
<br />
৩. Attributes (অ্যাট্রিবিউটস)
JSX এ কিছু অ্যাট্রিবিউট পরিবর্তিত হয়েছে। যেমন HTML-এ class অ্যাট্রিবিউট ব্যবহৃত হয়, কিন্তু JSX-এ এটি className হয়ে থাকে। এছাড়া, for অ্যাট্রিবিউট JSX-এ htmlFor এ পরিবর্তিত হয়েছে, কারণ for একটি JavaScript রিজার্ভড কিওয়ার্ড।
<div className="container">
Hello, World!
</div>
<label htmlFor="username">Username</label>
৪. JavaScript Expressions
JSX এর মধ্যে JavaScript এক্সপ্রেশন (যেমন ভ্যারিয়েবল, ফাংশন, অপারেটর) ব্যবহার করা সম্ভব, এবং সেগুলো {} ব্রেসেসের মধ্যে রাখতে হয়। উদাহরণস্বরূপ:
const name = 'John';
const element = <h1>Hello, {name}!</h1>;
এখানে, {name} একটি JavaScript এক্সপ্রেশন যা JSX এর মধ্যে অন্তর্ভুক্ত করা হয়েছে। এই এক্সপ্রেশনটি React কম্পোনেন্টে ডাইনামিক কন্টেন্ট রেন্ডার করতে ব্যবহার হয়।
JSX Expressions
JSX এক্সপ্রেশন ব্যবহারের মাধ্যমে আপনি React কম্পোনেন্টে ডাইনামিক কন্টেন্ট রেন্ডার করতে পারেন। এক্সপ্রেশনগুলির মধ্যে JavaScript কোড ব্যবহার করা হয় যা আপনাকে কন্ডিশনাল রেন্ডারিং, লুপিং এবং আরও অনেক কার্যকলাপ করতে সাহায্য করে।
১. ডাইনামিক কন্টেন্ট রেন্ডারিং
JSX-এ JavaScript এক্সপ্রেশন ব্যবহার করে আপনি ডাইনামিক কন্টেন্ট রেন্ডার করতে পারেন। উদাহরণস্বরূপ:
const user = { name: 'John', age: 30 };
const element = <h1>Hello, {user.name}. You are {user.age} years old.</h1>;
এখানে, {user.name} এবং {user.age} JavaScript এক্সপ্রেশন, যা JSX ট্যাগের মধ্যে রেন্ডার হবে।
২. কন্ডিশনাল রেন্ডারিং (Conditional Rendering)
JSX-এ কন্ডিশনাল রেন্ডারিং করতে JavaScript এক্সপ্রেশন ব্যবহার করা হয়। যেমন if বা ternary অপারেটর দিয়ে আপনি UI কন্ডিশন অনুসারে পরিবর্তন করতে পারেন। উদাহরণস্বরূপ:
const isLoggedIn = true;
const element = (
<h1>{isLoggedIn ? 'Welcome back!' : 'Please sign up.'}</h1>
);
এখানে, {isLoggedIn ? 'Welcome back!' : 'Please sign up.'} একটি ternary এক্সপ্রেশন, যা কন্ডিশন অনুযায়ী ডাইনামিকভাবে কন্টেন্ট রেন্ডার করে।
৩. লুপিং (Looping)
JSX-এ JavaScript এর map() ফাংশন ব্যবহার করে লিস্ট রেন্ডার করা যায়। উদাহরণস্বরূপ:
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number}>{number}</li>
);
const element = <ul>{listItems}</ul>;
এখানে, numbers.map() ফাংশন ব্যবহার করে আমরা একটি লিস্ট তৈরি করেছি এবং JSX ট্যাগের মধ্যে এক্সপ্রেশন হিসেবে রেন্ডার করেছি।
৪. ফাংশন কল (Function Call)
JSX-এ ফাংশন কলও করা সম্ভব, এবং আপনি JavaScript এর যে কোনো কার্যকরী এক্সপ্রেশন JSX ট্যাগে ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
function greet(name) {
return `Hello, ${name}!`;
}
const element = <h1>{greet('John')}</h1>;
এখানে, {greet('John')} একটি JavaScript ফাংশন কল, যা JSX ট্যাগের মধ্যে রেন্ডার হবে।
JSX এবং JavaScript-এর মধ্যে পার্থক্য
JSX এবং JavaScript কোডের মধ্যে কিছু পার্থক্য রয়েছে:
- JSX-এ ট্যাগের নাম ছোট হরফে থাকতে হয়। HTML ট্যাগগুলোর নাম সাধারণত ছোট হরফে থাকে, যেমন
<div>,<span>, কিন্তু JSX-এ React কম্পোনেন্টের নাম বড় হরফে শুরু হয়, যেমন<MyComponent />। - JSX-এ JavaScript এক্সপ্রেশন
{}এর মধ্যে লেখা হয়। JSX-এ JavaScript কোড{}ব্রেসেসের মধ্যে লিখতে হয়, যা React কম্পোনেন্টে ডাইনামিক কন্টেন্ট রেন্ডার করতে সহায়তা করে।
সারাংশ
JSX হলো ReactJS-এর মধ্যে HTML এবং JavaScript একত্রে ব্যবহারের একটি শক্তিশালী পদ্ধতি, যা UI তৈরির প্রক্রিয়াকে সহজ, কার্যকরী এবং পাঠযোগ্য করে তোলে। JSX সিনট্যাক্সে HTML-like কোড এবং JavaScript এক্সপ্রেশন ব্যবহার করা যায়, যা React অ্যাপ্লিকেশন তৈরি করার সময় ডাইনামিক কন্টেন্ট রেন্ডারিং, কন্ডিশনাল রেন্ডারিং এবং লুপিংয়ের মাধ্যমে আরও বেশি ফ্লেক্সিবিলিটি দেয়।
Read more
