React - Composant, JSX et Virtual DOM

Bonjour à tous et bienvenue dans cette nouvelle leçon sur la bibliothèque React. Après avoir installé l'environnement de travail, que ce soit à travers l'outil Create React App ou Vite, nous pouvons désormais commencer à coder notre application. Je rappelle que quelle que soit la méthode utilisée pour initier un projet, l'environnement reste grosso modo le même, à l'exception de quelques petits détails comme les noms de certains fichiers et dossiers. Bien entendu, je parle de la structure du projet et non pas de ses performances, puisque Vite est reconnu pour être plus performant. Cependant, le code que nous allons voir tout au long de cette série est le même et donc valable aux 2 techniques, mis à part 2-3 petites choses que l'on verra plus loin comme les variables d'environnement et la gestion des assets. Commençons par exécuter notre projet sur le navigateur à l'aide de la commande npm run start. On constate qu'il y a déjà des éléments intégrés par défaut à cette page, comme le logo animé et le lien vers le support. Vous avez probablement constaté le message qui vous invite à éditer le fichier App.js afin de mettre à jour l'affichage. En effet, le fichier App.js est le composant principal de l'application, mais avant d'expliquer ce que c'est qu'un composant, faisons un petit saut dans ce fichier. Je rappelle que le répertoire src contient toute la logique de notre projet. En l'occurrence le composant principal App.js. On constate que App.js contient une fonction du même nom, c'est-à-dire App. Il est évident que le code est écrit en JavaScript, donc, comme vous allez le voir tout au long de cette série, on n'a pas besoin de spécifier l'extension .js. Pareil si vous avez opté pour TypeScript. Dans la fonction App, nous avons un return et vous avez peut-être remarqué que ce qui est retourné est très semblable à du HTML. Dire même que c'est du HTML, mais nous allons y revenir dans quelques instants. Au tout début du document, nous avons 2 importations: une de l'image logo.svg et l'autre du fichier app.css. Je rappelle que ces 2 ressources sont disponibles dans le même dossier courant src. En effet, les importations peuvent se faire seulement dans ce dossier-là. À la fin du document, nous avons l'instruction d'exportation par défaut. Si l'importation et l'exportation ne vous semblent pas trop familières, Ne vous inquiétez pas, car nous aurons souvent besoin de les programmer nous-mêmes, et là, vous comprendrez mieux comment ils fonctionnent. Puisqu'on a exporté notre composant principal App, donc on devrait l'importer quelque part. En effet, c'est à travers le document index.js. Le fichier index.js constitue l'entrée principale dans notre application, c'est-à-dire que c'est lui qui est rendu au navigateur au moment de l'exécution. Donc, on On peut constater l'importation du composant principal App qui a été défini dans le fichier App.js. On peut aussi remarquer qu'on s'est servi de ce composant comme une sorte de balise HTML. En effet, c'est le contenu de ce composant-là qui sera affiché au navigateur indirectement à travers le fichier Index.js. On dit que le composant sera rendu au navigateur. En haut du document, on peut identifier une série d'importations de quelques modules essentiels au fonctionnement de React. Notamment React et ReactDOM. React est un module qui assure de nombreuses fonctionnalités essentielles, comme l'interprétation du JSX à travers le transpiler Babel. ReactDOM quant à lui permet à l'application d'interagir avec le DOM au sein du navigateur, à travers le Virtual DOM. Le Virtual DOM est un concept clé de React. Il s'agit d'une copie du DOM réel qui est interprétée par le navigateur. Cette copie du DOM est plus rapide à mettre à jour, donc offre une meilleure expérience utilisateur car l'application devient plus réactive. Le fait de convertir le DOM virtuel en DOM réel qui sera manipulé par le navigateur est connu sous le nom de réconciliation. Il y a plein de choses à dire à propos du processus de réconciliation, mais sachez qu'on peut exploiter toute la puissance de React sans vraiment entrer dans ces détails-là. Il y a d'autres instructions dans le fichier index.js, mais je pense que vous pourrez facilement comprendre leur utilité. Ce qui ressemble à une balise qui porte le nom de React.StrictMode est connu en React par le nom de Wrapper. En tout cas, il sert à détecter les problèmes potentiels lors du développement. Cet outil peut même déclencher l'exécution de certaines fonctions, appelées aussi hooks, plusieurs fois afin de détecter les effets secondaires qui peuvent nuire à l'exécution du code. Juste avant, il y a la variable, ou plutôt une constante nommée root et qui fait référence à la balise div identifiée par root présente dans le fichier index.js que nous avons exploré la dernière fois et qui permet de donner vie à une Single Page Application. Il est possible d'ajouter des éléments au fichier index.js et le rendu changera aussitôt dans le navigateur. D'ailleurs, chaque modification du code rafraîchit automatiquement la page sur le navigateur. Cependant, il est déconseillé de toucher au code du fichier index.js. Donc, comme la page d'accueil nous l'a préconisé, nous allons plutôt modifier le fichier App.js. Comme je l'ai souligné avant, Le fichier App.js donne vie à un composant React. Un composant React est un élément qui fait partie de l'interface graphique. Il peut donc contenir du texte, des images, des boutons ou tout autre type de contenu visible. L'avantage du composant React réside dans sa réutilisabilité. En effet, un même composant peut être utilisé de nombreuses fois afin de construire des vues différentes de l'application. En React, un composant peut être fonctionnel ou de classe. Les composants fonctionnels sont les plus utilisés. Il s'agit seulement d'une fonction qui retourne du JSX comme vous pouvez le voir dans le code du composant App.js. Le composant @class utilise la syntaxe orientée objet, mais il est de moins en moins utilisé de nos jours. Maintenant, regardons ce qui a été retourné par le composant App.js. À première vue, on dirait du HTML. En effet, tout laisse à croire que c'est du HTML car il y a des balises familières comme div, Header, img, etc. Sauf que ce n'est pas vraiment du HTML mais c'est du JSX. JSX pour JavaScript Syntax Extension et parfois JavaScript XML est une extension du langage JavaScript utilisée dans React. En effet, JSX est du JavaScript écrit de manière semblable à du HTML afin de faciliter la description des composants. JSX en tant que tel n'est pas compris par le navigateur, donc il sera transpilé en code JavaScript compréhensible à l'aide de Babel qu'on a vu dans la vidéo précédente. GSX permet d'intégrer des composants plus facilement. À titre d'exemple, au lieu d'écrire quelque chose comme ceci, avec GSX, on peut simplement écrire quelque chose de plus simple. Et si on veut intégrer du contenu dynamique dans du GSX, comme une variable JavaScript, alors on utilise ce qu'on appelle l'interpolation GSX. Cela consiste à placer notre élément dynamique entre des accolades. Maintenant que vous connaissez ce que c'est qu'un composant React, il est temps de modifier le contenu de notre fichier App.js. Pour partir sur de bonnes bases, nous allons effacer tous les éléments rendus par défaut. On peut aussi effacer les instructions d'importation tout en haut du fichier. Maintenant, dans le return, nous allons placer une balise H1. N'oubliez pas que ce n'est pas une balise HTML mais plutôt un composant JSX qui sera transformé en élément HTML et qui sera intégré au DOM. Si on se rend sur le navigateur, on voit bien que notre élément est correctement intégré. Maintenant, ajoutons un autre élément, disons par exemple une div. On voit apparaître des erreurs. Si on lit les détails de l'erreur, ça nous dit qu'on ne peut pas retourner plus d'un composant JSX. Autrement dit, en cas de plusieurs composants, il faut les imbriquer dans un seul grand composant comme ceci. Le souci avec cette méthode, c'est que sans le vouloir, nous avons intégré l'élément div que l'on vient d'ajouter au DOM, ce qui créera plus d'éléments et plus d'imbrications inutiles. La solution consiste à utiliser ce que l'on appelle React Fragment. Il s'agit simplement d'une sorte de balise sans nom comme ceci. Donc, à chaque fois que vous avez besoin de retourner plus d'un élément, pensez à les inclure dans un React Fragment. Si on veut inclure un élément dynamique dans notre composant, comme du JavaScript natif, alors on utilisera l'interpolation JSX comme ceci. On peut aussi dynamiser le mot Bonjour et le remplacer par Bonsoir si la page est exécutée le soir. Donc on peut simplement faire ceci. Bien entendu, on insère la logique du composant avant le return. On vient de faire nos premiers pas en React et pour ne pas avoir une vidéo trop longue, je préfère me contenter de ça pour le moment. Merci pour votre attention et à la vidéo prochaine.