¿Qué es JSX?

JSX es una extencion de JavaScript y su sintaxis que permite mesclar JS y HTML. Esta extensión permite escribir un código más limpio, sin tantas repeticiones (DRY).

🧩 ¿Qué es JSX?

JSX (JavaScript XML) es una extensión de sintaxis para JavaScript que se utiliza con React para describir cómo debería lucir la UI (interfaz de usuario). Es una mezcla entre JavaScript y HTML.

Aunque los navegadores no entienden JSX directamente, herramientas como Babel lo convierten en código JavaScript que sí entienden los navegadores.

🎯 En resumen: JSX te permite escribir etiquetas HTML directamente dentro de tu código JavaScript (como si estuvieras escribiendo HTML en un archivo .js o .jsx).

💡 Ejemplo básico de JSX

const saludo = <h1>¡Hola, mundo!</h1>; 

Aquí estás creando un elemento HTML (<h1>) directamente en JavaScript. Esto es JSX.

Y puedes usarlo dentro de un componente React:

function App() { 
  const nombre = "Carlos"; 
  return ( 
    <div> 
      <h1>Hola, {nombre} 👋</h1> 
      <p>¡Bienvenido a React con JSX!</p> 
    </div> 
   ); 
}

🔄 ¿Qué es un Transpiler?

Un transpiler (también llamado transcompilador) es una herramienta que convierte código fuente de un lenguaje a otro similar, o a una versión diferente del mismo lenguaje.

La palabra viene de "TRANSlate + comPILEr".

💡 Es diferente de un compiler (compilador) tradicional, que transforma código de alto nivel (como C++) a código máquina o bytecode.

⚙️ ¿Cómo funciona JSX?

JSX no es entendido por el navegador directamente. El compilador (como Babel) lo transforma en código JavaScript válido:

const elemento = <h1>Hola</h1>;

Se convierte en:

const elemento = React.createElement("h1", null, "Hola");

💡 ¿Por qué se usa JSX?

JSX no es obligatorio, pero es altamente recomendado porque:

✅ Código más legible

En lugar de escribir funciones complicadas con React.createElement, puedes usar una sintaxis parecida a HTML que es más intuitiva y clara.

🔄 Combina lógica y presentación

Puedes mezclar HTML con JavaScript fácilmente:

const nombre = "Carlos"; 
const saludo = <h1>Hola, {nombre}</h1>;

💥 Integración natural con React

React funciona con una estructura de componentes. JSX hace que crear esos componentes sea más natural:

function Saludo(props) { 
   return <h1>Hola, {props.nombre}</h1>; 
}

🧬 ¿Qué tiene de especial JSX en React 18?

React 18 sigue usando JSX de la misma forma básica, pero trae algunas mejoras sutiles:

⚡ Nueva Transformación de JSX (desde React 17)

Aunque esto empezó en React 17, React 18 lo aprovecha al máximo. Ya no necesitas importar React explícitamente en cada archivo JSX:

Antes:

import React from 'react'; 
const App = () => <h1>Hola</h1>;

Ahora:

const App = () => <h1>Hola</h1>;

Esto es gracias a una mejora en la transformación JSX que hace Babel o TypeScript automáticamente.

🧵 Soporte para renderizado concurrente

JSX sigue siendo igual, pero ahora puedes usarlo con características avanzadas como:

• startTransition()
• Suspense
• useDeferredValue()

Lo que hace que tu interfaz sea más reactiva y fluida, sin cambiar JSX en sí, pero aprovechándolo como interfaz declarativa.

🧭 ¿Cuándo no usar JSX?

Podrías evitar JSX si:

• Trabajas con herramientas que no lo soportan.

• Quieres un estilo completamente funcional sin mezcla de sintaxis.

• Quieres entender React a bajo nivel usando React.createElement.

Pero en la práctica, casi todos los desarrolladores React usan JSX por productividad, claridad y comunidad.