Convertidor de HTML a JSX
HTML → JSX// JSX output appears here
¿Por qué Convertir HTML a JSX?
Cuando se migran plantillas HTML existentes a React, o se copian diseños base en componentes, es necesario convertir manualmente los atributos 'class' a 'className', 'for' a 'htmlFor', y los estilos en línea de cadenas de texto a objetos JavaScript. Nuestro convertidor automatiza todas estas transformaciones al instante, gestionando todo el mapeo de atributos de HTML a JSX para que usted pueda enfocarse en la lógica del componente en lugar de perder tiempo en la conversión de sintaxis.
Conversión de Atributos
Convierte class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength y mucho más.
Objetos de Estilos en Línea
Transforma style="color: red;" en style={{color: 'red'}} — notación de objeto JS válida para React.
Etiquetas de Autocierre
Añade barra oblicua de cierre a elementos vacíos: <br> se convierte en <br />, <input> en <input />.
Cómo Convertir HTML a JSX
Pegar HTML
Pegue su plantilla HTML, exportación de Figma o cualquier fragmento de HTML en el panel izquierdo.
Conversión Automática
El convertidor transforma al instante todos los atributos, estilos y elementos vacíos en sintaxis JSX.
Copiar JSX
Copie el JSX convertido y péguelo en el bloque render/return del componente de React.
Casos de Uso de HTML a JSX
Migración a React
Migre páginas web o plantillas HTML existentes a componentes de React sin necesidad de convertir atributos manualmente.
De Bootstrap a React
Convierta componentes HTML de Bootstrap a JSX para utilizarlos con react-bootstrap o styled components.
Plantillas de Correo Electrónico
Convierta plantillas HTML para correos electrónicos a JSX para renderizarlas con React Email o bibliotecas similares.
CMS a React
Convierta el HTML de las plantillas de WordPress o un CMS tradicional a la estructura de un componente en React.
Consejos para HTML a JSX
✓ class → className es Crucial
class es una palabra reservada en JavaScript. React requiere className para las clases CSS. Olvidar esto causa una advertencia en React y puede provocar comportamientos inesperados.
✓ for → htmlFor en Etiquetas (Labels)
El atributo for en la etiqueta <label> se convierte en htmlFor en JSX. Omitir esto rompe la accesibilidad, ya que los lectores de pantalla dependen de la asociación etiqueta-entrada (label-input).
✓ Actualizar Controladores de Eventos Posteriormente
El onclick='...' en HTML no se convierte directamente a JSX. Reemplace manualmente los controladores de eventos en línea con el patrón onClick={handler} de React después de la conversión.
✓ Los Comentarios HTML Pasan a Ser Comentarios JSX
<!-- comentario --> se convierte en {/* comentario */} en JSX. JSX no permite la sintaxis de comentarios HTML dentro del marcado JSX.
❓ Preguntas Frecuentes
¿Por qué React usa className en lugar de class?
'class' es una palabra reservada en JavaScript (utilizada para las clases de ES6). Dado que JSX es JavaScript, el uso de 'class' crearía un conflicto de sintaxis. React eligió 'className' para evitar ambigüedades con la palabra clave class de JavaScript.
¿Este convertidor gestiona los controladores de eventos de React?
No. Los controladores de eventos HTML como onclick y onsubmit no se convierten automáticamente a onClick y onSubmit de React porque sus valores (cadenas de texto de JavaScript en HTML) necesitan hacer referencia a funciones/estados del componente de React. Estos deben actualizarse manualmente.
¿Cuál es la diferencia entre HTML y JSX?
JSX es una extensión de sintaxis de JavaScript que se parece al HTML pero se compila en llamadas a React.createElement(). Diferencias clave: todos los atributos utilizan camelCase, class es className, for es htmlFor, los elementos vacíos deben cerrarse automáticamente, y las expresiones utilizan {} en lugar de cadenas de texto.
¿Por qué los elementos vacíos deben cerrarse automáticamente en JSX?
Babel analiza el JSX como una sintaxis similar a XML, lo que exige que todos los elementos se cierren de forma correcta. Los elementos vacíos como <br>, <img>, <input> no tienen elementos hijos, por lo que deben cerrarse a sí mismos con /> en lugar de dejar una etiqueta sin cerrar.