Convertisseur HTML vers JSX
HTML → JSX// JSX output appears here
Pourquoi convertir du HTML en JSX ?
Lors de la migration de templates HTML existants vers React, ou de la copie de maquettes dans des composants, vous devez manuellement convertir class en className, for en htmlFor, et les styles inline de chaînes en objets JavaScript. Notre convertisseur automatise l'intégralité de ces transformations instantanément, gérant la totalité du mapping d'attributs HTML→JSX afin que vous puissiez vous concentrer sur la logique du composant plutôt que sur la conversion de syntaxe.
Conversion d'attributs
Convertit class→className, for→htmlFor, tabindex→tabIndex, maxlength→maxLength et bien d'autres
Objets de style inline
Transforme style="color: red;" en style={{color: 'red'}} — notation d'objet JS valide pour React
Balises auto-fermantes
Ajoute la barre de fermeture aux éléments void : <br> devient <br />, <input> devient <input />
Comment convertir du HTML en JSX
Collez le HTML
Collez votre template HTML, votre export Figma ou tout extrait HTML dans le panneau gauche
Conversion automatique
Le convertisseur transforme instantanément tous les attributs, styles et éléments void en syntaxe JSX
Copiez le JSX
Copiez le JSX converti et collez-le dans le bloc render/return de votre composant React
Cas d'utilisation du convertisseur HTML vers JSX
Migration vers React
Migrez des pages ou templates HTML existants vers des composants React sans conversion manuelle d'attributs
Bootstrap vers React
Convertissez les composants Bootstrap HTML en JSX pour une utilisation avec react-bootstrap ou des composants stylisés
Templates d'e-mail
Convertissez les templates HTML d'e-mail en JSX pour le rendu avec React Email ou bibliothèques similaires
CMS vers React
Convertissez les templates HTML de WordPress ou CMS traditionnels en structure de composant React
Conseils HTML vers JSX
✓ class → className est essentiel
class est un mot-clé JavaScript réservé. React requiert className pour les classes CSS. L'oublier provoque un avertissement React et peut entraîner un comportement inattendu.
✓ for → htmlFor sur les étiquettes
L'attribut for sur <label> devient htmlFor en JSX. L'oublier brise l'accessibilité — les lecteurs d'écran dépendent de l'association étiquette-champ.
✓ Mettez à jour les gestionnaires d'événements après conversion
HTML onclick='...' n'est pas directement converti en JSX. Remplacez manuellement les gestionnaires d'événements inline par le pattern React onClick={handler} après la conversion.
✓ Les commentaires HTML deviennent des commentaires JSX
<!-- commentaire --> est converti en {/* commentaire */} en JSX. JSX n'autorise pas la syntaxe de commentaire HTML à l'intérieur du balisage JSX.
❓ Foire aux questions
Pourquoi React utilise-t-il className au lieu de class ?
class est un mot-clé réservé en JavaScript (utilisé pour les classes ES6). Étant donné que JSX est du JavaScript, utiliser class créerait un conflit de syntaxe. React a choisi className pour éviter toute ambiguïté avec le mot-clé JavaScript class.
Cet outil gère-t-il les gestionnaires d'événements React ?
Non — les gestionnaires d'événements HTML comme onclick et onsubmit ne sont pas automatiquement convertis en onClick et onSubmit de React car leurs valeurs (chaînes JavaScript en HTML) doivent référencer des fonctions/états de composants React. Ceux-ci doivent être mis à jour manuellement.
Quelle est la différence entre HTML et JSX ?
JSX est une extension de syntaxe JavaScript qui ressemble à du HTML mais se compile en appels React.createElement(). Différences clés : tous les attributs utilisent camelCase, class est className, for est htmlFor, les éléments void doivent s'auto-fermer, et les expressions utilisent {} au lieu de chaînes.
Pourquoi les éléments void doivent-ils s'auto-fermer en JSX ?
JSX est analysé par Babel comme une syntaxe de type XML, qui requiert que tous les éléments soient correctement fermés. Les éléments void comme <br>, <img>, <input> n'ont pas d'enfants, ils doivent donc s'auto-fermer avec /> au lieu de laisser une balise non fermée.