Entrada
Preparando tu espacio de trabajo…
Cómo usarlo
- Pega un fragmento HTML, abre un archivo UTF-8 o carga Ejemplo.
- Elige la sangría y selecciona Convertir a JSX.
- Revisa el marcado y cópialo o descárgalo.
Llevar marcado HTML a React
El HTML de una plantilla suele requerir cambios para usarlo en JSX: className, htmlFor, elementos autocerrados y otra forma de expresar estilos en línea.
El conversor procesa la estructura del marcado. El estado, los callbacks de eventos y la lógica de la aplicación deben escribirse donde se integre el JSX.
Conversión de atributos y estilos
Los atributos se adaptan a React, incluidos className y htmlFor. Los nombres SVG comunes usan las mayúsculas y minúsculas de React.
El CSS en línea se convierte en un objeto style y el resultado se formatea como JSX. El texto literal se escapa cuando es necesario, no se interpreta como expresiones JavaScript.
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>Ejemplo abreviado de conversión de atributos. La salida completa está formateada e incluye un fragmento contenedor.
Estructura y comportamiento
El fragmento HTML se analiza antes de convertirlo. La salida se envuelve en un fragmento y usa elementos autocerrados cuando corresponde.
Se eliminan scripts y atributos de eventos en línea. Eso no convierte su lógica en callbacks React ni garantiza que todas las URL o estilos restantes sean adecuados para tu aplicación.
Integrar el resultado
Pega el JSX en el render o return de un componente. Reconecta manualmente el comportamiento y revisa los estilos, en especial los fallbacks repetidos y !important que un objeto style no representa por completo.
Entrada de texto de hasta 1 MiB. Las transformaciones de CSS y HTML se ejecutan en un worker con un límite de 30 segundos. Las herramientas de color usan sRGB; los estilos generados son vistas previas y deben probarse en tu propio diseño.
Preguntas frecuentes
¿Se crea un componente React completo?
No. Se genera marcado JSX. Añade el componente, imports, datos y comportamiento en tu proyecto.
¿Qué ocurre con los scripts y onclick?
Se eliminan los elementos script y los atributos de eventos en línea. Su código no se ejecuta ni se convierte en manejadores React.
¿Por qué las llaves del texto siguen siendo texto?
La entrada se interpreta como HTML. Las llaves literales se escapan para JSX en lugar de evaluarse como expresiones.
¿Los estilos en línea se convierten de forma exacta?
Las declaraciones comunes se convierten en propiedades React. Los fallbacks repetidos y !important no siempre pueden representarse fielmente en un objeto JavaScript.
¿Puedo convertir marcado SVG?
Los atributos SVG comunes se adaptan a React. Prueba el resultado en tu componente, incluidos ID, referencias y atributos propios de la aplicación.