Convertir HTML a JSX (React)

Cómo funciona

Pasar HTML ya hecho a un proyecto de React obliga a cambiar cada class por className, cada for por htmlFor y reescribir las cadenas style como objetos; si se olvida uno, la consola se llena de advertencias. Pegue el HTML en el panel izquierdo y el JSX aparece a la derecha. Por ejemplo, <p style="color: #7a3; font-size: 14px"> se convierte en <p style={{ color: '#7a3', fontSize: '14px' }}>, y <br> se cierra solo como <br />. Los nombres con guion como stroke-width en SVG pasan a strokeWidth; los que empiezan con data- o aria- quedan con guion, porque React los espera así. Los atributos de evento como onclick pasan a onClick y su código queda dentro de una función. La línea de resultado indica cuántas etiquetas se procesaron y cuántos nombres de atributo cambiaron.

Esta herramienta también se busca como convertir html a jsx, html a jsx, html to jsx, html a react, convertidor html jsx.

¿Qué es JSX?

JSX es una extensión de JavaScript que permite a los componentes de React describir su interfaz con una escritura parecida al HTML. El navegador no lee JSX directamente: Babel o el compilador de TypeScript lo convierten en llamadas a React.createElement. Se parece al HTML, pero sigue las reglas de JavaScript: nombres de propiedad del DOM, etiquetas siempre cerradas y llaves para las expresiones.

¿Qué es className y htmlFor?

class y for son palabras reservadas en JavaScript: una declara una clase y la otra abre un bucle. Como JSX es JavaScript, React pide estos dos atributos con su nombre de propiedad DOM: className y htmlFor. Si class queda en el código pegado, React 17 y posteriores muestran una advertencia y aun así lo aplican; las versiones antiguas y algunas herramientas pierden la clase sin avisar.

¿Cuál es la diferencia entre HTML y JSX?

HTML es un lenguaje de marcado que el navegador lee con tolerancia: cierra las etiquetas que faltan y no distingue mayúsculas en los nombres de atributo. JSX es una sintaxis escrita dentro de JavaScript y pasa por un compilador: cada etiqueta se cierra, los nombres de atributo van en camelCase, style es un objeto y no una cadena, y entre llaves se ejecuta JavaScript. Se parecen, pero JSX sigue las reglas de JavaScript.

¿Qué conversiones se aplican?

La lista reúne las reglas de la herramienta. Siguen los nombres de atributo DOM de React; un atributo que no esté en la lista se copia igual.

• class → className, for → htmlFor
• tabindex, readonly, maxlength, colspan en camelCase: tabIndex, readOnly
• style="a-b: c" → style={{ aB: 'c' }}; una propiedad -webkit- pasa a WebkitX
• Las etiquetas vacías como br, img, input, hr y los elementos sin contenido se cierran solos
• Los comentarios pasan a {/* … */}; se quita el doctype
• { } y > en el texto rompen el JSX, así que se escapan
• Los espacios y saltos de línea dentro de pre se conservan como cadena

Campos de formulario y eventos

En React, un input con atributo value queda de solo lectura: nadie puede escribir y la consola muestra una advertencia. Por eso la herramienta cambia value por defaultValue y checked por defaultChecked en input y select; el texto de un textarea también pasa a defaultValue. Si va a controlar el campo con estado (state), cámbielos después a value con onChange.

En HTML, onclick="enviar()" es una cadena; React espera una función. La herramienta pone el código dentro de una función flecha: onClick={(event) => { enviar(); }}. Dentro, this ya no apunta al elemento; si su código usa this, reemplácelo por event.currentTarget.

Preguntas frecuentes

¿Por qué el resultado a veces empieza con <>?

Un componente de React debe devolver un solo elemento raíz. Si elige la salida de componente y su HTML tiene varios elementos en el nivel superior, la herramienta los envuelve en <> … </>, un Fragment de React. Un Fragment no agrega ninguna etiqueta a la página.

¿Por qué las { } de mi texto quedaron como {'{'}?

En JSX una llave abre una expresión de JavaScript; una llave suelta en el texto da error de compilación. La herramienta la escribe como cadena y la página sigue mostrando { y }. Por la misma razón, > pasa a &gt;.

¿Puedo usar el resultado en un archivo TypeScript (TSX)?

Sí. El JSX generado también es válido en un archivo TSX. Según su tsconfig, quizá tenga que darle un tipo al parámetro event de los manejadores de evento.

¿Mi código se sube a algún servidor?

No. El analizador de HTML y la escritura del JSX funcionan en su navegador; el código que pega no sale de esta página.