Entrée
Préparation de votre espace de travail…
Mode d’emploi
- Collez un fragment HTML, ouvrez un fichier UTF-8 ou chargez Exemple.
- Choisissez l’indentation et Convertir en JSX.
- Vérifiez le balisage, puis copiez-le ou téléchargez-le.
Passer du HTML à React
Le HTML d’un modèle nécessite souvent des changements pour JSX : className, htmlFor, éléments autofermants et autre forme pour les styles en ligne.
Le convertisseur traite la structure du balisage. État, callbacks d’événements et logique applicative restent à écrire là où le JSX sera utilisé.
Attributs et styles
Les attributs HTML deviennent leurs formes React, dont className et htmlFor. Les attributs SVG courants adoptent la casse React.
Le CSS en ligne devient un objet style et le résultat est formaté en JSX. Le texte littéral est échappé si nécessaire, pas interprété comme expression JavaScript.
<label class="field" for="email">Email<input id="email"></label><label className="field" htmlFor="email">Email<input id="email" /></label>Exemple abrégé de conversion d’attributs. La sortie complète est formatée et comprend un fragment conteneur.
Structure et comportement
Le fragment HTML est analysé avant conversion. La sortie utilise un fragment conteneur et des éléments autofermants lorsque nécessaire.
Scripts et attributs d’événements en ligne sont retirés. Leur comportement n’est pas converti en callbacks React ; les URL et styles restants ne sont pas automatiquement adaptés à votre application.
Intégrer le résultat
Collez le JSX dans le render ou return d’un composant. Rétablissez le comportement manuellement et vérifiez les styles, notamment les fallbacks répétés et !important qu’un objet style ne représente pas entièrement.
Texte de 1 MiB maximum. Les transformations CSS et HTML s'exécutent dans un worker avec une limite de 30 secondes. Les outils de couleur utilisent sRGB ; les styles générés sont des aperçus à tester dans votre propre mise en page.
Questions fréquentes
Un composant React complet est-il créé ?
Non. Seul le balisage JSX est produit. Ajoutez composant, imports, données et comportement dans votre projet.
Que deviennent scripts et onclick ?
Les scripts et attributs d’événements en ligne sont supprimés. Leur code n’est ni exécuté ni traduit en gestionnaires React.
Pourquoi les accolades restent-elles du texte ?
L’entrée est analysée comme HTML. Les accolades littérales sont échappées pour JSX, pas évaluées comme expressions.
Les styles en ligne sont-ils convertis exactement ?
Les déclarations courantes deviennent des propriétés React. Les fallbacks répétés et !important ne sont pas toujours représentables fidèlement dans un objet JavaScript.
Puis-je convertir du SVG ?
Les attributs courants sont adaptés à React. Testez le résultat dans le composant, y compris les ID, références et attributs spécifiques.