Comment utiliser : Convertisseur HTML vers JSX
- Collez votre balisage HTML ou SVG.
- Consultez le JSX généré : les attributs, les styles et les commentaires sont réécrits pour React.
- Au besoin, encapsulez le résultat dans un composant nommé, puis copiez-le dans votre projet.
Ce qui change entre HTML et JSX
classdevientclassNameetfordevienthtmlFor.- Les styles en ligne deviennent des objets :
style="font-size: 14px"→style={{ fontSize: '14px' }}. - Les éléments vides sont auto-fermés :
<img>→<img />,<br>→<br />. - Les gestionnaires d’événements et autres attributs passent en camelCase :
onclick→onClick,tabindex→tabIndex. - Les attributs SVG sont en camelCase :
stroke-width→strokeWidth,xlink:href→xlinkHref. - Les commentaires HTML deviennent
{/* … */}, et les accolades présentes dans le texte sont échappées.
Gestionnaires d’événements
Les gestionnaires en ligne comme onclick="doThing()" sont des chaînes de caractères en HTML, mais des fonctions en React. Ils sont donc convertis en un espace réservé marqué par un commentaire, que vous pouvez remplacer par une véritable référence de fonction.
Plusieurs éléments racines
Un composant doit retourner un seul élément. Lorsque le HTML contient plusieurs éléments de premier niveau, le convertisseur les encapsule dans un fragment <>…</>.
Confidentialité by design
La conversion s’effectue entièrement dans votre navigateur : votre code n’est jamais envoyé sur un serveur, ce qui le rend sûr pour des projets confidentiels.
Aussi recherché comme : html vers jsx, convertir html en jsx, html vers react, convertisseur html jsx, svg vers jsx, class en classname, html en composant react, convertisseur html react.
Outils complémentaires : Convertisseur HTML vers JSX
- SVG vers JSX — Collez un SVG issu de Figma, Illustrator ou d’une bibliothèque d’icônes et obtenez un composant React (JSX ou TSX) prêt à l’emploi, avec un aperçu sécurisé de l’icône.
- Formateur HTML — Collez du balisage minifié ou désordonné et obtenez un HTML propre, indenté de manière cohérente, y compris les blocs <style> et <script> intégrés.
- Convertisseur CSS vers Tailwind — Collez des règles ou déclarations CSS et obtenez les classes utilitaires Tailwind équivalentes pour chaque sélecteur, y compris les états hover: et les valeurs arbitraires comme p-[13px].
- HTML et CSS vers Webflow — Collez le HTML et son CSS, cliquez sur Copier vers Webflow puis collez dans le Designer.
Questions fréquentes
Pourquoi React utilise-t-il className au lieu de class ?
« class » est un mot réservé en JavaScript, et JSX se compile en JavaScript. React utilise donc le nom de propriété du DOM, className.
Puis-je convertir des icônes SVG en composants React ?
Oui. Collez le SVG : les attributs comme stroke-width et fill-rule sont convertis en camelCase. Pour un flux de travail dédié aux SVG avec des props, utilisez SVG vers JSX.
Que deviennent les gestionnaires onclick en ligne ?
Ils deviennent onClick, accompagnés d’un espace réservé et d’un commentaire, car React attend une fonction et non une chaîne de code.
Puis-je installer Convertisseur HTML vers JSX en tant qu’application web et l’utiliser hors ligne ?
Oui. Convertisseur HTML vers JSX est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.