JSX हा एक syntax extension आहे जो तुम्हाला JavaScript मध्ये HTML-सारखे markup लिहिता देते. ब्राउজर नाही JSX समजत — एक compiler (Babel, SWC, esbuild) हे code चालू होण्यापूर्वी नियमित 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()), पण नाही statements जसे की if.JSX हे createElement साठी फक्त sugar आहे, त्यामुळे तुम्ही JSX मध्ये जे काही करू शकता ते तुम्ही साधे JS मध्ये करू शकता — हे फक्त UI code ला markup सारखे दिसायला देते जो तो तयार करते, जो nested function calls पेक्षा खूप अधिक वाचनीय आहे.