JSX কি এবং কেন?

 

What is JSX?

JSX এর পুর্ণরুপ হলো JavaScript XML যা জাভাস্ক্রিপ্টের একটি সিনট্যাক্স এক্সটেনশন। এটি সাধারণত React এর সাথে ব্যাবহৃত হয়। JSX এর মাধ্যমে জাভাস্ক্রিপ্ট কোডের মধ্যে সরাসরি HTML এলিমেন্ট এবং কম্পোনেন্ট লেখা যায়।

JSX এর কিছু মৌলিক বিষয় –

Syntax Similarity (সিনট্যাক্স সাদৃশ্যতা): JSX একটি ভাষা হিসেবে HTML বা XML এর মতো দেখা যায়, এটি কোড কে আরও Readable এবং expressive করে। যে কোনো এলিমেন্ট তৈরি করার জন্য function বা method ব্যবহার করার পরিবর্তে JSX জাভাস্ক্রিপ্ট কোডে সরাসরি HTML এর মতো ট্যাগ লেখার অনুমতি দেয়।

Syntax Similarity এর উদাহরণ –

const element = <h1>Hello, JSX!</h1>;

JavaScript Expression (জাভাস্ক্রিপ্ট এক্সপ্রেশন): JSX এ Curly Braces (কার্লি ব্রেসেস) “{}” এর মধ্যে জাভাস্ক্রিপ্ট এক্সপ্রেশন এম্বেড করা যায়। পাশাপাশি JSX ডাইন্যামিক কনটেন্ট, ভেরিয়েবল এবং এক্সপ্রেশন ব্যবহারের সুযোগ দেয়।

JavaScript Expression এর উদাহরণ –

const name = "Notesaid24";
const element = <p>Welcome, {name}!</p>;

Embedding Components (কম্পোনেন্ট এম্বেড করা): React এ JSX এর মাধ্যমে কম্পোনেন্ট তৈরি করা এবং কম্পোনেন্ট এম্বেড করতে সাহায্য করে এছাড়াও জটিল ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।

Embedding Components এর উদাহরণ –

const MyComponent = () => <p>This is a Custom Component.</p>;
const App = () => (
  <div>
    <h1>Hello, JSX!</h1>
    <MyComponent />
  </div>
);

Transforms to JavaScript (জাভাস্ক্রিপ্টে রূপান্তর): JSX এ লেখা কোড ব্রাউজার সরাসরি বুঝতে পারে না, তার জন্য JSX কোড কে JavaScript কোডে রূপান্তর করতে হয়। আর এই JSX এ লেখা কোডে কে জাভাস্ক্রিপ্টে রূপান্তরের কাজটি করে Babel যা কোড ব্রাউজারে এক্সিকিউট করার পূর্বে জাভাস্ক্রিপ্টে রূপান্তর করে নেয়.

 

পরিশেষে, JSX হলো একটি সিন্ট্যাকটিক এক্সটেনশন যা ডেভেলপারদেরকে JavaScript কোডের মধ্যে পরিপূর্ণ ও স্বাধীনভাবে HTML (Hyper Text Markup Language) বা XML (Extensible Markup Language) এলিমেন্ট লেখার সুযোগ প্রদান করে এবং কোডকে আরও readable এবং maintainable করে তোলে। JSX ব্যবহার করার মাধ্যমে React দিয়ে জটিল এ্যাপ্লিকেশনের ইউজার ইন্টারফেস (UI) তৈরি করা যায়।   

import React from "react";
const MyComponent = () => {
  const name = "Notesaid24";
  return (
    <div>
      <h1>Welcome, {name}!</h1>
      <p>This is a simple JSX example.</p>
    </div>
  );
};
export default MyComponent;

