DevToolBoxGRATUIT
Blog

Convertisseur HTML vers JSX

Convertissez HTML en JSX React en ligne. Transforme class en className, les styles en objets, les balises auto-fermantes et plus. Gratuit et instantané.

À propos de la conversion HTML vers JSX

JSX est l'extension de syntaxe de React qui ressemble au HTML mais avec des différences importantes. Lors de la migration de modèles HTML vers des composants React, vous devez convertir class en className, for en htmlFor, et les chaînes de style en objets JavaScript. Cet outil automatise toutes ces transformations. Il gère les éléments vides auto-fermants, convertit les commentaires HTML en commentaires JSX et transforme les attributs HTML courants.

𝕏 Twitterin LinkedIn

Notez cet outil

4.5 / 5 · 202 avis

Restez informé

Recevez des astuces dev et les nouveaux outils chaque semaine.

Pas de spam. Désabonnez-vous à tout moment.

Enjoy these free tools?

Buy Me a Coffee

Comment utiliser

  1. Collez votre balisage HTML dans le panneau d'entrée
  2. Cliquez sur Convertir pour transformer en JSX
  3. Vérifiez la sortie JSX convertie
  4. Copiez et collez dans votre composant React

Cas d'utilisation courants

  • Migrer des modèles HTML statiques vers des composants React
  • Convertir le HTML des outils de design (Figma, Webflow) en JSX
  • Porter des modèles d'email HTML vers React Email
  • Apprendre les différences entre la syntaxe HTML et JSX

Questions fréquentes

Que change la conversion HTML vers JSX ?
Principaux changements : class → className, for → htmlFor, styles inline → objets style, balises auto-fermantes avec />, commentaires HTML → {/* */}.
Pourquoi ne peut-on pas utiliser class en JSX ?
En JSX, 'class' est un mot réservé JavaScript. React utilise 'className' à la place.
Comment les styles inline sont-ils convertis ?
style="color: red; font-size: 16px" devient style={{color: "red", fontSize: "16px"}}.
Gère-t-il les balises auto-fermantes ?
Oui. Les éléments vides HTML comme <br>, <hr>, <img> sont convertis en <br />, <hr />.