JSX একটি সিনট্যাক্স এক্সটেনশন যা আপনাকে সরাসরি JavaScript-এর ভেতরে HTML-এর মতো মার্কআপ লিখতে দেয়। এটি HTML-এর মতো দেখতে, কিন্তু এটি তা নয় — ব্রাউজারে পৌঁছানোর আগেই এটি সাধারণ JavaScript ফাংশন কলে রূপান্তরিত হয়ে যায়।
const element = <h1>Hello, world!</h1>;এটি কোনো স্ট্রিং নয়, আর এটি HTML-ও নয় — এটি JavaScript, আপনার আগের পাঠের বিল্ড টুলিং দিয়ে React.createElement('h1', null, 'Hello, world!')-এর মতো কিছুতে কম্পাইল করা। আপনি কখনো নিজে সেই লম্বা রূপটি লিখবেন না; JSX শুধু একই জিনিস লেখার একটি বেশি পঠনযোগ্য উপায়।
কার্লি ব্রেস { } সরাসরি JSX-এ যেকোনো JavaScript এক্সপ্রেশন বসিয়ে দেয়:
const name = "Priya";
const element = <h1>Hello, {name}!</h1>;
const total = <p>Total: {2 + 2}</p>;এক্সপ্রেশন, স্টেটমেন্ট নয়
{ }-এর ভেতরে শুধু এক্সপ্রেশন কাজ করে — এমন কিছু যা একটি মান তৈরি করে। if বা একটি for লুপের মতো স্টেটমেন্ট সরাসরি ফিট হয় না; এই অংশের পরের Conditional Rendering পাঠে JSX আসলে যে এক্সপ্রেশন-ভিত্তিক প্যাটার্ন ব্যবহার করে তা দেখানো হবে।
HTML থেকে আসার সময় কয়েকটি আসল পার্থক্য প্রায় সবাইকে হোঁচট খাওয়ায়:
| HTML | JSX | কেন |
|---|---|---|
| class="box" | className="box" | `class` JavaScript-এ একটি সংরক্ষিত শব্দ |
| `for`-ও সংরক্ষিত | ||
| প্রতিটি ট্যাগ বন্ধ করতে হয়, এমনকি যেগুলো HTML খোলা থাকতে দেয় | ||
| onclick="..." | onClick={...} | ইভেন্টের নাম camelCase, আর একটি স্ট্রিং নয়, একটি প্রকৃত ফাংশন নেয় |
একটি কম্পোনেন্ট শুধু একটি top-level এলিমেন্ট রিটার্ন করতে পারে — প্রথমবার এটি প্রায় সবাইকে হোঁচট খাওয়ায়:
// This is an error — two sibling elements with no single parent:
// return (
// <h1>Title</h1>
// <p>Text</p>
// );
// Wrap them in one element instead:
return (
<div>
<h1>Title</h1>
<p>Text</p>
</div>
);এই অংশের পরের Fragments and Portals পাঠে আসল পাতায় একটি অতিরিক্ত, অর্থহীন <div> যোগ না করে এই নিয়ম মানার একটি উপায় দেখানো হবে।