Desarrollador / React

Convertidor de HTML a JSX

Convierte HTML en JSX para React: class a className, estilos en línea a objetos, elementos vacíos cerrados, llaves escapadas y comentarios, con la opción de envolverlo en un componente.

Convertidor de HTML a JSX: El HTML se analiza como elementos, por lo que los atributos se renombran para React (class, for, tabindex, readonly, maxlength y otros), los estilos se convierten en objetos con claves camelCase y los elementos vacíos, como <br> e <img>, se cierran. Las llaves y los signos «menor que» y «mayor que» del texto se escapan, los comentarios se convierten en {/* */} y los valores de los formularios pasan a ser defaultValue y defaultChecked para que los campos sigan siendo editables. La salida de las páginas de prueba compila como TSX. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría: Herramientas de desarrollo
Se ejecuta: En tu navegador
Coste: Gratis · sin registro
Disponibilidad: Lista para usar

HTML a JSXProcesamiento local

Funciona por completo en tu navegador

HTML

<div class="card" style="margin-top: 8px; background-color: #fff">
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required>
  <button onclick="send()" tabindex="0">Send</button>
  <!-- footer -->
  <p>Price: {price} &gt; 0</p>
</div>

Envolver en un componente

Se eliminó onclick="send()" de <button>: escríbelo como una función, por ejemplo, onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Los atributos se renombran para React (class a className, for a htmlFor, tabindex a tabIndex), los estilos se convierten en objetos, los elementos vacíos y void se cierran, los comentarios se convierten en {/* */} y los valores de los formularios pasan a ser defaultValue para que los campos sigan siendo editables.

Después de convertir

Convierte el marcado repetido en componentes que reciban props, sustituye el texto escrito directamente por variables entre llaves y mueve los estilos en línea a clases CSS o a tu sistema de estilos, ya que los objetos de estilo se reconstruyen en cada renderizado.

Para los iconos SVG, SVG a JSX crea un componente que transmite las props; para eliminar primero los comentarios y los espacios en blanco adicionales, usa el minificador HTML.

Diferencias que suelen causar problemas

JSX necesita un único elemento raíz, por lo que varios elementos se envuelven en un fragmento (<>…</>). Todos los elementos deben cerrarse, los nombres de los atributos usan camelCase y el texto que contiene { o } debe escribirse como {"{"}, algo que el convertidor hace automáticamente.

Cómo se usa

Pega HTML, desde un solo elemento hasta una sección completa de una página.
Si quieres, envuelve el resultado en un componente con nombre.
Copia el JSX y reescribe los controladores de eventos en línea que aparezcan en las advertencias.

Privacidad y límites

El HTML se convierte en tu navegador y nunca se sube.

Herramientas relacionadas

Preguntas frecuentes

¿Por qué se eliminan los atributos onclick?

En HTML son cadenas de código; en React deben ser funciones. El convertidor muestra cada uno para que puedas reescribirlo, por ejemplo, onclick="save()" como onClick={save}.

¿Por qué value se convierte en defaultValue?

En React, un atributo value hace que el campo sea controlado, por lo que no se puede escribir en él sin un controlador onChange; defaultValue establece el texto inicial y permite seguir editándolo.

¿Admite SVG?

Sí: los atributos SVG, como stroke-width, se convierten en strokeWidth. Para convertir un archivo SVG completo en un componente, la herramienta SVG a JSX añade props.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta