Convierte HTML a React JSX: className, htmlFor, etiquetas de cierre automático y objetos de estilo
Un conversor de HTML a JSX reescribe HTML plano en la sintaxis JSX que usan los componentes de React, arreglando las diferencias que de otro modo harían el marcado inválido en un archivo de React. El JSX se parece casi idéntico al HTML, pero un puñado de atributos y reglas son distintos porque el JSX en realidad es JavaScript: class se vuelve className, for se vuelve htmlFor, cada etiqueta debe cerrarse explícitamente, y los estilos en línea se escriben como un objeto JavaScript en vez de una cadena. Pegar HTML real y recibir JSX válido ahorra el tedioso y propenso a errores trabajo de convertirlo a mano.
Esto es justo la tarea que surge constantemente al traer un diseño, una plantilla de email o un fragmento de cualquier sitio de la web a un proyecto React. Hacerlo a mano implica buscar cada atributo class, autocerrar cada <img> y <br>, y reformar style="color:red" en style={{ color: 'red' }} — fácil de pasar por alto en un bloque grande y frustrante de depurar cuando falla el build. Esta herramienta aplica todas esas transformaciones en tu navegador, así que obtienes JSX listo para pegar sin enviar tu marcado a ningún sitio.
Porque el JSX se compila a JavaScript, y class es una palabra reservada en JavaScript. React usa className en su lugar para fijar la clase del elemento. De forma similar, for (reservada en elementos label) se vuelve htmlFor. El conversor los renombra automáticamente para que el JSX sea válido.
En HTML un estilo es una cadena como "color: red; font-size: 14px". En JSX debe ser un objeto JavaScript con propiedades en camelCase: style={{ color: 'red', fontSize: '14px' }}. El conversor reforma la cadena en esta forma de objeto, incluyendo convertir los nombres de propiedad con guion.
El JSX requiere que cada elemento se cierre explícitamente, así que los elementos vacíos como <img>, <br> e <input> se vuelven autocerrados (<img />). El HTML es permisivo con esto, pero el JSX no compilará de otro modo, por eso el conversor añade las barras de cierre.
Los comentarios JSX usan una sintaxis distinta ({/* ... */}) que los comentarios HTML (<!-- ... -->), y unos pocos atributos más también difieren. Un buen conversor traduce los casos comunes; para marcado inusual, revisa la salida, ya que algunos casos límite pueden necesitar un toque manual.
Generador de UUID · Conversor de timestamps · Codificador Base64 · Decodificador Base64 · Generador de hash · Conversor de colores