Développement Web Débutant 2 étapes

HTML vers JSX et format JS

La conversion HTML vers JSX change class en className et ajuste les attributs. Le formatage JS assure un style cohérent.

Problème résolu

Convertir HTML en JSX puis formater la sortie JavaScript.

Entrée → Sortie

D'HTML à JSX entrée → Formateur JS sortie , total 2 étapes.

Durée d’exécution

1–2 min · entièrement en local dans le navigateur.

Avant de commencer

Entrée HTML

Pipeline

1 D'HTML à JSX html-to-jsx

Convertit le HTML en JSX en réécrivant class= en className= et for= en htmlFor=. La réécriture est basée sur des regex et ne reconnaît pas les chaînes : les occurrences de class= dans les valeurs d’attribut sont aussi réécrites.
2 Formateur JS js-format

Beautify or minify JavaScript source code online. Text-only formatting, no execution. Gratuit, privé et 100% côté client.

Ouvrir dans la chaîne d’outils

S’exécute localement dans le navigateur. La recette ne définit que le pipeline — vos entrées ne quittent jamais cet onglet.

▶Exécuter ce flux

Saisissez votre entrée ci-dessous et cliquez sur Exécuter. Tout le traitement se fait localement dans votre navigateur — rien n'est envoyé.

Données d'entrée

Progression du pipeline

D'HTML à JSXhtml-to-jsx
Formateur JSjs-format

Exemple d’entrée

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

Sortie attendue

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

Cette paire entrée-sortie est exécutée avec de vrais outils à la construction (tests/unit/recipes.test.ts) — la sortie attendue est vérifiée, non illustrative.