¿Por qué convertir HTML a JSX?
JSX es el dialecto React de HTML: casi idéntico, pero con unas pocas diferencias fáciles de pasar por alto. `class` debe ser `className` (porque `class` es palabra clave JavaScript). `for` en `<label for="x">` se convierte en `htmlFor`. Los comentarios `<!-- ... -->` no funcionan, necesitas `{/* ... */}`. El estilo inline debe ser un objeto JavaScript: `style={{ color: 'red' }}` con claves camelCase.
Pega tu HTML aquí (de un export de Figma, una librería de iconos, un snippet de la web) y obtén JSX listo para soltar en un componente React. El conversor gestiona atributos SVG (`stroke-width` a `strokeWidth`), self-closing para `<br>` / `<img>` / `<input>`, atributos booleanos y entidades HTML.
Todo corre en tu navegador: el código nunca sale de tu máquina.
Cómo usar
- Pega HTML en el panel izquierdo (un fragmento de Figma, un icono SVG, una parte de una página que quieras refactorizar).
- A la derecha ves JSX con atributos y estilos reescritos.
- Activa "Envolver en componente" para obtener un `export default function Component() { return (...) }` listo.
- Cambia a modo TypeScript para añadir un valor de retorno tipado.
- Pulsa "Copiar" y pégalo en tu fichero `.tsx`.
Cuándo ayuda
Situaciones reales en las que este conversor ahorra tiempo:
- Migrar HTML legacy a React. Tienes un proyecto antiguo con ficheros `.html` o un template Bootstrap y quieres reescribirlo como React/Next.js. Pega cada sección, obtén un componente funcional.
- Iconos de Figma / Iconify. Un diseñador exporta un icono SVG y lo pegas para obtener un componente React.
- Snippets de CodePen / StackOverflow. Alguien publicó una solución HTML vainilla: pégala, obtén JSX.
- Assets de marketing. Pega una hero section o una caja CTA y conviértela en componente.
- Plantillas de email. HTML de email con `style="..."` literal se convierte en `style={{...}}`: útil si previsualizas plantillas dentro de una app React.
- Refactorización. Tu equipo pasó a React y tiene 100 product cards antiguas en HTML plano que migrar.
- Aprender. Estudiar React y querer ver "cómo se vería esto en JSX" rápido.
Para convertir SVG a un componente React (un flujo más avanzado, con props size/color) mira SVG a componente React. Para gradientes CSS mira generador de gradientes.