JSX a fondo

⏱ 45 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Explicar qué es JSX y en qué se convierte.
Aplicar las diferencias entre JSX y HTML.
Insertar expresiones de JavaScript con llaves, en texto y en atributos.
Dar estilos con objetos y usar fragmentos.

1.JSX es JavaScript con etiquetas

JSX te permite escribir etiquetas parecidas a HTML dentro de JavaScript. No es HTML ni un texto que se pega en la página: una herramienta (Vite, Babel) lo traduce a llamadas normales de JavaScript antes de que el navegador lo ejecute.

Lo que escribes (JSX)

const saludo = <h1 className="titulo">Hola, React</h1>;

En lo que se convierte (JavaScript)

const saludo = React.createElement(
  "h1",
  { className: "titulo" },
  "Hola, React"
);

Ambas versiones producen exactamente lo mismo. JSX existe porque es mucho más cómodo de leer y escribir, y porque deja el marcado y la lógica de cada pieza en el mismo lugar.

📌 Nota · JSX es opcional, pero universal

Técnicamente podrías usar React sin JSX. En la práctica casi todo el mundo lo usa, así que es lo que aprenderás aquí.

2.Diferencias con HTML

JSX se ve como HTML, pero sigue las reglas de JavaScript. Estas son las diferencias que más te encontrarás:

Tema	En HTML	En JSX
Clases CSS	`class="caja"`	`className="caja"` (porque `class` es palabra reservada)
Etiqueta `for`	`<label for="correo">`	`<label htmlFor="correo">`
Atributos compuestos	`tabindex`, `maxlength`, `onclick`	`tabIndex`, `maxLength`, `onClick` (camelCase)
Etiquetas vacías	`<br>`, `<img>`, `<input>`	`<br />`, `<img />`, `<input />` (siempre se cierran)
Estilos en línea	`style="color: red"`	`style={{ color: "red" }}` (un objeto)
Comentarios	`<!-- nota -->`	`{/* nota */}`
Varios elementos	Pueden ser hermanos	Necesitan un solo elemento raíz o un fragmento `<>…</>`

⚛️ Corrige los errores de JSX

Código (edítalo y pulsa Ejecutar)

function App() {
  return (
    <>
      {/* Esto es un comentario en JSX */}
      <h1 className="titulo">Perfil</h1>
      <label htmlFor="nombre">Nombre</label>
      <input id="nombre" type="text" maxLength={20} />
      <br />
      <img alt="Un punto de color" width="24" height="24" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='%234f46e5'/%3E%3C/svg%3E" />
    </>
  );
}

Resultado

Consola

💡 Consejo · Si olvidas una regla

No te preocupes por memorizarlas todas: la consola te avisa. Por ejemplo, si escribes class, React muestra una advertencia que te dice exactamente que debes usar className. Prueba a cambiarlo en el editor de arriba.

3.Llaves { }: JavaScript dentro del JSX

Las llaves son la puerta entre JSX y JavaScript. Todo lo que escribas entre { } se evalúa como una expresión de JavaScript y su resultado se inserta en la pantalla.

⚛️ Expresiones dentro de las llaves

Código (edítalo y pulsa Ejecutar)

function App() {
  const nombre = "Ana";
  const precio = 24.5;
  const unidades = 3;
  const colores = ["rojo", "verde", "azul"];

  return (
    <main>
      <h1>Hola, {nombre.toUpperCase()}</h1>
      <p>Total: ${(precio * unidades).toFixed(2)}</p>
      <p>Primer color: {colores[0]}</p>
      <p>Hay {colores.length} colores</p>
      <p>¿Más de dos? {colores.length > 2 ? "Sí" : "No"}</p>
    </main>
  );
}

Resultado

Consola

Puedes poner dentro de `{ }`	No puedes poner
Variables y propiedades: `{nombre}`, `{usuario.edad}`	Sentencias: `if`, `for`, `while`
Operaciones y llamadas: `{a + b}`, `{texto.trim()}`	Declaraciones: `const x = 1`
Ternarios: `{activo ? "Sí" : "No"}`	Objetos directos para mostrar: `{usuario}` (da error)
Expresiones con `&&`, `map`, `filter`…	—

⚠️ Importante · Qué se puede «dibujar»

React muestra texto y números; ignora true, false, null y undefined (no dibuja nada). Pero un objeto como { a: 1 } provoca un error, porque no sabe cómo convertirlo en pantalla. Muestra sus propiedades: {usuario.nombre}.

📌 Nota · El caso del 0

Cuidado con {lista.length && <Lista />}: si la longitud es 0, React dibuja un 0. Es una trampa muy común; en la lección 5 verás cómo evitarla.

4.Atributos dinámicos y estilos

Las llaves también sirven en los atributos. Fíjate: con comillas pasas un texto fijo; con llaves, el resultado de una expresión.

Texto fijo frente a expresión

<img src="logo.png" alt="Logo" />            // texto fijo, con comillas
<img src={usuario.foto} alt={usuario.nombre} /> // valor calculado, con llaves

⚛️ Atributos y estilos con objetos

Código (edítalo y pulsa Ejecutar)

