Convertisseur HTML vers JSX : gratuit, dans votre navigateur | We.Inc
Collez du HTML et obtenez du JSX valide : class en className, for en htmlFor, chaînes de style en objets, balises vides fermées, commentaires, événements et composant englobant. Rien n'est envoyé.
Convertisseur HTML vers JSX
Collez du HTML à gauche et ce convertisseur écrit le JSX à droite pendant la saisie : class devient className, for devient htmlFor, les styles en ligne deviennent des objets en camelCase, les balises vides comme img et input sont auto-fermées, les commentaires passent entre accolades, et plusieurs éléments de premier niveau sont placés dans un fragment. La conversion se fait uniquement dans votre navigateur.
Ce qui change entre HTML et JSX
HTML
JSX
Pourquoi
class="box"
className="box"
class est un mot réservé en JavaScript
for="email"
htmlFor="email"
for est aussi un mot réservé
style="font-weight: bold"
style={{ fontWeight: 'bold' }}
style prend un objet avec des clés en camelCase
<img src="a.png">
<img src="a.png" />
Chaque balise doit être fermée
onclick="go()"
onClick={go}
Les événements sont en camelCase et prennent une fonction
data-id="7", aria-label="Close"
data- et aria- gardent leurs tirets
Copier un extrait d'un template, d'un éditeur d'e-mails ou d'un jeu d'icônes dans un composant React casse généralement sur une douzaine de petites différences. Cet outil applique les règles que React documente pour le JSX, explique chaque modification effectuée et peut envelopper le résultat dans un composant nommé, prêt à coller.
Collez ou saisissez du HTML dans la zone de saisie. Le JSX généré se met à jour à chaque frappe.
Saisissez éventuellement un nom de composant pour envelopper le résultat dans un composant fonction exporté.
Lisez la liste des modifications sous le résultat ; chaque note explique une réécriture effectuée par le convertisseur.
Copiez le JSX dans votre fichier de composant et remplacez les gestionnaires d'événements vides par de vraies fonctions.
Le code onclick en ligne ne peut pas s'exécuter en JSX. Le convertisseur le conserve en commentaire dans un gestionnaire vide pour que vous puissiez le déplacer dans une fonction.
Les champs de formulaire avec value deviennent defaultValue, ce qui les garde modifiables. Passez à value plus onChange si vous voulez un champ contrôlé.
Les icônes SVG portent souvent stroke-width et fill-rule ; ils sont renommés automatiquement en strokeWidth et fillRule.
React ajoute px aux nombres d'un objet style, mais ce convertisseur garde chaque valeur sous forme de chaîne d'origine pour rester exact.
Questions fréquentes
Pourquoi React utilise-t-il className au lieu de class ?
Le JSX est compilé en JavaScript, où class est un mot réservé. React nomme donc la prop className. Le même raisonnement transforme l'attribut for du label en htmlFor.
Les attributs data- et aria- changent-ils en JSX ?
Non. La documentation de React précise que, pour des raisons historiques, les attributs aria-* et data-* s'écrivent exactement comme en HTML, avec des tirets. La plupart des autres attributs composés de plusieurs mots passent en camelCase.
Comment écrire des styles en ligne en JSX ?
Passez un objet à style avec des noms de propriétés en camelCase, par exemple style={{ fontWeight: 'bold', marginTop: 8 }}. React ajoute px aux nombres simples pour la plupart des propriétés. Les accolades extérieures ouvrent une expression JavaScript et les intérieures forment l'objet.
Pourquoi ai-je une erreur à propos de plusieurs éléments racine ?
Un composant ne peut renvoyer qu'un seul élément. Enveloppez les éléments frères dans un élément parent ou un fragment vide, écrit <> et </>. Le convertisseur le fait pour vous quand le HTML contient plus d'un nœud de premier niveau.
Mon HTML est-il envoyé quelque part ?
Non. La conversion est du simple JavaScript exécuté dans cette page. Rien de ce que vous collez n'est envoyé ni stocké.
Les trois règles derrière chaque conversion
L'introduction au JSX de React elle-même résume les différences en trois règles : renvoyer un seul élément racine, fermer chaque balise et écrire la plupart des noms d'attributs en camelCase. Presque tout ce que fait le convertisseur relève de l'une de ces trois règles.
Les exceptions sont les mots réservés et les familles à tirets. class et for sont renommés parce que JavaScript les réserve, tandis que les attributs aria- et data- gardent leur orthographe HTML.
Ce qui demande encore une intervention humaine
Les scripts en ligne et les chaînes de gestionnaires d'événements sont du code, pas du balisage : ils doivent être réécrits sous forme de fonctions dans votre composant. Le convertisseur les signale au lieu de deviner.
Les blocs répétés comme les éléments de liste gagnent souvent à devenir un tableau parcouru vers du JSX. Après la conversion, repérez les éléments frères copiés-collés et transformez-les en données plus un appel à map.
Renommages d'attributs appliqués par le convertisseur
Attribut HTML vers prop JSX
HTML
JSX
className
htmlFor
tabIndex
readOnly
maxLength
colspan / rowspan
colSpan / rowSpan
autoComplete
srcSet
crossOrigin
value sur input
defaultValue
checked sur input
defaultChecked
strokeWidth
fillRule
viewBox
Les gestionnaires d'événements en ligne comme onclick ont été transformés en gestionnaires vides en camelCase ; déplacez le code dans une fonction.
value sur un champ de formulaire est devenu defaultValue, le champ reste donc modifiable sans gestionnaire onChange.
checked est devenu defaultChecked pour la même raison.
selected sur une option a été supprimé ; définissez plutôt defaultValue sur le select.
Le doctype a été supprimé ; le JSX n'a pas de doctype.
L'entrée contenait plus d'un élément de premier niveau, elle a donc été enveloppée dans un fragment.
Convertisseur
L'exemple ci-dessous est converti en direct ; remplacez-le par votre propre HTML.
Nom du composant (facultatif)
Copier le JSX
Modifications effectuées
Seuls les renommages standard ont été nécessaires.
Le contenu de <{tag}> a été placé dans un template literal pour que les accolades restent littérales.