Frontend Academy · Lección

JSX: sintaxis y transpilación

Escriba JSX, comprenda cómo Babel lo compila en llamadas a React.createElement y aplique sus reglas: un elemento raíz, className y etiquetas de autocierre.

JSX: sintaxis y transpilación es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué es JSX?

JSX (JavaScript XML) es una extensión de sintaxis que permite escribir marcado similar a HTML dentro de JavaScript. No es una función del navegador: Babel o TypeScript lo transforma en llamadas a funciones de JavaScript antes de ejecutarlo.

Transpilación de JSX

Babel transforma JSX en llamadas a React.createElement(). Con la nueva transformación de JSX (React 17+), no es necesario importar React: Babel inyecta automáticamente las importaciones necesarias.

// JSX:
const element = <h1 className="title">Hello</h1>;

// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });

Reglas de JSX: un elemento raíz

Las expresiones JSX deben tener exactamente un elemento raíz. Envuelva los elementos hermanos en un <div> o utilice Fragmentos (<></> o <React.Fragment>) para evitar agregar nodos DOM adicionales.

// Error: adjacent elements need a wrapper
return (
  <h1>Title</h1>
  <p>Body</p>
);

// Use Fragment:
return (
  <>
    <h1>Title</h1>
    <p>Body</p>
  </>
);

className y htmlFor

Los atributos JSX utilizan camelCase. Como class y for son palabras reservadas de JavaScript, utilice className y htmlFor en su lugar.

<div className="card active">
  <label htmlFor="email">Email</label>
  <input id="email" type="email" />
</div>

Etiquetas de cierre automático

En JSX, todas las etiquetas deben cerrarse correctamente. Los elementos sin hijos deben utilizar una barra de cierre automático: <img />, <br />, <input />.

Expresiones en JSX: {}

Incruste cualquier expresión de JavaScript en JSX mediante llaves. Funcionan las variables, las llamadas a funciones, los operadores ternarios y la aritmética. Las instrucciones (if, for) no.

const name = 'Alice';
const count = 5;

return (
  <div>
    <h1>Hello, {name}!</h1>
    <p>You have {count} messages.</p>
    <p>Double: {count * 2}</p>
    {isLoggedIn ? <Dashboard /> : <Login />}
  </div>
);

JSX y cadenas

El texto adyacente y las expresiones JSX se concatenan automáticamente. Puede combinar texto y expresiones libremente dentro de un elemento.

<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>

No renderizar nada: null y false

Devuelva null o false para no renderizar nada. Ambos son valores JSX válidos que no producen ninguna salida en el DOM. Resulta útil para el renderizado condicional.

function Banner({ show }: { show: boolean }) {
  if (!show) return null;  // renders nothing
  return <div className="banner">Important notice!</div>;
}

Atributo style — sintaxis de objeto

Los estilos en línea en JSX utilizan un objeto, no una cadena. Los nombres de las propiedades se escriben en camelCase.

<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
  Styled box
</div>

JSX es JavaScript

Como JSX se compila a JavaScript, puede colocarlo en variables, devolverlo desde funciones, pasarlo como props y almacenarlo en arrays. Los elementos de React son objetos normales de JavaScript.

const elements = ['apple', 'banana', 'cherry'].map(fruit => (
  <li key={fruit}>{fruit}</li>
));

return <ul>{elements}</ul>;

TypeScript y JSX: archivos .tsx

Utilice la extensión .tsx para los archivos de TypeScript que contienen JSX. TypeScript comprueba los tipos de JSX y detecta en tiempo de compilación los errores en los tipos de props y las props que faltan.

Comprobación rápida

¿Por qué utilizamos className en lugar de class en JSX?

Recapitulación: JSX

JSX es una forma abreviada sintáctica de React.createElement(). Una expresión debe tener un elemento raíz o un Fragment. Utilice className y htmlFor para los atributos que coinciden con palabras reservadas. Cierre automáticamente todos los elementos vacíos. Incruste expresiones con {}. Devuelva null/false para no renderizar nada. Los estilos en línea utilizan la sintaxis de objeto camelCase. JSX es JavaScript: trátelo como un valor.

Preguntas frecuentes

¿La lección «JSX: sintaxis y transpilación» es gratis?

Sí — el texto completo de «JSX: sintaxis y transpilación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «JSX: sintaxis y transpilación»?

Escriba JSX, comprenda cómo Babel lo compila en llamadas a React.createElement y aplique sus reglas: un elemento raíz, className y etiquetas de autocierre. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «JSX: sintaxis y transpilación»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Frontend Academy