Convertir HTML en React JSX : className, htmlFor, balises auto-fermantes et objets de style
Un convertisseur HTML vers JSX réécrit du HTML simple dans la syntaxe JSX qu'utilisent les composants React, en corrigeant les différences qui rendraient sinon le balisage invalide dans un fichier React. JSX ressemble presque à du HTML, mais une poignée d'attributs et de règles diffèrent car JSX est en réalité du JavaScript : class devient className, for devient htmlFor, chaque balise doit être explicitement fermée, et les styles en ligne s'écrivent comme un objet JavaScript plutôt qu'une chaîne. Coller du vrai HTML et obtenir du JSX valide évite le travail fastidieux et source d'erreurs de le convertir à la main.
C'est précisément la corvée qui revient sans cesse quand on amène un design, une maquette d'e-mail ou un extrait de n'importe où sur le web dans un projet React. À la main, il faut traquer chaque attribut class, auto-fermer chaque <img> et <br>, et remodeler style="color:red" en style={{ color: 'red' }} — facile à manquer dans un grand bloc et frustrant à déboguer quand le build échoue. Cet outil applique toutes ces transformations dans votre navigateur, vous obtenez donc du JSX prêt à coller sans envoyer votre balisage où que ce soit.
Parce que JSX se compile en JavaScript, et class est un mot réservé en JavaScript. React utilise className à la place pour définir la classe de l'élément. De même, for (réservé dans les éléments label) devient htmlFor. Le convertisseur les renomme automatiquement pour que le JSX soit valide.
En HTML un style est une chaîne comme "color: red; font-size: 14px". En JSX ce doit être un objet JavaScript aux propriétés en camelCase : style={{ color: 'red', fontSize: '14px' }}. Le convertisseur remodèle la chaîne en cette forme d'objet, en convertissant aussi les noms de propriété à trait d'union.
JSX exige que chaque élément soit explicitement fermé, donc les éléments vides comme <img>, <br> et <input> deviennent auto-fermants (<img />). HTML est tolérant là-dessus, mais JSX ne compilera pas sinon, c'est pourquoi le convertisseur ajoute les barres de fermeture.
Les commentaires JSX utilisent une syntaxe différente ({/* ... */}) des commentaires HTML (<!-- ... -->), et quelques autres attributs diffèrent aussi. Un bon convertisseur traduit les cas courants ; pour du balisage inhabituel, vérifiez la sortie, car certains cas limites peuvent encore nécessiter une touche manuelle.
Générateur UUID · Convertisseur de timestamp · Encodeur Base64 · Décodeur Base64 · Générateur de hash · Convertisseur de couleurs