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 માટે sugar છે, તેથી JSX માં તમે જે કર્યું શકો છો તે તમે સાદા JS માં કર્યું શકો છો — તે UI કોડને તે માર્કআપ જેવો વાંચવામાં મદદ કરે છે જે તે ઉત્પાદન કરે છે, જે નેસ્ટેડ ફંક્શન કૉલ કરતાં ઘણું વધુ વાંચનીય છે.