Saltar al contenido

HTML a JSX

Pega un fragmento de HTML y conviértelo en JSX listo para un componente de React: className, htmlFor, estilos como objeto y etiquetas cerradas.

Tus datos no salen de tu dispositivo Gratis, sin registro
Cargando herramienta…

Cómo se usa

  1. Pega el HTML (de una plantilla, de Bootstrap, de un diseño…).
  2. Revisa el JSX generado.
  3. Cópialo en tu componente.

Qué cambia

  • class → className y for → htmlFor.
  • style="margin-top: 4px" → style={{ marginTop: '4px' }}.
  • Etiquetas vacías cerradas: <img />, <br />, <input />.
  • Eventos en camelCase: onclick → onClick.
  • Atributos SVG: stroke-width → strokeWidth, viewbox → viewBox.
  • Comentarios HTML → {/* … */}.

Preguntas frecuentes

¿Los eventos funcionan tal cual?
Convertimos onclick="enviar()" en onClick={() => { enviar() }}, pero lo normal en React es pasar una función del componente. Revísalos.
¿Sirve para Preact, Solid o Next.js?
Sí, todos usan JSX. En Preact y Solid también puedes usar class en lugar de className.