Convertisseur HTML vers JSX pour React
Convertit du balisage HTML en JSX React avec htmltojsx : class devient className, for devient htmlFor, les styles inline deviennent des objets style et les balises vides sont auto-fermantes. Plusieurs éléments racines sont enveloppés dans un fragment.
Transférer un template HTML statique ou un formulaire dans un composant React.
HTML
JSX
Quand l’utiliser
- Transférer un template HTML statique ou un formulaire dans un composant React.
- Convertir un extrait de balisage issu d’une documentation ou d’un kit d’UI en JSX à coller dans un composant.
Mode d’emploi
- Collez du HTML dans l’éditeur de gauche.
- Si besoin, ouvrez les paramètres et activez Create function component pour envelopper la sortie dans export const Foo = () => (...).
- Copiez le JSX, renommez le composant et remplacez les attributs d’événement inline par des handlers React.
HTML
<label class="field" for="email">Email</label> <input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled> <!-- hint -->
JSX
<>
<label className="field" htmlFor="email">
Email
</label>
<input
id="email"
type="email"
tabIndex={1}
style={{ marginTop: 4, fontSize: 14 }}
disabled=""
/>
{/* hint */}
</>Détails et limites
La conversion s’exécute dans le navigateur et la sortie est formatée avec Prettier (sans points-virgules).
Les attributs d’événement inline comme onclick="go()" sont conservés tels quels, sans conversion en handlers onClick.
Les attributs booléens reçoivent une chaîne vide, par exemple disabled="". React traite "" comme false : remplacez-le par disabled ou disabled={true}.
Si l’entrée est du SVG, la page affiche une indication renvoyant vers SVG vers JSX.
FAQ
Comment les styles inline sont-ils convertis ?
La chaîne style est analysée en un objet aux clés camelCase, et les valeurs en pixels deviennent des nombres : style="margin-top: 4px" devient style={{ marginTop: 4 }}.
Que deviennent les commentaires HTML ?
Ils sont conservés comme commentaires JSX, par exemple <!-- hint --> devient {/* hint */}.
Puis-je nommer le composant généré ?
Non. L’option de fonction utilise toujours le nom Foo. Renommez-le après la copie.