উদাহরণ বিশ্লেষণ, JSX এর মাধ্যমে React এর ফাংশনাল কম্পোনেন্ট দিয়ে ‘MyComponent’ নামে একটি কম্পোনেন্ট তৈরি করা হয়েছে। ‘name’ নামে একটি ভ্যারিয়েবল ডিক্লেয়ার করা হয়েছে। তারপর ‘return’ সিনট্যাক্স এর মাধ্যমে UI এর স্ট্রাকচার গঠন করা হয়েছে। h1 ট্যাগে কার্লি ব্রেসেস দিয়ে JSX এর মধ্যে জাভাস্ক্রিপ্ট এক্সপ্রেশন এম্বেড করা হয়েছে। তারপর সাধারণ p ট্যাগ ব্যবহার করা হয়েছে। কম্পোনেন্ট রিইউজেবল করার জন্য export কিওয়ার্ড এবং default কিওয়ার্ড ব্যবহার করা হয়েছে।

 

JSX এ Expression Embed বলতে কি বুঝায়?

JSX যা একটি সিনট্যাক্স এক্সটেনশন যা সচরাচর React এর সাথে ব্যবহার করা হয়। JSX এ এক্সপ্রেশন এম্বেড এর অর্থ হলো মার্কআপে কার্লি ব্রেসেস {} এর মধ্যে JavaScript এক্সপ্রেশন যোগ করা। JSX এ এম্বেড করা এক্সপ্রেশন ডাইন্যামিক ডাটা বা ভ্যালু এক্সিকিউট করার সুযোগ প্রদান করে। JSX এ Expression embed নিয়ে একটি উদাহরণ দেখা যাক –

import React from 'react';
const MyComponent = () => {
  const name = 'Ahshan Habib';
  const age = 10;
  return (
    <div>
      <p>{`Hello, ${name}!`}</p>
      <p>{`You are ${age} years old.`}</p>
    </div>
  );
};
export default MyComponent;

✔ উদাহরণ বিশ্লেষণ, উপরের এক্সপ্রেশনের {Hello, ${name}!} এবং {You are ${age} years old} কার্লি ব্রেসেস {} ভিতরে {name} এবং {age} ভ্যালুস এম্বেড করা হয়েছে।

✔ কার্লি ব্রেসেস {} ভিতরের এক্সপ্রেশনগুলো জাভাস্ক্রিপ্ট হিসাবে মূল্যায়ন করা হয়, যার মাধ্যমে variable, calculations এবং functions এক্সিকিউট করার সুযোগ করে দেয়।

✔ JSX এক্সপ্রেশনের এই ডাইন্যামিক ন্যাচার আপনাকে React আরও interactive এবং data-driven ইউজার ইন্টারফেস (UI) এলিমেন্ট এবং কম্পোনেন্ট তৈরি করার সুযোগ প্রদান করে। তবে মনে রাখবেন যে, এক্সপ্রেশনগুলি একটি বৈধ জাভাস্ক্রিপ্ট (Valid JavaScript) হওয়া উচিত এবং JSX কোড Readable রাখার জন্য জটিল লজিকগুলো আলাদা ফাংশন বা ভ্যারিয়েবলে রাখা ভালো।

   

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

যদিও JSX এবং HTML দেখতে একই রকম, কিন্তু এগুলোর মধ্যে কিছু প্রধান পার্থক্য রয়েছে নিম্নে তা উল্লেখ করা হলো –

