Convertir HTML a JSX
Transforma HTML a JSX válido para React y Next.js. Gratis, en tu navegador, sin subir archivos.
Por qué usar este conversor
HTML a JSX sin errores de sintaxis
Total privacidad
La conversión ocurre completamente en tu navegador con JavaScript puro. Tu código nunca sale de tu dispositivo.
Transformaciones completas
Aplicamos todas las conversiones necesarias: atributos, estilos, eventos, etiquetas void y comentarios. Sin pasos manuales.
Compatible con React y Next.js
El JSX resultante es válido para React 16+, Next.js 12+ y cualquier framework basado en React como Gatsby o Remix.
Instantáneo
La conversión ocurre en milisegundos sin llamadas a servidor. Pega y copia, sin esperas.
Cómo funciona
Tres pasos, sin complicaciones
Pega tu HTML
Pega el código HTML que quieres convertir en el campo de entrada. Puede ser HTML completo o fragmentos.
Conversión automática
El convertidor aplica todas las transformaciones necesarias: class→className, for→htmlFor, estilos inline a objeto JS, y etiquetas void auto-cerradas.
Copia el JSX resultante
Copia el JSX listo para usar directamente en tus componentes React o Next.js.
Preguntas frecuentes
¿Tienes dudas?
Las transformaciones principales son: class→className (class es palabra reservada en JS), for→htmlFor (for también es reservada), estilos inline convertidos de string CSS a objeto JavaScript con propiedades camelCase, etiquetas void auto-cerradas (<br>→<br />, <img>→<img />, <input>→<input />), y comentarios HTML convertidos a comentarios JSX {/* */}.
React/Next.js requiere JSX porque los componentes se escriben en JavaScript. JSX es azúcar sintáctico sobre React.createElement(). Al compilarse con Babel o el compilador de Next.js, cada etiqueta JSX se convierte en llamadas a función JavaScript, lo que hace imposible usar palabras reservadas de JS como class o for como atributos.
En HTML: style="color: red; font-size: 16px". En JSX: style={{ color: 'red', fontSize: '16px' }}. Las propiedades CSS en kebab-case se convierten a camelCase (font-size→fontSize, background-color→backgroundColor), y los valores se convierten a strings o números JavaScript.
Los event handlers en HTML usan minúsculas (onclick, onchange, onsubmit). En JSX se convierten a camelCase: onclick→onClick, onchange→onChange, onsubmit→onSubmit, onmouseover→onMouseOver. El valor pasa de ser un string con código JS a ser una referencia a función: onclick="miFuncion()"→onClick={miFuncion}.
Los elementos void en HTML son etiquetas que no tienen contenido ni etiqueta de cierre: <br>, <img>, <input>, <hr>, <meta>, <link>. En JSX, XML requiere que todos los elementos se cierren explícitamente, por lo que deben escribirse como <br />, <img />, etc. Sin el auto-cierre, el compilador JSX lanzará un error de sintaxis.
Historia de React JSX (Facebook 2013), diferencias entre HTML y JSX, migración de plantillas HTML a componentes React, flujo de desarrollo en Next.js
JSX (JavaScript XML) fue introducido por Facebook en 2013 junto con React como una extensión de sintaxis de JavaScript que permite escribir estructuras similares a HTML directamente en código JS. Aunque opcionalmente se puede usar React sin JSX mediante llamadas directas a React.createElement(), JSX se convirtió rápidamente en el estándar de facto porque mejora drásticamente la legibilidad del código de componentes. Babel y posteriormente el compilador SWC de Next.js transforman JSX a JavaScript puro durante el proceso de build.
Las diferencias entre HTML y JSX son el resultado de que JSX opera en el contexto de JavaScript. La más importante: class es una palabra reservada en JavaScript (para definir clases ES6), por lo que React eligió className como atributo equivalente. De forma similar, for es una palabra reservada (para bucles for), por lo que el atributo de <label> se escribe htmlFor. Los estilos inline requieren un objeto JavaScript en lugar de un string CSS porque en el contexto de JS es más seguro y permite interpolación de variables. Las propiedades CSS se escriben en camelCase porque el guión (-) es el operador de resta en JavaScript.
La migración de templates HTML estáticos a componentes React es un caso de uso frecuente: diseñadores o desarrolladores que trabajan con HTML puro necesitan integrar sus diseños en proyectos Next.js o Create React App. El proceso manual es tedioso y propenso a errores, especialmente con HTML complejo que contiene muchos atributos de estilo, event handlers y elementos void. Herramientas automatizadas de conversión HTML-a-JSX aceleran significativamente este proceso de migración en proyectos de cualquier escala.