À propos de cet outil
Le convertisseur HTML vers JSX / React analyse un extrait HTML avec le DOMParser natif du navigateur et le re-sérialise en JSX valide, en corrigeant tout ce dont React a besoin. Il s'exécute entièrement côté client, de sorte que le balisage que vous collez reste sur votre machine. Collez n'importe quel HTML — un export de design, un modèle d'e-mail, une esquisse de composant — et obtenez du JSX que vous pouvez déposer directement dans un fichier React.
La réécriture renomme les attributs réservés (class devient className, for devient htmlFor), met le reste en camelCase — tabindex vers tabIndex, maxlength vers maxLength, stroke-width vers strokeWidth — tout en laissant les attributs data-* et aria-* intacts. Les éléments vides comme img, br, input et hr sont auto-fermés (<img />), les commentaires HTML deviennent {/* ... */}, les accolades littérales dans le texte sont échappées en {'{'}, et une chaîne style="a:b;c:d" en ligne est convertie en objet style={{ a: 'b', c: 'd' }} avec des clés CSS en camelCase. Les attributs booléens comme disabled peuvent être émis nus ou en ={true} avec une bascule.
Choisissez la sortie fragment — les nœuds racines multiples sont automatiquement enveloppés dans un fragment <>...</> — ou la sortie composant complet, qui enveloppe le JSX dans une export default function avec le nom et l'indentation de votre choix (2 espaces, 4 espaces ou tabulations). Le résultat est prêt à coller ; comme l'analyse utilise un vrai DOM, l'imbrication malformée est normalisée de la même manière qu'un navigateur le ferait.