Softonic

Convertidor de HTML a JSX

Paso 1 / 2

Convierte: class a className, for a htmlFor, estilos inline a objetos JSX, autocierra etiquetas vacías y elimina comentarios HTML.

Convertir a JSX

JSX se parece a HTML hasta que no lo es, class es className, for es htmlFor, style es un objeto, no una cadena, y cada etiqueta vacía debe cerrarse por sí misma. Pega HTML y este convertidor produce JSX que compila a la primera, para que puedas llevar una página de marketing a un componente de React sin pasar los próximos diez minutos persiguiendo errores de compilador.

Cómo convertir HTML a JSX

  1. 1

    Pega HTML

    Un marcado de un componente, o un fragmento de página completo.

  2. 2

    Convierte

    La herramienta renombra atributos como `class`, `for` y `readonly` a su grafía JSX y convierte los estilos en línea en objetos.

  3. 3

    Revisa el JSX

    La salida está lista para pegar en un archivo `.jsx` o `.tsx`.

  4. 4

    Copia y pega

    El código utiliza expresiones de una sola línea, por lo que se adapta bien dentro de un componente existente.

Cada diferencia de HTML a JSX que importa

JSX no es HTML. Es una expresión de JavaScript que se compila en llamadas a React.createElement(), por lo que los nombres de los atributos siguen las convenciones de JavaScript.

El convertidor aplica automáticamente los cambios de nombre más habituales. La lista completa de abajo es la referencia que necesitas cuando escribes JSX a mano.

Renombramientos de atributos

HTML JSX Notas
class className class está reservado en JS
for htmlFor for está reservado
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Espacios de nombres con dos puntos aplanados
aria-label aria-label ARIA mantiene guiones
data-* data-* Los atributos de datos mantienen guiones

Atributo de estilo

HTML: style="color: red; padding: 10px"

JSX: style={{ color: 'red', padding: 10 }}

Los valores numéricos sin unidades se convierten en píxeles; mantén cadenas para porcentajes y valores sin unidad como flex.

Elementos vacíos de cierre automático

HTML tolera <br> y <input> sin una etiqueta de cierre. JSX requiere <br /> y <input />, cada elemento debe cerrarse explícitamente.

Comentarios

Los comentarios HTML (<!-- -->) no son válidos en los cuerpos de JSX. Este convertidor los elimina; si necesitas conservar una nota, escríbela tú como {/* Comentario de bloque de JavaScript */}.

Atributos booleanos

HTML: <input checked> (o <input checked="checked">)

JSX: <input checked={true} /> o simplemente <input checked />. Nunca pases una cadena “true”.

Salidas de escape

  • Fragmentos de HTML no confiables pueden ser renderizados con dangerouslySetInnerHTML={{ __html: ... }}, intencionalmente feo para desincentivar su uso.
  • Los atributos data-* personalizados permanecen tal cual; los atributos no estándar se pasan, pero pueden activar advertencias de React en modo de desarrollo.

Preguntas frecuentes

Los atributos SVG como stroke-width deben escribirse en camelCase (strokeWidth) en JSX y cada etiqueta debe cerrarse por sí misma. El convertidor autocierra las etiquetas vacías dentro del SVG y convierte a camelCase los nombres de propiedad de las cadenas de estilo, pero no renombra los atributos SVG; cambia stroke-width por strokeWidth a mano. Para íconos de un solo uso, el enfoque más limpio es guardar el ícono como archivo SVG e importarlo como componente mediante svgr.

Sí, tanto JSX como TSX usan className. La única excepción es dentro de dangerouslySetInnerHTML, donde la cadena HTML sin procesar mantiene class porque se inserta tal cual en el DOM.

No. La salida es solo el fragmento JSX, sin envoltorio export default function ni anotaciones de tipo. Pégalo en tu archivo .jsx o .tsx y añade props, tipos y el envoltorio tú mismo. class se sigue convirtiendo en className, que es exactamente lo que TSX espera.

Se pasan sin cambios. El convertidor no renombra los controladores de eventos, así que cambia onclick por onClick y sustituye el valor de cadena por una función real, por ejemplo onClick={() => doThing()}. Tendrás que definir doThing en el ámbito de tu componente.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.

Generador de EditorConfig

Genera un archivo .editorconfig con tu estilo y tamaño de indentación, fin de línea, charset y reglas de espacios para un formato consistente en IDEs y editores.

Herramienta disponible en otros idiomas