JSX एक सिंटैक्स एक्सटेंशन है जो आपको JavaScript के अंदर HTML जैसा मार्कअप लिखने देता है। ब्राउज़र JSX को नहीं समझता — एक कंपाइलर (Babel, SWC, esbuild) इसे नियमित फ़ंक्शन कॉल में बदलता है कोड चलने से पहले।
el = ;
el = .(
,
{ : },
, name
);
नतीजा एक सादा JavaScript ऑब्जेक्ट है (एक "React element") जो UI को वर्णित करता है — यह अभी तक एक वास्तविक 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 के लिए चीनी है, तो JSX में जो कुछ भी आप कर सकते हैं वह आप सादे JS में कर सकते हैं — यह बस UI कोड को उस मार्कअप की तरह पढ़ता है जो यह उत्पन्न करता है, जो नेस्टेड फ़ंक्शन कॉल की तुलना में बहुत अधिक पठनीय है।