JSX : el lenguaje que parece HTML dentro de JavaScript

Qué es JSX y qué no es

JSX no es HTML, no es JS versión 10, no es JS Xtra. La X viene de eXtension (a veces se le llama también JavaScript XML). Es una extensión sintáctica para JavaScript desarrollada en Meta y adoptada después por otros frameworks (Vue, Solid, Qwik, e incluso implementaciones fuera del ecosistema web como SwiftUI).

Con y sin JSX, lado a lado

const MyComponent = () => (
  <section id="list">
    <h1>This is my list!</h1>
    <p>Isn't my list amazing? It contains amazing things!</p>
    <ul>
      {amazingThings.map((t) => (
        <li key={t.id}>{t.label}</li>
      ))}
    </ul>
  </section>
);

const MyComponent = () =>
  React.createElement(
    "section",
    { id: "list" },
    React.createElement("h1", {}, "This is my list!"),
    React.createElement("p", {}, "Isn't my list amazing? It contains amazing things!"),
    React.createElement(
      "ul",
      {},
      amazingThings.map((t) =>
        React.createElement("li", { key: t.id }, t.label)
      )
    )
  );

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

const MyComponent = () =>
  _jsxs("section", {
    id: "list",
    children: [
      _jsx("h1", { children: "This is my list!" }),
      _jsx("p",  { children: "Isn't my list amazing? It contains amazing things!" }),
      _jsx("ul", {
        children: amazingThings.map((t) =>
          _jsx("li", { children: t.label }, t.id)
        ),
      }),
    ],
  });

Beneficios y trade-offs de JSX

Beneficios

Desventajas

Under the hood: cómo se transforma texto en máquina

Para entender por qué JSX necesita un build step, el capítulo hace un repaso por las tres fases que cualquier compilador sigue con JavaScript (V8, SpiderMonkey, JSCore).

Tokenización / lexing

Convertir el texto crudo en tokens con significado: const → 0, let → 1, function → 2. Un lexer con estado (que sabe qué token acaba de ver) se llama lexer propiamente — la diferencia es fina pero explica por qué expresiones como </ para cerrar JSX son ambiguas sin un parser real debajo.

Parsing

Convertir la lista de tokens en un AST (Abstract Syntax Tree). El capítulo muestra el AST de const a = 1; let b = 2; console.log(a + b) como un objeto JSON con type: "Program", body: [...], kind: "const" | "let", etc. Ese árbol es la estructura que el resto del pipeline sabe consumir.

Code generation

Transformar el AST en machine code (o bytecode JIT). En el navegador esto pasa continuamente: motores como V8 traducen primero a bytecode para arrancar rápido y luego especializan los hot paths en código máquina. Los runtimes (Chrome, Node, Cloudflare Workers, Bun, Deno) añaden el contexto (window, process, edge APIs).

Cómo extender JavaScript: dos caminos posibles

Para añadir una sintaxis nueva hay dos rutas:

1. Crear un motor nuevo que la entienda. Inviable: tardarías años y nadie adoptaría tu motor.
2. Transformar la sintaxis antes de que llegue al motor. Es la ruta barata: tú escribes un lexer y un parser propios, generas un AST del lenguaje extendido y lo reduces a JavaScript plano.

JSX toma la ruta 2. Por eso JSX nunca llega al navegador sin pasar por Babel/swc/esbuild — el navegador sigue siendo V8/SpiderMonkey/JSCore, sin cambios.

   ┌──────────────┐      ┌──────────────┐      ┌──────────────┐
   │   JSX src    │ ───▶ │  Transpiler  │ ───▶ │   Vanilla JS  │ ───▶ motor
   │              │      │ (Babel/swc)  │      │              │
   └──────────────┘      └──────────────┘      └──────────────┘
                                │
                                ▼
                          AST intermedio

El pragma de JSX

JSX no es más que azúcar sobre llamadas a una función. Esa función es el pragma y su nombre es configurable. Por defecto puede ser:

• React.createElement (transform clásico)
• jsx / jsxs desde react/jsx-runtime (transform moderno)

La firma es siempre la misma: pragma(tag, props, ...children). Esto hace que cualquier árbol JSX se reduzca a llamadas anidadas:

<MyComponent prop="value">contents</MyComponent>

↓

React.createElement(MyComponent, { prop: "value" }, "contents");

Expresiones (no sentencias) entre {}

JSX permite ejecutar cualquier expresión JavaScript entre {}. Las expresiones devuelven un valor; las sentencias (if, for, let, const = ...) no, así que JSX las rechaza para no caer en código con efectos secundarios invisibles.

const a = 1;
const b = 2;

const MyComponent = () => <Box>Here's an expression: {a + b}</Box>;
// → "Here's an expression: 3"

const MyComponent = () => <Box>{
  const a = 1;
  const b = 2;
  if (a > b) {
    3
  }
}</Box>;
// No compila: las sentencias no devuelven valor.

Resumen del capítulo

• JSX es una extensión sintáctica, no un lenguaje: cualquier JSX es JavaScript plano después de pasar por un transpilador.
• El transpilador (Babel, swc, esbuild) hace lex, parse, transform y emit. El navegador sigue siendo V8/SpiderMonkey/JSCore.
• Hay dos modos: el clásico, con React.createElement, y el moderno (React 17+), con jsx/jsxs desde react/jsx-runtime.
• {} admite expresiones porque solo ellas devuelven valor. Sentencias (incluido if) requieren extraer la lógica fuera del árbol JSX.
• La famosa “mezcla de conceptos” se resuelve con el modelo de componentes: la unidad cohesiva ya no es el archivo (.html, .js, .css), sino el componente React, donde cada concepto vive al lado de los otros.

Próximos pasos

Adentrarnos en la estructura que JSX produce: el árbol de React elements y el 03-el-dom-virtual.