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 लाई नक्शा गर्छन्, HTML लाई होइन।{ } अभिव्यक्ति सम्मिलित गर्छ (मानहरू, ternaries, .map()), तर गर्दैन कथन जस्तो if।JSX केवल createElement को लागि चिनी हो, त्यसैले तपाईंले JSX मा गर्न सक्नु हुने कुनै पनि कुरा तपाईंले सादा JS मा गर्न सक्नु हुन्छ — यसले UI कोडलाई markup जस्तो पढिन्छ जो यो उत्पादन गर्छ, जो nested function calls भन्दा धेरै पढ्न सजिलो छ।