JSX (JavaScript XML — React)
JSX es una extensión de sintaxis para JavaScript que permite escribir elementos tipo HTML dentro del código JavaScript. Se utiliza principalmente con React para describir la estructura de la interfaz de usuario de forma declarativa.
Tipo MIME
text/jsx
Tipo
Texto
Compresión
Sin pérdida
Ventajas
- + Intuitive HTML-like syntax for UI component definitions
- + Full JavaScript power within markup expressions
- + Component composition is clear and readable
Desventajas
- − Requires transpilation — cannot run directly in browsers
- − Mixes concerns (markup + logic) which some developers dislike
- − Must use className instead of class (React-specific)
Cuándo usar .JSX
Usa JSX al construir componentes React con JavaScript. Si prefieres seguridad de tipos, usa TSX (JSX con TypeScript).
Detalles técnicos
JSX es azúcar sintáctico que se transforma a llamadas React.createElement() (clásico) o entrada JSX automática de _jsx() (React 17+). Herramientas como Babel o el compilador de TypeScript manejan la transformación. JSX soporta expresiones, propagación de props y fragmentos.
Historia
Facebook introdujo JSX junto con React en 2013. Aunque inicialmente fue controvertido por mezclar HTML con JavaScript, JSX se convirtió en el estándar para el desarrollo con React y fue adoptado por otros frameworks.