JSX es una extensión de sintaxis que te permite escribir marcado parecido a HTML dentro de JavaScript. El navegador no entiende JSX: un compilador (Babel, SWC, esbuild) lo transforma en llamadas a funciones normales antes de que el código se ejecute.
el = ;
el = .(
,
{ : },
, name
);
El resultado es un objeto JavaScript plano (un "elemento de React") que describe la UI; todavía no es un nodo del DOM real. React lee ese objeto para construir el 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 se mapean a JS, no a HTML.{ } incrusta expresiones (valores, ternarios, .map()), pero no sentencias como if.JSX es solo azúcar sintáctico para createElement, así que todo lo que puedes hacer en JSX puedes hacerlo en JS plano: simplemente hace que el código de la UI se lea como el marcado que produce, lo cual es mucho más legible que llamadas a funciones anidadas.