JSX	HTML
JSX জাভাস্ক্রিপ্টে কোড লেখার জন্য ডিজাইন করা হয়েছে এবং মার্কআপে সরাসরি জাভাস্ক্রিপ্ট এক্সপ্রেশন এম্বেড করা যায়। JSX এর মাধ্যমে বিভিন্ন ডাটা এবং লজিক নিয়ে কাজ করা যায়।	HTML নিজেই মার্কআপ ভাষা এবং এটি কে ডাইন্যামিক ভাবে ব্যবহার করার জন্য আলাদাভাবে JavaScript কোড ব্যবহার করতে হয়।
JSX এ Attribute নেইমগুলি ক্যামেলকেস কনভেনশন অনুসরণ করে। যেমনঃ HTML এ ‘class’ এবং ‘for’ কিন্তু JSX এ তা ‘className’ এবং ‘htmlFor’ হয় ইত্যাদি।	HTML এ Attribute গুলো ছোট অক্ষর এবং হাইফেন ব্যবহার করতে হয়। যেমনঃ ‘class এবং for’
JSX এ class অ্যাট্রিবিউটের পরিবর্তে ‘className’ ব্যবহার করে CSS ক্লাসগুলি সংজ্ঞায়িত করতে হয়। তাছাড়াও ‘class’ জাভাস্ক্রিপটের একটি Reserved Keyword.	HTML এ ‘class’ অ্যাট্রিবিউট CSS ক্লাসগুলি সংজ্ঞায়িত করতে ব্যবহার করা হয়।
JSX এ Inline Style গুলো JavaScript এর অবজেক্ট এর মাধ্যমে ব্যাবহার করতে হয় এবং এর মাধ্যমে State বা Props এর ভিত্তিতে ডাইনামিক স্টাইলিং করার সুযোগ প্রদান করে।	HTML এ Inline Style গুলো স্ট্রিং (“”) এর মাধ্যমে ব্যবহার করতে হয় এবং ডাইন্যামিক স্টাইলিং ব্যবহার করার জন্য অতিরিক্ত জাভাস্ক্রিপ্ট কোড ব্যবহার করতে হয়।
JSX এ Comment লেখার জন্য কার্লি ব্রেসেস ব্যবহার করতে হয়। যেমন – {/*JSX Comment*/}	HTML এ Comment লেখার জন্য “ <!-- --> ” এই সিন্ট্যাক্স ব্যবহার করতে হয়। যেমন - <!-- HTML Comment -->

 

JSX এর উদাহরণ –

const MyComponent = () => {
  const dynamicClass = "highlight";
  const dynamicStyle = { color: "red" };
  return (
    <div className={dynamicClass} style={dynamicStyle}>
      <p>This is a JSX Example.</p>
    </div>
  );
};

HTML এর উদাহরণ –

<div class="highlight" style="color: red;">
  <p>This is an HTML Example</p>
</div>

কীভাবে JSX ব্যবহার করে React element তৈরি করা যায়?

JSX ব্যবহার করে একটি React Element তৈরি করার জন্য নিম্নের উদাহরণটি বিশ্লেষণ করা যাক –

const element = <div>Hello, React Element!</div>;

এই উদাহরণে, <div> হলো একটি JSX ট্যাগ, যা HTML এর ‘div’ এলিমেন্ট represent করে। “Hello, React Element” হলো ‘dev’ এর ইনার কনটেন্ট। এই সম্পূর্ণ এক্সপ্রেশনটি “element” ভ্যারিয়েবলের মধ্যে assign করা হয়েছে।

উপরোক্ত কোডটি ব্রাউজারে রান করার পূর্বে Babel প্যাকেজের মাধ্যমে জাভাস্ক্রিপ্ট কোডে রূপান্তরিত হয়। উপরের এক্সপ্রেশপনটি ব্যাবেলের মাধ্যমে নিম্নের কোডে রুপান্তরিত হয় –

const element = React.createElement('div', null, 'Hello, React Element!');

মনে রাখবেন যে, এই JSX টি ব্যবহার করার জন্য আপনার ফাইলে React কে import করতে হবে।

React Element এবং React Component এর মধ্যে পার্থক্য –

React Element:

• একটি React Element হলো React এ্যাপ্লিকশনের সবচেয়ে ক্ষুদ্র বিল্ডিং ব্লক।
• এটি একটি প্লেইন জাভাস্ক্রিপ্ট অবজেক্ট যার মাধ্যমে স্ক্রিনে কি দেখতে চান তা বর্ণনা করা হয়।
• React Element সাধারণত JSX বা React.createElement ফাংশন ব্যবহার করে তৈরি করা হয়।
• এটি lightweight (হালকা) এবং immutable (অপরিবর্তনীয়)

