Saltar al contenido
uencoder
Desarrollo Web Principiante 2 pasos

HTML a JSX y formato JS

La conversión HTML a JSX cambia class a className y ajusta atributos. El formateo JS asegura un estilo consistente.

Problema resuelto

Convertir HTML a JSX y luego formatear la salida JavaScript.

Entrada → Salida

De HTML a JSX entrada → Formateador JS salida , total 2 pasos.

Tiempo de ejecución

1–2 min · totalmente en el navegador local.

Antes de empezar

  • Entrada HTML

Pipeline

  1. 1 De HTML a JSX html-to-jsx

    Convierte HTML a JSX reescribiendo class= como className= y for= como htmlFor=. La reescritura se basa en regex y no distingue cadenas: las apariciones de class= dentro de valores de atributo también se reescriben.

  2. 2 Formateador JS js-format

    Beautify or minify JavaScript source code online. Text-only formatting, no execution. Gratis, privado y 100% del lado del cliente.

Abrir en cadena de herramientas

Se ejecuta localmente en el navegador. La receta solo define el pipeline — sus datos nunca abandonan esta pestaña.

▶Ejecutar este flujo

Introduce tu entrada abajo y pulsa Ejecutar. Todo el procesamiento ocurre localmente en tu navegador — nada se sube.

Progreso de la canalización

  1. De HTML a JSXhtml-to-jsx
  2. Formateador JSjs-format

Entrada de ejemplo

<div class="test">Hello</div>

Salida esperada

<div className="test">Hello</div>

Este par entrada-salida se ejecuta con herramientas reales en construcción (tests/unit/recipes.test.ts) — la salida esperada está verificada, no es ilustrativa.

Flujos relacionados

También podría necesitar

Flujos que comparten herramientas o temas con esta receta.

Herramientas utilizadas