Convertidor HTML a JSX

Convierte HTML en JSX React en línea. Transforma class en className, cadenas style en objetos, etiquetas autocerrantes y más. Gratis e instantáneo.

HTML

JSX

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.

𝕏 Twitter in LinkedIn

Califica esta herramienta

4.5 / 5 · 202 calificaciones

Más herramientas

SVGSVG a JSX/React JSFormateador JS/HTML &;Codificador de entidades HTML HMHTML to Markdown

Mantente actualizado

Recibe consejos de desarrollo y nuevas herramientas.

Sin spam. Cancela cuando quieras.

Enjoy these free tools?

☕Buy Me a Coffee

Có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

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 />.