JSX అనేది సింటాక్స్ పొడిగింపు, ఇది జావాస్క్రిప్ట్ లోపల HTML లాంటి మార్కప్ను వ్రాయడానికి మిమ్మల్ని అనుమతిస్తుంది. బ్రౌజర్ JSXను అర్థం చేసుకోదు — కంపైలర్ (Babel, SWC, esbuild) కోడ్ రన్ కాబోయే ముందు దానిని సాధారణ ఫంక్షన్ కాల్లుగా రూపాంతరం చేస్తుంది.
el = ;
el = .(
,
{ : },
, name
);
ఫలితం సాధారణ జావాస్క్రిప్ట్ ఆబ్జెక్ట్ ("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 కు కాదు.{ } అభివ్యక్తులను (విలువలు, టర్నరీలు, .map()) ఎంబెడ్ చేస్తుంది, కానీ if వంటి స్టేట్మెంట్లు కాదు.JSX కేవలం createElement కు చక్కెర మాత్రమే, కాబట్టి JSX లో మీరు చేయగలిగిన ఏదీ సాధారణ JS లో చేయగలరు — ఇది UI కోడ్ను అది ఉత్పత్తి చేసే మార్కప్ లాగా చదువుతోంది, ఇది నెస్టెడ్ ఫంక్షన్ కాల్ల కంటే చాలా చదవదగినది.