Convertidor de HTML a JSX

¿Qué es esta herramienta?

Esta herramienta en línea gratuita convierte HTML estándar en sintaxis JSX válida para usar con React. Es la forma más rápida de refactorizar código HTML existente en componentes listos para aplicaciones modernas de front-end.

Cómo usar

1. Pega o escribe tu HTML en el editor.
2. Haz clic en Convertir para generar código JSX.
3. Descarga, copia o comparte tu JSX convertido al instante.

Inicia sesión con Google o GitHub para guardar tus conversiones y acceder a ellas en cualquier momento.

¿Qué es JSX?

JSX (JavaScript XML) es una extensión de sintaxis para JavaScript utilizada en React para definir componentes de interfaz de usuario de manera declarativa. JSX te permite escribir etiquetas similares a HTML directamente en tu código JavaScript.

A diferencia del HTML tradicional, JSX utiliza reglas especiales (como className en lugar de class) y admite la inserción de expresiones JavaScript dentro de llaves.

Ejemplo básico de JSX:

const element = (
  <h1 className="greeting">
    ¡Hola, mundo!
  </h1>
);
    

Aprende más en la documentación oficial de React.

Ejemplo de HTML vs JSX

HTML

<div>
  <div class="awesome" style="border: 1px solid red">
    <label for="name">Introduce tu nombre: </label>
    <input type="text" id="name" />
  </div>
  <p>Introduce tu HTML aquí</p>
</div>
    

JSX Convertido

<div>
  <div className="awesome" style={{ border: '1px solid red' }}>
    <label htmlFor="name">Introduce tu nombre: </label>
    <input type="text" id="name" />
  </div>
  <p>Introduce tu HTML aquí</p>
</div>