Convertir du HTML en JSX

Convertir du HTML en JSX: à quoi ça sert

Collez le HTML et la conversion se fait aussitôt : class et for deviennent className et htmlFor, les attributs comme tabindex, maxlength et autocomplete passent en camelCase, style devient un objet, les attributs booléens restent sans valeur, les balises vides reçoivent la barre oblique et les commentaires deviennent {/* */}. Les événements en ligne deviennent des fonctions avec l’ancien code en commentaire.

Les attributs data- et aria- restent tels quels, et les attributs SVG sont aussi convertis. Cochez générer le composant pour obtenir la fonction prête à l’emploi avec le nom choisi.

Mode d’emploi

1. Collez le HTML.
2. Cochez générer le composant si vous voulez la fonction prête à l’emploi.
3. Copiez le JSX dans votre projet React.

Quand l’utiliser

• Intégrer des modèles HTML dans des projets React et Next.js.
• Convertir des icônes SVG en composants.
• Adapter des extraits copiés d’autres sites.

Questions fréquentes

Qu’est-ce qui change entre le HTML et le JSX ?

class devient className et for devient htmlFor ; les attributs avec trait d’union ou d’événements passent en camelCase (tabindex devient tabIndex, onclick devient onClick) ; style devient un objet ({{ marginTop: 8px }}) ; les balises sans fermeture (img, br, input) reçoivent la barre oblique ; les commentaires deviennent {/* */}.

Les attributs data- et aria- changent-ils ?

Non. data-* et aria-* restent identiques en JSX, avec le trait d’union.

Et le JavaScript dans onclick ?

Le contenu des événements en ligne est converti en commentaire, car dans React l’événement reçoit une fonction. Réécrivez l’action sous forme de fonction du composant.

Le SVG fonctionne-t-il ?

Oui. Les attributs SVG comme stroke-width, fill-rule et xlink:href deviennent strokeWidth, fillRule et xlinkHref.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires