Output will appear here...
Sobre la conversión de HTML a JSX
JSX es la extensión de sintaxis de React que se parece al HTML pero con diferencias importantes. Esta herramienta automatiza todas las transformaciones necesarias: class a className, for a htmlFor, cadenas de estilo inline a objetos JavaScript.
Key Features
- Convert class attributes to className
- Convert for attributes to htmlFor for labels
- Transform style strings to style objects
- Handle event handlers (onclick → onClick)
- Support data-* attributes (pass-through)
- 100% client-side — your code stays private
Preguntas frecuentes
¿Qué cambia la conversión HTML a JSX?
Cambios principales: class → className, for → htmlFor, estilos inline → objetos style, etiquetas autocerrantes con />, comentarios HTML → {/* */}.
¿Por qué no se puede usar class en JSX?
En JSX, 'class' es una palabra reservada de JavaScript. React usa 'className' en su lugar.
¿Cómo se convierten los estilos inline?
style="color: red; font-size: 16px" se convierte en style={{color: "red", fontSize: "16px"}}.
¿Maneja etiquetas autocerrantes?
Sí. Elementos vacíos HTML como <br>, <hr>, <img> se convierten en <br />, <hr />.
Califica esta herramienta
4.5 / 5 · 202 calificaciones
Más herramientas
SVGSVG a JSX/ReactJSFormateador JS/HTML&;Codificador de entidades HTMLHMHTML to MarkdownMantente actualizado
Recibe consejos de desarrollo y nuevas herramientas.
Sin spam. Cancela cuando quieras.
Enjoy these free tools?
☕Buy Me a CoffeeCómo usar
- Pega tu marcado HTML en el panel de entrada
- Haz clic en Convertir para transformar a JSX
- Revisa la salida JSX convertida
- Copia y pega en tu componente React
Casos de uso comunes
- Migrar plantillas HTML estáticas a componentes React
- Convertir HTML de herramientas de diseño (Figma, Webflow) a JSX
- Portar plantillas de email HTML a React Email
- Aprender las diferencias entre sintaxis HTML y JSX