Lección 3 de 13 · Lectura y práctica
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.
Del concepto a la práctica
Taller de esta lección
JSX combina estructura y expresiones de JavaScript, pero exige una forma coherente. Un panel de libro puede devolver un único contenedor, cerrar cada elemento vacío y convertir valores calculados en expresiones entre llaves. La clase se escribe con className, no con el atributo HTML equivalente.
Ejemplo resuelto
function Libro({ titulo, paginas }) {
return (
<article className='libro'>
<h2>{titulo}</h2>
<p>{paginas} páginas</p>
<input aria-label='Buscar' />
</article>
);
}Con titulo='Ríos del norte' y paginas={184}, el texto visible contiene esos valores.
Pruébalo
Crea un objeto con título y número de páginas.
Pásalo a un componente.
Renderiza ambos valores dentro de un único
article.Añade un campo vacío correctamente cerrado.
Comprueba tu resultado
Debe aparecer un título, “184 páginas” y un campo de búsqueda.
Error frecuente: escribir dos elementos hermanos directamente en el retorno; corrígelo envolviéndolos en un contenedor o Fragment. Otro error es usar class; reemplázalo por className.
Uso concreto y límites de la sintaxis
El uso completo del componente resuelto es <Libro titulo="Ríos del norte" paginas={184}/>; una cadena "184" se ve parecida, pero no es el número184 que espera una operación aritmética. aria-label y data-* conservan guiones, por lo que camelCase no es una regla absoluta para todos los atributos. Un atributo htmlFor enlaza una etiqueta con un id; aria-label aporta nombre accesible cuando ese campo deliberadamente no tiene etiqueta visible.
JSX no se ejecuta como HTML crudo en el navegador: la herramienta del proyecto lo transforma. El transformador moderno puede usar el runtime JSX en vez de una llamada literal a React.createElement; ambos expresan elementos, no nodos DOM creados inmediatamente. El fragmento <> agrupa hermanos sin añadir un div. Un componente también puede devolver null y otras formas admitidas por React; para este ejercicio usa un article o Fragment como agrupación clara. Comprueba título exacto, número de páginas y nombre accesible Buscar del campo. Añadir un campo no lo convierte por sí solo en una búsqueda funcional; esa interacción se conecta con estado después.
Mapa de prácticaApp compone la lista y la lista crea una tarjeta por registro. Cada tarjeta recibe un libro con ID estable; la estructura describe la interfaz sin gestionar nodos manualmente.
Ver la infografía en tamaño completo ↗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.
Sigue con React Fundamentals
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.