Conversor de HTML a JSX: gratis y en tu navegador | We.Inc
Pega HTML y obtén JSX válido: class a className, for a htmlFor, cadenas de estilo a objetos, etiquetas vacías cerradas, comentarios, eventos y un componente envolvente. No se sube nada.
Conversor de HTML a JSX
Pega HTML a la izquierda y este conversor escribe JSX a la derecha mientras escribes: class pasa a ser className, for pasa a ser htmlFor, los estilos en línea se convierten en objetos camelCase, las etiquetas vacías como img e input se cierran solas, los comentarios pasan a ir entre llaves y varios elementos de nivel superior se envuelven en un fragment. La conversión se ejecuta solo en tu navegador.
Qué cambia entre HTML y JSX
HTML
JSX
Por qué
class="box"
className="box"
class es una palabra reservada en JavaScript
for="email"
htmlFor="email"
for también es una palabra reservada
style="font-weight: bold"
style={{ fontWeight: 'bold' }}
style recibe un objeto con claves en camelCase
<img src="a.png">
<img src="a.png" />
Todas las etiquetas deben cerrarse
onclick="go()"
onClick={go}
Los eventos van en camelCase y reciben una función
data-id="7", aria-label="Close"
data- y aria- conservan sus guiones
Copiar un fragmento de una plantilla, un editor de emails o un set de iconos en un componente de React suele fallar por una docena de pequeñas diferencias. Esta herramienta aplica las reglas que React documenta para JSX, explica cada cambio que hace y puede envolver el resultado en un componente con nombre listo para pegar.
Pega o escribe HTML en el cuadro de entrada. La salida JSX se actualiza con cada pulsación.
Si quieres, escribe un nombre de componente para envolver la salida en un componente de función exportado.
Lee la lista de cambios bajo la salida; cada nota explica una reescritura que hizo el conversor.
Copia el JSX en el archivo de tu componente y sustituye los handlers de eventos vacíos por funciones reales.
El código onclick en línea no puede ejecutarse como JSX. El conversor lo conserva como comentario dentro de un handler vacío para que puedas moverlo a una función.
Los campos de formulario con value pasan a defaultValue, lo que los mantiene editables. Cambia a value más onChange si quieres un input controlado.
Los iconos SVG suelen llevar stroke-width y fill-rule; se renombran automáticamente a strokeWidth y fillRule.
React añade px a los números de un objeto de estilo, pero este conversor mantiene cada valor como la cadena original para ser exacto.
Preguntas frecuentes
¿Por qué React usa className en lugar de class?
JSX se compila a JavaScript, donde class es una palabra reservada. Por eso React usa el nombre className para la prop. El mismo razonamiento convierte el atributo for de label en htmlFor.
¿Cambian los atributos data- y aria- en JSX?
No. La documentación de React indica que, por razones históricas, los atributos aria-* y data-* se escriben exactamente como en HTML, con guiones. La mayoría de los demás atributos de varias palabras pasan a camelCase.
¿Cómo escribo estilos en línea en JSX?
Pasa un objeto a style con nombres de propiedad en camelCase, por ejemplo style={{ fontWeight: 'bold', marginTop: 8 }}. React añade px a los números simples en la mayoría de propiedades. Las llaves exteriores abren una expresión de JavaScript y las interiores son el objeto.
¿Por qué me sale un error sobre varios elementos raíz?
Un componente solo puede devolver un elemento. Envuelve los hermanos en un elemento padre o en un fragment vacío, escrito <> y </>. El conversor lo hace por ti cuando el HTML tiene más de un nodo de nivel superior.
¿Se envía mi HTML a algún sitio?
No. La conversión es JavaScript puro que se ejecuta en esta página. Nada de lo que pegas se sube ni se guarda.
Las tres reglas detrás de cada conversión
La propia introducción de React a JSX resume las diferencias en tres reglas: devolver un único elemento raíz, cerrar todas las etiquetas y escribir la mayoría de los nombres de atributo en camelCase. Casi todo lo que hace el conversor es una de esas tres.
Las excepciones son las palabras reservadas y las familias con guiones. class y for se renombran porque JavaScript las reserva, mientras que los atributos aria- y data- conservan su escritura de HTML.
Lo que todavía necesita una persona
Los scripts en línea y las cadenas de handlers de eventos son código, no marcado, así que hay que reescribirlos como funciones en tu componente. El conversor los señala en lugar de adivinar.
Los bloques repetidos como los elementos de una lista suelen quedar mejor como un array mapeado a JSX. Tras convertir, busca hermanos copiados y pegados y conviértelos en datos más una llamada a map.
Atributos que renombra el conversor
Atributo HTML a prop JSX
HTML
JSX
className
htmlFor
tabIndex
readOnly
maxLength
colspan / rowspan
colSpan / rowSpan
autoComplete
srcSet
crossOrigin
value en input
defaultValue
checked en input
defaultChecked
strokeWidth
fillRule
viewBox
Los handlers de eventos en línea como onclick se convirtieron en handlers vacíos en camelCase; mueve el código a una función.
value en un campo de formulario pasó a defaultValue, así el campo sigue siendo editable sin un handler onChange.
checked pasó a defaultChecked por el mismo motivo.
Se eliminó selected en un option; define defaultValue en el select en su lugar.
Se eliminó el doctype; JSX no tiene doctype.
La entrada tenía más de un elemento de nivel superior, así que se envolvió en un fragment.
Conversor
El ejemplo de abajo se convierte en vivo; sustitúyelo por tu propio HTML.
Nombre del componente (opcional)
Copiar JSX
Cambios realizados
Solo hicieron falta los renombrados estándar.
El contenido de <{tag}> se envolvió en un template literal para que las llaves se mantengan literales.