JSX

Crear incluso una pequeña pieza de UI con JavaScript puro implica pasos separados: crear un elemento, establecer su clase, establecer su texto, luego adjuntarlo a la página. El marcado y el código que lo controla viven en lugares distintos, y mantenerlos sincronizados se vuelve más difícil conforme la UI crece. JSX cierra esa brecha: el marcado vive directamente dentro de tu JavaScript, lo suficientemente cerca para que puedas mezclarlos libremente en lugar de mantener plantillas y scripts separados.

Marcado dentro de JavaScript

Como JSX es JavaScript, puedes meter cualquier expresión de JavaScript en él envolviéndola entre llaves, {}. Una variable, una llamada a función, un poco de aritmética, lo que sea que necesites, va directamente en el marcado donde de otro modo escribirías texto estático.

const name = 'María'
return <p className="greeting">Hola, {name}</p>

Aquí {name} se reemplaza con el valor de la variable name cuando esto se renderiza, así que la página muestra "Hola, María". Fuera de las llaves, todo es marcado; dentro de ellas, estás de vuelta en JavaScript puro.

JSX viene con algunas reglas. La mayoría de los atributos usan camelCase en lugar de los nombres en minúsculas con guiones que usa HTML, así que es className, htmlFor y tabIndex en lugar de class, for y tabindex, mientras que los atributos ARIA y data- conservan sus guiones, como en aria-hidden y data-testid. Cada etiqueta tiene que estar cerrada, incluyendo las que estarían abiertas en HTML, así que <img /> y <br /> necesitan esa barra de cierre. Y un componente solo puede retornar un elemento raíz. Si necesitas retornar dos elementos uno al lado del otro sin envolverlos en un <div> extra, envuélvelos en un fragmento, escrito como corchetes angulares vacíos:

return (
  <>
    <h1>Título</h1>
    <p>Un poco de texto</p>
  </>
)

Cómo JSX difiere de HTML

JSX se parece lo suficiente a HTML para que las diferencias sean lo bastante sutiles como para pasarlas por alto hasta que te causen problemas. Los nombres de los atributos son el primero: class se convierte en className, porque class es una palabra reservada en JavaScript. El atributo style es otro: en HTML es una cadena de CSS, pero en JSX toma un objeto JavaScript, con nombres de propiedades en camelCase y valores como cadenas.

<div style={{ backgroundColor: 'lightblue', fontSize: '18px' }}>Estilizado</div>

Las llaves exteriores {} son las mismas que incrustan cualquier expresión, y las llaves interiores {} son el objeto literal que se está incrustando, por lo que un atributo style en JSX termina con dos llaves seguidas.

La otra diferencia es lo que se permite dentro de {}. Solo acepta expresiones, cosas que producen un valor, como una variable, una llamada a función, o una expresión ternaria. No acepta sentencias, así que un if o un bucle for no pueden ir directamente dentro de llaves en tu marcado. Cuando necesitas ese tipo de lógica, la ejecutas antes del return e incrustas el resultado en su lugar.

Internamente, JSX se compila a llamadas de función JavaScript puro antes de llegar al navegador. Es más un detalle de herramientas que algo en lo que pienses día a día, y el capítulo Beyond the basics vuelve a ello una vez que el resto de React esté en su lugar.

JSX es azúcar sintáctico. El compilador convierte cada elemento en una llamada a React.createElement o, con el runtime automático de JSX que usa la herramienta de este curso (estándar desde React 17, y el predeterminado que obtendrás con cualquier configuración moderna), una llamada equivalente generada por la herramienta de construcción sin que necesites React en el alcance. Ese ejemplo anterior se compila a algo parecido a React.createElement('p', { className: 'greeting' }, 'Hola, ', name).

Ese paso de compilación es exactamente por qué {} solo contiene expresiones. Cada {} se convierte en un argumento pasado a esa llamada de función, y un argumento de función tiene que evaluarse a un valor. Una sentencia como if o for no produce un valor, así que no puede estar donde se espera un argumento. Una ternaria funciona en línea porque es una expresión; un if no, porque es una sentencia. Cuando la lógica es más de lo que una ternaria puede sostener limpiamente, calcula el valor en una variable antes del return e incruста esa variable en su lugar.

JunoJSX es marcado con JavaScript mezclado Lo principal a recordar: {} es tu puerta de entrada de vuelta a JavaScript desde dentro del marcado. Cualquier cosa entre esas llaves es un valor, una variable, un cálculo, una llamada a función, y se coloca directamente en la página.

Todo lo demás viene de ahí: className en lugar de class, cerrar cada etiqueta, y un elemento raíz por retorno.

JunoJSX es marcado con JavaScript mezclado Trata {} como tu espacio de expresión: variables, llamadas a función, ternarias, todo bien, sentencias como if no.

Acompaña eso con las diferencias de nombres, className, htmlFor, style como un objeto, y JSX deja de sentirse como una variante de HTML y empieza a sentirse como lo que es, JavaScript usando sintaxis de marcado.

JunoJSX es marcado con JavaScript mezclado Cada {} se compila a un argumento de función, que es la razón completa por la que las expresiones funcionan ahí y las sentencias no.

Mantén ese modelo mental y las otras peculiaridades de JSX, atributos en camelCase, el objeto style, etiquetas de cierre automático, dejan de parecer reglas arbitrarias y comienzan a parecer consecuencias de "esto son llamadas a React.createElement disfrazadas."

A continuación: Estilizar componentes, donde esos elementos toman su apariencia.