Convertir du HTML en JSX (React)

Comment ça marche

Reprendre du HTML existant dans un projet React oblige à changer chaque class en className, chaque for en htmlFor et à réécrire les chaînes style en objets ; un seul oubli et la console affiche des avertissements. Collez le HTML dans le panneau de gauche : le JSX apparaît à droite. Par exemple <p style="color: #7a3; font-size: 14px"> devient <p style={{ color: '#7a3', fontSize: '14px' }}>, et <br> se ferme lui-même en <br />. Les noms avec tiret comme stroke-width en SVG deviennent strokeWidth ; ceux qui commencent par data- ou aria- restent avec tiret, comme React les attend. Les attributs d'événement comme onclick deviennent onClick et leur code est placé dans une fonction. La ligne de résultat indique le nombre de balises traitées et de noms d'attribut modifiés.

Cet outil est aussi connu sous le nom de convertir html en jsx, html vers jsx, html to jsx, html en react, convertisseur html jsx.

Qu'est-ce que JSX ?

JSX est une extension de JavaScript qui permet aux composants React de décrire leur interface avec une écriture proche du HTML. Le navigateur ne lit pas le JSX directement : Babel ou le compilateur TypeScript le transforme en appels React.createElement. Il ressemble au HTML mais suit les règles de JavaScript : noms d'attribut du DOM, balises toujours fermées, accolades pour les expressions.

Qu'est-ce que className et htmlFor ?

class et for sont des mots réservés en JavaScript : le premier déclare une classe, le second ouvre une boucle. Comme le JSX est du JavaScript, React demande ces deux attributs sous leur nom de propriété DOM : className et htmlFor. Si class reste dans le code collé, React 17 et suivants avertissent mais l'appliquent ; les versions plus anciennes et certains outils perdent la classe sans rien dire.

Quelle est la différence entre HTML et JSX ?

HTML est un langage de balisage que le navigateur lit avec indulgence : il ferme les balises oubliées et ignore la casse des noms d'attribut. JSX est une syntaxe écrite dans JavaScript et passe par un compilateur : chaque balise doit être fermée, les noms d'attribut sont en camelCase, style est un objet et non une chaîne, et du JavaScript s'exécute entre accolades. Les deux se ressemblent, mais JSX suit les règles de JavaScript.

Quelles conversions sont appliquées ?

La liste ci-dessous regroupe les règles de l'outil. Elles suivent les noms d'attribut DOM de React ; un attribut absent de la liste est recopié tel quel.

• class → className, for → htmlFor
• tabindex, readonly, maxlength, colspan en camelCase : tabIndex, readOnly
• style="a-b: c" → style={{ aB: 'c' }} ; une propriété -webkit- devient WebkitX
• Les balises vides comme br, img, input, hr et les éléments sans contenu se ferment d'eux-mêmes
• Les commentaires deviennent {/* … */} ; le doctype est retiré
• { } et > dans le texte cassent le JSX : ils sont échappés
• Les espaces et retours à la ligne dans pre sont gardés sous forme de chaîne

Champs de formulaire et événements

En React, un champ input avec un attribut value devient en lecture seule : impossible d'y taper, et la console affiche un avertissement. L'outil remplace donc value par defaultValue et checked par defaultChecked sur input et select ; le texte d'un textarea devient aussi defaultValue. Si vous gérez le champ par l'état (state), repassez ensuite à value avec onChange.

En HTML, onclick="envoyer()" est une chaîne ; React attend une fonction. L'outil place le code dans une fonction fléchée : onClick={(event) => { envoyer(); }}. À l'intérieur, this ne désigne plus l'élément ; utilisez event.currentTarget à la place.

Questions fréquentes

Pourquoi le résultat commence-t-il parfois par <> ?

Un composant React doit renvoyer un seul élément racine. Si vous choisissez la sortie composant et que votre HTML a plusieurs éléments au premier niveau, l'outil les entoure de <> … </>, un Fragment React. Un Fragment n'ajoute aucune balise à la page.

Pourquoi les { } de mon texte sont devenus {'{'} ?

En JSX, une accolade ouvre une expression JavaScript ; une accolade seule dans le texte provoque une erreur de compilation. L'outil l'écrit sous forme de chaîne, et la page affiche toujours { et }. Pour la même raison, > devient &gt;.

Puis-je utiliser le résultat dans un fichier TypeScript (TSX) ?

Oui. Le JSX produit est aussi valide dans un fichier TSX. Selon votre tsconfig, il faudra peut-être typer le paramètre event des gestionnaires d'événement.

Mon code est-il envoyé sur un serveur ?

Non. L'analyseur HTML et l'écriture JSX fonctionnent dans votre navigateur ; le code collé ne quitte pas cette page.