JSX no es HTML dentro de JavaScript; es un paso de compilación.

Pregunta 1

Al abrir un proyecto React nuevo y leer App.jsx, a menudo se produce la misma sorpresa: el archivo es de JavaScript, pero contiene marcado que parece idéntico al HTML. Una primera mirada a un componente que devuelve un <h1> plantea la pregunta de si el entorno de ejecución del lenguaje aprendió de alguna manera a analizar etiquetas.

Antes de continuar, decida si el JavaScript puro entiende esto:

const heading = <h1>Hello World</h1>;

• A) Sí
• B) No

La opción correcta es B) No. Un motor de JavaScript estándar no cuenta con gramática para <h1>. Si se coloca la misma línea en un archivo .js sin realizar ningún paso de transformación, el analizador reportará un error de sintaxis.

React nunca envía JSX al navegador. Un paso de compilación reescribe primero el marcado en llamadas a funciones comunes. Conceptualmente, el proceso se ve así:

You write JSX
      │
      ▼
Compiler (Babel / Vite)
      │
      ▼
JavaScript
      │
      ▼
Browser

Solo JavaScript llega al navegador. Las etiquetas que escribió nunca aparecen en la respuesta de red como JSX.

Imágineselo como Google Translate

Imagine escribir una carta en francés para un amigo que solo lee inglés. El amigo no entiende de repente el francés; hay un traductor intermedio. JSX funciona de la misma manera. Usted crea la sintaxis similar al HTML, el compilador (Babel, SWC o la transformación dentro de Vite) la convierte en JavaScript, y solo entonces el navegador la ejecuta.

¿Entonces qué es exactamente JSX?

Los principiantes suelen resumir JSX como “HTML dentro de JavaScript”. Ese atajo es incorrecto. JSX se parece a HTML, pero no es HTML. Una definición más precisa: JSX es una extensión de sintaxis de JavaScript que permite describir la interfaz de usuario con una estructura similar a HTML. La palabra clave es similar a HTML, no HTML en sí. Los nombres de los atributos difieren (className en lugar de class), y las expresiones que los rodean forman parte del sistema de valores de JavaScript en lugar de pertenecer a un lenguaje de marcado separado.

¿Por qué se creó JSX?

Sin JSX, el mismo encabezado:

<h1>Hello React</h1>

se expresaría mediante llamadas anidadas a funciones:

React.createElement(
  "h1",
  null,
  "Hello React"
);

Una página completa escrita de esa manera resulta difícil de leer. JSX existe para que la estructura de la interfaz de usuario siga siendo legible, mientras el compilador genera en segundo plano las llamadas React.createElement (o equivalentes).

Pregunta 2

¿Qué se muestra aquí?

const name = "Ananya";

function App() {
  return (
    <h1>Hello {name}</h1>
  );
}

• A) Hola {name}
• B) Hola Ananya
• C) Error de sintaxis

La respuesta es B) Hola Ananya. Los llaves curvas indican a JSX que detenga el modo de marcado y evalúe una expresión en JavaScript. El valor de name se intercala en el encabezado, por lo que la interfaz muestra la cadena de texto y no la sintaxis de las llaves.

Las llaves curvas tienen una única función

Cada vez que JSX ve {…}, evalúa la expresión que hay dentro y inserta el resultado. Ese es todo: ejecutar JavaScript y colocar su valor. No existe un segundo modo para declaraciones o bloques con efectos secundarios.

Pregunta 3

¿Qué contenidos dentro de las llaves son válidos en JSX?

• A) Una referencia a una variable como {name}
• B) Una expresión aritmética como {10 + 20}

C) un if de estilo bloque escrito dentro de los corchetes

D) una expresión ternaria que elige entre "Adulto" y "Menor de edad" en función de age

A, B y D funcionan. C no funciona. JSX solo acepta expresiones que evalúen a un valor. Un if sin más es una instrucción y no produce nada que se pueda incluir en el árbol; una expresión ternaria devuelve un valor, por lo que la verificación de edad en D es válida mientras que C es rechazada.

Consideraciones finales

JSX puede parecer magia desde el primer día: da la impresión de que HTML y JavaScript se han fusionado en un único lenguaje. Sus mecanismos son más simples. JSX es una capa de abstracción para los desarrolladores. Antes de que la aplicación se ejecute en el navegador, un compilador la reescribe en JavaScript convencional. Una vez que se comprende este proceso, la sintaxis de marcado en JS deja de ser confusa y se convierte en una forma legible para describir las estructuras de la interfaz de usuario.