// Este código tiene errores de JSX.
// Descoméntalo y corrígelo:
// - class → className
// - Cierra todas las etiquetas
// - Envuelve todo en un solo elemento raíz

export default function App() {
  return (
    // <h1 class="titulo">Mi página</h1>
    // <img src="https://placecats.com/300/200">
    // <p class="descripcion">Aprendiendo JSX</p>
    null
  );
}

JSX: HTML con superpoderes

¿Qué es JSX?

Llevas varias lecciones escribiendo algo que parece HTML dentro de funciones JavaScript. Eso no es HTML — es JSX (JavaScript XML).

JSX es una extensión de sintaxis que te permite escribir estructura de interfaz directamente en tu código JavaScript. Parece HTML, se siente como HTML, pero en realidad se transforma en llamadas a funciones de JavaScript.

Cuando escribes:

React lo convierte internamente en:

JSX es solo azúcar sintáctico. Podrías escribir toda tu app con React.createElement, pero nadie quiere vivir así.

Las reglas de JSX

JSX se parece a HTML, pero tiene sus propias reglas. Rompe una y tu app no compila. Aquí van las más importantes:

1. Un solo elemento raíz

Tu componente debe retornar un elemento que envuelva todo lo demás:

Los Fragments (<>...</>) son perfectos cuando no quieres añadir un div extra al DOM solo para cumplir la regla.

2. Cierra todas las etiquetas

En HTML puedes escribir <img> o <br> sin cerrar. En JSX toda etiqueta debe cerrarse:

3. className, no class

class es una palabra reservada en JavaScript (se usa para definir clases). Por eso en JSX usas className:

4. htmlFor, no for

Por la misma razón, for en las etiquetas <label> se convierte en htmlFor:

5. Atributos en camelCase

Los atributos de eventos y algunos otros se escriben en camelCase:

El resumen rápido

Tu desafío 🚀

En el editor tienes código JSX con errores. Está comentado para que no rompa la app. Tu misión:

1. Descomenta el código
2. Corrige class → className
3. Cierra las etiquetas que faltan (como <img />)
4. Envuelve todo en un elemento raíz (<>...</> o <div>)

Cuando todo compile y se vea en el preview, habrás dominado las reglas de JSX.

JSX parece raro al principio, pero en una semana te preguntarás cómo vivías sin él.