Conversor de HTML a JSX

Cómo Usar el Conversor de HTML a JSX

Pegue su código HTML en el área de entrada y haga clic en Convertir a JSX. La herramienta transforma su HTML en JSX válido convirtiendo atributos, cerrando elementos vacíos, transformando estilos en línea y manejando comentarios. El panel de estadísticas muestra cuántos cambios se realizaron y las longitudes de caracteres de entrada y salida. Use el botón Copiar para copiar la salida JSX directamente en su archivo de componente React.

Esta herramienta es esencial para desarrolladores React que están migrando plantillas HTML existentes a componentes React, copiando fragmentos HTML de herramientas de diseño o convirtiendo prototipos HTML estáticos en aplicaciones React dinámicas. En lugar de cambiar manualmente cada atributo y elemento, el conversor maneja todas las transformaciones automáticamente con un solo clic.

Entendiendo JSX y los Componentes React

JSX es la sintaxis que hace productivo el desarrollo con React. Permite escribir código de interfaz que se parece a HTML pero que en realidad es JavaScript. Cuando escribe <div className="container"> en JSX, la herramienta de compilación de React lo transforma en una llamada a función React.createElement('div', {className: 'container'}). Esto significa que JSX sigue las reglas de JavaScript, no las de HTML, lo cual es la razón por la que ciertos atributos y patrones deben cambiar.

La diferencia más importante es que JSX usa convenciones de nomenclatura de JavaScript para los atributos. Dado que class y for son palabras reservadas en JavaScript, se convierten en className y htmlFor respectivamente. Todos los atributos de controladores de eventos usan camelCase: onclick se convierte en onClick, onchange se convierte en onChange, y onsubmit se convierte en onSubmit. Estos cambios de nomenclatura son consistentes y predecibles.

Reglas de Conversión de Atributos

Más allá de class y for, varios otros atributos HTML tienen nombres diferentes en JSX. El atributo tabindex se convierte en tabIndex. Los atributos colspan y rowspan se convierten en colSpan y rowSpan. El atributo crossorigin se convierte en crossOrigin. Los atributos booleanos como checked, disabled y readonly funcionan de la misma manera, pero readonly se convierte en readOnly en JSX. Los atributos data (data-*) y los atributos ARIA (aria-*) son las excepciones y permanecen sin cambios en JSX.

Transformación de Estilos en Línea

Los estilos en línea HTML usan una cadena CSS: style="color: red; font-size: 16px; background-color: blue". JSX requiere un objeto JavaScript con nombres de propiedades en camelCase: style={{color: 'red', fontSize: '16px', backgroundColor: 'blue'}}. El conversor maneja esta transformación automáticamente, convirtiendo propiedades CSS con guiones a camelCase y envolviendo los valores en un literal de objeto JavaScript. Los valores numéricos para propiedades basadas en píxeles pueden omitir la unidad 'px' en JSX.

Elementos de Cierre Automático

HTML permite que los elementos vacíos como <img>, <br>, <hr> e <input> se escriban sin una barra de cierre. JSX requiere que todos los elementos se cierren explícitamente, ya sea con una etiqueta de cierre o una barra de cierre automático. El conversor asegura que todos los elementos vacíos se cierren correctamente: <img> se convierte en <img />, <br> se convierte en <br />, y así sucesivamente. Esto es obligatorio en JSX y causará un error de compilación si se omite.

Preguntas Frecuentes

¿Qué es JSX?

JSX es una extensión de sintaxis JavaScript utilizada en React que permite escribir código similar a HTML en archivos JavaScript. Utiliza atributos en camelCase y requiere cerrar todos los elementos.

¿Por qué convertir HTML a JSX?

HTML y JSX tienen diferencias sutiles pero importantes en nombres de atributos, sintaxis de estilos, cierre de elementos y comentarios. La conversión manual es tediosa y propensa a errores.

¿Qué atributos cambian?

class se convierte en className, for en htmlFor, tabindex en tabIndex, los controladores de eventos pasan a camelCase y readonly se convierte en readOnly. Los atributos data y ARIA permanecen sin cambios.

¿Cómo se manejan los estilos?

Los estilos CSS en cadena se convierten en objetos JavaScript con propiedades en camelCase. "font-size: 16px" se convierte en {fontSize: '16px'}.

¿Maneja los comentarios?

Sí. Los comentarios HTML <!-- comentario --> se convierten en comentarios JSX {/* comentario */} envueltos en llaves con sintaxis de comentario de bloque.