Convertisseur HTML vers JSX

Comment utiliser le convertisseur HTML vers JSX

Collez votre code HTML dans la zone de saisie et cliquez sur Convertir en JSX. L'outil transforme votre HTML en JSX valide en convertissant les attributs, en fermant les elements void, en transformant les styles inline et en gerant les commentaires. Le panneau de statistiques affiche le nombre de modifications effectuees ainsi que les longueurs en caracteres de l'entree et de la sortie. Utilisez le bouton Copier pour copier la sortie JSX directement dans votre fichier de composant React.

Cet outil est essentiel pour les developpeurs React qui migrent des modeles HTML existants vers des composants React, copient des extraits HTML depuis des outils de design ou convertissent des prototypes HTML statiques en applications React dynamiques. Plutot que de modifier manuellement chaque attribut et element, le convertisseur gere automatiquement toutes les transformations en un seul clic.

Comprendre JSX et les composants React

JSX est la syntaxe qui rend le developpement React productif. Elle vous permet d'ecrire du code d'interface utilisateur qui ressemble a du HTML mais qui est en realite du JavaScript. Lorsque vous ecrivez <div className="container"> en JSX, l'outil de build de React le transforme en un appel de fonction React.createElement('div', {className: 'container'}). Cela signifie que JSX suit les regles de JavaScript, pas celles de HTML, c'est pourquoi certains attributs et patterns doivent changer.

La difference la plus importante est que JSX utilise les conventions de nommage JavaScript pour les attributs. Puisque class et for sont des mots reserves en JavaScript, ils deviennent respectivement className et htmlFor. Tous les attributs de gestionnaires d'evenements utilisent le camelCase : onclick devient onClick, onchange devient onChange, et onsubmit devient onSubmit. Ces changements de nommage sont coherents et previsibles.

Regles de conversion des attributs

Au-dela de class et for, plusieurs autres attributs HTML ont des noms differents en JSX. L'attribut tabindex devient tabIndex. Les attributs colspan et rowspan deviennent colSpan et rowSpan. L'attribut crossorigin devient crossOrigin. Les attributs booleens comme checked, disabled et readonly fonctionnent de la meme maniere, mais readonly devient readOnly en JSX. Les attributs data (data-*) et ARIA (aria-*) sont les exceptions et restent inchanges en JSX.

Transformation des styles inline

Les styles inline HTML utilisent une chaine CSS : style="color: red; font-size: 16px; background-color: blue". JSX necessite un objet JavaScript avec des noms de proprietes en camelCase : style={{color: 'red', fontSize: '16px', backgroundColor: 'blue'}}. Le convertisseur gere cette transformation automatiquement, convertissant les proprietes CSS avec tirets en camelCase et encapsulant les valeurs dans un objet literal JavaScript. Les valeurs numeriques pour les proprietes basees sur les pixels peuvent omettre l'unite 'px' en JSX.

Elements auto-fermants

HTML permet aux elements void comme <img>, <br>, <hr> et <input> d'etre ecrits sans barre oblique de fermeture. JSX exige que tous les elements soient explicitement fermes, soit avec une balise fermante, soit avec une barre oblique auto-fermante. Le convertisseur s'assure que tous les elements void sont correctement auto-fermes : <img> devient <img />, <br> devient <br />, et ainsi de suite. Ceci est obligatoire en JSX et provoquera une erreur de compilation si omis.

Foire aux questions

Qu'est-ce que JSX ?

JSX est une extension syntaxique de JavaScript utilisee dans React qui vous permet d'ecrire du code semblable a du HTML dans des fichiers JavaScript. Il utilise des attributs en camelCase et exige la fermeture de tous les elements.

Pourquoi convertir du HTML en JSX ?

HTML et JSX presentent des differences subtiles mais importantes au niveau des noms d'attributs, de la syntaxe des styles, de la fermeture des elements et des commentaires. La conversion manuelle est fastidieuse et sujette aux erreurs.

Quels attributs changent ?

class devient className, for devient htmlFor, tabindex devient tabIndex, les gestionnaires d'evenements passent en camelCase, et readonly devient readOnly. Les attributs data et ARIA restent inchanges.

Comment les styles sont-ils geres ?

Les styles en chaines CSS deviennent des objets JavaScript avec des proprietes en camelCase. "font-size: 16px" devient {fontSize: '16px'}.

L'outil gere-t-il les commentaires ?

Oui. Les commentaires HTML <!-- commentaire --> deviennent des commentaires JSX {/* commentaire */} encapsules dans des accolades avec la syntaxe de commentaire bloc.