Convertir HTML en JSX React en Ligne
Transforme ton HTML en JSX valide pour React et Next.js. Gratuit, dans ton navigateur, sans envoi de fichiers.
Pourquoi utiliser ce convertisseur
HTML en JSX sans erreurs de syntaxe
100% prive
La conversion se produit entierement dans ton navigateur avec du JavaScript pur. Ton code ne quitte jamais ton appareil.
Transformations completes
Nous appliquons toutes les conversions necessaires : attributs, styles, evenements, balises void et commentaires. Sans etapes manuelles.
Compatible avec React et Next.js
Le JSX resultant est valide pour React 16+, Next.js 12+ et n'importe quel framework base sur React comme Gatsby ou Remix.
Instantane
La conversion se produit en millisecondes sans appels serveur. Colle et copie, sans attente.
Comment ça marche
Trois étapes, sans complications
Colle ton HTML
Colle le code HTML que tu veux convertir dans le champ de saisie. Ca peut etre des documents HTML complets ou des fragments.
Conversion automatique
Le convertisseur applique toutes les transformations necessaires : class en className, for en htmlFor, les styles inline en objet JS, et les balises void auto-fermantes.
Copie le JSX resultant
Copie le JSX pret a l'emploi directement dans tes composants React ou Next.js.
FAQ
Des questions ?
Les transformations principales sont : class en className (class est un mot reserve en JS), for en htmlFor (for est aussi reserve), les styles inline convertis d'une chaine CSS en objet JavaScript avec des proprietes en camelCase, les balises void auto-fermantes (br en br /, img en img /, input en input /), et les commentaires HTML convertis en commentaires JSX avec la syntaxe accolades-slash-asterisque.
React et Next.js necessitent du JSX parce que les composants sont ecrits en JavaScript. JSX est du sucre syntaxique par-dessus React.createElement(). Quand il est compile par Babel ou le compilateur Next.js, chaque balise JSX est convertie en appels de fonctions JavaScript, rendant impossible l'utilisation de mots reserves JS comme class ou for comme attributs.
En HTML : style avec color red et font-size 16px. En JSX : objet style avec color red et fontSize 16px. Les proprietes CSS en kebab-case sont converties en camelCase (font-size devient fontSize, background-color devient backgroundColor), et les valeurs sont converties en chaines ou nombres JavaScript.
Les gestionnaires d'evenements en HTML utilisent des minuscules (onclick, onchange, onsubmit). En JSX, ils sont convertis en camelCase : onclick devient onClick, onchange devient onChange, onsubmit devient onSubmit, onmouseover devient onMouseOver. La valeur passe d'une chaine de code JS a une reference de fonction.
Les elements void en HTML sont des balises sans contenu ni balise de fermeture : br, img, input, hr, meta, link. En JSX, XML exige que tous les elements soient explicitement fermes, donc ils doivent etre ecrits comme br /, img /, etc. Sans auto-fermeture, le compilateur JSX generera une erreur de syntaxe.
Histoire de React JSX (Facebook 2013), differences entre HTML et JSX, migration de templates HTML vers des composants React, workflow de developpement Next.js
JSX (JavaScript XML) a ete introduit par Facebook en 2013 avec React comme extension de syntaxe JavaScript permettant d'ecrire des structures similaires au HTML directement dans du code JS. Bien que React puisse optionnellement etre utilise sans JSX via des appels directs a React.createElement(), JSX est rapidement devenu le standard de fait car il ameliore considerablement la lisibilite du code des composants. Babel et ulterieurement le compilateur SWC de Next.js transforment JSX en JavaScript pur pendant le processus de build.
Les differences entre HTML et JSX resultent du fait que JSX opere dans le contexte JavaScript. La plus importante : class est un mot reserve en JavaScript (pour definir des classes ES6), donc React a choisi className comme attribut equivalent. De meme, for est un mot reserve (pour les boucles), donc l'attribut de la balise label s'ecrit htmlFor. Les styles inline necessitent un objet JavaScript plutot qu'une chaine CSS car c'est plus sur dans un contexte JS et permet l'interpolation de variables. Les proprietes CSS s'ecrivent en camelCase car le tiret (-) est l'operateur de soustraction en JavaScript.
La migration de templates HTML statiques vers des composants React est un cas d'usage frequent : des designers ou developpeurs travaillant avec du HTML pur ont besoin d'integrer leurs designs dans des projets Next.js ou Create React App. Le processus manuel est fastidieux et prone aux erreurs, surtout avec du HTML complexe contenant de nombreux attributs de style, gestionnaires d'evenements et elements void. Les outils automatiques de conversion HTML en JSX accelerent considerablement ce processus de migration dans des projets de toute taille.