L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Comment JSX (React) fonctionne sous le capot
Vous avez sans doute entendu parler de JSX si vous avez travaillé avec React. Dans ce blog, nous verrons comment JSX se traduit en JavaScript normal. Nous discuterons également des avantages de JSX et de ce qui se passe dans les coulisses lorsque vous écrivez JSX dans React.
Cet article couvrira ce qu'est JSX et ce qui se passe dans les coulisses lors de l'utilisation de JSX avec React. Je vais aller de l'avant et supposer que ce n'est pas votre première rencontre avec React. Aucune connaissance approfondie n'est requise, mais la connaissance fondamentale l'est. Vous pouvez vous référer à la page de démarrage de la documentation React pour un rappel.
Un récapitulatif rapide de ce qu'est React
React est une bibliothèque JavaScript open source développée par l'équipe de Facebook. Il est utilisé pour créer des interfaces utilisateur graphiques (UI) riches. Il est basé sur le concept de composants réutilisables, qui vous permet de créer des interfaces utilisateur complexes à partir de petits morceaux de code isolés appelés composants.
Qu'est-ce que JSX ?
JSX signifie extension de la syntaxe JavaScript. C'est une extension JavaScript qui nous permet de décrire l'arbre d'objets de React en utilisant une syntaxe qui ressemble à celle d'un modèle HTML. Il s'agit simplement d'une extension de type XML qui nous permet d'écrire du code JavaScript qui ressemble à un balisage et de le renvoyer d'un composant. directement; ils ne savent pas quoi en faire, nous avons donc besoin d'un transpileur pour le traduire en appels React.createElement(). Nous avons besoin de transpileurs (un compilateur qui traduit une forme de syntaxe en une autre) comme Babel ou TypeScript pour compiler JSX dans une version compatible avec le navigateur.
Cela se produit pendant le processus de construction, de sorte que le navigateur ne saura jamais que JSX était présent dans le première place. Le navigateur, à son tour, reçoit une arborescence d'objets qui ont été décrits à l'aide de l'API React.
De plus, lorsque nous écrivons du JavaScript moderne, en particulier certaines des fonctionnalités introduites dans ECMAScript 6, certains navigateurs plus anciens ne peuvent pas avoir de sens. de ces fonctionnalités. Nous devons utiliser un transpileur pour convertir ES6 en ES5.
C'est exactement comme cela que cela fonctionne avec JSX également. Considérez cet exemple :
import React from 'react'
function Greet(){
return < h1>Hello World!</h1>
}
Ceci est un composant simple qui affiche « Hello World ” dans le navigateur, et il renvoie ce qui semble être du HTML, mais ce n'est pas le cas. La balise h1 rendue par le composant Greet est un appel de fonction JavaScript pur à React.createElement().
L'exemple ci-dessus serait compilé dans ce avant utilisé par le navigateur.
import React from 'react'
function Greet() {
return React.createElement("h1", {}, "Hello, World!")[19659023]}
Remarquez comment, dans l'exemple JSX ci-dessus, nous n'avons pas fait référence exactement à l'instance de React que nous avons importée, mais, lors de la compilation, elle appelle la fonction React.createElement(). Nous devons donc avoir React dans la portée de JavaScript pour savoir quoi faire avec le code compilé.
La fonction createElement() accepte trois paramètres et renvoie un élément React :
React .createElement(
type,
[accessoires],
[...enfants]
)
Ce n'est pas obligatoire d'utiliser JSX lors de l'écriture de React, mais cela facilite le processus de développement et de débogage pour les développeurs. ]de 'react'
fonction App (){
retour (
<div>[19659066]<p>Ceci est une liste</p>
<ul>
<li>Élément de liste 1</li>
<li>Élément de liste 2</li>
</ul>
</div[1 9459020]>
);
};
Le code compilé devrait ressembler à ceci :
import React from 'react'[19659086]fonction App() {
retour React.createElement(
"div",[19659063]nulle,
React.createElement("p", null, "Ceci est une liste"),
React.createElement(
"ul",
null,
React.createElement("li", null, "List item 1"),
React.createElement("li", null, "List item 2")) );
}
C'est également ainsi que vous écririez React sans JSX. Avec un peu d'imbrication, on voit que ça commence à devenir illisible et moche. Non seulement cela semble difficile à coder, mais cela semble également difficile à maintenir. C'est là qu'intervient JSX, combinant la beauté du HTML et la puissance de JavaScript. La fonction
React.createElement() dans l'exemple ci-dessus renverrait un objet comme celui-ci :
{
"type": "div",
"clé": null,
"ref":[19659102]null,
"accessoires": {
"enfants": [
{
"type":[19659013]"p",
"clé": null,
"ref": null,
"accessoires" : {
"children": "Ceci est une liste"
},
"_owner": null[19659155]},
{
"type": "ul",
"clé": null,[19659156]"ref": null,
"accessoires":[19659032]{
"enfants": [
{
"type": "li",
"accessoires" : {
"enfants": "Élément de liste 1"
},
},
{
"type"[19659016]: "li",
"accessoires": {
"enfants": "Élément de liste 2"
}[19659016],
}
]
},
"_owner": null
}
]
},[19659094]"_owner": null
}
Ces objets sont appelés éléments React, mais ce ne sont que de simples objets JavaScript. Ils décrivent ce que vous voulez voir à l'écran. Ils représentent des éléments HTML et ne vivent pas sur la page (le « vrai » DOM) – ils vivent sur le DOM virtuel. React lit ces objets et les utilise pour créer des éléments HTML sur le DOM virtuel, après quoi il est synchronisé avec le DOM réel.
Nous aurons donc des arbres d'objets sur le DOM virtuel et des arbres d'objets sur le DOM réel. React met automatiquement à jour l'élément DOM associé lorsque nous modifions des données sur un élément React.
Voici quelques-uns des éléments DOM que vous rencontrerez :
type: Nous permet de spécifier le type de React élément à rendre. Cela peut être une chaîne ("div", "h1"), un composant React (classe ou fonction) ou un fragment React.props: Peut être null ou un objet contenant des propriétés (référencé en tant que "props" dans React) qui sont passés au composant.children: Les enfants que vous souhaitez transmettre à cet élément. S'il s'agit d'une chaîne entre guillemets, comme vu ci-dessus, le contenu sera traité comme du texte. Lors de l'ajout de plusieurs enfants, nous utilisons un tableau et nous pouvons imbriquer autant d'enfants que nous le souhaitons. à vous).ref: Est une référence à un nœud DOM réel. Il vous permet d'accéder directement à un élément DOM ou à une instance d'un composant.$$typeof: Cette propriété identifie l'objet en tant qu'élément React. Il est utilisé pour la protection contre les attaques de type Cross-site Scripting (XSS).
JSX sans React dans la portée (avec React 17)
Comme vu précédemment, lorsque nous utilisons JSX, le compilateur le convertit en appels de fonction React que le navigateur peut comprendre. Néanmoins, après la sortie de React 17, l'équipe Facebook a collaboré avec Babel pour améliorer la transformation JSX sans casser aucune des configurations existantes.
Cette mise à jour n'a aucun effet sur la syntaxe JSX et n'est pas obligatoire. La transformation JSX précédente continuera à fonctionner normalement et il n'est pas prévu d'interrompre sa prise en charge. Avec la nouvelle transformation, vous pouvez ignorer l'instruction (obligatoire) import React from 'react' dans chaque fichier de composant. Il est possible d'écrire JSX sans importer la bibliothèque React au niveau supérieur ou avoir React dans la portée.
React 17 ajoute deux nouveaux points d'entrée au package React qui ne seront utilisés que par des compilateurs tels que Babel et TypeScript, donc au lieu de convertir JSX en React.createElement(), la nouvelle transformation JSX importe automatiquement des fonctions spéciales à partir de ces nouveaux points d'entrée dans le package React et les appelle.
Donc, si nous avons ceci :
fonction Salut(){
retour <h1>Bonjour tout le monde!</h1>;
}
Avec la nouvelle transformation, vous pouvez écrire votre composant avec JSX sans importer React manuellement.
La nouvelle transformation JSX se compilera vers :
import {jsx as _jsx} de 'react/jsx-runtime';
fonction App () {
return _jsx('h1', { enfants: ' Hello world' });
}
Maintenant, nous pouvons voir que nous n'avons pas eu besoin d'importer React à cause de la nouvelle transformation JSX. L'instruction d'importation dans l'exemple ci-dessus n'est pas censée être effectuée manuellement – le compilateur le fera pour vous.
Cela améliore notre code et nous permet d'apporter des améliorations de vitesse que React.createElement() ne permet pas ; Cependant, nous aurions toujours besoin d'importer React pour utiliser les Hooks et d'autres exportations React. Ce changement est entièrement compatible avec n'importe quel code JSX actuel, vous n'aurez donc pas besoin de modifier vos composants. .
Si vous devez créer des éléments manuellement dans votre code, vous devez continuer à utiliser React.createElement.
- React 17 RC et versions ultérieures prennent actuellement en charge la nouvelle transformation, mais l'équipe React a également publié React 16.14.0, React 15.7.0 et React 0.14.10 pour les personnes qui utilisent encore les anciennes versions majeures.
- Create React App 4.0.0+ utilise la nouvelle transformation pour les versions React compatibles.
- Next.js v9.5.3+ utilise la nouvelle transformation pour les versions de React compatibles.
- Gatsby v2.24.5+ utilise la nouvelle transformation pour les versions de React compatibles.
Vous pouvez consulter la documentation de React pour plus d'informations sur la mise à niveau vers la nouvelle Transformation JSX.
Bonus : règles JSX importantes
Vous ne pouvez retourner qu'un seul top -level élément d'un composant donné. Ceci est généralement connu comme un élément parent et est utilisé pour regrouper le contenu. N'oubliez pas que JavaScript est l'épine dorsale de React, et dans JavaScript, une fonction ne peut renvoyer qu'une seule valeur.
Certains éléments en HTML n'ont pas de balise de fermeture. Dans React JSX, chaque balise, y compris celles sans balise de fermeture, doit être fermée. Si vous avez un élément qui n'a pas de balise de fermeture, vous devez ajouter une barre oblique à la fin (par exemple,
).
Un composant React doit être en majuscule. Les noms de composants qui ne commencent pas par une majuscule sont traités comme des composants intégrés, et il en résulte des chaînes (« div », « span »…). Lorsque le nom du composant est en majuscule, il est traité comme un identifiant au lieu d'une chaîne.
Pour inclure des expressions JavaScript dans JSX, vous devez les mettre entre accolades. Le contenu entre les accolades ouvrantes et fermantes sera évalué en tant que JavaScript.
Le terme « classe » est un mot-clé réservé en JavaScript. Dans React, nous devons remplacer className par class.
Conclusion
Dans cet article, nous avons appris que JSX n'est qu'un bon moyen d'écrire des objets JavaScript simples décrivant les éléments React qui composent votre application. Essayez de ne pas le traiter comme une boîte noire. J'espère que vous avez trouvé cet article utile et que vous avez découvert des moyens intéressants d'exploiter la puissance de JSX.
Source link