JSX কী? কিভাবে কাজ করে? — বিস্তারিত ব্যাখ্যা (বাংলা)

JSX (JavaScript XML) হচ্ছে React-এ ব্যবহার করা একটি বিশেষ সিনট্যাক্স — যা HTML-এর মত লুকানো কিন্তু আসলে এটি JavaScript। এটি ডেভেলপারদের জন্য UI (User Interface) লিখতে সহজ ও পাঠযোগ্য করে তোলে।

সংক্ষিপ্ত সংজ্ঞা

JSX হলো একটি syntax extension যা React component-এ HTML মতো কোড লিখতে দেয়। ব্রাউজার সরাসরি JSX বুঝতে পারে না — তাই build step-এ এটি সাধারণ JavaScript (React.createElement কল) এ রূপান্তরিত হয়।

কেন JSX ব্যবহার করা হয়?

পাঠযোগ্যতা: HTML-সদৃশ সিনট্যাক্স কোডকে আরও পরিষ্কার এবং বুঝতে সহজ করে।
Declarative UI: আপনি বলবেন কেমন UI চান — React তা রেন্ডার করবে।
JavaScript শক্তি: একই ফাইলে JavaScript logic ও UI লিখতে পারবেন — দ্রুত ডেভেলপ হয়।
Tooling সুবিধা: IDE autocomplete, linting এবং formatting ভালোভাবে কাজ করে।

JSX-এর মৌলিক উদাহরণ


// JSX কোড (App.jsx)
function App() {
  const name = "প্রবীর";
  return (
    <div className="container">
      <h1>হ্যালো, {name}!</h1>
      <p>Welcome to React with JSX.</p>
    </div>
  );
}

উপরের JSX ব্রাউজার সরাসরি চালাতে পারবে না — build tool (Vite/CRA/Babel) এটিকে নিচের ধরনের JavaScript-এ কনভার্ট করে:


// Transpiled JavaScript (conceptual)
React.createElement(
  "div",
  { className: "container" },
  React.createElement("h1", null, "হ্যালো, ", name, "!"),
  React.createElement("p", null, "Welcome to React with JSX.")
);

JSX-এর নিয়ম ও কনভেনশন

একটিমাত্র root element: একটি JSX রিটার্নে একটিমাত্র parent উপাদান থাকতে হবে (বা React.Fragment ব্যবহার করতে হবে)।
class → className: HTML-এ যেখানে class ব্যবহার হয়, JSX-এ className ব্যবহার করতে হবে।
for → htmlFor: লেবেলের জন্য htmlFor ব্যবহার করো (নাহলে reserved word collision)।
camelCase attribute: DOM attribute গুলো camelCase-এ (উদা: tabIndex, readOnly)।
JavaScript ব্যবহার করতে কস্তে: JSX-এ JavaScript expression ঢুকাতে ব্রেসেস `{}` ব্যবহার করো।

JavaScript Expressions in JSX

JSX-এ আপনি সরাসরি JavaScript expression লিখতে পারবেন — যেমন ভ্যারিয়েবল, ফাংশন কল, টার্নারি অপারেটর ইত্যাদি:


<h2>Current Year: {new Date().getFullYear()}</h2>

<p>{isLoggedIn ? "Welcome back!" : "Please login."}</p>

Conditional Rendering (উদাহরণ)


function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h3>স্বাগতম!</h3> : <button>Login</button>}
    </div>
  );
}

List Rendering ও Key প্রয়োজনীয়তা

Array থেকে list তৈরি করার সময় map ব্যবহার করে JSX রিটার্ন করো এবং প্রতিটি আইটেম-এ ইউনিক key দাও:


const fruits = ['আনাব', 'কলা', 'আম'];

function FruitList() {
  return (
    <ul>
      {fruits.map((f, idx) => (
        <li key={idx}>{f}</li>
      ))}
    </ul>
  );
}

JSX এ CSS ব্যবহার

