JSX en JavaScript : compiler du code React en JS pur
Passer de JSX en JavaScript, c'est transformer la syntaxe à balises des composants React en JavaScript que le navigateur sait exécuter. L'outil utilise Babel : le résultat est donc celui qu'écrirait une étape de build Babel. Vous choisissez entre les appels classiques à React.createElement et le runtime automatique jsx(), puis vous copiez le résultat. Votre code est compilé dans votre navigateur, jamais envoyé et jamais exécuté.
Passer de JSX en JS : mode d'emploi
Pour convertir du code React en JavaScript, il n'y a rien à installer ni aucun compte à créer :
- Collez votre code dans le champ Code JSX. Tant qu'il est vide, il affiche « Collez le JSX ici… ». La limite est de 1 000 000 de caractères.
- Patientez un instant. L'outil compile pendant que vous saisissez ou collez, environ un tiers de seconde après la dernière modification : il n'y a donc aucun bouton à actionner. La première fois, Babel se télécharge une seule fois, ce qui prend un peu plus de temps.
- Lisez le résultat sous le titre JavaScript. Il s'affiche sous forme de code coloré, en lecture seule.
- Sélectionnez Copier dans le presse-papiers. Le bouton affiche alors Copié.
- Pour changer la façon dont le JSX est compilé, utilisez le bouton en forme d'engrenage à côté (Réglages du runtime JSX). Il ouvre le groupe Runtime JSX avec deux choix, Classique et Automatique. Dès que vous changez, le code est recompilé.
Si le texte n'est pas du JSX valide, vous voyez un message d'erreur de syntaxe avec la ligne et la colonne, la ligne fautive et un ^ sous l'endroit exact, et aucun résultat tant que l'erreur n'est pas corrigée. Si le code ne contient aucun JSX, il vous est renvoyé tel quel en JavaScript pur, avec le message « Aucun JSX n'a été trouvé dans ce code ; il est donc renvoyé comme du JavaScript pur. »
JSX React createElement : classique ou automatique
Avec Classique, le choix par défaut, chaque élément devient un appel à React.createElement(type, props, ...children) et le fragment devient React.Fragment. Aucun import n'est ajouté : React doit donc être dans la portée. Choisissez-le si votre projet ou votre tutoriel importe encore React dans chaque fichier, ou si vous visez une configuration plus ancienne.
Avec Automatique, le JSX devient des appels à jsx() ou jsxs(), avec les enfants placés dans les props, et le fragment s'appelle _Fragment. L'import de react/jsx-runtime est ajouté, avec seulement les noms que le code utilise. Il faut React 17 ou plus récent, et vous obtenez ce que produirait une chaîne d'outils React actuelle.
Ce que le convertisseur JSX conserve et modifie
- Les imports et les exports restent tels que vous les avez écrits.
- Les commentaires sont conservés, à leur place.
- Le JavaScript ordinaire autour du JSX n'est pas touché, hormis la mise en forme de Babel.
- La mise en forme est celle de Babel, pas celle de Prettier : vos guillemets et vos retours à la ligne dans le JSX ne sont pas conservés. Pour remettre le résultat au propre, passez-le dans l'outil Formateur de code.
- Des annotations
/*#__PURE__*/sont ajoutées devant les appels d'éléments. Elles indiquent aux bundlers que l'appel n'a pas d'effet de bord.
Ce que l'outil ne fait pas : TSX, TypeScript et Flow
Il ne compile que du JSX. Il ne lit pas TypeScript : un TSX avec des annotations de type provoque donc une erreur de syntaxe, et Flow n'est pas pris en charge non plus. Il n'exécute pas votre code, ne vérifie pas que vos composants fonctionnent et n'assemble pas de fichiers.
Pour aller dans l'autre sens, du JavaScript simple vers du code typé, utilisez l'outil Convertisseur JS en TS. Pour lire des scripts minifiés ou obfusqués, utilisez l'outil Désobfuscateur JS.
Pourquoi tout se passe dans votre navigateur
Babel est chargé une seule fois, au premier collage, puis la compilation se fait dans un Web Worker sur votre appareil. Votre composant n'est envoyé nulle part et n'est jamais exécuté : vous pouvez donc coller sans crainte un fichier qui a des effets de bord.
Questions fréquentes
Comment obtenir du JavaScript à partir de JSX en ligne ?
Collez votre JSX dans le champ « Code JSX ». Environ un tiers de seconde plus tard, le JavaScript compilé apparaît sous le titre « JavaScript ». Il n'y a pas de bouton de conversion, et « Copier dans le presse-papiers » vous donne le résultat. Babel se télécharge une fois au premier collage, la première conversion est donc un peu plus longue.
Babel transforme-t-il le JSX en JS ?
Oui. Le preset React de Babel compile le JSX en JavaScript, et c'est ce que cette page exécute dans votre navigateur : le résultat correspond donc à une étape de build Babel. Les outils de build font la même chose automatiquement quand vous construisez un projet. Utilisez cette page quand vous voulez voir ou copier le résultat pour un seul composant ou un extrait.
Quelle est la différence entre JSX et JS ?
Le JSX est du JavaScript avec une syntaxe proche du XML pour décrire une interface, par exemple une balise button avec un gestionnaire onClick. Les navigateurs ne peuvent pas l'exécuter : un compilateur réécrit donc chaque balise en appel de fonction ordinaire. Le résultat est du JavaScript classique. L'extension .jsx n'est qu'une convention de nommage pour les fichiers qui contiennent du JSX.
Quelle est la différence entre le runtime classique et le runtime automatique ?
Le classique transforme le JSX en appels à React.createElement, donc React doit être dans la portée de chaque fichier qui utilise du JSX. L'automatique le transforme en appels à jsx() et jsxs() et ajoute lui-même l'import de react/jsx-runtime : vous n'importez plus React rien que pour écrire du JSX. L'automatique demande React 17 ou plus récent. Ici, la valeur par défaut est « Classique ».
Comment obtenir du React.createElement à partir de JSX ?
Laissez le runtime JSX sur « Classique », la valeur par défaut. Chaque élément devient un appel à React.createElement : d'abord le nom de la balise, puis l'objet de props (null s'il n'y en a pas), puis les enfants. Un fragment devient React.Fragment.
Pourquoi mon résultat utilise React sans jamais l'importer ?
La sortie classique appelle React.createElement et React.Fragment sans ajouter d'import, car elle suppose que React est déjà dans la portée. Si votre fichier ne commence pas par import React from 'react', ajoutez cette ligne, ou passez le runtime JSX sur « Automatique », qui écrit l'import nécessaire.
Pourquoi trouve-t-on des commentaires /*#__PURE__*/ dans le résultat ?
Babel place /*#__PURE__*/ devant chaque appel d'élément. Cela indique aux minificateurs et aux bundlers que l'appel n'a pas d'effet de bord : un élément jamais utilisé peut donc disparaître du bundle final. Vous pouvez garder ces commentaires ou les supprimer, ils ne changent pas le comportement du code.
Peut-il convertir du TSX ou du TypeScript ?
Non. Il attend du JSX dans du JavaScript simple, donc une annotation de type comme props: Props est une erreur de syntaxe. Retirez d'abord les types, ou compilez le TypeScript avec le compilateur TypeScript. La syntaxe Flow n'est pas prise en charge non plus.
Mon code est-il envoyé ou exécuté ?
Non. Babel compile le code dans votre navigateur, dans un Web Worker, et rien n'est envoyé à un serveur. Le code n'est pas non plus exécuté : vous pouvez donc coller sans crainte un composant qui a des effets de bord. Le seul téléchargement est celui de Babel lui-même, une seule fois.
Recommandés
-
Tableau blanc magnétique de bureau avec feutresDessinez l’arbre des composants et voyez quel appel createElement s’imbrique dans quel autre.
-
Écran portable KYY 15,6"Gardez le tutoriel ou la doc sur un second écran pendant que vous comparez votre JSX à sa sortie.
-
Barre lumineuse pour écran QuntisÉclaire le bureau et non l’écran pendant vos longues sessions de débogage nocturnes.
Aide à garder les outils gratuits. ✨
Images non contractuelles. En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
