Pourquoi convertir du HTML en JSX ?
JSX est le dialecte React du HTML : presque identique, mais avec quelques différences faciles à manquer. `class` doit devenir `className` (parce que `class` est un mot-clé JavaScript). `for` dans `<label for="x">` devient `htmlFor`. Les commentaires `<!-- ... -->` ne fonctionnent pas, il vous faut `{/* ... */}`. Le style inline doit être un objet JavaScript : `style={{ color: 'red' }}` avec clés en camelCase.
Collez votre HTML ici (depuis un export Figma, une bibliothèque d'icônes, un snippet du web) et obtenez du JSX prêt à déposer dans un composant React. Le convertisseur gère les attributs SVG (`stroke-width` en `strokeWidth`), le self-closing pour `<br>` / `<img>` / `<input>`, les attributs booléens et les entités HTML.
Tout tourne dans votre navigateur : le code ne quitte jamais votre machine.
Mode d'emploi
- Collez le HTML dans le panneau de gauche (un fragment Figma, une icône SVG, un morceau de page que vous voulez refactoriser).
- À droite, vous voyez le JSX avec les attributs et les styles réécrits.
- Activez « Wrap in component » pour obtenir un `export default function Component() { return (...) }` prêt à l'emploi.
- Basculez en mode TypeScript pour ajouter une valeur de retour typée.
- Cliquez sur « Copier » et collez dans votre fichier `.tsx`.
Quand ça aide
Situations réelles où ce convertisseur fait gagner du temps :
- Migration de HTML legacy vers React. Vous avez un vieux projet avec des fichiers `.html` ou un template Bootstrap et vous voulez le réécrire en React/Next.js. Collez chaque section, obtenez un composant fonctionnel.
- Icônes depuis Figma / Iconify. Un designer exporte une icône SVG et vous la collez pour obtenir un composant React.
- Snippets depuis CodePen / StackOverflow. Quelqu'un a posté une solution en HTML vanille : collez, obtenez du JSX.
- Assets marketing. Collez une hero section ou un encart CTA et transformez-le en composant.
- Templates d'email. Le HTML d'email avec `style="..."` littéral devient `style={{...}}` : utile si vous prévisualisez les templates dans une app React.
- Refactoring. Votre équipe est passée à React et a 100 vieilles fiches produit en HTML pur à migrer.
- Apprentissage. Vous étudiez React et voulez voir rapidement « à quoi cela ressemblerait en JSX ».
Pour convertir un SVG en composant React (flux plus avancé, avec props size/color), voir SVG vers composant React. Pour les dégradés CSS, voir le générateur de dégradés.