React Element এর উদাহরণ –

const element = <div>Hello, React Element!</div>;

const element = React.createElement('div', null, 'Hello, React Element!');

React Component:

• একটি React Component হলো কোডের একটি Reusable (পুনঃব্যবহারযোগ্য) এবং মডুলার এর টুকরা বা অংশ যা ইউজার ইন্টারফেসের একটি অংশকে Encapsulates (সংক্ষেপ) করে।  
• React Component গুলো সাধারণত জাভাস্ক্রিপ্ট class বা functions এর মাধ্যমে লেখা হয়।
• কম্পোনেন্টগুলো props এর মাধ্যমে ডেটা গ্রহণ করতে পারে এবং নিজস্ব Internal State বজায় রাখতে পারে।
• কম্পোনেন্টগুলো এক বা একাধিক React Element রেন্ডার করতে পারে।
• কম্পোনেন্টগুলো হলো বিল্ডিং ব্লক যা আপনাকে আরও Organized এবং maintainable উপায়ে ইউজার ইন্টারফেস গঠন করতে সাহায্য করে।

React Component এর উদাহরণ –

import React from 'react';
// Functional component
const Greeting = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a simple React Component.</p>
    </div>
  );
};
export default Greeting;

JSX ব্যবহার করে কীভাবে Functional Component তৈরি করা যায় –

সহজে JSX এর মাধ্যমে Functional Component তৈরি করা যায়, যেমন –

import React from 'react';
// Functional component
const MyFunctionalComponent = () => {
  return (
    <div>
      <h1>Hello from My Functional Component!</h1>
      <p>This is a simple functional component.</p>
    </div>
  );
};
export default MyFunctionalComponent;

উপরিল্লোখিত উদাহরণে, “MyFunctionComponent” হলো একটি functional component যা জাভাস্ক্রিপ্টের Arrow function ব্যবহার করে তৈরি করা হয়েছে। যা JSX রিটার্ণ করে এবং একটি ইউজার ইন্টারফেস রিপ্রেজেন্ট করে বা বর্ণনা করে। এই কম্পোনেন্টটিতে একটি <div> রেন্ডার করে যেখানে একটি <h1> Heading এবং একটি <p> Paragraph রয়েছে। পরিশেষে, কম্পোনেন্টটি export default কিওয়ার্ড ব্যবহার করে exported করা হয়েছে যাতে করে imported করা যায় এবং প্রয়োজন আনুযায়ী এ্যাপ্লিকেশনের অন্যান্য অংশে ব্যবহার করা যায়।

 

পুর্বের তৈরিকৃত functional component টি এ্যাপ্লিকেশনের অন্য একটি কম্পোনেন্ট এ ব্যবহার করার নমুনা –

import React from 'react';
import MyFunctionalComponent from './MyFunctionalComponent'; 
// Assuming the component file is in the same directory
const App = () => {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <MyFunctionalComponent />
    </div>
  );
};
export default App;

এছাড়াও Function Components, Props গ্রহন করা, ডাইন্যামিক কাজ সম্পন্ন করা, হুক এর মাধ্যমে স্টেট ম্যানেজ করা এবং অন্যান্য জটিল কার্য হুক এর মাধ্যমে সম্পন্ন করা।

Appendix (পরিশিষ্ট)
JSX	JavaScript XML
HTML	Hyper Text Markup Language
XML	Extensible Markup Language
UI	User Interface (ইউজার ইন্টারফেস)
Babel	Babel হলো JavaScript কম্পাইলার।
{}	Curly Braces / কার্লি ব্রেসেস।
Component	React এ দুই ধরনের কম্পোনেন্ট রয়েছে – Class Component এবং Functional Component

 

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