Aller au contenu
đŸ› ïžToolsShed

HTML to JSX

Convertir le balisage HTML en syntaxe JSX pour React avec transformation automatique des attributs, styles en ligne et éléments vides.

Conversions appliquées :

  • class → className
  • for → htmlFor
  • style="..." → style={{...}}
  • Les Ă©lĂ©ments vides (br, hr, img, input) auto-fermĂ©s
  • Commentaires HTML convertis en {/* */}

À propos de cet outil

HTML to JSX est un convertisseur qui transforme le balisage HTML standard en syntaxe JSX valide pour une utilisation dans les applications React. Lors de la création de composants React, les développeurs ont souvent besoin de convertir des fragments HTML au format JSX, ce qui nécessite de modifier les noms d'attributs (class en className), de gérer les styles en ligne différemment (chaßne en objet) et d'adapter les éléments void. Cet outil automatise ces transformations, ce qui permet de gagner du temps et de réduire les erreurs de conversion manuelle.

Pour utiliser l'outil, collez votre code HTML dans la boßte d'entrée et cliquez sur "Convertir". Le convertisseur produit instantanément une sortie JSX valide que vous pouvez copier directement dans vos composants React. Il gÚre les conversions courantes telles que les gestionnaires d'événements HTML (onclick en onClick), les attributs booléens (checked, disabled), les attributs de données et les noms de classe CSS. Les cas d'usage typiques incluent la migration de modÚles HTML existants vers React, l'intégration de fragments HTML tiers ou la génération rapide de JSX de composants à partir de maquettes.

Le convertisseur fonctionne entiÚrement dans votre navigateur sans téléchargement sur serveur, de sorte que votre code reste privé. Gardez à l'esprit que les modÚles dynamiques complexes ou la logique de rendu conditionnelle peuvent néanmoins nécessiter des ajustements manuels aprÚs la conversion. Pour les composants avec une gestion d'état complexe ou une logique personnalisée, le JSX généré sert de point de départ solide que vous pouvez affiner davantage.

Questions Fréquentes

Implémentation du Code

import re

def html_to_jsx(html: str) -> str:
    jsx = html
    # class -> className
    jsx = re.sub(r'\bclass=', 'className=', jsx)
    # for -> htmlFor
    jsx = re.sub(r'\bfor=', 'htmlFor=', jsx)
    # HTML comments to JSX
    jsx = re.sub(r'<!--(.*?)-->', r'{/*\1*/}', jsx, flags=re.DOTALL)
    # Self-close void elements
    void_elements = ['area','base','br','col','embed','hr','img','input',
                     'link','meta','param','source','track','wbr']
    for tag in void_elements:
        jsx = re.sub(
            rf'<{tag}(\s[^>]*)?>',
            lambda m: m.group(0)[:-1] + ' />' if not m.group(0).endswith('/>') else m.group(0),
            jsx, flags=re.IGNORECASE
        )
    return jsx

html = '<div class="container"><br><img src="x.png" alt=""></div>'
print(html_to_jsx(html))
# <div className="container"><br /><img src="x.png" alt="" /></div>

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.