JSX: HTML en JavaScript
Entendiendo JSX
JSX es una extensión de la sintaxis de JavaScript que te permite escribir un marcado parecido a HTML directamente dentro de tu código. No es obligatorio para usar React, pero es la forma estándar de escribirlo porque resulta mucho más legible.
Aunque parezca HTML, en realidad es JavaScript: cada etiqueta se transforma en una llamada a una función que crea un elemento de React.
// Esto que parece HTML...
const elemento = <h1>Hola Mundo</h1>;
// ...se transforma internamente en esto:
const elemento = React.createElement('h1', null, 'Hola Mundo');Las reglas que debes conocer
1. Un solo elemento raíz
Un componente debe devolver un único elemento padre. Si necesitas varios al mismo nivel, envuélvelos en un div o, mejor, en un Fragment (<>...</>) para no añadir nodos extra al DOM.
// Error: dos elementos raíz
return (
<h1>Título</h1>
<p>Párrafo</p>
)
// Correcto: Fragment, sin div extra
return (
<>
<h1>Título</h1>
<p>Párrafo</p>
</>
)2. Cierra todas las etiquetas
// HTML lo permite, JSX no:
<img src="foto.jpg">
// JSX exige cerrar las etiquetas:
<img src="foto.jpg" />
<input type="text" />3. Atributos en camelCase
Como JSX es JavaScript, algunos atributos cambian de nombre: class pasa a className y los eventos como onclick se escriben onClick.
// HTML
<div class="caja" onclick="hacer()">
// JSX
<div className="caja" onClick={hacer}>Insertar JavaScript con llaves
Dentro de JSX puedes incrustar cualquier expresión de JavaScript usando llaves { }:
const nombre = "María";
const edad = 25;
return (
<div>
<h1>¡Hola, {nombre}!</h1>
<p>Tienes {edad} años</p>
<p>En 5 años tendrás {edad + 5}</p>
<p>Fecha: {new Date().toLocaleDateString()}</p>
</div>
);Atención
Dentro de las llaves van expresiones (algo que produce un valor), no instrucciones completas. Por eso {edad + 5} funciona, pero un if o un bucle for no se pueden poner directamente ahí.
Estilos en JSX
// Estilos en línea: un objeto de JavaScript
<div style={{ color: 'blue', fontSize: '20px' }}>
Texto azul
</div>
// Con clases CSS
<div className="mi-clase">Usando CSS</div>¿Cómo se escribe el atributo de clase CSS en JSX?
class es una palabra reservada en JavaScript, por eso en JSX se usa className.Ejercicio práctico
Objetivo: practicar las reglas de JSX y la interpolación de expresiones.
- Crea un componente
Tarjetaque defina variablestitulo,autoryanio. - Devuélvelas dentro de un Fragment usando llaves para mostrar los valores.
- Añade un párrafo que calcule y muestre la antigüedad:
{new Date().getFullYear() - anio}años.
Entregable: el archivo Tarjeta.jsx, que no debe tener ningún error de las 3 reglas (raíz única, etiquetas cerradas, camelCase).
Para recordar
- JSX es JavaScript disfrazado de HTML: cada etiqueta crea un elemento de React.
- Reglas básicas: un solo elemento raíz, cerrar todas las etiquetas y usar camelCase (
className,onClick). - Con
{ }insertas expresiones de JavaScript dentro del marcado.
