JSX é uma extensão de sintaxe que permite escrever marcação similar a HTML dentro de JavaScript. O navegador não entende JSX — um compilador (Babel, SWC, esbuild) o transforma em chamadas de função regulares antes da execução do código.
el = ;
el = .(
,
{ : },
, name
);
O resultado é um objeto JavaScript simples (um "elemento React") que descreve a interface — ainda não é um nó do DOM real. React lê esse objeto para construir o 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) porque mapeiam para JS, não para HTML.{ } embutem expressões (valores, operadores ternários, .map()), mas não declarações como if.JSX é apenas syntactic sugar para createElement, então tudo que você pode fazer em JSX você pode fazer em JavaScript puro — simplesmente torna o código da interface legível como a marcação que produz, o que é muito mais legível do que chamadas de função aninhadas.