Conversor HTML a JSX
Convierte marcado HTML a codigo React JSX valido al instante
Entrada HTML
Salida JSX
¿Que es un conversor HTML a JSX?
Un conversor HTML a JSX transforma el marcado HTML estandar en sintaxis React JSX valida. JSX es una extension JavaScript XML usada en React donde los atributos HTML deben ser camelCase, class se convierte en className y for en htmlFor.
Al construir componentes React, pegar HTML directamente provoca errores de sintaxis. Esta herramienta automatiza todas las transformaciones necesarias para que puedas usar cualquier plantilla HTML directamente en tus componentes React.
Como convertir HTML a JSX
Sigue estos tres pasos para convertir HTML en React JSX valido.
Pega o sube HTML
Pega tu HTML en el panel izquierdo o haz clic en Subir para cargar un archivo HTML.
Ver la salida JSX
El panel derecho muestra el JSX convertido. class se renombra a className y los elementos vacios se autocierran.
Copiar o descargar
Haz clic en Copiar o Descargar para guardar como archivo .jsx.
Cuando usar este conversor
Migrar HTML a React
Convierte plantillas HTML existentes a JSX para proyectos React.
Usar maquetas de diseñador
Integra maquetas HTML de diseñadores directamente en componentes React.
Aprender JSX
Ve el equivalente JSX de cualquier HTML que ya conozcas.
Convertir plantillas de email
Convierte plantillas HTML de email para usar con librerias como React Email.
Preguntas frecuentes
¿Por que class se convierte en className?
En JSX los atributos se mapean a propiedades DOM de JavaScript. La propiedad DOM para el atributo HTML class es className porque class es una palabra reservada en JavaScript.
¿Que otros atributos se renombran?
class→className, for→htmlFor, tabindex→tabIndex, colspan→colSpan, eventos como onclick→onClick.
¿Que elementos vacios se autocierran?
Todos los elementos vacios HTML: <br />, <img />, <input />, <hr />, entre otros.
¿Maneja estilos en linea?
Los estilos en linea como style="color:red" se convierten a objetos de estilo JSX style={{ color: "red" }}.
¿Se almacena mi HTML?
No. Todo ocurre en tu navegador. Tu HTML nunca sale de tu computadora.
Herramientas relacionadas
Mas herramientas para trabajar con HTML: