Usa el Convertidor de HTML a JSX gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningun servidor.
Por que HTML y JSX no son lo mismo
HTML y JSX se ven casi iguales, y eso es justo lo que confunde al convertir entre ellos. JSX es la sintaxis que usa React para describir interfaces, y toma la forma de las etiquetas HTML pero cambia varias reglas. La diferencia mas famosa es que el atributo class pasa a className, porque class es una palabra reservada en JavaScript. El atributo for de las etiquetas pasa a htmlFor por la misma razon. Si pegas HTML tal cual en un componente React, la pagina no compilara o ignorara atributos en silencio, y los mensajes de error rara vez senalan la causa real.
Las diferencias van mas alla de dos atributos. En HTML puedes dejar muchas etiquetas sin cerrar, como br, img e input, pero JSX exige que todo elemento se cierre, con etiqueta de cierre o con barra final. Los estilos en linea cambian por completo: HTML usa una cadena como “color: red; font-size: 16px”, mientras JSX quiere un objeto como { color: ‘red’, fontSize: ’16px’ }, con las propiedades con guion convertidas a camelCase. Los comentarios HTML desaparecen en JSX salvo que se escriban como {/* comentario */}, y cualquier llave en el texto debe escaparse o React intentara leerla como expresion JavaScript.
Como usar la herramienta
Pega tu HTML en la caja de entrada y pulsa Convertir a JSX. La herramienta recorre tu codigo etiqueta por etiqueta, cambia los atributos a su forma JSX, convierte las cadenas de estilo en objetos style, cierra los elementos vacios y convierte los comentarios en comentarios JSX. Si marcas la opcion de componente, el resultado se envuelve en un componente de funcion pequeno con su export, listo para soltar en un archivo. El boton Copiar pone el resultado en tu portapapeles.
Empieza con un trozo pequeno de codigo en vez de una pagina entera. Convierte una tarjeta, un formulario o una seccion cada vez, y revisa cada resultado en tu editor. Ese habito detecta los pocos casos que ningun convertidor puede decidir por ti, como los manejadores de eventos que llaman a funciones de tu pagina antigua. La herramienta envuelve el codigo de eventos como funcion flecha para que el resultado siga siendo valido, pero debes cambiarlo por un manejador real de tu componente.
El mapa de atributos que debes conocer
Mas alla de className y htmlFor, los cambios comunes incluyen tabindex a tabIndex, readonly a readOnly, maxlength a maxLength, colspan a colSpan, rowspan a rowSpan y datetime a dateTime. Los atributos con guion casi siempre pasan a camelCase: accept-charset pasa a acceptCharset, hreflang a hrefLang y http-equiv a httpEquiv. Dos familias se quedan exactamente igual: los atributos data como data-id, y los atributos aria como aria-label, porque React los pasa sin cambios.
Los atributos booleanos merecen una nota. En HTML, escribir disabled sin valor significa verdadero, y omitirlo significa falso. JSX funciona igual, asi que el convertidor deja los atributos booleanos tal cual. Para los atributos con valor, JSX mantiene la misma forma entre comillas que HTML, por eso la mayor parte de tu codigo sobrevive a la conversion sin cambios. La herramienta solo cambia lo que React exige de verdad.
Estilos, comentarios y texto
Los estilos en linea son la parte que mas gente convierte mal a mano. Una cadena de estilo debe partirse por punto y coma, cada propiedad debe pasar a camelCase, y cada valor debe convertirse en cadena dentro de un objeto. Los valores en pixeles se quedan como cadenas para no cambiar tu significado. Los prefijos de navegador como -webkit-transform pasan a WebkitTransform, siguiendo la regla de React de que los prefijos se escriben con mayuscula salvo ms, que se queda en minuscula.
El contenido de texto pasa casi intacto, con una excepcion: las llaves. En JSX, { abre una expresion JavaScript, asi que una llave literal en tu texto, como un ejemplo de matematicas o un fragmento de plantilla, debe escribirse como {‘{‘} y {‘}’}. El convertidor lo hace por ti. Las entidades HTML como & se dejan igual, porque JSX entiende las mismas entidades que HTML.
Errores que debes evitar
No conviertas una pagina entera de golpe y des por hecho que funciona. Las paginas grandes suelen tener etiquetas script, manejadores en linea y atributos de otros frameworks que no tienen equivalente en JSX, y esos necesitan decisiones humanas. No olvides que los elementos JSX devueltos por un componente deben tener una sola raiz, asi que envuelve los hermanos en un div o un fragmento. Y no dejes el codigo de ejemplo que el convertidor genera para eventos: existe para que el resultado sea valido, no para conservar el comportamiento.
Cuando ayuda mas este convertidor
La herramienta brilla cuando pasas un diseno de una maqueta estatica, una plantilla o un sitio antiguo a un proyecto React. Los disenadores suelen entregar HTML, y los desarrolladores pierden la primera hora cambiando atributos a mano. Un convertidor quita ese paso mecanico y deja las decisiones interesantes, como el estado y las props, para ti. Tambien sirve para aprender: pega un fragmento, estudia que cambio, y las reglas de JSX se aprenden mucho mas rapido que leyendo una lista.
Herramientas relacionadas
- HTML to JSX Converter (English version)
- Formateador de Consultas GraphQL
- Generador de Degradados CSS