Inline style দিতে হলে style attribute এ object পাঠাও (camelCase CSS property names ব্যবহার করতে হবে):


<div style={{ backgroundColor: 'lightblue', padding: '10px' }}>
  Inline styled box
</div>

Fragments: অপ্রয়োজনীয় wrapper এড়ানো

একাধিক আইটেম ফেরত দিতে হলে আপনি fragment ব্যবহার করতে পারেন — <>...</> বা <React.Fragment> :


function Items() {
  return (
    <>
      <h4>Title</h4>
      <p>Description</p>
    </>
  );
}

Common Pitfalls (শুরুতেই ভুল হওয়া সাধারণ)

Unclosed tags: JSX-এ সব self-closing tag গুলো <img /> বা <br /> হিসেবে লিখতে হবে।
Reserved words: class এবং for সরাসরি ব্যবহার করলে সমস্যা হবে — যথাক্রমে className, htmlFor ব্যবহার করুন।
Multiple root elements: একাধিক top-level sibling রিটার্ন করলে error হবে — একটি wrapper লাগবে।
Key misuse: list rendering এ index-কে key হিসেবে ব্যবহার করলে reorder এর সময় সমস্যা হতে পারে; সম্ভব হলে unique id ব্যবহার করুন।

অ্যাডভান্সড: JSX ও Babel

JSX কে ব্রাউজার বুঝবে না — তাই Babel বা অন্য transpiler JSX থেকে React.createElement কল তৈরি করে। আপনি যদি Vite বা CRA ব্যবহার করেন, এই কনফিগ তা আপনাকে অটোমেটিক দেয়।

Best Practices (ভালো অভ্যাস)

ছোট ও পরিষ্কার component রাখো (Single Responsibility)।
JSX খুব বড় হওয়া থেকে রোধ করো — বড় UI অংশকে ছোট component-এ ভাঙ্গো।
Conditional logic সরাসরি JSX-এ না রেখে helper function বা variable-এ রাখো (Readability বৃদ্ধি পায়)।
Inline styles পরিমাণে কম ব্যবহার করো — CSS modules বা styled-components ব্যবহার করা উত্তম।

FAQ — সাধারণ প্রশ্ন

1. JSX কি আবশ্যক React এ?: না — আপনি সরাসরি React.createElement ব্যবহার করে React লিখতে পারেন, কিন্তু JSX ব্যবহারে কোড অনেক বেশি পরিষ্কার ও সহজ হয়।
2. JSX কি performance cost বাড়ায়?: Build time-এ JSX transpile হয়; runtime এ এটি সাধারণ JavaScript। সুতরাং সাধারণ ব্যবহারে performance impact নগণ্য।
3. JSX-এ কি সব JavaScript লেখা যাবে?: JSX-তে JavaScript expressions `{}`-এর ভিতর ব্যবহারযোগ্য; কিন্তু statements (যেমন if/for) সরাসরি ব্যবহার করা যায় না — সেগুলোকে expression দিয়ে বা বাহিরে রেখে মোকাবিলা করতে হয়।

উপসংহার

JSX হচ্ছে React-এ UI লিখার একটি শক্তিশালী ও সুন্দর উপায়। HTML-মত সিনট্যাক্স এবং JavaScript-এর শক্তিকে একসাথে নিয়ে JSX ডেভেলপারদের দ্রুত ও পরিষ্কারভাবে UI বানাতে সাহায্য করে। নতুনদের জন্য JSX-এ প্র্যাকটিস করা খুবই গুরুত্বপূর্ণ — কারণ অধিকাংশ React কোডবেইজেই JSX ব্যবহার হয়।

এই আর্টিকেলটি শিক্ষার্থীদের কথা মাথায় রেখে সহজ ভাষায় তৈরি করা হয়েছে—প্রশ্ন থাকলে বললে আরও উদাহরণসহ ব্যাখ্যা করবো।

JSX কী? কিভাবে কাজ করে?