Maîtriser le routage React avec React Router pour une navigation fluide dans vos applications Web

1. Introduction du cours: Salut, voilà. Bienvenue dans ce cours sur la maîtrise des sorties avec React, et je serai votre instructeur tout au long du cours Je suis très heureux de vous guider dans cette merveilleuse aventure de React Router, qui est la bonne solution pour gérer la navigation dans les applications React modernes. Aujourd'hui, le routage est un élément fondamental de toute application Web sans permettre aux utilisateurs de naviguer vers différentes pages Web. Comme s'il était peu probable que vous puissiez créer des applications de production réelles. Et c'est là que le routage entre en scène. Et c'est aussi pour cela que vous devriez vous renseigner sur le routage dès aujourd'hui. Aujourd'hui, sans un système de routage solide, même les meilleures applications de conception peuvent sembler désorganisées et difficiles à utiliser Et c'est exactement ce que nous allons maîtriser dans ce cours en particulier. En parlant de ce cours, nous allons donc aborder une introduction. Nous allons faire une introduction à React Routing ce qu'il est et à son fonctionnement. Nous allons apprendre et comprendre comment configurer des routes dans notre application React. Nous apprendrons également comment ajouter de la navigation, comment créer des itinéraires imbriqués, et nous apprendrons également comment créer une page 404 qui est une page introuvable, une sorte de message à l'utilisateur C'est donc ce que nous allons faire. Et oui, avec ce cours en particulier, vous serez en mesure de créer des applications multipages avec React en ajoutant la fonctionnalité de routage, et vous serez en mesure d' assurer une navigation fluide, offrant aux utilisateurs une expérience de navigation fluide. Maintenant, à qui s'adresse ce cours ? Ce cours est donc parfait pour développeurs de React de tous niveaux, que vous débutiez avec React ou que vous soyez un développeur React avancé. Ce cours est parfait pour vous car dans ce cours en particulier, j'ai fait en sorte que les choses soient assez grandes et conviviales. Je vous explique donc tout, donc ce sera vraiment un jeu d'enfant pour vous. Et si vous êtes développeur de niveau avancé, ce cours est toujours le meilleur car, vous savez, il s'agit d'un bon rappel des concepts liés au routage et vous pourriez tirer quelque chose de nouveau de ce cours en particulier Voilà donc ce que c'est. Et la façon dont ce cours est conçu est entièrement pratique. Je m'assure de coder la plupart du temps et de vous montrer différents exemples plutôt que d'utiliser des présentations PowerPoint. C'est donc l'USP de ce cours. Maintenant, êtes-vous prêt à faire passer vos capacités de réaction au niveau supérieur ? Plongeons-nous dans le vif du sujet et commençons ensemble à créer des applications conviviales pour la navigation dynamique ? 2. Commencer à mettre en place un projet React: Salut, voilà. Il est donc temps de commencer à créer notre application React, et nous allons le faire à l'aide de la ligne de commande. Donc, tout d'abord, je vais me diriger ou naviguer via la ligne de commande dans le dossier du projet. Maintenant, ce que je veux dire par dossier de projet, c'est un dossier de mon choix dans lequel je souhaite organiser mes projets React, d'accord ? Donc, ce que vous pouvez faire, c'est vous rendre dans le Finder. Par exemple, si vous êtes sur Mac, vous pouvez accéder au Finder ou si vous êtes sous Windows comme moi, vous pouvez vous rendre ou si vous êtes sous Windows comme moi, dans l'Explorateur, à droite, et créer un dossier à l' emplacement de votre choix, vous pouvez appeler le dossier comme bon vous semble. Je l'appellerais React. Ensuite, à partir de la ligne de commande, vous pouvez simplement accéder à l'emplacement où vous avez créé le dossier. J'ai donc créé ce dossier de réaction ici à cet emplacement particulier, et le CD est la commande, qui est le changement de répertoire, et il m'aide à naviguer ou à me rendre dans ce dossier en particulier ou à me trouver dans ce dossier depuis la ligne de commande. Maintenant que je suis dans ce dossier en particulier, je vais effacer tout le reste. C'est bon. Maintenant, dans ce dossier particulier, je vais commencer à créer mon application React. Et pour cela, je vais utiliser NPX, d'accord ? Oups. J'ai donc déjà créé quelques applications React auparavant. Vous pouvez donc voir cette suggestion ici, d'accord, mais je ne peux rien y faire. OK ? Mais ignorez cette suggestion pour le moment, car ce que fait ce terminal en particulier, c'est que, quoi qu'il voit dans votre historique, il ne cesse de vous suggérer, ce qui est une bonne chose. Vous montrer l'intégralité de la commande, c'est très bien. Donc, NPX, je vais utiliser NPX, d'accord ? Maintenant, la syntaxe de NPX est correcte. Il est utilisé pour exécuter les packages de nœuds ou pour exécuter les packages. Ensuite, nous allons utiliser l'application Create React. C'est bon. Maintenant, qu' est-ce que l'application Create React ? L'application Create React est un outil qui vous aide à créer l' intégralité de l'application React. Maintenant, pourquoi en faisons-nous usage ? Parce que le projet React doit être organisé d'une certaine manière, il doit contenir le dossier SRC, certains fichiers et tout cela doit être réuni pour vous permettre ou permettre à votre application de fonctionner de manière fluide, n'est-ce pas ? Vous pouvez donc également créer ces fichiers manuellement, mais il s'agit d'un outil qui vous permet créer ou configurer correctement la structure de l'application. OK ? Ensuite, je vais simplement mentionner le nom de mon application, afin que je puisse l'appeler application MyRact, quelque chose comme ça OK ? Et ce que je peux faire, c'est simplement appuyer sur Entrée. Au moment où j'appuie sur Entrée, cela va créer un dossier à cet emplacement particulier. Donc, à cet endroit précis, il va créer ce dossier. Pourquoi crée-t-il un dossier à cet emplacement ? Parce que j'ai accédé à ce dossier depuis le terminal, et ce sera le nom du dossier sous lequel existeront tous les fichiers de mon projet React OK ? Vous pouvez donc appuyer sur Entrée, et vous devriez voir une sorte de traitement se produire. Vous pouvez donc voir la création d'une nouvelle application React à cet endroit précis. Il est en train d'installer certains packages, ce qui peut prendre quelques minutes. Donc, il est en train d'installer, il vous indique également ce qu' il est en train d'installer. Il installe React, React Dom, React Scripts et tout le reste, tout ce dont il a besoin. Nous attendrons donc un moment jusqu'à ce que tout ce processus soit terminé et que nous obtenions une confirmation. J'ai donc reçu la confirmation, et j'ai également reçu un message mineur. OK. Au moment où j'ai commencé à enregistrer cette vidéo, il y avait une nouvelle version mineure, disait que NPM était disponible, et elle me demandait si je pouvais effectuer une mise à niveau OK, donc je procéderai à la mise à niveau plus tard. Vous ne le verrez peut-être pas, d'accord, mais oui, je vais juste l' ignorer pour le moment. Il s'agit simplement d'une notification de mise à niveau. Vous pouvez voir la confirmation ici, joyeux piratage. C'est bon. Et si vous faites défiler la page vers le haut, vous verrez le processus complet de ce qui s'est passé. Nous avons donc exécuté cette commande ici. Oups. Laissez-moi faire défiler la page vers le haut. Nous avons donc exécuté cette commande ici. OK ? Si vous venez ici, vous pouvez voir qu'il a ajouté de nombreux packages. Cela a pris 36 secondes. Si vous venez ici, d'accord, cela signifie que cette application particulière a été créée avec succès à cet endroit et dans ce répertoire. Vous devez donc accéder à ce répertoire, et à l'intérieur de celui-ci, vous pouvez exécuter toutes ces commandes ici. OK ? Maintenant, une fois que vous avez navigué, il vous a donné des commandes prêtes à l'emploi, comme NPM start Il démarrera sur le serveur de développement. L'application React que vous avez créée est donc livrée avec un serveur intégré. Vous pouvez exécuter cette commande pour regrouper l'application et dans des fichiers statiques, essentiellement pour le déploiement en production Cela lancera le lanceur de tests au cas où vous souhaiteriez exécuter des cas de test, NPM run eject OK, c'est quelque chose que tu peux gérer. Donc, la suggestion est que vous pouvez commencer par l'exécuter ici. Je vais le copier. OK ? Je vais le coller ici. Je vais me diriger vers ce répertoire, d'accord, puis il vous indiquera NPM start Maintenant, il s'agit d'une commande à l'aide de laquelle vous pouvez démarrer un serveur de développement sur votre machine locale. Donc je peux aussi exécuter cette commande, d'accord ? Et vous pouviez voir l' application opérationnelle. C'est donc l' application, d'accord ? Vous pouvez voir que le navigateur s'ouvre automatiquement, et vous pouvez voir que c' est l'application qui fonctionne. Maintenant, il s'agit d'un serveur qui vous montre votre contenu ou s'il exécute votre application React dans le navigateur. Maintenant, chaque modification que vous apportez aux fichiers, vous verrez des rechargements en direct se produire ici accord ? Maintenant, vous pouvez voir le message ici, comme si vous deviez modifier ce fichier en particulier et l'enregistrer pour le recharger OK ? Donc, cette interface provient de ce fichier en particulier, c'est ce qu'elle dit. Et si vous cliquez ici, voici le lien vers le site officiel de React. C'est ce à quoi il est lié. OK ? Vous pouvez donc aller sur ce site Web et consulter ou lire certaines informations également. C'est bon. Mais je voudrais mentionner quelques points ici : une fois que vous avez démarré le serveur de développement, vous pouvez l'arrêter en appuyant sur fois que vous avez démarré le serveur de développement, Ctrl et C sous Windows ou sur Command et C sur Mac. OK ? Je suis sous Windows, donc j'appuie sur Ctrl C, et vous pouvez voir que cela a mis fin à ce travail en particulier. Et voilà, si vous essayez de vous rafraîchir, cela ne marchera pas. D'accord, parce que le serveur est en panne, non ? Maintenant, pour que votre serveur soit opérationnel, vous devez exécuter NBM start dans ce dossier particulier OK ? Ce n'est qu'alors que votre serveur sera opérationnel. Ainsi, tout en développant, vous pouvez laisser le serveur allumé, modifier les fichiers, enregistrer et voir les modifications se produire en direct. OK ? Maintenant, je vais parler un peu plus de cette commande. Nous avons donc créé l'application React ou l'application complète à l'aide de cette commande particulière. Maintenant, vous pouvez également ajouter des options ici à la fin. OK ? Donc, ce que vous pouvez faire, c'est utiliser des modèles ici. OK ? Maintenant, supposons que lorsque vous travaillez avec React, vous souhaitiez également utiliser du tapuscrit OK ? Donc, si vous utilisez du tapuscript, vous pouvez ajouter quelque chose comme ceci Vous pouvez dire modèle ici, et vous pouvez dire type script. Je ne vais pas le lancer, mais ce n'est qu'une information supplémentaire. Cela permettra d'utiliser le modèle de dactylographie pour créer votre application et d'ajouter le support dactylographié dès le départ, ce qui est utile si vous travaillez sur un projet plus important qui peut bénéficier d'une bénéficier C'est bon. Vous pouvez donc utiliser cette commande de cette façon, d'accord. J'espère que cette commande est claire NPX create react tap. Le serveur n'est donc pas opérationnel, mais vous pouvez maintenant le redémarrer en disant NPM run NPM start. Je suis désolée. C'est donc NPM start, quelque chose comme ça. Et si vous le démarrez, il redémarrera le serveur. accord ? J'espère donc que cela utile et j'espère que vous avez pu suivre. 3. Configuration de l'IDE avec Visual Studio Code: Il s'agit de notre première application basée sur React , que nous avons créée, ou je dois dire que nous n'avons pas créée. OK. Ce projet est donc généré automatiquement à l'aide de l'application Create React. OK, et cela nous donne également un indice ici. Vous pouvez modifier les points de l' application et la recharger en toute sécurité. OK ? Il contient un lien pour apprendre React, qui vous redirigera vers le site officiel de React. Très bien, jusqu'ici tout va bien. Voici donc notre application opérationnelle. Maintenant, que devons-nous faire ? Nous devons commencer à coder et à modifier les choses. Et qu'allons-nous faire pour cela ? Nous allons installer un IDE, qui est le code ID Visual Studio. OK. Voilà donc à quoi ça ressemble. Si vous l'avez déjà bien sur votre ordinateur, si ce n'est pas le cas, rendez-vous sur ce site officiel. C'est un outil gratuit, gratuit, basé sur l'open source, qui fonctionne partout. Comme je suis sous Windows, cela m'invite à télécharger une version stable conçue pour Windows Vous pouvez passer au système d'exploitation dont vous avez besoin. Mais si votre système d'exploitation a un programme d'installation ici, il le fera automatiquement. Donc, si vous vous connectez depuis un Mac ici, cela vous indiquera le téléchargement depuis Mac. OK ? Donc, quelle que soit la plateforme à partir de laquelle vous l' ouvrez ce bouton s'affichera et vous pourrez le parcourir si vous ne savez pas ce qu'est le code de Visual Studio. Mais il suffit de le télécharger et l'installer comme n'importe quel autre logiciel. Je l'ai déjà installé, je ne vais donc pas vous montrer les étapes d'installation, mais les étapes d'installation ne sont pas du tout complexes. C'est très simple et direct. 4. Commencer notre voyage par les premiers pas: Maintenant, une fois que vous avez correctement installé le code Visual Studio, vous verrez une page comme celle-ci. Donc, si vous ouvrez le code Visual Studio, pour la première fois, vous verrez cette page de bienvenue. Maintenant, je suis un utilisateur de Visual Studio Code depuis un moment, d'accord ? Et vous voyez tous ces projets récents. Il est donc probable que vous ne verrez pas la liste des projets récents tant que vous ne serez pas un utilisateur. Mais comme je l'ai dit, comme je l'ai dit, je vois la liste des projets récents que j' ai utilisés ou créés dans le passé. Vous verrez également ces options ici : nouveau fichier, fichier ouvert, dossier ouvert, clonage du dépôt Git, connexion à tout cela. C'est un outil très utile. Le code Visual Studio, je l'utilise tout le temps. Maintenant, pour ouvrir le projet, vous connaissez le dossier dans lequel vous avez créé le projet. Vous pouvez donc simplement cliquer ici, Ouvrir le dossier et vous pouvez accéder à l'emplacement du dossier dans lequel vous avez créé le projet. Sinon, si pour une raison quelconque vous ne le voyez pas, vous pouvez accéder au fichier dans les options du menu ici et vous pouvez dire « ouvrir un dossier ». Les deux sont identiques. Je vais donc sélectionner Ouvrir le dossier, accéder au répertoire de mon choix et ouvrir le projet ici. Maintenant, lorsque j'ai sélectionné Ouvrir le dossier, j'ai vu cette fenêtre de dossier, qui est Explorer, la parcourir jusqu' au dossier dans lequel j'ai créé l'application React Et je vais sélectionner ce dossier en particulier. Voici mon projet d'application React que nous avons créé. À l'intérieur, vous verrez quelques fichiers, mais vous devez sélectionner le dossier racine. Je vais dire sélectionner, et cela ouvrira ce dossier en particulier pour moi. Je peux maintenant fermer cette page d' accueil ici. OK ? Vous pouvez donc voir le projet ici sur le côté gauche, d'accord ? Vous pouvez consulter l'intégralité de ce dossier. Si vous le décompressez, vous verrez les fichiers qu'il contient. OK ? Ainsi, lorsque vous avez exécuté la commande appelée Create React app, d'accord avec l'application Create React, elle a créé tout cela pour vous. OK ? Vous pouvez également le créer manuellement. Mais comme vous pouvez l'imaginer, cela va être très fastidieux, non ? Ainsi, cet outil particulier, Create React App, fait le travail à votre place, en configurant la structure complète du projet pour vous. OK ? Nous passerons bientôt en revue cette structure de projet, mais pour le moment, je voudrais également expliquer que le serveur est opérationnel depuis le terminal. Maintenant, ce que je peux faire, c'est que je n'ai pas besoin d'utiliser un terminal externe. Le code Visual Studio permet d' avoir un terminal dans le code Visual Studio. De cette façon, je n'ai jamais à quitter code de Visual Studio pour passer à un terminal local. Ici, en haut des options, je vais voir le terminal ici. Vous pouvez dire nouveau terminal, et vous pouvez voir qu'il s'agit d'un terminal intégré dans le code de Visual Studio. Et si vous dites PWD, qui est le répertoire de travail actuel, le terminal s'ouvre automatiquement dans le dossier que vous avez ouvert dans le code Visual Studio, qui est le dossier du projet Vous n'avez donc pas besoin de naviguer également, vous n'avez pas besoin d'exécuter la commande, CD, etc. et de naviguer, cela fonctionne simplement comme un terminal local. Donc ici, je peux dire que NPM recommence ici. Au moment où je dis, je vais avoir une erreur, vous pouvez voir que quelque chose fonctionne déjà sur le port 3 000. Et ce qui est en cours d'exécution, c'est notre application elle-même qui s'exécute, et elle nous demande si vous souhaitez plutôt exécuter l'application sur un autre port. Je ne veux pas faire ça. Je vais dire non. OK, et ça va juste arrêter l'exécution. OK ? Mais ce que je vais faire, c'est fermer ce serveur parce que je ne veux plus utiliser un terminal externe, vous savez, ici. OK ? Je veux m'en tenir au terminal fourni par Visual Studio, et je dirais pin start, et cela devrait maintenant exécuter le serveur de développement pour vous. OK ? Donc, de cette façon, nous pouvons le déplacer vers une nouvelle fenêtre. Nous voici donc dans la nouvelle fenêtre, et j'ai du code Visual Studio en cours d'exécution dans la nouvelle fenêtre. Ainsi, je n'ai jamais à quitter le code de Visual Studio. Je peux même minimiser ça ici comme ça. OK ? Je peux même créer un nouveau terminal à partir d'ici, pour que vous puissiez voir plus, et vous pouvez avoir plusieurs terminaux fonctionnant ici. OK ? C'est très utile, et c'est la raison pour laquelle. Ce type d'outils fournis par Visual Studio code est donc la raison pour laquelle il est si apprécié par la communauté des développeurs. Maintenant, je vais également vous montrer la liste des extensions que j'ai. Donc, si vous allez dans cet onglet d'extension sur le côté gauche, vous avez ici quelques options comme la recherche, contrôle du code source, l'exécution et le débogage, tout cela, d'accord ? J'utilise également Docker dans certains de mes projets, vous pouvez donc également voir Docker ici Mais il se peut que vous ne le voyiez pas. OK ? Cela nécessite une extension séparée, d'accord ? Mais si vous optez pour l'extension. Maintenant, que sont les extensions ? Les extensions vous permettent donc d'améliorer ou d'étendre les fonctionnalités par défaut que code Visual Studio fournit déjà. Vous pouvez donc voir que j' ai une extension pour le bloc-notes Jupiter. OK. Chaque fois que je code en Python, et si je veux un support pour les blocs-notes, j'utilise cette extension. OK. J'ai donc cette extension. Cela n'est pas nécessaire pour réagir. J'ai l'extension Python. OK ? Maintenant, cette balise de renommage automatique peut être utile pour React car, vous savez, si vous renommez une balise, d' accord, et s'il y a une balise de fermeture, cela aura pour effet de renommer payante la version payante de cette OK, donc c'est quelque chose que tu peux avoir. C'est utile. Par exemple, si je dois vous donner un exemple, laissez-moi vous en donner un. Disons donc si je crée ou si je me laisse ouvrir un fichier ici. OK, laissez-moi ouvrir un fichier HTML. Maintenant, ce truc, vous pouvez le voir, laissez-moi y aller , faites défiler la page vers le bas. Ce titre possède donc une balise d'ouverture et une balise de fermeture. Donc, à cause de cette extension particulière, si je renomme la balise d'ouverture, vous pouvez voir que la balise de fermeture est également renommée OK ? C'est donc l'avantage de cette balise renommée automatiquement. Vous n'êtes pas obligé de renommer abord la balise d'ouverture, puis renommer la balise de fermeture, Il s'agit de la colorisation par paire, comme vous pouvez le constater à partir de l'icône elle-même, elle est utilisée pour que la couleur mette en évidence la paire qui ferme le crochet C'est utile si vous utilisez beaucoup de crochets dans Okay, Debugger pour Java, Debugger pour Java, Dev Containers, Jango Doco, tout cela que j' utilise pour d'autres langages, pack d' extension pour Java, Gradle pour Java, Italicde Gradle pour Java, Italicde OK ? C'est pour le développement assisté par l'IA. C'est également pour cela qu'il s'agit d'exemples d'utilisation de l'API Intelicode. OK. J'en ai pour Python. Tout cela est donc lié à Python. Je vais faire défiler la page vers le bas, un serveur en direct. Nous n'avons pas besoin de ce Maven pour Java. Cela n'est pas non plus nécessaire. Prettier est quelque chose que vous pouvez utiliser. Cela formate le code. OK. J'organise le code pour vous. OK. Et oui, c' est ce que nous avons, OK. Je vais également ajouter quelques extensions dès maintenant ici. OK ? Donc, ce que vous pouvez faire, c'est rechercher des extraits de code React ici, quelque chose comme ça OK. OK, vous pouvez donc rechercher ES Seven plus React, quelque chose comme ça. Et vous verrez cette extension avec près de millions d'installations. Cela fait donc 12,9 millions au moment où j'enregistre cette vidéo. Bien entendu, cela continuera d'augmenter et vous verrez peut-être un chiffre différent lorsque vous regarderez ce film. Il s'agit donc d'une extension. C'est le nom ES seven plus react redux react native snippets Maintenant, cela vous donne des modèles, d'accord ? Par exemple, si vous voulez créer une fonction, vous pouvez dire RAFC Vous pouvez simplement le saisir et cela vous donnera la définition complète de la fonction pour. OK. Il possède donc ce genre de raccourcis, ce qui vous permet de gagner du temps. Vous pouvez donc l'installer . Je vais simplement cliquer sur Installer et l'ajouter à ma liste d'extensions. OK ? Donc oui, nous l' avons installé maintenant, d'accord ? Vous pouvez explorer d'autres plugins ou extensions React sur le marché ici et vous pouvez jouer avec. Vous pouvez également améliorer les fonctionnalités par défaut que le code Visual Studio vous fournit déjà. C'est bon. Donc oui, il s'agit de configurer le code Visual Studio, et j'espère que vous l'avez trouvé utile. 5. Naviguer sur le Web : une introduction à React Routing: Pas aujourd'hui, il est très courant une application dispose de systèmes de navigation, non ? Par exemple, vous pourriez créer une application qui pourrait avoir une page produit, une page présentant toutes les catégories, une page d'accueil dans la page à propos, une page d'équipe, etc., n'est-ce pas ? Il y a donc une navigation et vous devez naviguer vers différentes URL pour voir le contenu de cette page en particulier. Et c'est très courant. Même aujourd'hui, si vous créez un site Web simple, comme votre propre portfolio, il comportera des éléments tels que les compétences, la manière de vous contacter. Et si vous avez un blog, vous pouvez accéder à l'URL du blog sur votre domaine et consulter tous les articles OK ? C'est donc assez courant. Et lorsqu'il s'agit de créer des applications d'une seule page, vous devez bénéficier d'une expérience utilisateur exceptionnelle vous permettant de naviguer entre différentes pages ou même entre différents composants sans recharger la page entière Et c'est là que le routage entre en scène. Le routage est donc un outil qui permet de naviguer entre différentes pages ou composants sans les recharger. OK ? L' expérience utilisateur est donc vraiment bonne, et il existe une bibliothèque qui facilite cela. C'est ce qu'on appelle React Router. Il s'agit d'une bibliothèque standard utilisée pour le routage dans les applications React. OK ? Maintenant, pourquoi le routage est-il nécessaire ? Bien sûr, il y a quelques points et j'en ai énuméré quelques-uns ici. Par exemple, le point numéro un est l'expérience utilisateur. Le routage améliore donc l' expérience utilisateur en permettant une navigation fluide entre les différentes parties de votre application sans avoir à recharger la page entière C'est important, d'accord ? Séparation des composants. Ainsi, comme le routage est possible, il permet de séparer les préoccupations. Cela rend votre code plus modulaire et plus facile à maintenir. Ce que je veux dire ici, par exemple, c'est que si vous voulez afficher une barre de navigation, du contenu entre les deux, comme par exemple, la page À propos, et en bas, vous voulez afficher un pied Vous pouvez créer trois composants. Vous pouvez conserver la cohérence entre la barre de navigation et le pied de page, puis recharger le composant entre les deux en fonction de l'URL Le composant est donc séparé. Si cela n'est pas possible, dans ce cas, vous devez tout créer dans un seul fichier pour qu' il soit rendu ensemble Mais comme le routage est possible, vous pouvez le séparer. Et c'est quelque chose que vous apprendrez lorsque vous commencerez réellement à utiliser ou effectuer le routage dans vos applications. Gestion des URL. Désormais, le routage permet d'utiliser des URL pour accéder à différents composants, ce qui permet de partager des points de vue spécifiques avec les personnes qui vous entourent, ou vous pouvez même ajouter ces URL à vos favoris Tout cela est donc possible grâce au routage. Le routage est donc en effet important dans la création d'applications Web modernes. Désormais, le routage est possible à l'aide de React Router. OK. Donc, ce que nous allons faire, c'est ajouter ce package dans notre application, d'accord ? J'ai donc créé une nouvelle application et vous allez accéder au terminal. OK. Je vais changer. Je dirais le routage des CD. OK. Voici donc ma candidature. OK ? Je suis donc dans le dossier racine de l'application. OK. Je vais dire NPM install, React Router, Tom, quelque chose comme ça OK ? C'est donc quelque chose que je vais ajouter à mon application et vous verrez certains traitements et installations se produire. Ensuite, vous pouvez passer au package point JASN et vous verrez réagir à l'ajout de Tom ici OK ? Donc oui, c'est ce que nous allons utiliser, et nous en avons terminé avec la configuration. OK ? J'espère donc que vous savez clairement ce qu'est le routage et quelles sont les dépendances que vous devez ajouter à votre projet. 6. Tracer le chemin : établir des itinéraires dans React: Maintenant, ce que nous allons faire, c'est créer trois URL, en fait, et nous allons afficher les différents composants lors de l'accès à ces URL D'accord ? Nous aurons donc besoin de trois composants tels que home about et contact, et ces trois composants seront rendus sur la base de l'URL. La barre oblique affichera donc la barre oblique initiale A affichera environ. Et puis, si vous cliquez sur «   Contact » , vous verrez « contact D'accord ? Donc, la première chose dont nous aurons besoin, c'est que nous aurons besoin de ces trois composants présents. D'accord ? Donc, ce que je vais faire, c'est accéder à la structure de notre application, et je vais commencer à ajouter ces trois fichiers. Je vais dire home point JSX ici, et je peux dire function Oups ici, Et je vais d'abord parler de ou me laisser créer un composant d'accueil. D'accord ? Nous n'avons besoin d' aucune sorte de paramètre, et celui-ci nous ramènera ici, H two home. OK. Je vais garder les choses simples. Je vais simplement renvoyer un mot chacun des composants. C'est donc la maison. Je vais parler de JSX, et ici, je vais parler de quelque chose que j'ai oublié ici, j'ai oublié d'exporter Je vais dire exporter par défaut. À la maison, L. D'accord. Et ici, je vais dire exporter par défaut. A L. OK, home about, et je dois ajouter home about et contact. OK, contact ou son sexe. Donc je dois dire fonction, je dois dire contact. OK. Et voilà, revenez. Je dirais deux, contact. Et je dirais « Exporter par défaut », « contact ». OK. J'ai donc maintenant trois composants configurés et prêts. OK. Ce que nous allons faire, c'est utiliser le routage ici, et nous allons configurer des routes pour différentes URL. Donc, en fonction de l'URL, d'accord, différents composants seront rendus. C'est ainsi que cela va fonctionner. OK. Maintenant, pour cela, nous allons devoir ajouter Import. Nous allons importer quelques éléments de React Router Doom que nous avons ajoutés à notre application Je vais juste tout mettre en place ici. OK. De quoi aurons-nous besoin ? D'accord ? Je vais donc ajouter une déclaration d'importation. Je vais dire Importer. Je dirais navigateur. Routeur, d'accord. Et en tant que routeur ? Oups, en tant que routeur, je dirais routeur React, Tom. OK. Donc, pour une raison ou une autre, la suggestion de commande n'arrive pas, mais elle devrait être en code unique et je dirais React. Route Tom. Oh, il est enfin arrivé. Je ne sais pas, peut-être un problème. Mais oui, c'est ça. OK. Donc, je saisis le routeur du navigateur, tout d' abord, d'accord ? Et j'aurai également besoin d'itinéraires. OK. Tout cela est présent dans cette bibliothèque particulière que nous avons ajoutée. Je vais dire itinéraires, et je dirais itinéraire ici. Comme ça. OK. Voyons maintenant de quoi il s' agit et pourquoi avons-nous besoin ces trois éléments dans notre application. Donc, le routeur du navigateur, tout d'abord, est un composant de base qui permettra le routage dans notre application React. C'est donc un composant qui va surveiller la barre d' adresse du navigateur. Donc, si la barre d'adresse est en forme de barre oblique, il s'agit d'une URL de base, alors elle affichera la page d'accueil Si c'est un slash about, ça va s'afficher. S'il s'agit d'un contact oblique, la page de contact s'affichera ici D'accord ? Vous pouvez donc y penser comme si un manager s' assurerait que la bonne chose est présentée, d'accord ? Ou bien l'URL est synchronisée avec les composants. l'ai dit, c'est le composant de base Comme je l'ai dit, c'est le composant de base qui permet le routage dans notre application. D'accord ? C'est tout ce dont tu dois te souvenir. Routes par ici, nous l' implémentons sous le nom de routeur. Nous sommes en train de créer un alias ici. D'accord, nous disons navigateur routeur. Importez le routeur du navigateur en tant que routeur. Nous pouvons donc appeler cela un routeur. D'accord ? Vous avez des itinéraires. Il s'agit désormais d'un conteneur pour tous les composants de routage des applications. D'accord ? Et nous avons une route jusqu'ici. L'itinéraire va définir ou cartographier un chemin spécifique vers un composant spécifique. Ainsi, par exemple, nous voulons associer la barre oblique About à about over here, about component Route va donc nous aider ici. D'accord ? Maintenant, ce que nous pouvons faire ici, c'est commencer à les utiliser et vous aurez une meilleure idée dans ce et vous aurez une meilleure idée dans contexte de la façon dont ils peuvent être utilisés. D'accord ? Après cela, vous pouvez également essayer d' accéder à l'URL dans le navigateur et vous verrez que cela fonctionne. D'accord ? Donc, d'abord, je vais dire routeur. C'est un composant de base ici, d'accord. Et vous verrez ce routeur être utilisé. OK. Ensuite, je vais parler des itinéraires par ici. OK. Et itinéraire intérieur, je vais dire itinéraire. Donc, pour chaque itinéraire que je dois définir, je dois ajouter cet itinéraire. D'accord ? Ce sera donc une balise à fermeture automatique, o, et je peux dire path. Il possède une propriété de chemin. Je vais donc dire qu'en barre oblique, vous devez mentionner l'élément Quel élément souhaitez-vous donc afficher ? D'accord ? Sur Slash, nous voulons afficher la page d'accueil, non ? Donc je vais dire ici, à la maison. OK, donc je vais ajouter quelque chose comme ça, home et comme ça. C'est une syntaxe, et je dois l'importer chez moi, bien sûr. Je vais donc appuyer sur Control Space et cela sera importé. Ou si vous êtes sur Mac, vous pouvez appuyer sur Commande et espace pour l'importer. D'accord ? La saisie est nécessaire Maintenant, si vous l'enregistrez et si vous accédez à l'application, vous le verrez s'afficher. Maintenant, si je commente ceci, permettez-moi de le commenter. Et si j'économise et si je viens ici, vous verrez que rien n' est rendu. J'espère que cela a du sens. Si je contrôle cette sauvegarde sur slash home est en cours de rendu Ça a du sens. C'est ainsi que nous définissons les URL maintenant Nous allons dire barre oblique et quelle est la prochaine barre oblique, il s'agit, non ? Je vais donc parler de. OK. Et ici, je vais devoir ajouter quelque chose comme ça. OK. Et assurez-vous que about est également importé. Nous ferons de même pour le contact ici. OK, par ici. Ici, je dois prendre contact. Contacte. Le contact est également importé. Et maintenant, par ici, si vous venez, c'est home slash Contact Vous pouvez voir le contact en cours de rendu et sur à propos, vous devriez voir à propos du rendu. D'accord ? Et si vous accédez à l'URL racine, c'est la page d'accueil. D'accord ? Voici donc comment vous pouvez utiliser ces entrées que nous avons ajoutées en haut. D'accord ? Ces entrées nous permettent d' utiliser le routage et d'implémenter routage essentiellement dans nos applications à page unique. D'accord ? Vous pouvez également ajouter une barre de navigation en haut, qui permettra aux utilisateurs de naviguer vers les pages. Pour le moment, nous n'avons pas ajouté cela. Je viens donc de montrer directement comment, si vous entrez cette URL dans le navigateur, le composant se charge. D'accord ? Mais j'espère que c'est clair et que cela a été utile. 7. Transitions fluides : ajouter une navigation pour une expérience utilisateur fluide: Nous avons une application où vous pouvez voir différents composants. D'accord ? Donc, si je vais à peu près, d'accord, vous verrez si je viens à la maison, vous verrez la maison ici, et si je vais au contact, je vais voir le contact. différents composants sont donc chargés collés sur l'URL que vous saisissez Maintenant, il y aura des scénarios dans lesquels vous souhaiterez ajouter une barre de navigation. Bien sûr, ce n'est pas un scénario, mais je dois dire que c'est obligatoire de nos jours. nos jours, il est obligatoire d'avoir une barre de navigation en haut sur laquelle l'utilisateur peut cliquer et naviguer. Personne ne va taper l'URL dans le navigateur. Bien sûr. Vous avez besoin de boutons qui permettent la navigation C'est ici que vous pouvez activer une barre de navigation dans votre application qui vous permettra de naviguer entre les différentes pages. Donc, ce que je vais faire, c'est ajouter des liens ici. D'accord ? Donc, juste en dessous du routeur, je vais ajouter un Nav ici. OK. Et ici, je vais appuyer sur Entrée et ici, je vais dire UL. OK. J'ajouterai une liste non ordonnée, puis j'ajouterai une liste comme celle-ci. D'accord ? Maintenant, dans une liste, je vais ajouter, d' accord, 1 seconde. Je vais donc prendre ça sur une seule ligne. D'accord ? Je vais donc avoir plusieurs listes ici, plusieurs éléments de liste, d'accord ? Et dans chaque liste, je vais ajouter, par exemple, Accueil, ici ce sera la maison ou laissez-moi ajouter Link ici, car il devrait naviguer. Je vais donc dire Link ici et vous pouvez voir cela me montre le lien depuis React Router Doom React Router Doom vous donne également ce lien à l'aide duquel vous pouvez autoriser les navigations Dès que vous sélectionnez Link from React Router Doom, vous verrez le lien être importé ici Vous pouvez voir que de l'encre a été ajoutée cette déclaration d'importation particulière. Donc ici, ce que je vais faire, c'est dire le texte que je vais afficher. Voici donc la maison, cette maison. Et ici, je vais en dire deux. Où souhaitez-vous que ce lien mène ? Donc je vais dire, je vais dire slash. C'est un lien à slash, et je peux le dupliquer trois fois ici Donc ça va être une question, et ça va être un contact. Il s'agit simplement d'un texte que nous affichons ici. Il s'agit donc de, et c'est de contact. Je vais parler de contact. Je vais enregistrer ça. Au moment où vous l'enregistrez, si vous venez ici, il y a un problème là-bas. Je ne sais pas pourquoi ce n'est pas rafraîchissant. Laissez-moi vérifier la console, qu'est-ce qui ne va pas ? OK. Alors laisse-moi clore ça. OK. Et laissez-moi recommencer. Laisse-moi voir. OK, ça marche bien. Le rechargement a probablement pris un peu de temps. Je ne sais pas pourquoi. Peut-être un problème avec mon système. Mais vous pouvez voir que les liens se trouvent maintenant ici. D'accord ? Cela n'a pas l'air si sophistiqué, non. Mais pour le moment, nous allons nous concentrer uniquement sur les fonctionnalités. D'accord, nous allons bientôt l'embellir. Vous pouvez donc en voir plus ou moins, vous allez passer à peu près. Vous pouvez cliquer sur Contact Home et voir également l'URL. L'URL est également en train de changer. Vous pouvez voir que tout cela se fait sans aucun rechargement. D'accord ? Il s'agit simplement du composant en cours de rechargement ou composant en cours de chargement en fonction de l'URL sur laquelle vous vous trouvez, et c'est le concept qui consiste à synchroniser l'URL avec ce qui doit être affiché D'accord ? Vous pouvez donc voir comment cela fonctionne bien. Maintenant, laissez-nous embellir un peu cela, nous pouvons bien sûr améliorer l'interface que vous voyez ici Et pour améliorer l'interface, nous pouvons utiliser ce que nous pouvons appeler cela. Nous pouvons utiliser le CSS tailwind. D'accord ? Maintenant, maintenant, White Tailwind CSS, c'est facile. C'est basé sur les cours. Il vous suffit d'utiliser quelques classes utilitaires que nous obtenons et un peu de configuration. Alors rendez-vous sur tailwindsss.com, recherchez Tailwind CSS, et vous arriverez Cliquez sur Commencer. Dirigez-vous vers l'installation. Ici, la première chose à faire est l'installation. OK. Mais par hasard, si celui-ci ne s'ouvre pas, vous pouvez cliquer sur Installation ici. D'accord ? Maintenant, nous allons utiliser tailwind CLI ou tailwind et je vais également avoir besoin de post CSS avec Autoprefixa post CSS avec Voici donc la documentation pour la même chose. D'accord ? Il est recommandé d'ajouter les trois. Je vais donc simplement commencer à ajouter ces commandes. OK, donc je vais le supprimer et là je vais voir OK, 1 seconde, laissez-moi voir si je suis dans le répertoire du projet. Je ne suis pas dans le répertoire du projet, donc je peux dire routing, react, je vais dire clair. Et voilà, je vais l'installer. D'accord ? Il faudra donc un certain temps pour l'installer. OK. En attendant, nous viendrons ici. Nous allons envoyer cette commande ici. OK. Et je vais prendre ceci et je dirai qu'à la fin, je vais ajouter le trait d'union P ici. OK. Et j'appuierai sur Entrée, et vous verrez deux fichiers en cours de création , à savoir tailwind config et post CSS config D'accord ? Maintenant, si vous venez ici, vous pouvez voir deux fichiers. Configuration CSS Tailwind et post-CSS. Maintenant, dans la configuration de tailwind, nous devons ajouter un peu de configuration, nous devons donc ajouter le contenu qui nous est fourni Je vais donc ajouter ceci ici. D'accord ? Cela signifie que sous SRC, tailwind devrait être applicable à HTML JS et également à Nous avons également des fichiers JSX. D'accord ? Cela devrait donc être applicable là-bas. Je vais faire défiler la page vers le bas, et vous devez l' ajouter dans le CSS du point principal. Je vais faire défiler la page vers le haut. D'accord ? J' ai donc ce CSS à points d'index, qui est chargé dans le CSS à points principal. Vous pouvez voir le point d'index CSS. D'accord ? J'ai donc ajouté ces directives ou annotations dans les directives tailwind essentiellement dans ce fichier CSS OK. Et ça y est. Je pense que le vent est là pour nous maintenant. OK, on peut s'en servir. Commençons donc à nous en servir. OK. J'ai aussi Tailwind Italicens ici. OK ? Tailwind Si vous recherchez sur le marché des extensions, vous verrez ce plugin dans Tailwind Italiscens Il fournit donc une fonctionnalité d'autosuges intéressante pour toutes les classes de Tailwind Et c'est très utile. Je le recommande vivement si vous travaillez avec Tailwind D'accord ? Maintenant, ce que nous devons faire, c'est avoir en gros j' ai l'interface utilisateur, désolée, UL, j'ai NAV en haut, je vais ajouter un TIF ici. Je vais dire TIF. OK. Et je vais dire ici, le nom de la classe. OK. Je vais ajouter quelques cours sur le vent arrière Je vais donc dire un écran H minimum ici et un fond d' gris cent. D'accord ? C'est fait. Et j'ajouterai cette fermeture après pour que cela soit fermé. Où doit-il fermer ? Il devrait fermer juste avant le départ. OK. Oui, par ici. OK. J'ai donc ajouté ceci et maintenant ce que nous devons faire , c'est ajouter du CSS ici. Je vais dire le nom de la classe ici. Je vais dire BG. Je vais garder ça en bleu, disons 600 en bleu. Ça a l'air décent. OK, tu peux voir. Vous pouvez également comparer les différentes nuances de bleu. Vous pouvez voir. 600, 800 sont plus sombres, donc je dirais 600. D'accord ? 600, ça a l'air correct et un rembourrage de quatre par ici. OK. Je vais le sélectionner et nous verrons à quoi il ressemble. OK. Le CSS n'est donc pas appliqué pour une raison quelconque. D'accord ? Je vais voir, je vais redémarrer le serveur. Voyons si le redémarrage en est la cause. OK, maintenant c'est appliqué. Comme j'ai fait beaucoup de changements de configuration, modifications et de dépendances, cela n'apparaissait pas, mais maintenant il apparaît, vous pouvez le voir, d'accord ? C'est décent. Maintenant, je vais venir ici. J'ai du CSS ici. Maintenant, pour ce qui est de l'UL, je vais dire, oups, je vais dire classe , nom de classe, et nom de classe de flex and justify center OK. Et nous pouvons avoir un espace de X et je dirais six peut-être. D'accord, six. Je vais voir ça. Voyons à quoi cela ressemble. Tu peux voir à quoi ça ressemble. OK, ça a l'air bien. Et maintenant, nous devons ajouter une sorte de CSS ou une sorte de classe ici à tous les attributs des liens. Je vais donc passer à une nouvelle ligne. Je vais ajouter un onglet. C'est également sur une nouvelle ligne, et je vais dire le nom de la classe ici. OK. Quel est le nom de la classe ? Je vais dire texto. OK, blanc. OK, il me faut du blanc ici. Le texte doit être blanc. Le noir n'a pas l'air bien. Oh, le texte devrait être correct, jaune. Et il y a tellement de draps jaunes, je vais en sélectionner 300. OK. Je dirais que la police est moyenne. Utilisons la police comme support. Je dirais que la transition est d'accord. Donc par ici et je dirais une durée de 300. Voyons si c'est le cas. Vous pouvez voir comment cela fonctionne. OK. Tu peux voir ? Un petit effet. Ce que je peux faire maintenant, c'est que je vais simplement copier cette classe pour chaque lien existant. D'accord ? Je vais donc le copier. Je vais venir ici. Nous allons simplement envoyer le lien ici. OK. Je vais taper. OK. Oups. OK. Donc je vais juste mettre ça en retrait et je vais passer à une nouvelle ligne, accord ? Touchez plusieurs fois. OK. Et oui, appuyez plusieurs fois, et je vais le coller. OK. Cela devrait donc paraître décent maintenant. Vous pouvez consulter Home About in Contact. OK, ça a l'air trop grand parce que je suis un peu zoomé D'accord ? Vous pouvez voir. Ceci est la vue réelle du site Web OK ? Mais je suis un peu zoomé pour que vous puissiez facilement voir si vous utilisez des appareils plus petits Normalement, les gens apprécient cela. OK. Mais oui, j'ai essentiellement ajouté ceci, d'accord ? Maintenant, je peux venir ici, et ce que je peux faire, c'est tout le trajet jusqu'ici. Je peux l'enrouler dans un fichier TIF, quelque chose comme ça , aussi rigide, je vais le couper et je vais l'ajouter ici. OK. J'ai donc ajouté l'ensemble de ces itinéraires dans ce rigide et ce rigide Je peux l'appeler nom de classe, conteneur, OK, quelque chose comme ça, et je peux dire X auto. Oups, c'est automatique ici et Pi rembourre cinq à huit. OK. Et oui, c'est ça. Maintenant, ce que nous pouvons faire, c'est également nous laisser styliser les composants individuels. Donc, pour le moment, nous n'avons qu'à styliser la barre de navigation supérieure. OK ? Laissez-nous styliser les composants individuels. Alors je vais venir. Je vais commencer par la maison ici. OK. La plupart du temps, le style sera similaire pour tous les composants. OK, alors gardez cela à l'esprit. Je vais m'en débarrasser. Tout d'abord, je vais l'avoir fait parce que je vais écrire plusieurs lignes de code, et je vais dire onglet ici. OK. Ajoutons ce Dev. J'ajouterai H deux ici. H deux est sa page d'accueil. OK, quelque chose comme ça, et je dirais P tag ici. Le tag P est le bienvenu sur la page d'accueil. OK. Et je peux dire « Explorez », décidez d'en savoir plus », quelque chose comme ça. OK. Maintenant, je vais passer à Dev et Div, je vais dire le nom de la classe. OK, je vais dire flex, Flex, call, column, et je dirais Items Center. OK. Dois-je donc ajouter ceci ou cela devrait être Laissez-nous garder cela sous forme de colonne. Le centre des articles justifie le centre. Quelque chose comme ça, et je dirais un écran H minimum. C'est donc la hauteur minimale que nous ajoutons, et je peux dire PG de gris 50. OK. Voyons à quoi cela ressemble pour la maison. OK ? Le fond gris n'est pas encore ajouté. C'est ajouté ici dans le pack, d'accord ? Et laisse-moi vraiment, tu sais, laisse-moi vraiment, prendre ça comme ça, prendre comme ça, d'accord ? Je peux donc tout voir côte à côte, d'accord. Donc oui, c'est une paire de points de vue pour le moment, pendant un certain temps, nous allons nous en tenir à ce genre de point de vue. OK. Maintenant, pour H deux, je peux appuyer sur Entrée. Je vais voir le nom de la classe. Comme ça. OK, par ici. Et ici, je vais dire texte trois Excel, et police de caractères gras, puis texte bleu 600. Comme ça. Vous pouvez constater que cela change. Et puis pour ce truc ici, je vais dire le nom de la classe. Oups, les enfants ont postulé. Oups. Je vais donc changer cela, j' ajouterai le nom de la classe ici. Nom de la classe Je garderai le texte en gris. OK. Restons gris de 700. OK. Et la marge en haut de quatre et le texte aussi grand. OK. Et vous pouvez voir cette interface. Il est zoomé en ce moment, mais si vous vous rendez ici, cela devrait être correct OK. Tu peux voir. C'est petit, ça a l' air bien, d'accord ? Pas grand-chose, mais c'est bien. C'est bon. C' est donc quelque chose que nous avons ajouté et vous pouvez en quelque sorte le reproduire sur tous les composants Donc, ce que je vais faire, c'est faire venir cette étiquette de retour ici. Je vais passer à A, et dans environ, je vais ajouter la même étiquette de retour ici. OK ? Oups. Il faut que je m'en débarrasse. C'est fait et ici, pêche maison, donc je vais parler de pêche. OK. Et je dirais que sur cette page, je dois ajouter du texte ici. Je dirais donc que cette page fournit des informations. Oups. Informations sur nous et apprenez-en plus sur les valeurs de nos machines, etc. OK. C'est bon. Nous pouvons le dupliquer et l'ajouter également au contact. Je vais donc simplement le remplacer ici. OK ? Pour le contact, c'est la page de contact. Très bien, contactez, et je vous répondrai par ici. Je vais m'en débarrasser. Je dirais que n'hésitez pas à nous contacter par le biais de notre contact, de notre formulaire ou de notre e-mail, quelque chose comme ça. OK. Et oui, nous aimerions avoir des nouvelles de ce genre, d'accord ? Maintenant, si vous actualisez, vous pouvez voir à propos du contrat, et vous pouvez voir à quel point notre petite application est jolie , vous savez, avec quelques modifications de configuration pour le CSS tailwind, en utilisant peu de classes et en ajoutant une barre de navigation en haut OK. C'est donc Router dom React Router, en action, d'accord ? Et j'espère que cela vous donne une idée de la façon dont les applications Web modernes sont conçues, d'accord ? Vous pouvez imaginer, comme si cela prend de l'ampleur, vous savez, vous avez environ 20 ou 30 tronçons de route ici, et vous avez quelques liens en haut. Vous pouvez même séparer ces liens dans un composant distinct appelé Navbar. Vous pouvez créer un composant distinct appelé Navbar, et vous pouvez simplement cette structure, tout ce code, depuis NAV jusqu' ici, dans un composant distinct et simplement afficher la barre de navigation ici en haut C'est quelque chose que vous pouvez faire si la barre de navigation devient complexe Mais pour l'instant, je l'ai déclaré ici, mais tout peut être séparé lorsqu'il s'agit de réagir, et vous pouvez modulariser votre code d'une manière incroyable. OK. J'espère que cela vous a aidé à acquérir une nouvelle perspective et j' espère que cela vous a été utile. 8. Organiser des itinéraires comme un pro : maîtriser les itinéraires imbriqués: Commençons maintenant par parler des itinéraires imbriqués. Nous avons donc ici une page A, qui est rendue sur About. Supposons maintenant que nous voulions ajouter une nouvelle page, qui est la page de l'équipe, et que nous voulions afficher les informations sur l'équipe. Maintenant, cette page d'équipe est logiquement liée à A et elle devrait être. Je veux qu'elle se trouve sous l'URL, qui se trouve ici, si je dis, l'URL doit être slash Auth OK ? Donc je veux que Team Component vienne ici, d'accord ? Alors, que dois-je faire dans ce cas Je vais utiliser des itinéraires imbriqués, d'accord ? Et je vais l'organiser de telle sorte qu'une équipe soit en fait un sous-sujet, en gros, et cela nous le permet Ce que nous allons faire, c'est conserver ces itinéraires connexes ensemble, d'accord ? Et nous allons définir une relation hiérarchique. OK. Ainsi, slash About affichera la page À propos et slash About slash Team affichera la page Équipe, spécifiera les détails de l' OK ? Et l'un des avantages de l' itinéraire imbriqué est que vous pouvez utiliser le code défini dans about component inside or on this team page ou sur cette page d'équipe, d'accord ? Ainsi, lorsque vous affichez la page de l'équipe, vous pouvez également afficher les composants ou le code. Fondamentalement, cela est défini dans environ. Et permettez-moi de vous montrer ce que je veux dire, car il existe une relation hiérarchique entre les deux puisque nous les imbriquons, d'accord ? Puisque l'équipe est imbriquée dans environ, il existe donc une relation hiérarchique Vous pouvez donc réutiliser la mise en page à propos des composants, comme n'importe quel type de mise en page comme l'en-tête, barre latérale ou toute sorte de contenu partagé, accord, dans le composant d'équipe, d'accord ? Et laissez-moi vous montrer comment cela fonctionne, d'accord ? Ce que je vais faire, c' est d'abord de m'en débarrasser. Permettez-moi de me débarrasser de ce commentaire ici. Et ici, j'ai ceci à propos et je vais supprimer la fermeture automatique. OK, je vais le fermer séparément comme ça. OK. Et à l' intérieur de celui-ci, j'ajouterai la page de l'équipe, comme ceci. Je dirais Slash Team. OK. Et je dirais Slash Team Maintenant, l'équipe n' existe pas, bien sûr, donc je vais avoir une erreur si j'enregistre ce fichier. Mais je vais ajouter une page d'équipe. Je dirais Team Dot JSX. OK. Maintenant, que comprend la page de l' équipe ? Maintenant la page d'équipe, nous avons besoin d'une page d' équipe vraiment très simple. OK. Ce que je vais faire, c'est juste obtenir l'aménagement de la maison. Je vais le coller dans « J'aime » l'équipe. Je vais simplement le renommer en Team. Renommez-la en Équipe, et j'ajouterai quelques modifications au contenu, comme dans le cas de la page Équipe D'accord, ou nous pouvons dire «   l'équipe rencontre notre équipe ». OK. Faisons en sorte que ce soit un peu amusant, rencontrons notre équipe, quelque chose comme ça. OK. Et voilà, je vais voir ce que nous en disons ? Nous pouvons nous en débarrasser. Nous pouvons dire que nous avons une équipe de professionnels talentueux ou dévoués à notre mission. OK, je vais rester simple. OK, nous l'avons, et maintenant je vais venir ici et je vais faire importer l'équipe T. Équipes importées. Maintenant, que devrait-il se passer dans l'idéal ? OK ? C'est imbriqué dans A, non ? C'est un itinéraire imbriqué Donc, si nous allons dans About slash Team, nous devrions voir l'équipe être rendue OK ? Cela n' arrivera pas en fait. Laissez-moi vous le montrer. OK, nous avons donc une erreur ici. OK ? Voyons donc quelle est l'erreur. C'est pourquoi je suis allée inspecter ici dans le navigateur pour voir l'erreur, et vous pouvez voir que le chemin absolu Slash Team imbriqué sous path about n'est pas valide OK ? Et je sais pourquoi ce n'est pas valide. Donc, ici, vous ne pouvez pas avoir de barre oblique. OK ? Je vais donc m'en débarrasser et je vais le sauvegarder. Dès que je l'enregistre , il fonctionne bien. OK ? Cela fonctionne donc bien en ce qui concerne le domicile et le contact. Maintenant, si je passe à At et si je dis « slash team » ici, accord, vous pouvez voir que l'équipe n' est pas rendue, seule la page à propos est affichée, d'accord ? Et il y a une raison à cela, d'accord ? Et la raison en est que nous n'utilisons pas de composant de sortie. Maintenant, qu'est-ce qu'un composant de sortie ? Désormais, le composant de sortie est un espace réservé pour les composants imbriqués, et vous devez utiliser le composant de sortie à l'intérieur du composant parent Maintenant, quel est le composant parent. Dans notre cas, le composant parent est la page A. Donc, dans la page At, nous devons utiliser l'espace réservé au point de vente, d'accord ? Et c'est dire ça, c'est dire réagir ici. Que toute sorte de composant imbriqué existe, restituez-le ici OK ? Il agit donc comme un espace réservé. Et laissez-moi vous montrer comment vous pouvez réellement l'utiliser. Donc, ce que nous allons faire, c'est venir ici et, comme il s'agit d'un parent, nous devons en faire usage ici. OK ? Juste avant le dernier TIF, avant de le fermer , je vais ajouter un TF de plus. D'accord. Et je le stylise parce que le reste de la page est beau. OK ? Je vais donc dire marge supérieure à huit et W complet ici, largeur de 100 %. Et je vais dire Max : OK. Et je dis quatre Excel ici. OK. Il s'agit donc de la largeur maximale. Et puis ici, je vais dire Outlet. Maintenant, vous pouvez voir la sortie. Vous devez le faire importer depuis React Router Doom Tu peux voir OK. Et il se ferme automatiquement. Je vais donc le fermer. Et vous verrez cette entrée être ajoutée en haut. OK. Maintenant, je vais enregistrer ceci et maintenant, si je vais ici, vous pourrez voir Meet ou Team. OK ? Ceci est en cours de rendu. Vous pouvez voir comment il est affiché sur la page A. Et si vous êtes désolé, pas sur la page À propos, mais sur la page About Slash Team Maintenant, si vous allez dans environ, vous verrez environ, et si vous allez dans A slash team, vous allez voir environ et équipe OK. A est donc un parent et l'équipe est l'enfant. D'accord, il existe une relation hiérarchique entre eux. Et c'est un concept d'itinéraires imbriqués, d'accord ? Et voici comment tu peux t'en servir. Et, bien sûr, cela explique également pourquoi une prise de courant est nécessaire. OK ? C'est comme un espace réservé. Vous pouvez voir ici dans la documentation qu'il affiche la racine enfant correspondante à la racine parent Ou rien si aucun root enfant ne correspond. Donc, si rien ne correspond, il ne produira rien. Mais si vous voulez que quelque chose soit rendu ou s'il y a une sorte d'enfant là-bas, ou du parent, c'est ce qu'il va rendre. OK ? J'espère donc que cela vous a été utile et j' espère que vous avez pu suivre. Juste une petite mise à jour avant d'arrêter cette vidéo, ce que j'ai fait en est un résumé. OK ? Donc, tout à l'heure, il n'y avait aucun lien ici. J'ai dû me fier uniquement à l'URL. Donc, si vous allez à environ, j'ai ajouté deux liens ici, équipe R, retour à la page d'accueil. Donc, si vous faites partie de l'équipe, vous verrez ce discours. De retour chez vous, vous serez de retour chez vous. Ou vous pouvez également revenir à environ ici. OK, j'ai donc ajouté cette navigation que vous n' ayez pas à vous fier aux VRL et que vous puissiez plutôt cliquer ici et naviguer Et pour cela, j'ai ajouté ce bloc dans about. OK, vous pouvez voir l'équipe et le retour à la maison avec un simple CSS, d'accord ? Et j'ai dû ajouter un lien ici, comme le lien depuis React Router dom, d'accord, pour ajouter ces liens. OK ? Donc oui, ça y est, et j'espère que cela vous a été utile. 9. Oups ! Page introuvable : créer une page 404 personnalisée: Maintenant, dans notre application, si nous naviguons vers différents itinéraires, nous voyons différents composants, et en gros, il y aura des scénarios dans lesquels l'utilisateur naviguera vers une URL qui n'existe pas Par exemple, si je tape ABC ici, accord, cette URL ABC n'existe pas, mais il n'y a aucune sorte de commentaire ou de message que je donne à l'utilisateur pour lui dire : « Hé, cela n'existe pas ». Donc, en gros, gérer cela s'appelle quatre et non quatre, d'accord ? Vous pouvez donc gérer les erreurs du pied quatre où cela n' est pas trouvé, n'est-ce pas ? Vous devez donc le montrer à l'utilisateur, n'est-ce pas ? Mais pour le moment, par défaut, vous pouvez voir que c' est ce qui se passe si vous essayez d'accéder à quelque chose qui n'existe pas. OK. Ce que je vais faire, c'est abord créer une page de quatre et non quatre, puis nous allons gérer cela en utilisant le routage. Pour en revenir à notre code, je vais venir ici. Je vais reproduire n'importe quel type de mise en page ici. OK. Et je vais le renommer en composant NotFound, et je viendrai ici pour ne pas le trouver, et je dirais pas trouvé ici, quelque chose comme ça OK. OK, je n'aurais pas dû reproduire la page à propos Je devrais en fait reproduire une page simple, qui est la page d'accueil OK. Je vais donc simplement copier le relevé de retour de ce document et le coller ici. OK. Maintenant, au lieu de la page d'accueil, je vais dire quatre et non quatre. OK. Et ici, je vais ajouter un message. Je vais rester simple. Je peux dire « Oups Comme ça. OK. Oups. La page que vous recherchez n'existe pas, d'accord ? Ça n'existe pas, quelque chose comme ça. D'accord ? Maintenant, ce que nous pouvons faire, c'est utiliser cette page particulière dans notre application. D'accord ? Donc, ce que je vais faire, c'est de venir ici. D'accord ? Nous avons un itinéraire pour toutes les pièces, n'est-ce pas ? Maintenant, je veux ajouter un routage pour tout autre chose en dehors de ces parties. Donc, tout ce qui est en dehors de cela devrait être redirigé vers cette page de quatre et non quatre, n'est-ce pas ? Comment puis-je définir cela ? Je vais donc dire itinéraire jusqu'ici. D'accord ? Path et je vais dire étoile. OK. Et je vais dire que l'élément est égal à. OK. Et ici, introuvable, comme ça. OK. Et je vais fermer ça, comme ça. OK. Et je vais fermer ça aussi. OK. Maintenant, si quelqu'un visite une autre page, vous pouvez la voir automatiquement la recharger ici D'accord ? Donc, phono 4, tu peux voir Oups, la page que vous recherchez n'existe pas. D'accord ? Vous pouvez donc accéder à n'importe quelle autre page, et si vous tapez autre chose que cela, vous obtiendrez la police quatre. composant Foot Four sera donc chargé et affiché à l'utilisateur. Voilà comment tu peux gérer les erreurs du pied quatre, d'accord ? Vous pouvez améliorer cette interface de manière à ce qu'elle corresponde au thème de votre organisation. Mais j'espère que vous comprenez les fonctionnalités permettant de le créer. Le but de cette vidéo est de vous apprendre à créer les fonctionnalités. Le reste peut être pris en charge, vous savez, les designs peuvent continuer à changer. Mais la fonctionnalité est quelque chose d'important, d'accord ? J'espère donc que cela vous a été utile et j'espère que vous avez pu suivre. 10. Conclusion du cours: C'est la fin de ce voyage passionnant dans le monde du routage avec React. Nous avons abordé de nombreux concepts tout au long de ce cours en particulier. Nous comprenons d'abord ce qu' est React Router, comment le configurer, et nous avons également appris comment créer des applications multipages avec React implémenter une navigation intuitive pour une expérience utilisateur fluide. Nous avons également appris comment vous pouvez structurer itinéraires imbriqués pour améliorer l'évolutivité de votre application et comment vous pouvez gérer les erreurs et personnaliser pour ne pas Mais n'oubliez pas que l'apprentissage ne s' arrête pas là. Le véritable pouvoir de tout concept dans le monde de la programmation comme React Router réside dans l'application de ces concepts à des projets du monde réel. Vous devez donc absolument appliquer ces concepts à vos propres projets. Vous devez continuer à explorer des sujets avancés et à mettre pratique ce que vous avez appris, car c' est vraiment important. J'adorerais voir le type de projets que vous proposez et comment vous utilisez React Router. Dans vos projets. Enfin, ce cours comporte une section de projet où vous trouverez un projet de classe. Je vous encourage vivement à terminer le projet de classe et à partager votre travail dans la section des projets elle-même. Maintenant, merci de m'avoir rejoint dans ce voyage particulier. J'espère que ce cours vous a donné les compétences nécessaires pour créer une application de réaction conviviale à la navigation bien structurée, continuer à construire, à explorer et à coder avec créer une application de réaction conviviale à la navigation bien structurée , plaisir.