Convertidor de HTML a JSX
Pega HTML y obtén JSX limpio que puedes poner en un componente de React. Se renombran los atributos, los estilos en línea se convierten en objetos de estilo, las etiquetas vacías se autocierran, se convierten los comentarios y los manejadores de eventos, y los atributos SVG pasan a camelCase.
Última actualización:
Cómo usar Convertidor de HTML a JSX
- Pega tu HTML en el cuadro de la izquierda o carga el ejemplo. También sirve una página completa: se convierte el contenido del body.
- Elige el resultado: JSX simple o un componente de función de React completo con el nombre que prefieras.
- Configura las opciones de comentarios, manejadores de eventos, campos de formulario no controlados y autocierre de etiquetas vacías.
- Revisa el JSX a la derecha y la lista de cambios debajo. Se actualiza mientras escribes.
- Copia o descarga el resultado como archivo .jsx.
HTML frente a JSX: qué se convierte
| HTML | JSX | Por qué |
|---|---|---|
class="btn" | className="btn" | class es una palabra reservada en JavaScript |
<label for="email"> | <label htmlFor="email"> | for es una palabra reservada |
tabindex="0" maxlength="80" | tabIndex="0" maxLength="80" | Las propiedades del DOM van en camelCase |
style="font-size: 12px; z-index: 10" | style={{ fontSize: '12px', zIndex: 10 }} | style recibe un objeto de JavaScript |
<br>, <img src="a.png"> | <br />, <img src="a.png" /> | Todas las etiquetas JSX deben cerrarse |
<!-- nota --> | {/* nota */} | JSX no tiene comentarios HTML |
onclick="save()" | onClick={() => save()} | Los manejadores son funciones, no strings |
stroke-width="2" (SVG) | strokeWidth="2" | React usa atributos SVG en camelCase |
<input value="x"> | <input defaultValue="x" /> | Mantiene el campo editable sin estado |
Hola {name} (texto) | Hola {'{'}name{'}'} | Las llaves inician expresiones de JavaScript en JSX |
| Elementos hermanos | <>…</> | Un componente devuelve una sola raíz |
Atributos que no cambian
Los atributos data-* y aria-* conservan en React sus nombres en minúsculas con guiones, así que aria-label y data-id se copian sin cambios. La mayoría de los demás atributos ya son una sola palabra (id, href, src, alt, type, name) y no necesitan cambios. Los atributos booleanos escritos sin valor, como disabled o required, pasan a ser la forma abreviada de JSX para ={true}.
Después de convertir: consejos
- Saca la lógica del marcado. Los manejadores de eventos convertidos llaman a las mismas funciones globales que antes. En un componente real, defínelas dentro del componente o pásalas como props.
- Inputs controlados. Si necesitas el valor en el estado, sustituye
defaultValueporvalue={email}y añadeonChange={e => setEmail(e.target.value)}. - Espacios en blanco. JSX elimina los saltos de línea entre etiquetas. Donde importa un espacio en línea entre elementos, el convertidor inserta
{' '}para que el texto renderizado coincida con el HTML. - TypeScript. El resultado también es TSX válido; cambia la extensión del archivo a
.tsxy añade tipos para las props si tu componente las recibe.
Preguntas frecuentes
¿Por qué no puedo pegar HTML directamente en JSX?
JSX se parece a HTML pero se compila a JavaScript, así que cambian algunas reglas: class y for son palabras reservadas (usa className y htmlFor), el atributo style recibe un objeto, todas las etiquetas deben cerrarse (<br />), los nombres de atributos van en camelCase (tabIndex, onClick) y un componente solo puede devolver un elemento raíz, así que los hermanos necesitan un fragmento <>…</>.
¿Cómo se convierten los estilos en línea?
El string de estilo se divide en declaraciones y cada propiedad pasa a camelCase: background-color se convierte en backgroundColor y los prefijos de proveedor como -webkit-transition pasan a WebkitTransition. Los números puros siguen siendo números (zIndex: 10, opacity: 0.5); los valores con unidades siguen siendo strings ('12px'). Las propiedades personalizadas de CSS conservan su nombre: '--gap': '8px'.
¿Qué pasa con onclick y otros manejadores de eventos en línea?
Se renombran a los eventos en camelCase de React (onclick → onClick, ondblclick → onDoubleClick) y el código se envuelve en una función flecha, por ejemplo onClick={() => { save(); }}. Si el código usa event, pasa a ser (event) => …. También puedes elegir eliminarlos. En React lo normal sería mover esa lógica a una función dentro del componente.
¿Por qué value se convierte en defaultValue?
En React, un input con la prop value pero sin manejador onChange es de solo lectura, y React avisa de ello. defaultValue y defaultChecked fijan el valor inicial y dejan que el usuario escriba, igual que se comportaba el HTML estático. Desactiva la opción si piensas añadir tú mismo el estado y onChange.
¿Funciona con SVG?
Sí. Los atributos SVG como stroke-width, fill-rule, clip-path y stop-color se convierten a camelCase, xlink:href pasa a ser xlinkHref y los nombres de elementos como linearGradient conservan sus mayúsculas. Los atributos que React espera tal cual, como viewBox, se mantienen.
¿Se envía el HTML a un servidor?
No. El convertidor usa el propio analizador de HTML de tu navegador y funciona por completo en tu dispositivo. No se ejecuta ningún script de tu HTML.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.