JSX একটি সিন্ট্যাক্স এক্সটেনশন যা আপনাকে JavaScript-এর ভিতরে HTML-সদৃশ মার্কআপ লিখতে দেয়। ব্রাউজার JSX বুঝতে পারে না — একটি কম্পাইলার (Babel, SWC, esbuild) এটিকে নিয়মিত ফাংশন কলে রূপান্তরিত করে কোডটি চালানোর আগে।
el = ;
el = .(
,
{ : },
, name
);
ফলাফল একটি সাধারণ JavaScript অবজেক্ট (একটি "React element") যা ইউজার ইন্টারফেস বর্ণনা করে — এটি এখনও একটি বাস্তব DOM নোড নয়। React সেই অবজেক্ট পড়ে Virtual DOM তৈরি করে।
function Card({ user }) {
return (
<> {/* Fragment: one root without an extra <div> */}
<h2 className="name">{user.name}</h2> {/* camelCase: className, not class */}
{user.isAdmin && <Badge />} {/* {} embeds any JS expression */}
</>
);
}
className, onClick) কারণ তারা JS-এ ম্যাপ করে, HTML-তে নয়।{ } এক্সপ্রেশন এমবেড করে (মান, ternaries, .map()), কিন্তু if-এর মতো স্টেটমেন্ট নয়।JSX শুধুমাত্র createElement-এর জন্য syntax sugar, তাই JSX-এ যা করতে পারেন তা সাধারণ JS-এ করতে পারেন — এটি সরলভাবে UI কোড পড়ায় যেমন এটি যে মার্কআপ উৎপাদন করে, যা নেস্টেড ফাংশন কলের চেয়ে অনেক বেশি পাঠযোগ্য।