Publicité

Collez du HTML et obtenez du JSX React propre — class devient className, les attributs passent en camelCase, les chaînes de style deviennent des objets et les balises s'auto-ferment. Tout fonctionne dans votre navigateur. Gratuit.

Tout fonctionne dans votre navigateur — votre balisage ne quitte jamais votre appareil.

snippet.html
1
Component.jsx

							
{ } Votre JSX apparaîtra ici

À propos de Convertisseur HTML vers JSX

Le convertisseur HTML vers JSX transforme un balisage HTML simple en JSX prêt pour React, en temps réel. Il renomme class en className et for en htmlFor, met en camelCase les attributs en kebab-case et les attributs SVG, convertit les chaînes de style en ligne en objets de style JSX, et referme automatiquement les éléments vides comme img et br — exactement les modifications que vous feriez sinon à la main.

Collez un extrait, une section de page complète, ou du balisage exporté depuis un outil de design, et le volet JSX se met à jour au fur et à mesure de la saisie, avec coloration syntaxique. Un habillage optionnel transforme le résultat en composant fonctionnel nommé, si bien que le résultat s'insère directement dans un projet React sans modification supplémentaire.

Le convertisseur est un outil HTML vers JSX entièrement côté client : votre balisage est transformé par JavaScript dans votre navigateur et ne quitte jamais votre appareil, ce qui le rend sûr pour les modèles propriétaires et les pages internes.

Comment utiliser Convertisseur HTML vers JSX

  1. Collez votre HTML dans le volet de gauche, ou cliquez sur Exemple pour charger un échantillon.
  2. Observez le volet JSX se mettre à jour instantanément pendant que vous tapez ou modifiez.
  3. Activez Envelopper dans un composant et donnez un nom au composant si vous voulez un composant fonctionnel prêt à l'emploi.
  4. Cliquez sur Copier pour récupérer le JSX, ou sur Télécharger pour l'enregistrer sous Component.jsx.
  5. Utilisez Effacer pour réinitialiser les deux volets et convertir un autre extrait.

Questions fréquentes

Il renomme class en className et for en htmlFor, met en camelCase les attributs à tirets (y compris les attributs SVG), convertit les chaînes de style en ligne en objets de style JSX, et referme automatiquement les balises vides comme img, br et input, afin que le résultat soit du JSX valide.

Oui. Activez Envelopper dans un composant et choisissez un nom de composant, et l'outil produit un composant fonctionnel complet autour du balisage converti, prêt à coller dans votre projet ou à télécharger comme fichier .jsx.

Oui. Un attribut style comme style="margin-top: 10px" devient un objet JSX tel que style={{marginTop: '10px'}}, chaque propriété CSS étant mise en camelCase, y compris les propriétés préfixées par un fournisseur.

Non. La conversion s'exécute entièrement dans votre navigateur, donc votre balisage ne quitte jamais votre appareil. Vous pouvez convertir en toute sécurité des modèles internes et des pages non publiées.

Oui, il est entièrement gratuit. Aucun compte requis, aucun coût en crédits et aucune limite sur le nombre d'extraits convertis.

Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.