JSX: LA SINTAXIS QUE TRANSFORMÓ EL DESARROLLO DE INTERFACES EN JAVASCRIPT
JSX, JavaScript XML, es una extensión de sintaxis de JavaScript que permite escribir código similar a HTML o XML directamente dentro de archivos JavaScript. Aunque se popularizó gracias a React, su concepto es más amplio y ha influido en cómo muchos desarrolladores construyen interfaces de usuario modernas.¿Qué es exactamente JSX?
JSX no es HTML ni un template engine tradicional. Es una extensión sintáctica que el compilador, generalmente Babel o el propio compilador de TypeScript, transforma en llamadas a funciones de JavaScript puro.Ejemplo
const elemento = <h1 className="titulo" >Hola, mundo </h1 >
//Se compila aproximadamente a:js
const elemento = React.createElement(
"h1",
{ className: "titulo" },
"Hola, mundo"
);
Orígenes y popularización
JSX fue presentado por Facebook, ahora Meta, junto con React en 2013. El equipo de React buscaba una forma de expresar la estructura de la interfaz de manera declarativa y cercana al HTML, pero con todo el poder de JavaScript, variables, expresiones, lógica condicional, bucles, etc.Aunque al principio generó controversia, “¿mezclar HTML con JavaScript?”, con el tiempo se convirtió en el estándar de facto para muchas librerías y frameworks de frontend.
Características principales de JSX
Expresiones embebidas
Se puede insertar cualquier expresión de JavaScript válida entre llaves "{}":const nombre = "Ana";
const edad = 28;
return (
<div>
<p>Hola, {nombre} </p>
<p>Edad el próximo año: {edad + 1} </p>
<p>{edad >= 18 ? "Mayor de edad" : "Menor de edad"} </p>
</div>
);
Atributos y props
Los atributos se escriben de forma similar a HTML, pero con algunas diferencias importantes:- "class" se convierte en "className"
- "for" se convierte en "htmlFor"
- Los eventos usan camelCase, "onClick", "onChange"
- Los estilos se pasan como objetos: "style={{ color: "red", fontSize: 16 }}"
Elementos deben tener un solo nodo raíz
Antes de React 16 se exigía un único elemento padre. Hoy se puede usar "< >... </ >".Componentes
Las etiquetas que empiezan con mayúscula se interpretan como componentes:function Saludo({ nombre }) {
return <h1>Hola, {nombre}</h1>;
}
// Uso
<Saludo nombre="Carlos" />
Children
Todo lo que va entre la etiqueta de apertura y cierre se convierte en la prop children.Diferencias importantes con HTML
| Aspecto | HTML | JSX |
|---|---|---|
| Atributo de clase | "class" | "className" |
| Atributo for | "for" | "htmlFor" |
| Comentarios | "<!-- comentario -->" | "{/* comentario */}" |
| Estilos inline | "style=\"color: red\"" | "style={{ color: \"red\" }}" |
| Booleanos | "disabled" o "disabled=\"true\"" | "disabled" o "disabled={true}" |
| Autocierre | Opcional en muchos casos | Obligatorio ("<img />", "<br />") |
| Nombres de eventos | "onclick" | "onClick" |
Ventajas de usar JSX
- Legibilidad: La estructura de la UI es mucho más clara que con "React.createElement" anidados.
- Poder de JavaScript: Condicionales, bucles, "map", variables y funciones se integran de forma natural.
- Type-checking y autocompletado: Con TypeScript o PropTypes se obtiene un excelente soporte del editor.
- Prevención de XSS: React escapa automáticamente los valores insertados, reduciendo riesgos de inyección.
- Composición: Facilita enormemente la creación de componentes reutilizables.
Buenas prácticas recomendadas
- Mantener los componentes pequeños y con una sola responsabilidad.
- Es mejor usar la desestructuración de props: "function Boton({ texto, onClick })".
- Usar "key" correctamente en listas, no usar nunca el índice si el orden puede cambiar.
- Extraer la lógica compleja fuera del JSX cuando sea posible.
- Evitar funciones anónimas en props de listas grandes si el rendimiento es crítico, o usar "useCallback".
- Nombrar los componentes con PascalCase y los archivos de forma coherente.