{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

JSX en profundidad: cómo escribir UI declarativa sin trampas

Domina la sintaxis JSX, sus reglas de oro y la mentalidad correcta para mezclar JavaScript y marcado de forma limpia en React.

JSX no es HTML dentro de JavaScript: es una sintaxis que se transforma a llamadas de función para describir elementos de UI.

La ventaja principal de JSX es la cercanía entre estructura visual y lógica mínima de presentación en un mismo archivo de componente.

Entender sus reglas evita errores comunes: atributos incorrectos, múltiples raíces o interpolaciones mal formadas.

Si escribes JSX con criterio, el código queda más legible, más mantenible y más fácil de revisar en equipo.

  • React impone reglas concretas en JSX para que la transformación a JavaScript sea segura y predecible.
  • Cada componente debe devolver un único nodo raíz (o un fragmento).
  • Los atributos siguen nombres JavaScript-friendly: por ejemplo `className` en lugar de `class`.
  • Las expresiones JavaScript se escriben entre llaves, pero las sentencias complejas no van directas dentro del retorno.
  • Un nodo raíz por retorno.

Reglas básicas que siempre debes respetar

React impone reglas concretas en JSX para que la transformación a JavaScript sea segura y predecible.

Cada componente debe devolver un único nodo raíz (o un fragmento).

Los atributos siguen nombres JavaScript-friendly: por ejemplo `className` en lugar de `class`.

Las expresiones JavaScript se escriben entre llaves, pero las sentencias complejas no van directas dentro del retorno.

  • Un nodo raíz por retorno.
  • Atributos camelCase cuando corresponde.
  • Interpolación con `{}` para expresiones.
  • Evita lógica pesada en el JSX de retorno.

Expresiones en JSX: dónde sí y dónde no

JSX acepta expresiones, pero no bloques de control completos sin preparación previa.

Legibilidad y mantenibilidad

El JSX debe contar una historia visual clara: estructura primero, lógica auxiliar fuera cuando crece.

Cuando una condición es compleja, calcula variables antes del `return` y muestra resultados ya preparados.

Evita anidar ternarios largos dentro del marcado: funcionan, pero degradan lectura y elevan errores.

Piensa en JSX como la maqueta final del componente, no como un contenedor de toda la lógica de negocio.

React
03

JSX en profundidad: cómo escribir UI declarativa sin trampas

Domina la sintaxis JSX, sus reglas de oro y la mentalidad correcta para mezclar JavaScript y marcado de forma limpia en React.

¿Cuánto sabes de React?

Código del tema: Componentes, estado y render declarativo

📘 Teoría

Reglas básicas que siempre debes respetar

React impone reglas concretas en JSX para que la transformación a JavaScript sea segura y predecible.

Cada componente debe devolver un único nodo raíz (o un fragmento).

Los atributos siguen nombres JavaScript-friendly: por ejemplo `className` en lugar de `class`.

Las expresiones JavaScript se escriben entre llaves, pero las sentencias complejas no van directas dentro del retorno.

  • Un nodo raíz por retorno.
  • Atributos camelCase cuando corresponde.
  • Interpolación con `{}` para expresiones.
  • Evita lógica pesada en el JSX de retorno.

Expresiones en JSX: dónde sí y dónde no

JSX acepta expresiones, pero no bloques de control completos sin preparación previa.

Expresiones válidas en JSX
function Saludo() {
  const nombre = 'Ana';
  const premium = true;

  return (
    <section>
      <h1>Hola, {nombre}</h1>
      <p>{premium ? 'Cuenta premium activa' : 'Cuenta básica'}</p>
    </section>
  );
}

Legibilidad y mantenibilidad

El JSX debe contar una historia visual clara: estructura primero, lógica auxiliar fuera cuando crece.

1

Cuando una condición es compleja, calcula variables antes del `return` y muestra resultados ya preparados.

2

Evita anidar ternarios largos dentro del marcado: funcionan, pero degradan lectura y elevan errores.

3

Piensa en JSX como la maqueta final del componente, no como un contenedor de toda la lógica de negocio.

🧪 Aprende probando

Ejemplo Ejemplo: tarjeta de perfil en JSX Componente simple que mezcla datos y marcado de forma limpia.
⌄

🏁 Retos

Reto Reto: corrige JSX inválido Arregla atributos y estructura para que el componente sea válido en React.
⌄

🧰 Recursos

Enlaces útiles

Writing Markup with JSX JavaScript in JSX with Curly Braces JSX In Depth (legacy docs)
Test

Comprueba tus conocimientos con un test sobre React.

Test de React
Recursos del curso 25
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards
‹
Lección 02
Entorno profesional con Vite: estructura, scripts y flujo de trabajo
Lección 04
Componentes y props: diseño modular y datos de padre a hijo
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .