JSX est une extension de syntaxe qui vous permet d'écrire du balisage semblable à HTML dans du JavaScript. Le navigateur ne comprend pas JSX — un compilateur (Babel, SWC, esbuild) le transforme en appels de fonction ordinaires avant l'exécution du code.
el = ;
el = .(
,
{ : },
, name
);
Le résultat est un objet JavaScript ordinaire (un "élément React") qui décrit l'interface utilisateur — ce n'est pas encore un nœud DOM réel. React lit cet objet pour construire le 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) car ils correspondent à JS, pas à HTML.{ } intègre des expressions (valeurs, ternaires, .map()), mais pas des instructions comme if.JSX est simplement du sucre syntaxique pour createElement, donc tout ce que vous pouvez faire en JSX, vous pouvez le faire en JS ordinaire — cela rend simplement le code d'interface utilisateur aussi lisible que le balisage qu'il produit, ce qui est beaucoup plus lisible que les appels de fonction imbriqués.