Convertisseur HTML vers JSX | Collez du HTML, obtenez du JSX prêt pour React

Coller du HTML brut dans un composant React casse la compilation : class et for sont des mots réservés, les styles en ligne sont des chaînes au lieu d'objets et les balises vides ne se ferment pas seules. Ce convertisseur réécrit tout cela en une seule passe pour transposer votre balisage en JSX sans corriger chaque erreur à la main.

💡 À propos de cet outil

Toute personne migrant une page d'atterrissage statique, un extrait exporté d'un outil de design ou un ancien gabarit vers React se heurte au même mur. JSX ressemble à du HTML mais se compile en JavaScript : les noms d'attributs déjà employés par JavaScript doivent changer. class devient className, for devient htmlFor. Les attributs d'événement comme onclick passent en camelCase (onClick), le style en ligne style="color: red" doit prendre la forme objet style={{color: 'red'}}, et des éléments comme <img> ou <br> réclament un /> explicite sinon l'analyseur de React échoue.

Cet outil applique cinq transformations à ce que vous collez : il renomme les attributs réservés, met les gestionnaires d'événements en camelCase, transforme les chaînes de style en objets, auto-ferme les balises vides et réécrit les commentaires <!-- --> dans la syntaxe JSX {/* */}. Copiez la sortie et collez-la directement dans votre composant.

🧐 Questions fréquentes

Quels attributs en dehors de class sont convertis ? for en htmlFor, tabindex en tabIndex, maxlength en maxLength, colspan en colSpan, readonly en readOnly et les autres attributs en camelCase attendus par React.

Comment les styles en ligne sont-ils traités ? Une chaîne comme style="color: red; line-height: 1.5" devient style={{color: 'red', lineHeight: 1.5}} : les propriétés CSS à trait d'union passent en camelCase, les nombres purs restent sans guillemets et le reste est encadré comme une chaîne (une valeur avec unité comme 14px devient la chaîne '14px').

Ferme-t-il les balises vides comme <input> et <img> ? Oui. Il détecte les éléments vides du HTML (img, br, input, hr, meta, link, entre autres) et ajoute />.

React protestera-t-il en présence de plusieurs éléments racines ? Cet outil ne transforme que la syntaxe. Si votre extrait renvoie plusieurs éléments frères, enveloppez-les dans un fragment (<>...</>) après le collage ; cet ajustement vous incombe.

Qu'advient-il des commentaires ? <!-- note --> est réécrit dans la forme JSX valide {/* note */}.

📚 Pourquoi JSX n'est pas simplement du HTML

JSX ressemble à s'y méprendre à du HTML, mais il s'agit de sucre syntaxique au-dessus d'appels de fonctions JavaScript. Un empaqueteur comme Babel compile chaque élément en un appel à React.createElement au moment de la construction, raison pour laquelle le navigateur ne voit jamais le JSX directement. class est interdit parce que JavaScript le réserve à la déclaration de classes, et for entre en conflit avec la boucle for. Il existe des dizaines de ces attributs renommés, et en oublier un seul produit un avertissement déroutant plutôt qu'une erreur nette, donc automatiser les substitutions mécaniques supprime une source de friction courante lors de la migration.