JSX என்பது JavaScript-க்குள் HTML போன்ற மார்க்அப்பை எழுத அனுமதிக்கும் ஒரு syntax நீட்டிப்பாகும். browser JSX-ஐ புரிந்துகொள்ளாது — code இயங்குவதற்கு முன்பே ஒரு compiler (Babel, SWC, esbuild) அதை வழக்கமான function calls ஆக மாற்றுகிறது.
el = ;
el = .(
,
{ : },
, name
);
இதன் முடிவு UI-ஐ விவரிக்கும் ஒரு எளிய JavaScript object ஆகும் (ஒரு "React element") — இது இன்னும் ஒரு உண்மையான DOM node அல்ல. அந்த object-ஐப் படித்து 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) பயன்படுத்துகின்றன, ஏனெனில் அவை HTML அல்ல, JS-க்கு map ஆகின்றன.{ } expressions-ஐ (values, ternaries, .map()) embed செய்கிறது, ஆனால் if போன்ற statements-ஐ அல்ல.JSX என்பது createElement-க்கான வெறும் sugar மட்டுமே, எனவே JSX-இல் நீங்கள் செய்யக்கூடிய எதையும் எளிய JS-இல் செய்ய முடியும் — அது UI code-ஐ அது உருவாக்கும் மார்க்அப் போலவே படிக்கச் செய்கிறது, இது nested function calls-ஐ விட மிகவும் readable ஆக இருக்கிறது.