Commencez avec React Routeur 4 : Créer une application à une seule page

1. Introduction: Hé, les gars, bienvenue dans mon cours. Obtenir une étoile, ça réagirait. Sécheresse. Par conséquent, mon nom est Esteban Herrera. Je développe des applications depuis plus de 10 ans en utilisant JavaScript simple pour bibliothécaire certains frameworks comme une requête, angulaire et réagir en particulier. Je n'ai pas réagi. Et ce paradigme pour développer des applications Web dans cette classe, vous savez comment créer une application de pression unique réagirait et réagirait. Routeur. Les applications d'une seule page sont dotées d'applications qui n'ont pas besoin d'une farce complète lorsque leur contenu change, comme par exemple par e-mail ou Twitter. Cette classe est pour les débutants. Vous avez seulement besoin de savoir, rebord Audrey au travail et comment créer une alcôve de réaction ou des choses comme ce sont applications d' une seule page ? Le concept d'un plutôt aidé à mettre en place réagir plutôt les composants essentiels de cette bibliothèque. Comment créer des pages à partir de composants réaction imbriqués route sur la façon de construire des itinéraires avec l'Europe, paramètres. D' ici là, de cette classe, vous aurez les connaissances nécessaires pour créer des applications de réaction simple page avec React Router. Ceci est important parce que d'une part, applications à emplacement unique offrent une meilleure expérience utilisateur. D'autre part, elles sont plus faciles à déployer et à gérer qu'une application Web traditionnelle. Alors commençons 2. Quelles sont les applications de page ?: les applications à emplacement unique sont des applications de graphique qui chargent dynamiquement leur contenu dans une seule page au lieu de rediriger l'utilisateur toe. Autres pages d'une application de manière traditionnelle. Lorsque vous cliquez sur un bouton ou un lien, le navigateur contacte le serveur et charge une toute nouvelle page, même si seulement une petite partie du rythme change, ce qui donne un sentiment d'interruption, surtout si la nouvelle page prend un certain temps à l'amour. D' un autre côté, une application unique ne recharge que la section du rythme qui va changer. L' application est toujours contacte le serveur lorsque l'utilisateur demande quelque chose, mais cela se fait en arrière-plan, utilisant Ajax sur le serveur au lieu de retourner. HTML. Koth, représentant un rythme, renvoie une réponse adjacente. Juste les données dont l'APP a besoin. Ce n'est pas non plus un bon exemple. Désactivez ce type d'application. Lorsque vous cliquez dessus, seules les informations des tweets sont récupérées à partir du serveur. Le patient n'aime pas complètement. Les avantages sont que ces applications sont plus réactives. L' expérience utilisateur est plus fluide. Vous pouvez avoir des indicateurs de chargement pour informer les utilisateurs que l'application fait quelque chose, et si vous le concevez correctement. L' application peut gérer la majeure partie du traitement sur le client afin de réduire le nombre de demandes adressées au serveur, ce qui pourrait empêcher les erreurs réseau et améliorer les performances. Un autre avantage est que la plupart du temps ces applications sont juste quand un fichier vapeur , bon CSS et JavaScript bond fait. sont ainsi plus faciles à déployer car ils peuvent être téléchargés sur n'importe quel serveur de contenu esthétique . Bien sûr, l'application aura besoin d'un retour pour obtenir ses données, mais cela peut être une construction d'application séparée avec une technologie complètement différente qui va probablement réciter dans un autre serveur, ce qui améliore le maintien capacité. Cependant, il y a aussi quelques inconvénients dans une application unique. La plupart du temps, tout le coath nécessaire sur les ressources arborescence jamais au début de la charge de base initiale. Donc, si le haut brut orteil d'une taille significative, ces dégoûts initiaux seront un moteur de recherche lent. Optimisation S CEO pourrait être difficile car il n'y a qu'une seule page et l'application est construite dynamiquement, sorte que les bateaux de recherche peuvent ne pas fille vieux de votre côté ou exécuter la croissance JavaScript d'une manière similaire . outils analytiques peuvent ne pas suivre correctement les vues de page, car bien, applications à pression unique ne contiennent pas vraiment de pages. Un autre inconvénient est que ces applications peuvent devenir complexes facilement, sorte qu'elles doivent être mieux conçues que les applications traditionnelles. Remorquez, évitez les fuites de mémoire, les problèmes de sécurité ou d'autres types de problèmes. L' un d'eux, en particulier, est l'historique du navigateur. Comme l'application est contenue dans une seule page, elle ne peut pas compter sur les boutons avant et arrière des navigateurs. Pour cette raison, quelque chose qui peut changer l'Ural pour pousser ou remplacer vos événements d'histoire orale dans le navigateur, selon le navigateur, domaine de l'application, il n'est ni dans l'un ni l'autre. Par exemple, remarquez comment l'Oural change. Un tweet est cliqué et comment une entrée d'historique est générée. C' est le travail de notre après A. Plutôt permet à votre application de naviguer entre les différents composants en changeant l'euro du navigateur, en modifiant l'historique du navigateur et en gardant l'état U. S à penser React est un populaire pour créer des applications à base unique. Cependant, comme React se concentre uniquement sur la construction d'interfaces utilisateur, il n'a pas de solution intégrée pour le routage. Reactor Router est la bibliothèque de routage la plus populaire pour réagir. Parlons du réacteur après dans la prochaine leçon 3. Routeur de réaction: certaines personnes pensent réagir. Router fait partie de la cour de React Day. Oui, mais en fait, c'est une source ouverte. Cher Parti Lavery a développé une formation de maintien par réaction. De plus, le routeur REAC est divisé en trois paquets. Web, natif et noyau. Cependant, vous n'aurez presque jamais à travailler directement avec le package de base car il fournit simplement les composants de base de la réaction. Routeur. Si vous travaillez avec une application Web, vous devez utiliser React. Rafter Gwen. Et si vous construisez une application mobile, réagirait. Natif. Vous devriez utiliser réagir autour de son natif. Dans tous les cas, ces paquets installeront réaction Rotor Core s une dépendance dans ce cours. Tous se concentrent sur réagir Router Web. Peu de choses s'appliqueront également à réagir. Routeur Native Reactor out Notre travail avec un modèle appelé Routage dynamique où l'itinéraire sont déclarés dans toute l'application à l'endroit où ils sont utilisés. C' est différent. Ce routage statique. Prenez ce code, par exemple, où vous devez déclarer les routes hors de votre application de front aspire de vos tâches d' initialisation up avant que rien ne soit rendu de cette façon, nous réagissons dynamique route ou gère du côté client de l'application. Le serveur gérera la route initiale pour servir l'application de réaction. Mais après que cela se reproduira, Outer va écouter la route demandée par l'utilisateur pour desservir les composants Riyad associés à ces réacteurs de route hors ou ne reconnaît pas une certaine voie. La requête sera transmise par le serveur, et s'il peut la gérer, le serveur répondra avec une toute nouvelle page, ce qui est utile pour des fonctionnalités telles que la connexion et la déconnexion. Maintenant, nous allons mettre en place une application de réaction et installer le routeur React. 4. Configurer l'application React: Très bien, créons une application de réaction Je vais utiliser Create React up Si vous n'avez pas utilisé cet outil Ne vous inquiétez pas tant que vous n'avez pas de jour Oui, et mpm installé Vous n'avez pas besoin de ce dollar confondre ou quoi que ce soit d'autre. Je vais supposer que vous avez déjà ces outils installés. Assurez-vous juste que vous n'avez pas éclaté en six. Vous pouvez courir vers le nord Est-ce que ça a éclaté ? Je ne sais pas quelle personne vous avez installé et vous avez également besoin de la dernière version de MPM parce que parfois les choses ne se gargarisent pas Vous n'avez pas une explosion récente dans vous pouvez exécuter MPM fait cette personne pour savoir bonne éclatement que vous avez installé Ou si vous allez juste faire sûr d' avoir le dernier que vous pouvez exécuter mpm Isdell npm deskee sur mpm sera mis à jour suivant Exécuter la commande suivante mpm x create que Réagir que jusqu'à mon bureau réagissent ce rotor que jusqu'à. MPM X est un outil qui vous permet d'exécuter, pas des paquets même si les paquets ne sont pas installés localement. D' accord. Ma réaction a écrit un rap est le nom du haut de cette façon et le répertoire avec ce nom sera créé Grand Maintenant je vais voir le dans ces répertoires. Et puisque c'est une excellente application, je vais toujours réagir assez stupide avec MP et Mr C'est le rotor de réaction sûr Dumb. À ce stade, vous pouvez exécuter le démarrage MPM sur une fenêtre de navigateur s'ouvrira à l'hôte local pour 3000. Tu verras quelque chose comme ça. Ok, je vais monter dans le projet dans un éditeur. J' utilise des parenthèses, mais vous pouvez utiliser n'importe quel éditeur vous dans le fichier public est le dernier point d'index html après le bootstrap C. fichier de bootstrap C. S. Cela va m'aider un style, l'application. Ensuite, je vais aller de l'avant et remplacer le contenu hors application Le CSS avec mes propres tuiles honnêtes coûts sur le contenu hors de la prison ? Oui aussi. Lorsque vous enregistrez un fichier, les modifications sont rechargées automatiquement. Vous n'avez pas besoin d'un truc sur Rex mpm aiguë Mr. Pour les voir Ne vous inquiétez pas pour les styles. Un instructeur de l'application à ce stade, vous pouvez installer votre application dans n'importe qui que vous voulez et vous pouvez trouver l'ensemble de la croissance de la source du projet dans ce dépôt hors dépôt. Le lien se trouve dans la description de la classe. Pour chaque leçon, il y a une branche va, vous pouvez vérifier Dickov sur les examens d'application dans cette leçon. Maintenant, nous sommes prêts à utiliser le routeur de réaction. Mais avant cela, permettez-moi de vous dire que le routeur de réaction est basé sur trois composants. Plutôt le rotor qui garde le toi. Je veux dire, pense avec le lien fille, un lien de sieste qui rend un lien de navigation sur la route qui rend un composant U I. en fonction de la fille. Dans la leçon suivante, vous savez comment intégrer des routes vers l'application avec le composant routeur. 5. Le composant du routeur: plupart du temps, je n'ai pas besoin d'utiliser le composant writer directement. Vous utiliserez une de ses implémentations dans une application Web. Vous avez deux options. Browser Router, qui utilise l'historique HTML cinq, A B I et Cash Router, qui utilise un caractère de hachage pour définir la partie d'ancrage d'un euro et peut être consulté avec un hachage de point d'emplacement correctement fenêtre. Si vous allez cibler les navigateurs plus anciens qui ne supportent pas le HTML cinq, son histoire un p A. Habituellement utiliser a plutôt qui crée des euros avec ces anciens. Sinon, vous pouvez utiliser le routeur de navigateur, qui crée des euros sans le hachage. Je vais utiliser le rotor de navigateur dans ces applications de démonstration, donc dans les plaies, c'est le dernier index du jour. Oui, je vais l'importer à partir de React Rotterdam et l'utiliser pour saisir le composant APP. Il est important de mentionner que notre composant externe ne peut avoir qu'un seul élément enfant. Par exemple, si j'ajoute un autre élément lorsque j'enregistre le fichier, l'application lancera la photo par erreur. Les messages sont autres peuvent avoir un seul élément enfant. Ok, je vais supprimer cet élément supplémentaire. Comme vous pouvez le voir, ce composant n'a aucun effet sur l'U. I. Le Gulf principal d'un routeur est de créer un objet historique pour garder une trace de l'Ural, l'emplacement où l'emplacement change le composant enfant de la rotor. Dans ce cas, jusqu'à Israël Orender. La plupart du temps, vous utilisez un composant de liaison pour modifier l'emplacement. Parlons des liens dans la prochaine leçon. 6. Les composants du lien et NavLink: fournit à la liaison suffisamment de composants de liaison pour rendre la longueur que vous pouvez utiliser pour naviguer autour de votre application. Le composant de lien, sauf qu'ils attribuent à cette chaîne prend s qui représente l'emplacement à parcourir. Et vous pouvez également demander des paramètres Europe. Mais préféreriez-vous que vous pouvez également passer un objet avec les propriétés, mais nommez le chemin pour lier à Désolé. Une chaîne qui représente les paramètres de requête a un hachage le démarrage dans l'euro sur l'état sur l' objet qui représente l'état, la persiste à l'emplacement. Un autre attribut important est remplacé lorsqu'il est défini sur true, l'emplacement du composant lien remplacera l'entrée actuelle dans l'historique du navigateur au lieu d'en ajouter un nouveau. D' autre part, naff Link est une version spéciale de la composante membre qui à l'indication des attributs de Sonny, qui sont utiles pour les menus de navigation. Par exemple, attribut de nom de classe active Duerson qui supprime le nom d'une classe CSS qui sera ajoutée aux classes CSS lorsque l'élément est actif. Dans d'autres guerres, lorsque l'emplacement hors du lien beaucoup est l'Ural actuel, le nom de verre du téléphone est actif ou vous pouvez utiliser l'activiste que je vais attribuer pour passer un style de encore dans le même but. Deux autres attributs importants sont exacts sur une marche stricte. Exact est réglé sur true. La classe ou le style actif ne s'applique que si l'emplacement est très exactement, et qu'un district est défini sur true. Les trois barres obliques d'un emplacement, mais le nom sera pris en considération pour déterminer si l'emplacement correspond. L' Ural actuel mérite les attributs les plus importants hors lien et pas de lien, mais vous pouvez en savoir plus sur eux dans le routeur Documentation off React. Bon maintenant, créons une navigation. Beaucoup dans la source slash up dodgy. Oui, je vais aller de l'avant et remplacer ces éléments d'ancrage par un composant de lien. J' aurai deux autres liens. 14 sur la base et un autre pour une usurpation. Aussi, n' oublions pas d'important le composant de lien en haut du fichier. Maintenant, dans le navigateur, vous verrez quelque chose comme ça. Si vous inspectez le code HTML, vous verrez que le composant lean génère simplement un élément d'ancrage. Cependant, ceux-ci sont dans des éléments d'ancrage réguliers. Ils ont changé l'Oural sans rafraîchir la base. Si vous avez un élément régulier à la Goethe. Le patient sera entièrement Reno. N' oubliez pas que le composant maigre ne représente pas un élément d'ancrage régulier maintenant. Non, c'est que rien ne se passe lorsqu'un lien est cliqué dans la leçon suivante. Junor Comment exécuter leur quelque chose avec le composant de route. 7. Le composant de l'itinéraire: le composant hors route est de rendre quelque chose lorsque l'emplacement beaucoup juste un chemin que vous pouvez définir. Gladys effectue un rendu en utilisant l'une des propriétés suivantes hors du composant road avec la propriété component. Il rend un composant en marche. L' emplacement correspond. Le spot de route vous rendrait passer une fonction qui renvoie l'élément ou le composant à rendre enfants en colère. Vous passez également une fonction qui renvoie les éléments ou le composant à rendre. La différence est que l'élément de retour est rendu aucune mère si le chemin est identique ou non . Chacun est utile dans différentes situations, mais vous ne pouvez utiliser qu'une de ces propriétés sur un itinéraire donné. Composant de cette leçon sont donc vous devez utiliser le composant correctement. En outre, utilisant la propriété PATH, vous spécifiez toute personne que vous êtes un mauvais de cette façon. Un nouveau composant est créé à l'aide de la réaction qui crée l'élément. Cela signifie que sur chaque rendu, il crée un nouveau composant. Au lieu de simplement mettre à jour un chemin existant, le chemin peut définir par les rebelles, et il peut être une expression régulière. rotor REAC utilise le chemin de la bibliothèque pour rejeter l'éclatement 1.7. Pour poursuivre ces expressions, il y a même un outil qui vous permet d'entrer un itinéraire, et il vous montrera l'expression régulière de cet itinéraire, et vous pouvez également entrer un chemin pour voir s'il correspond à l'itinéraire. C' est très utile pour revenir à la composante routière. Il faut également un exact correctement qui a traversé le composant. Goldberg se rend seulement si le mauvais correspond exactement à un écart strict qui a une dernière folie ne correspondra qu'à un emplacement avec une fin de cette dernière. Si la propriété est vraie et enfin, lorsque le sensible est correctement vrai, cela rendra la correspondance sensible à la casse. Ok, ce moment, dans notre application, l'euro change quand on clique sur un lien. Mais pas le U. Allons réparer ça. Je vais créer un répertoire de composants et à l'intérieur de celui-ci trois composants, un pour chaque route. Tout d'abord le composant d'origine pour l'itinéraire principal. À ce stade, chaque composant n'affichera qu'un message. Ensuite, vous avez soif de la route slash utilisateurs que je suis enfin sur la route. Il slash autour de maintenant orteil. Spécifiez l'Ural qui correspond à chaque composant de la barre oblique source le jour. Oui, j'ai utilisé des composants routiers à l'intérieur de l'élément dif avec le composant principal de la classe CSS. Ces composants de routes peuvent être placés n'importe où à l'intérieur du rotor Broza du routeur dans ce cas et le composant associé sera rendu à cet endroit. Maintenant, la seule chose que j'ai à faire est d'importer tous ces composants et leur composant d'itinéraire aussi . Et dans le navigateur, nous pouvons voir le U I est mis à jour. Il montre le composant d'accueil. Cependant, regardez ce qui se passe quand je vais à l'autre route. Par défaut, les routes sont inclusives. Plus d'un composant de sécheresse peut correspondre au chemin de l'Oural et effectuer un rendu en même temps. Mais ne vous inquiétez pas, nous allons corriger ça dans la prochaine leçon. 8. Le composant de commutation: dans cette leçon, je vais vous montrer comment utiliser le composant switch pour rendre une seule route à partir du groupe d'itinéraires. Le composant switch fonctionne comme un commutateur régulier, une instruction en JavaScript dans l'application de démonstration d'ordre. Mais les utilisateurs et à propos de Pat contenaient ce dernier caractère, donc ils sont aussi beaucoup et rendu par la route à domicile. De cette façon, nous pouvons afficher différents composants simplement en déclarant qu'ils appartiennent au même chemin. Mais dans ce cas, ce n'est pas ce que nous voulons. Donc, nous pouvons utiliser la propriété exacte sur la route pour le composant maison pour le rendre seulement si l'Ural beaucoup est le chemin. Exactement. Maintenant, dans l'application, nous pouvons voir que tout fonctionne bien. Les utilisateurs de routes et à propos ne correspondent plus au chemin du composant d'accueil. Les deux seuls composants seront affichés à la fois, sorte que nous pouvons également utiliser un composant de commutateur pour rendre uniquement la première route qui correspond à l' emplacement. Même si vous dupliquez l'itinéraire about, laissez-moi importer ce composant quel maintenant si je visite la page about, ses composants ne seront rendus que quelques-uns. Cependant, rien n'est qui n'a tout simplement pas besoin de spécifier la propriété exacte pour l'homéopathe ou leurs utilisateurs de femme et à propos va également le correspondre. Et le composant Contre sera toujours rendu parce que c'est la première route qui est définie lors de la correspondance, laissez-moi vous montrer. L' alternative, bien sûr, est de définir le camarade comme le dernier. Là, vous l'avez. Cependant, je quitte la route de la maison avec l'sauf correctement. Maintenant, vous pouvez également spécifier au quatrième tour pour rendre quelque chose quand aucun chemin n'est beaucoup. Ce comportement est implémenté avec un composant prêt. Vous avez juste besoin de passer l'euro à recto prêt avec les deux propriétés. En fait, un composant de commutateur accepte uniquement en tant qu'enfants soit la route ou les éléments érects rouges Les éléments écrits utilisent beaucoup leur propriété chemin tandis que les éléments de répétition utilisent beaucoup leur propriété from. Maintenant, si je vais chez moi, l'application me redirigera vers la maison. Un composant de droite qui n'a pas de chemin d'accès, propriété ou de composant déjà lu qui n'a pas de propriété de départ correspondra toujours à l' emplacement actuel . Cette histoire, certains tout à fait cette érection rouge à la fin du composant de commutateur peut attraper n'importe quel chemin qui n'a pas été précédemment correspondre. Disons juste au revoir avant que vous ne l'ayez. Enfin, quelque chose que vous devez être conscient est que le composant rhétorique était de naviguer vers un nouvel emplacement, remplaçant le besoin de durcissement dans la pile d'historique comme le fait un erect rouge côté serveur. 9. Propriétés de l'itinéraire Render de la route: lorsque vous étiez sous quelque chose avec le composant d'itinéraire. Trois objets sont passés en tant que paramètres beaucoup, qui est un objet qui contient des informations sur la façon dont les routes, mais beaucoup. L' emplacement de l'euro, qui est un objet immuable qui représente étaient L'APP est maintenant a des propriétés pour obtenir la partie. Le Chorus String et la Maison de l'Euro et de l'Histoire, Un objet pour gérer l'historique des décisions dans le navigateur avec des méthodes pour revenir en arrière et en avant dans la pile de l'histoire. Ces propriétés sont toujours transmises quelle que soit la méthode de rendu que vous utilisez dans un composant, vous pouvez les obtenir à partir de l'objet properties. L' objet beaucoup sera celui que vous utiliserez le plus souvent, sorte que vous pouvez détruire l'objet properties pour obtenir juste cet objet. Par exemple, c'est ainsi que vous allez le faire avec une fonction de rendu. En passant, il sous la fonction est utile lorsque vous voulez passer des propriétés personnalisées au composant. Vous allez effectuer un rendu comme la propriété color dans cet exemple, et c'est ainsi que vous le faites en utilisant Children. Rappelez-vous que la différence entre le rendu sur les enfants est que le plus tard rend toujours l'élément retourné par la fonction de cette façon, vous pouvez utiliser la propriété beaucoup pour savoir si le chemin correspond réellement à l'Ural actuel. Si ce n'est pas le cas, l'objet beaucoup sera vide. Ok, vous pouvez voir ces propriétés en action sans modifier l'application. Utilisation de l'extension React Developer Tools. Par exemple, dans Crumb, je vais ouvrir le tabouret du développeur et chercher la réaction finale. Je vais développer toutes ces notes et rechercher le composant d'accueil. C' est juste là. Si j'ai sélectionné, vous verrez les trois propriétés répertoriées ici. Voici l'objet historique avec quelques méthodes pour contrôler le navigateur dit votre historique. n'est pas que l'historique contient un objet de localisation, qui est fondamentalement le même que l'autre objet de localisation que le composant reçoit en paramètre. La seule différence est que l'objet de localisation dans l'historique est mutable, il n'est donc pas recommandé d'utiliser quelque chose. Nous avons l'objet de correspondance. Si je navigue vers leur page à propos, vous pouvez voir comment son champ avec différentes données dans la leçon suivante utilisera l' objet beaucoup pour créer un itinéraire imbriqué 10. Routes imbriquées: Voici un exemple d'un utilisateur de sécheresse Nester est les derniers détails. La plupart du temps, ils sont deux parties, les utilisateurs de chemin principal, dans ce cas sur un chemin doux. Détails. Dans ce cas, généralement la partie molle est définie comme une partie supportable. Donc, dans ce cas, souvent je d. Il peut prendre des valeurs comme un ou deux. En fait, nous allons implémenter une route imbriquée pour ou eux un projet comme celui-ci. Et pour cela, nous allons utiliser beaucoup de propriété. Souviens-toi bien. C' est un objet qui contient les propriétés suivantes Barham et objet avec la valeur clé paires parties de l'Ural correspondant au chemin par les rebelles, son exact sur les lingots avec la valeur true si elles sont beaucoup le modèle de bain utilisé dans le et vous êtes une chaîne qui représente la partie magique de l'URL. Très bien, donc pour la section utilisateur, nous voulons afficher une liste des utilisateurs, et chaque élément de la liste sera un lien comme si c'est Last Users est le dernier. Il s'agit des deux derniers utilisateurs, et ainsi de suite que nous vous montrons les détails de cet utilisateur, donc commençons par modifier le composant users pour générer des liens pour certains exemples d'utilisateurs. Pour garder les choses simples, je vais juste à la fonction finale que bon retour une liste. Une autre option sera d'appeler un B I pour obtenir la liste. Les utilisateurs de la société ont mis à jour la méthode et un magasin le moins dans l'état du composant . Nous avons donc besoin de changements. Il peut être rendu. Mais je vais juste trouver un tableau. Et avec une boucle quatre, je sens leur anneau avec des objets qui contiennent juste une propriété I. D qui représente l'idée des utilisateurs en retour. Ce moins maintenant, je vais remplacer le corps du composant et appelé la fonction. Ensuite, j'ai utilisé la méthode mathématique. Rappelez-vous que cette méthode crée un nouveau tableau avec les résultats d'une fonction appelée sur chaque élément du rayon. Donc, cette fonction va prendre un périmètre, utilisateur d'alcool qui représente l'objet avec la propriété idea que je suis pour chaque utilisateur. Ce composant rendra un élément H deux. Rappelez-vous que rendrait dans un des éléments loués hors. React nécessite une propriété clé avec une valeur unique sur chaque élément. Ensuite, j'aurai un composant d'aile pour créer un lien pour montrer les détails de cet utilisateur. Enfin, sur le lien d'importation sur. Si je lance l'application, nous verrons que les liens sont rendus correctement. Aussi, remarquez comment l'Oural change. Je clique sur Sun Off Ce lien. Maintenant, nous pouvons faire quelque chose pour améliorer cela. Au lieu de coder en dur les utilisateurs se séparent du chemin, nous pouvons les utiliser une grande partie encore le composant reçoit. Si j'ai ouvert le magasin de développeur réaction spinal, je cherche le composant utilisateur, nous pouvons voir La propriété euro a la valeur, ses derniers utilisateurs. Donc, nous pouvons l'instructeur correspondre à partir de l'objet de propriétés que le composant reçoit et utiliser beaucoup de points yura au lieu de la valeur de noyau dur est la dernière, les utilisateurs ce moins et le début est important parce que sinon nous allons créer imbriqué sous le spot utilisateur. Super. Les liens fonctionnent toujours dans. La leçon suivante ajoutera la fonctionnalité pour montrer le détail de chaque utilisateur 11. Utiliser les paramètres de l'itinéraire: D' accord, utilisons leurs paramètres pour montrer les détails de chaque utilisateur. Après la liste des liens utilisateur, je vais déclarer autour du composant avec un paramètre pour capturer l'utilisateur i d. Ces idées sont des nombres afin que nous puissions appliquer la règle avec une expression régulière. Rappelez-vous que les chauves-souris acceptent toute expression que la bibliothèque, mais à Rogic peut gérer. Je place le composant de tige ici parce que je veux que le composant utilisateur apparaisse après le moins. Si vous souhaitez que ce composant remplace la liste d'utilisateurs, vous devrez placer le moins dans le point d'application yes, à côté de l'autre composant d'itinéraire. Quoi qu'il en soit, s'il y a une correspondance, le composant utilisateur sera rendu. Je vais donc importer les composants utilisateur et router et créer un nouveau fichier. Tu as dit ça gay ? Oui, pour cet exemple, je vais juste garder cela simple sur l'affichage. L' idée de l'utilisateur, mais pas est comment le I D est extrait de la beaucoup l'objet du Baron en utilisant le même nom qui est défini dans le bain. Si vous ouvrez le navigateur, vous devriez voir quelque chose de similaire à ceci. Maintenant, nous allons avoir d'autres quatre messages quelque chose comme S'il vous plaît sélectionner un utilisateur parmi le moins. Mais au lieu de créer un composant pour les rejets, j'utiliserai la propriété render hors du composant road. Voyons voir , vous l'avez. Même si un chemin incorporé est entré, le message apparaît toujours. Nous pouvons également monter ces routes dans un composant extensible pour garantir qu'une seule des deux est appariée. Permettez-moi d'importer le composant de commutateur et de tester leur application. Super. Ça marche et c'est fini. Mais il y a une dernière chose que je veux mentionner. Vous devez être prudent avec la façon dont vous déclarez l'itinéraire. Par exemple, si vous déclarez la route qui rend la mission en premier, le composant utilisateur ne sera jamais rendu parce que le chemin comme ce dernier utilisateurs ce dernier bien, im beaucoup. Le chemin d'accès correspond aux derniers utilisateurs. Donc, si vous déclarez l'itinéraire dans cet ordre exact pour éviter ce comportement afin que nous puissions dire que la leçon ici est toujours déclarée les routes les plus spécifiques en premier. Maintenant, grandissons ce verre 12. Réflexions finales: d' accord. À l'heure actuelle, vous devriez avoir une bonne compréhension de ce que sont les applications de pâte unique. Comment en créer un avec réagir et réagir. Le chevron. Vous avez appris qu'une route ou conserve votre application vous y et l'Ural vous pensez et réagissez. routeur est la bibliothèque de rotor la plus populaire pour réagir. En outre, vous avez appris à configurer le routeur React, son composant le plus important. Comment les routes fonctionnent sur la façon de construire le nid dynamique, la sécheresse avec les paramètres des pièces car il y a encore beaucoup plus à déterrer. La documentation officielle couvre des exemples interactifs de base ainsi que des exemples plus avancés . Maintenant, dans le projet de classe, vous allez rassembler tout ça. Vous devrez créer une application unique avec au moins les fonctionnalités suivantes. Page d'accueil, un autre patient avec du texte et non pas de la page d'une page principale Avec Nestor Desser, les valeurs peuvent être Marco, par exemple, les valeurs peuvent être Marco,par exemple, un catalogue de produits ou une liste de messages. L' application peut être un bac à sable gonflé, manteau, penn ou manteau afin que tout le monde puisse le vérifier. Rappelez-vous que vous pouvez trouver la croissance de la source complète du projet Dem A sur Obtenir le lien est dans la description de la classe. Et si vous avez des questions ou des problèmes, laissez un commentaire et je vais essayer de répondre dès que possible. D' accord, j'espère que vous avez apprécié la classe. J' apprécie si vous avez le temps de laisser un avis et si vous aimez la classe, suivez-moi pour être averti. Quand je sortirai plus de cours, je te verrai la prochaine fois preneur et merci d'avoir regardé.