JSX è un'estensione di sintassi che ti consente di scrivere markup simile all'HTML all'interno di JavaScript. Il browser non comprende JSX — un compilatore (Babel, SWC, esbuild) lo trasforma in chiamate di funzione ordinarie prima che il codice venga eseguito.
el = ;
el = .(
,
{ : },
, name
);
Il risultato è un oggetto JavaScript semplice (un "React element") che descrive l'interfaccia utente — non è ancora un nodo DOM reale. React legge quell'oggetto per costruire il 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) perché si mappano a JS, non a HTML.{ } incorpora espressioni (valori, ternary, .map()), ma non istruzioni come if.JSX è solo zucchero sintattico per createElement, quindi tutto ciò che puoi fare in JSX puoi farlo in JS semplice — rende semplicemente il codice dell'interfaccia utente leggibile come il markup che produce, il che è molto più leggibile delle chiamate di funzione annidate.