JSX ایک syntax extension ہے جو آپ کو JavaScript کے اندر HTML جیسا markup لکھنے کی سہولت دیتا ہے۔ براؤزر JSX کو نہیں سمجھتا — کوڈ چلنے سے پہلے ایک compiler (Babel, SWC, esbuild) اسے عام function calls میں تبدیل کر دیتا ہے۔
el = ;
el = .(
,
{ : },
, name
);
نتیجہ ایک سادہ JavaScript object ہوتا ہے (ایک "React element") جو UI کو بیان کرتا ہے — یہ ابھی تک حقیقی DOM node نہیں ہوتا۔ React اس object کو پڑھ کر 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 سے map ہوتے ہیں، HTML سے نہیں۔{ } expressions کو embed کرتا ہے (values, ternaries, .map())، لیکن if جیسے statements کو نہیں۔JSX دراصل createElement کے لیے ایک sugar ہے، اس لیے جو کچھ آپ JSX میں کر سکتے ہیں وہ سادہ JS میں بھی کر سکتے ہیں — یہ صرف UI کوڈ کو اس markup کی طرح پڑھنے کے قابل بنا دیتا ہے جو یہ پیدا کرتا ہے، جو nested function calls کے مقابلے میں کہیں زیادہ readable ہے۔