Convertisseur HTML en JSX

Qu'est-ce que cet outil ?

Cet outil en ligne gratuit convertit le HTML standard en syntaxe JSX valide pour une utilisation avec React. C'est le moyen le plus rapide de refactoriser du code HTML existant en composants prêts pour les applications front-end modernes.

Comment l'utiliser

1. Collez ou tapez votre HTML dans l'éditeur.
2. Cliquez sur Convertir pour générer du code JSX.
3. Téléchargez, copiez ou partagez instantanément votre JSX converti.

Connectez-vous avec Google ou GitHub pour sauvegarder vos conversions et y accéder à tout moment.

Qu'est-ce que le JSX ?

JSX (JavaScript XML) est une extension de syntaxe pour JavaScript utilisée dans React pour définir des composants d'interface utilisateur de manière déclarative. JSX vous permet d'écrire des balises similaires à HTML directement dans votre code JavaScript.

Contrairement au HTML traditionnel, le JSX utilise des règles spéciales (comme className au lieu de class) et prend en charge l'intégration d'expressions JavaScript à l'intérieur des accolades.

Exemple de JSX basique :

const element = (
  <h1 className="greeting">
    Bonjour, monde !
  </h1>
);
    

En savoir plus sur la documentation officielle de React.

Exemple HTML vs JSX

HTML

<div>
  <div class="awesome" style="border: 1px solid red">
    <label for="name">Entrez votre nom : </label>
    <input type="text" id="name" />
  </div>
  <p>Entrez votre HTML ici</p>
</div>
    

JSX Converti

<div>
  <div className="awesome" style={{ border: '1px solid red' }}>
    <label htmlFor="name">Entrez votre nom : </label>
    <input type="text" id="name" />
  </div>
  <p>Entrez votre HTML ici</p>
</div>