Softonic

Convertisseur HTML en JSX

Étape 1 / 2

Convertit : class en className, for en htmlFor, les styles en ligne en objets JSX, auto-ferme les balises vides, supprime les commentaires HTML.

Convertir en JSX

Le JSX ressemble à du HTML jusqu’à ce qu’il n’en soit plus : class devient className, for devient htmlFor, style est un objet et non une chaîne, et chaque balise vide doit s’auto-fermer. Collez du HTML et ce convertisseur produit un JSX qui compile du premier coup, pour transférer une page marketing dans un composant React sans passer les dix prochaines minutes à courir après des erreurs du compilateur.

Comment convertir du HTML en JSX

  1. 1

    Collez le HTML

    Le balisage d'un composant, ou un fragment de page complet.

  2. 2

    Convertissez

    L'outil renomme les attributs comme `class`, `for` et `readonly` en leur écriture JSX et transforme les styles en ligne en objets.

  3. 3

    Vérifiez le JSX

    La sortie est prête à coller dans un fichier `.jsx` ou `.tsx`.

  4. 4

    Copiez et collez

    Le code utilise des expressions sur une seule ligne, il s'insère donc facilement dans un composant existant.

Chaque différence HTML vers JSX qui compte

Le JSX n’est pas du HTML. C’est une expression JavaScript qui se compile en appels React.createElement(), les noms d’attributs suivent donc les conventions de JavaScript.

Le convertisseur applique automatiquement les renommages les plus courants. La liste complète ci-dessous est la référence dont vous avez besoin pour écrire du JSX à la main.

Renommages d’attributs

HTML JSX Remarques
class className class est réservé en JS
for htmlFor for est réservé
tabindex tabIndex camelCase
readonly readOnly camelCase
contenteditable contentEditable camelCase
stroke-width (SVG) strokeWidth camelCase
xlink:href xlinkHref Espaces de noms à deux-points aplatis
aria-label aria-label ARIA garde les tirets
data-* data-* Les attributs de données gardent les tirets

Attribut style

HTML : style="color: red; padding: 10px"

JSX : style={{ color: 'red', padding: 10 }}

Les valeurs numériques sans unité deviennent des pixels ; gardez des chaînes pour les pourcentages et les valeurs sans unité comme flex.

Éléments vides auto-fermants

Le HTML tolère <br> et <input> sans balise fermante. Le JSX exige <br /> et <input />, chaque élément doit être fermé explicitement.

Commentaires

Les commentaires HTML (<!-- -->) ne sont pas valides dans le corps du JSX. Ce convertisseur les supprime ; si vous voulez garder une note, écrivez-la vous-même sous la forme {/* Commentaire de bloc JavaScript */}.

Attributs booléens

HTML : <input checked> (ou <input checked="checked">)

JSX : <input checked={true} /> ou simplement <input checked />. Ne passez jamais la chaîne “true”.

Échappatoires

  • Les fragments HTML non fiables peuvent être rendus avec dangerouslySetInnerHTML={{ __html: ... }}, volontairement laid pour décourager son usage.
  • Les attributs data-* personnalisés restent tels quels ; les attributs non standards sont transmis mais peuvent déclencher des avertissements React en mode développement.

Questions fréquentes

Les attributs SVG comme stroke-width doivent être écrits en camelCase (strokeWidth) en JSX, et chaque balise doit s’auto-fermer. Le convertisseur auto-ferme les balises vides dans le SVG et met en camelCase les noms de propriétés dans les chaînes de style, mais il ne renomme pas les attributs SVG ; corrigez stroke-width en strokeWidth à la main. Pour les icônes ponctuelles, l’approche la plus propre est d’enregistrer l’icône en fichier SVG et de l’importer comme composant via svgr.

Oui, JSX comme TSX utilisent className. La seule exception est à l’intérieur de dangerouslySetInnerHTML, où la chaîne HTML brute garde class car elle est insérée telle quelle dans le DOM.

Non. La sortie est uniquement le fragment JSX, sans enveloppeur export default function ni annotations de type. Collez-le dans votre fichier .jsx ou .tsx et ajoutez vous-même les props, les types et l’enveloppeur. class est toujours converti en className, c’est exactement ce que TSX attend.

Ils sont transmis tels quels. Le convertisseur ne renomme pas les gestionnaires d’événements, donc changez onclick en onClick et remplacez la chaîne par une vraie fonction, par exemple onClick={() => doThing()}. Vous devrez définir doThing dans la portée de votre composant.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Recherche de nom de couleur

Trouvez la couleur nommée CSS standardisée la plus proche d’une valeur HEX, RGB ou HSL grâce à l’écart CIEDE2000.

Outil disponible dans d’autres langues