JSX: জাভাস্ক্রিপ্ট এক্সটেনশন এবং ব্যবহারের উদাহরণ

JSX কী?

JSX (জাভাস্ক্রিপ্ট XML) হল জাভাস্ক্রিপ্টের জন্য একটি সিনট্যাক্স এক্সটেনশন, যা প্রথম ২০১৩ সালে React-এ প্রবর্তিত হয়। এটি ডেভেলপারদের একটি ডিক্লেয়ারেটিভ শৈলীতে ইউজার ইন্টারফেসের গঠন বর্ণনা করতে দেয়, একটি ফাইলে মার্কআপ এবং লজিক একত্রিত করে।

JSX-এর আগে, ডেভেলপাররা স্ট্রিং টেমপ্লেট (Mustache, Handlebars) ব্যবহার করত বা document.createElement-এর মাধ্যমে ম্যানুয়ালি DOM এলিমেন্ট তৈরি করত। উভয় পদ্ধতিরই ত্রুটি ছিল: স্ট্রিং টেমপ্লেট টাইপ-চেক করা হত না, এবং ম্যানুয়াল DOM তৈরি জটিল এবং ত্রুটি-প্রবণ ছিল।

React একটি ভিন্ন পথ বেছে নিয়েছে — কোডে সরাসরি মার্কআপ এম্বেড করা। এই সিদ্ধান্ত সম্প্রদায়ে বিতর্কের সৃষ্টি করেছিল, কিন্তু সময়ের সাথে সাথে এটি মানক হয়ে উঠেছে। আজ JSX শুধু React-এ নয়, SolidJS, Preact, Qwik এবং এমনকি Vue-তেও প্লাগইনের মাধ্যমে ব্যবহৃত হয়।

JSX-এর মৌলিক সিনট্যাক্স

JSX এলিমেন্ট দেখতে HTML ট্যাগের মতো কিন্তু সরাসরি জাভাস্ক্রিপ্টে এম্বেড হয়। প্রতিটি এলিমেন্ট তিনটি আর্গুমেন্ট সহ React.createElement কল-এ ট্রান্সপাইল হয়: এলিমেন্ট টাইপ, প্রপস অবজেক্ট এবং চিল্ড্রেন। একটি রুট এলিমেন্ট বাধ্যতামূলক নিয়ম: JSX এক্সপ্রেশনকে একটি প্যারেন্ট এলিমেন্ট বা ফ্রাগমেন্ট ফিরিয়ে দিতে হবে।

import React from 'react';

// JSX মৌলিক: একটি রুট এলিমেন্ট
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

গ্রুপিংয়ের জন্য ফ্রাগমেন্ট

যখন অতিরিক্ত DOM নোডের প্রয়োজন নেই, React.Fragment বা শর্টহ্যান্ড সিনট্যাক্স <></> ব্যবহার করুন। ফ্রাগমেন্ট বাস্তব DOM এলিমেন্ট তৈরি করে না, তারা কেবল চাইল্ড নোড গ্রুপ করে। এটি বিশেষ করে টেবিল এবং তালিকায় উপযোগী যেখানে একটি অতিরিক্ত র্যাপার HTML গঠন ভেঙে দেবে।

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

JSX-এ এক্সপ্রেশন এবং ভেরিয়েবল

যেকোনো জাভাস্ক্রিপ্ট এক্সপ্রেশন কার্লি ব্রেস { }-এর মাধ্যমে JSX-এ এম্বেড হয়। ভিতরে, আপনি ভেরিয়েবল, ফাংশন কল, টার্নারি অপারেটর এবং অ্যারে মেথড ব্যবহার করতে পারেন। কন্ডিশনাল রেন্ডারিং টার্নারি অপারেটর বা লজিক্যাল AND-এর মাধ্যমে করা হয়।

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

একটি মূল সীমাবদ্ধতা — কার্লি ব্রেসের ভিতরে শুধুমাত্র এক্সপ্রেশন ব্যবহার করা যাবে, স্টেটমেন্ট নয়। আপনি if/else, for, switch ব্যবহার করতে পারবেন না — শুধুমাত্র টার্নারি অপারেটর, লজিক্যাল অপারেটর এবং অ্যারে মেথড। ফাংশন কল অনুমোদিত, এরো ফাংশন সহ।

JSX এবং HTML-এর মধ্যে পার্থক্য

JSX দেখতে HTML-এর মতো কিন্তু মৌলিক পার্থক্য রয়েছে। অ্যাট্রিবিউট camelCase-এ লেখা হয় — class-এর বদলে className, onclick-এর বদলে onClick, tabindex-এর বদলে tabIndex। কারণ JSX জাভাস্ক্রিপ্টে ট্রান্সপাইল হয়, যেখানে প্রপার্টি নামে হাইফেন অনুমোদিত নয়।

