Développeur / React

Convertisseur HTML vers JSX

Convertissez du HTML en JSX pour React : class devient className, les styles intégrés deviennent des objets, les éléments vides sont fermés, les accolades et les commentaires sont échappés, avec la possibilité d’envelopper le résultat dans un composant.

Convertisseur HTML vers JSX: Le HTML est analysé en éléments afin que les attributs soient renommés pour React (class, for, tabindex, readonly, maxlength et autres), que les styles deviennent des objets avec des clés en camelCase et que les éléments vides tels que <br> et <img> soient fermés. Les accolades et les chevrons présents dans le texte sont échappés, les commentaires deviennent {/* */} et les valeurs des formulaires deviennent defaultValue et defaultChecked afin que les champs restent modifiables. La sortie des pages de test est compilable en TSX. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.

Catégorie
Outils développeur
Exécutions
Dans votre navigateur
Coût
Gratuit · sans inscription
Disponibilité
Prêt à l'emploi
HTML vers JSXTraitement local

Fonctionne entièrement dans votre navigateur

  • onclick="send()" supprimé de <button> : écrivez-le sous forme de fonction, par exemple onClick={() => …}.

JSX

<div className="card" style={{ marginTop: "8px", backgroundColor: "#fff" }}>
  <label htmlFor="email">Email</label>
  <input id="email" type="email" placeholder="you@example.com" required />
  <button tabIndex="0">Send</button>
  {/* footer */}
  <p>Price: {"{"}price{"}"} &gt; 0</p>
</div>

Les attributs sont renommés pour React (class devient className, for devient htmlFor, tabindex devient tabIndex), les styles deviennent des objets, les éléments vides et les éléments void sont fermés, les commentaires deviennent {/* */} et les valeurs des formulaires deviennent defaultValue pour que les champs restent modifiables.

Après la conversion

Transformez le balisage répété en composants qui acceptent des props, remplacez le texte codé en dur par des variables entre accolades et déplacez les styles en ligne dans des classes CSS ou votre système de styles, car les objets de style sont recréés à chaque rendu.

Pour les icônes SVG, SVG vers JSX crée un composant qui transmet les props ; pour supprimer d’abord les commentaires et les espaces superflus, utilisez le minificateur HTML.

Les différences qui posent problème

JSX nécessite un élément racine unique : plusieurs éléments sont donc regroupés dans un fragment (<>…</>). Chaque élément doit être fermé, les noms d’attributs utilisent le camelCase et le texte contenant { ou } doit s’écrire {"{"}, ce que le convertisseur fait pour vous.

Comment l'utiliser

  1. Collez du HTML, d’un seul élément à une section entière de page.
  2. Enveloppez éventuellement le résultat dans un composant nommé.
  3. Copiez le JSX et réécrivez les gestionnaires d’événements intégrés signalés dans les avertissements.

Confidentialité et limitations

Le HTML est converti dans votre navigateur et n’est jamais envoyé.

Outils associés

SVG vers JSXMinificateur HTMLEncodeur HTML

Questions fréquentes

Pourquoi les attributs onclick sont-ils supprimés ?

En HTML, ce sont des chaînes de code ; dans React, ils doivent être des fonctions. Le convertisseur les signale un par un afin que vous puissiez les réécrire, par exemple onclick="save()" en onClick={save}.

Pourquoi value devient-il defaultValue ?

Dans React, un attribut value rend le champ contrôlé : il est donc impossible d’y saisir du texte sans gestionnaire onChange. defaultValue définit le texte initial tout en laissant le champ modifiable.

Le convertisseur prend-il en charge SVG ?

Oui : les attributs SVG tels que stroke-width deviennent strokeWidth. Pour transformer un fichier SVG entier en composant, l’outil SVG vers JSX ajoute les props.

Outil gratuit · dans votre navigateur exécutions · aucun compte requis