CodeAventura
React
▸Descubriendo React▸JavaScript dentro de JSX

Misión

export default function App() {
  const nombre = "Ada Lovelace";
  const edad = 28;
  const profesion = "Programadora";

  return (
    <div>
      {/* Usa las variables con {} para mostrar: */}
      {/* - El nombre en un h1 */}
      {/* - La edad en un p */}
      {/* - La profesión en un p */}
      {/* - El año de nacimiento calculado (2026 - edad) en un p */}
    </div>
  );
}
●localhost:5173
06 / 21JavaScript dentro de JSX
Anterior

JavaScript dentro de JSX

Las llaves mágicas: {}

JSX se ve como HTML, pero tiene un superpoder que HTML no tiene: puedes insertar cualquier expresión JavaScript usando llaves {}.

Las llaves {} son la puerta entre el mundo JSX y el mundo JavaScript. Todo lo que pongas dentro se evalúa como JavaScript.

¿Qué puedes meter en las llaves?

Cualquier expresión JavaScript. Una expresión es cualquier cosa que produce un valor:

Expresiones vs Sentencias

Hay una distinción importante: dentro de {} puedes poner expresiones pero NO sentencias. Prueba el quiz:

1/8Aciertos: 0

¿Esto se puede usar dentro de { } en JSX?

2 + 2

dentro de {} puedes poner expresiones pero NO sentencias.

Expresiones (SÍ funcionan en {}):

  • 2 + 2 → produce 4
  • nombre.toUpperCase() → produce un string
  • edad >= 18 ? "sí" : "no" → produce un valor
  • [1,2,3].map(n => n * 2) → produce un array

Sentencias (NO funcionan en {}):

  • if (condicion) { ... } → no produce un valor
  • for (let i = 0; ...) { ... } → no produce un valor
  • const x = 5; → es una declaración

La regla fácil: si puedes ponerlo a la derecha de un = y tiene sentido, es una expresión.

Llaves en atributos

Las llaves también funcionan en los atributos de JSX:

Para strings puedes usar comillas directamente (alt="Foto"), pero para cualquier otro valor necesitas llaves.

Objetos en JSX: doble llave

Los objetos JavaScript se escriben con {}. Y JSX usa {} para expresiones. ¿El resultado? Doble llave {{}}:

No es una sintaxis especial — son llaves normales anidadas.

Tu desafío 🚀

Tienes tres variables declaradas: nombre, edad y profesion. Tu misión:

  1. Muestra el nombre en un <h1> usando {nombre}
  2. Muestra la edad en un <p> usando {edad}
  3. Muestra la profesión en un <p> usando {profesion}
  4. Calcula y muestra el año de nacimiento usando {2026 - edad}

Cuando domines las llaves, dominarás JSX.

Las llaves son el puente entre la lógica y la interfaz. Son lo que hace que React sea tan poderoso.