আরেকটি গুরুত্বপূর্ণ পার্থক্য — সেলফ-ক্লোজিং ট্যাগ। HTML-এ, কিছু ট্যাগ (br, hr, input) বন্ধ না করে রাখা যেতে পারে। JSX-এ, সব সেলফ-ক্লোজিং ট্যাগে ক্লোজিং স্ল্যাশ থাকা আবশ্যক: <br />, <input />। SVG অ্যাট্রিবিউট নামও camelCase-এ রূপান্তরিত হয়: strokeWidth, fillOpacity।

JSX কীভাবে জাভাস্ক্রিপ্টে ট্রান্সপাইল হয়

ব্রাউজার সরাসরি JSX বোঝে না। এক্সিকিউশনের আগে, JSX কোড ট্রান্সপাইলার — Babel, TypeScript বা esbuild-এর মাধ্যমে যায়। প্রতিটি JSX এলিমেন্ট createElement বা jsx/runtime কল-এ রূপান্তরিত হয়।

Babel-এর মাধ্যমে রূপান্তর

// মূল JSX
const element = <h1 className="title">Hello</h1>;

// ট্রান্সপাইলেশনের পর
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

React 17-এর সাথে, একটি নতুন JSX রূপান্তর এসেছে যাতে React আমদানি করার প্রয়োজন নেই। jsx-runtime-এর স্বয়ংক্রিয় আমদানি import React from ‘react’ ছাড়াই কম্পোনেন্ট লিখতে দেয়। Babel এবং TypeScript {"runtime": "automatic"} কনফিগারেশনের মাধ্যমে এই রূপান্তর সমর্থন করে।

React-এর বাইরে JSX: Solid, Preact, Vue

যদিও JSX React-এর সাথে যুক্ত, অন্যান্য ফ্রেমওয়ার্কও এটি ব্যবহার করে। SolidJS ভার্চুয়াল DOM ছাড়া বাস্তব DOM নোডে কম্পাইলেশন সহ JSX ব্যবহার করে। Preact পূর্ণ JSX সমর্থন সহ React-এর একটি হালকা বিকল্প। Vue @vue/babel-plugin-jsx-এর মাধ্যমে JSX সমর্থন করে, যদিও এর মূল টেমপ্লেট হল template।

একটি মূল পার্থক্য হল এক্সপ্রেশন সিম্যান্টিক্স। React-এ, JSX এক্সপ্রেশন প্রতিটি রেন্ডারে নির্বাহিত হয়। SolidJS-এ, JSX একবার কম্পাইল হয় এবং আপডেট সিগন্যালের মাধ্যমে ট্র্যাক করা হয়। এটি কর্মক্ষমতাকে প্রভাবিত করে: SolidJS-এর ভার্চুয়াল DOM এবং রিকনসিলিয়েশনের প্রয়োজন নেই, যা JSX রেন্ডারিংকে দ্রুততর করে।

TypeScript-এ, JSX ভাষা স্তরে সমর্থিত। .tsx এক্সটেনশনের ফাইলগুলি স্বয়ংক্রিয়ভাবে JSX সিনট্যাক্স হ্যান্ডেল করে। প্রপস টাইপিং TypeScript + JSX-এর প্রধান সুবিধাগুলির মধ্যে একটি: IDE প্রত্যাশিত অ্যাট্রিবিউট, কলব্যাক প্রকার এবং প্রপসের বাধ্যতামূলকতা সুপারিশ করে।

JSX-এর সাথে সেরা অনুশীলন

JSX কোড লিখুন যা পড়া এবং রক্ষণাবেক্ষণ করা সহজ। জটিল এক্সপ্রেশন আলাদা ভেরিয়েবল বা ফাংশনে নিষ্কাশন করুন — এটি পঠনযোগ্যতা উন্নত করে এবং মার্কআপ থেকে আলাদাভাবে লজিক পরীক্ষা করতে দেয়। অপ্রয়োজনীয় div র্যাপারের বদলে ফ্রাগমেন্ট ব্যবহার করুন।

ইন্ডেন্টেশন নিয়ম — নেস্টেড এলিমেন্টের জন্য ইন্ডেন্টেশন বজায় রাখুন। প্রতিটি নেস্টিং স্তর একটি ইন্ডেন্টেশন স্তর। ক্লোজিং ট্যাগ ওপেনিং ট্যাগের same স্তরে হওয়া উচিত। লম্বা অ্যাট্রিবিউটের জন্য, লাইন ব্রেক ব্যবহার করুন।

প্রপস-এ ইনলাইন এরো ফাংশন এড়িয়ে চলুন যদি তারা প্রতিটি রেন্ডারে তৈরি হয়। সেক্ষেত্রে, কলব্যাক useCallback-এ মোড়ান বা ফাংশনটি কম্পোনেন্টের বাইরে সরান। জটিল কম্পোনেন্ট ছোটে ভাগ করুন — প্রতিটি কম্পোনেন্ট ইন্টারফেসের একটি লজিক্যাল ইউনিট হ্যান্ডেল করবে।