function App() {
  const activo = true;
  const estilo = {
    padding: "12px 16px",
    borderRadius: "10px",
    background: activo ? "#dcfce7" : "#fee2e2",
    color: activo ? "#166534" : "#991b1b",
  };

  return (
    <main>
      <p style={estilo}>Estado: {activo ? "activo" : "inactivo"}</p>
      <p style={{ fontSize: "1.4rem", marginTop: 16 }}>Doble llave: llave de JSX + objeto</p>
      <button disabled={!activo} className={activo ? "boton activo" : "boton"}>
        Guardar
      </button>
    </main>
  );
}

Resultado

Consola

📌 Nota · ¿Por qué style={{ … }} lleva dos llaves?

La llave exterior abre «JavaScript dentro de JSX». La interior es el objeto { color: "red" } que le pasas. Las propiedades CSS van en camelCase (backgroundColor, no background-color) y los números sin unidad se interpretan como píxeles.

5.Texto, espacios y fragmentos

Los saltos de línea del JSX no se muestran: JSX recorta los espacios al inicio y al final de cada línea. Para un salto visible usa <br /> o párrafos.
Para un espacio entre una expresión y otro texto en la misma línea basta con escribirlo: Hola, {nombre}!.
Las comillas y símbolos <, >, {, } en el texto: si necesitas mostrar llaves, ponlas dentro de una cadena: {"{ hola }"}.
Fragmentos con clave: <Fragment key={id}>…</Fragment> cuando necesitas una clave (lección 5).

⚛️ Fragmentos y texto

Código (edítalo y pulsa Ejecutar)

function Fila() {
  // Devuelve dos celdas sin envolverlas en un <div> que rompería la tabla
  return (
    <>
      <td>Teclado</td>
      <td>$25.00</td>
    </>
  );
}

function App() {
  return (
    <table border="1" cellPadding="6">
      <tbody>
        <tr><Fila /></tr>
        <tr><Fila /></tr>
      </tbody>
    </table>
  );
}

Resultado

Consola

6.Buenas prácticas de escritura

Paréntesis tras return cuando el JSX ocupa varias líneas: return ( … );.
Una sola cosa por componente: si el JSX crece demasiado, divídelo en componentes.
Cálculos antes del return: haz las operaciones en variables y deja el JSX limpio.
Nombres claros: usuarioActivo explica más que x.
Indenta de forma consistente (2 espacios): JSX anidado sin sangría es ilegible.
Evita lógica larga dentro de las llaves: si no cabe en una línea, extráela a una variable o función.

Antes y después

// ❌ Difícil de leer
return <p>{usuario.puntos > 100 ? "Experto" : usuario.puntos > 50 ? "Avanzado" : "Novato"}</p>;

// ✅ Cálculo fuera, JSX limpio
let nivel = "Novato";
if (usuario.puntos > 100) nivel = "Experto";
else if (usuario.puntos > 50) nivel = "Avanzado";
return <p>{nivel}</p>;

7.Errores frecuentes

Usar class o for: React avisa en la consola; cámbialos por className y htmlFor.
Olvidar cerrar <input>, <img> o <br>: en JSX deben ser <input />.
Escribir style="color: red": el style recibe un objeto: style={{ color: "red" }}.
Intentar mostrar un objeto: {usuario} da error; muestra {usuario.nombre}.
Poner un if dentro de las llaves: solo se permiten expresiones; usa un ternario o calcula antes.
Comentar con // dentro del JSX: aparece como texto. Usa {/* … */}.
Atributos en minúscula como onclick: usa onClick.

📒 Apuntes para llevar

JSX es JavaScript con etiquetas; una herramienta lo traduce a React.createElement(...).
Diferencias con HTML: className, htmlFor, atributos en camelCase, etiquetas siempre cerradas y style como objeto.
Un componente devuelve un solo elemento raíz o un fragmento <>…</>.
Las llaves { } insertan expresiones de JavaScript (no sentencias).
React no dibuja true, false, null ni undefined; los objetos dan error; el 0 sí se dibuja.
Las llaves también se usan en atributos: src={foto}, disabled={!activo}.
Los comentarios en JSX son {/* … */}.

8.Glosario

Término	Significado
JSX	Extensión de sintaxis de JavaScript que permite escribir etiquetas dentro del código.
Expresión	Código que produce un valor: `a + b`, `nombre.trim()`, `activo ? 1 : 2`.
Fragmento	`<>…</>`: agrupa elementos sin crear un nodo extra en el DOM.
camelCase	Convención de nombres con mayúscula en cada palabra interna: `onClick`, `tabIndex`.
`className`	Atributo de JSX equivalente al `class` de HTML.
`htmlFor`	Atributo de JSX equivalente al `for` de HTML en un `<label>`.
Transpilar	Traducir código de una sintaxis a otra (JSX → JavaScript).

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Cómo se escribe el atributo class en JSX?

class es una palabra reservada de JavaScript; JSX usa className.

¿Cuál es la forma correcta de aplicar un estilo?

¿Qué hace React con {false}?

Los valores booleanos, null y undefined no se dibujan.

¿Qué NO se puede escribir dentro de las llaves de JSX?

Dentro de las llaves solo caben expresiones. Para decidir, usa un ternario o calcula antes del return.

¿Cómo se escribe un comentario dentro del JSX?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio