Convertir HTML a JSX
Pega el HTML y copia el JSX.
Cómo usarHTML a React (JSX)
Disponible en: 
Convertir HTML a JSX: para qué sirve
Pega el HTML y la conversión se hace al instante: class y for pasan a className y htmlFor, atributos como tabindex, maxlength y autocomplete van a camelCase, style pasa a objeto, los atributos booleanos quedan sin valor, las etiquetas vacías reciben la barra y los comentarios pasan a {/* */}. Los eventos en línea pasan a funciones con el código anterior en comentario.
Los atributos data- y aria- quedan como están, y los atributos de SVG también se convierten. Marca generar componente para recibir la función lista con el nombre elegido.
Cómo usar
- Pega el HTML.
- Marca generar componente si quieres la función lista.
- Copia el JSX a tu proyecto React.
Cuándo usar
- Llevar plantillas HTML a proyectos React y Next.js.
- Convertir íconos SVG en componentes.
- Adaptar fragmentos copiados de otros sitios.
Preguntas frecuentes
¿Qué cambia del HTML al JSX?
class pasa a className y for pasa a htmlFor; los atributos con guion o de eventos quedan en camelCase (tabindex pasa a tabIndex, onclick pasa a onClick); style pasa a un objeto ({{ marginTop: '8px' }}); las etiquetas sin cierre (img, br, input) reciben la barra; los comentarios pasan a {/* */}.
¿Cambian los atributos data- y aria-?
No. data-* y aria-* siguen iguales en JSX, con guion.
¿Y el JavaScript dentro de onclick?
El contenido de los eventos en línea se convierte en comentario, porque en React el evento recibe una función. Reescribe la acción como una función del componente.
¿Funciona con SVG?
Sí. Atributos de SVG como stroke-width, fill-rule y xlink:href pasan a strokeWidth, fillRule y xlinkHref.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.