Réagir des crochets de manière LA PLUS SIMPLE (avec le routeur de réaction v6, Axios, validation de formulaire et raccourcis )

1. Introduction: Bienvenue dans la classe de hook React. Dans ce cours, vous apprendrez tous les Hooks React dans un langage simple et facile à comprendre. Tout d'abord, nous verrons ce que sont les crochets et pourquoi nous en avons besoin. Après cela, nous allons commencer par le crochet le plus utile, qui est utilisé. Et d'autres crochets comme use effect, use context, etc. Nous verrons également la bibliothèque d'accès pour récupérer des données depuis l'API, gérer les paumes, une validation et bien plus encore. Après avoir terminé ce cours, je vais vous donner un projet, qui est le suivi des prix de la crypto-monnaie. Vous trouverez toutes les instructions dans la section projet. Je suis très enthousiaste à propos de ce cours et j'espère que vous l'êtes aussi. Commençons donc. 2. Qu'est-ce que les crochets ?: Avant de plonger dans le crochet usté, comprenons d' abord, qu'est-ce que les crochets ? Si vous le savez déjà, vous pouvez sauter cette partie et sauter directement sur le crochet. Alors, qu'est-ce que les crochets ? Les hooks sont les fonctions permettant d'utiliser certains prédicateurs React dans les composants fonctionnels. En d'autres termes, nous pouvons dire que les hooks sont des fonctions qui font fonctionner les composants fonctionnels comme les composants de classe. Je sais que cela semble compliqué, mais ce n'est pas le cas. Comprenons avec une histoire. Avant que React lance des crochets. n'existe qu'une seule façon d'utiliser les méthodes d'état et de cycle de vie à l'aide des composants de classe. Les développeurs ont eu quelques problèmes avec les composants en verre. Prenez donc le temps de développer des fonctions spéciales que nous pouvons utiliser dans les composants fonctionnels et que les fonctions spéciales sont appelées crochets. Je pense donc maintenant que vous comprenez ce que sont les Hooks React, qui sont des fonctions qui font fonctionner les composants fonctionnels des composants de classe live. Commençons par notre premier crochet, qui est utilisé. 3. Crochet le plus important - useState: Qu'est-ce qui est utilisé ? Il l'a utilisé hook est une fonction pour ajouter de l'état dans un composant fonctionnel. Maintenant, vous pouvez vous demander ce qu'est l'état ? L'état n'est donc rien que des valeurs ou des variables de votre composant. En d'autres termes, toutes les variables votre composant sont appelées en tant qu'état du composant. Chaque fois que vous voulez créer une variable, vous devez utiliser le hook usted, aussi simple que cela. Comprenons avec l'exemple. Ici, j'ai une nouvelle application React et j'ai supprimé tous les fichiers inutiles de celle-ci. Laissez-moi d'abord créer un composant fonctionnel à l' aide d'un FCE. Il s'agit de l'image permettant de créer les composants fonctionnels. Mais vous devez d'abord installer cette extension ESL et React. J'ai adoré cette extension. Cela augmente ma productivité dans React. Maintenant, je vais créer un compteur simple, affiche la valeur du compteur et un bouton appelé en Grèce. Lorsque nous cliquons sur ce bouton, la valeur du compteur augmente d'une unité. Maintenant, c'est ici que je veux afficher la valeur du compteur. Nous avons besoin de l'État. Et c'est là que nous utilisons, nous l'avons utilisé avec des crochets. Pour utiliser n'importe quel crochet. abord, nous devons l' importer à partir de bibliothèque React, juste ici, usted. Ok, ici nous allons vous appeler fonction d'état. Et nous donnons à notre compteur une valeur initiale de 0. Maintenant, cette fonction va retourner un tableau. Consolidons-nous donc. Voir. Cette zone comporte deux éléments. Le premier élément est notre valeur d'origine, qui est 0, et le second élément est une fonction. Nous allons donc faire ce premier élément dans la variable compteur et affiché ici en utilisant des accolades. Enregistrez les modifications, et jetez un œil, nous récupérons notre compteur. Maintenant, le deuxième élément de ce tableau renvoie une fonction. En utilisant cette fonction, nous pouvons mettre à jour nos valeurs d'état. Stockons donc cet élément dans une variable appelée compteur d'état. Maintenant, quelle que soit la valeur que nous passons dans cette fonction, elle sera la valeur de cette variable de compteur. Laisse-moi te le montrer. Ici. Nous voulons augmenter le compteur d'une unité. Lorsque nous cliquons sur ce bouton, Ajouter une fonction dans OnClick augmenter le compteur. Nous devons maintenant définir cette fonction. Et à l'intérieur de cette fonction, nous écrivons set counter. Quelle est la valeur connue, qui est un compteur plus un. Sauvegardez-le et jetez un œil. Tu vois, ça fonctionne. Et lorsque nous actualisons la page, elle recommence par 0, que nous transmettons dans cette fonction de votre état. Maintenant, notre code est un peu moche. Nous utilisons donc toujours le raccourci pour ces trois lignes, appelé Modifier la restructuration. Ici, à la place de Los Angeles, ajoutez des crochets. Et à l'intérieur, à droite, le nom de la variable post, qui est compteur, puis write function name, qui est le compteur défini. Nous n'avons pas besoin de ces deux lignes. Cela fonctionne de la même manière qu'auparavant. Et notre code a l'air propre. Et vous pouvez utiliser plusieurs crochets ustés dans un seul composant. Voyons maintenant comment nous pouvons utiliser l'État américain pour obtenir de la valeur à partir de l'entrée. Nous allons donc créer une entrée avec un texte de type. Ici, nous devons gérer l'événement onchange. Et nous passons l'exploration d'une fonction flèche. Et nous utilisons la valeur du point cible pour mettre à jour la variable d'état. Donc le type l'a utilisé ici. Et ici, nous pouvons donner la valeur initiale de notre variable, dans ce cas une chaîne vide. Maintenant, chaque fois que la valeur de ce champ d'entrée change, nous appelons la fonction setName et la valeur du point cible bass e dot. Nous appelons setName et transmettons cette valeur. Maintenant, changeons notre étiquette en nom de variable, a cliqué sur. Temps de compteur variables, enregistrez les modifications et jetez un œil. Ici, nous avons une zone de texte et quand nous écrivons le nom gold, il est immédiatement mis à jour ici et aussi contre les mises à jour onclick. Voyons maintenant comment utiliser le hook usted lorsque nous avons object comme variable d'état. Nous créons donc ici deux variables d'état qui sont counter et name. Nous pouvons maintenant faire de même avec une variable d'état, qui est object. Créez donc un nouveau usted et passez l'objet en tant que compteur de valeur initiale à 0 et chaîne vide name2. Définissez maintenant son nom à l'aide des options Modifier les détails de la restructuration et les détails des ensembles Supprimez maintenant ces deux lignes. Nous n'en avons pas besoin. Au lieu d'écrire un nom, c'est ça ? Détails du nom du point et détails du compteur de points. Ici, dans la fonction de compteur d'augmentation, je supprime cela et devine ce qu'il faut ajouter ? C'est vrai ? Nous devons ajouter une fonction de définition des détails pour mettre à jour cette valeur de compteur. J'écris donc les détails du site. Et n'oubliez pas, quelle que soit la valeur que vous passez dans cette fonction, elle sera mise à jour avec la valeur d'origine. Donc compteur d'objets, Carlin détaille le compteur de points plus un. Sauvegardez-le et jetez un œil. Ouaip, ça marche. Mais il y a un gros problème : nous n' avons pas notre élément name dans cet objet. Laisse-moi te le montrer. J'écris donc simplement ici les détails de console.log et je les enregistre. Actualisez maintenant la page et voyez comment deux éléments dans l'objet. Maintenant, lorsque je clique sur ce bouton agrandi, l'élément name est supprimé de notre objet. Alors pourquoi cela se produit-il ? Cela se produit parce que nous passons directement l'objet sans ajouter d'autres anciennes valeurs. La solution est donc abord d'ajouter toutes les autres valeurs de ce nom d'objet ici et de mettre à jour cet élément de compteur avec une nouvelle valeur. Donc, à l'intérieur de la fonction details, nous pouvons passer une autre fonction et cette fonction peut renvoyer la valeur précédente de nos variables d'état. Ne t'embrouille pas juste pour voir ça. Donc, ces variables précédentes sont identiques à celles de cette variable de détails. Permettez-moi de vous montrer que ma console et d'ajouter du texte ici. Vous voyez, nous obtenons toutes les valeurs lorsque nous cliquons sur ce bouton avec une erreur car nous ne pouvons pas écrire de console dans dysfonction. Alors enlève ça. Et maintenant, nous utilisons l'opérateur d' étalement en utilisant trois points précédents. Cela ajoutera toutes les valeurs précédentes de la variable d'état. Maintenant, nous remplaçons counter par l'ancienne valeur, qui est le compteur de points précédent plus un. Enregistrez les modifications et jetez un œil. Vous voyez qu'il fonctionne parfaitement avec l'élément name. Ainsi, chaque fois que vous travaillez avec un objet ou un tableau, nous devons d'abord ajouter toutes les valeurs précédentes en utilisant cette méthode, puis mettre à jour ce que nous voulons mettre à jour. Récapitulons ce que nous avons appris. Usted est donc utilisé pour créer des variables d'état dans des composants fonctionnels. Donc, pour utiliser le hook usted, nous devons d'abord l'importer et l' utiliser dans le composant fonctionnel. Ici, vous pouvez transmettre n'importe quel type de données comme des données booléennes, nombres, du texte, des objets, puis les stocker à l'aide de la restructuration AddEdge. La première variable est sa valeur actuelle. Et le second est la fonction de notre élevage de cette valeur. est aussi simple que ça. Certaines personnes peuvent être un peu confuses ici. Et j'ai également été confuse quand j'ai appris qui pour la première fois. Mais avec la pratique, j'ai appris ce concept et je l'ai utilisé dans mes projets. 4. Manipuler des entrées multiples (raccourci): Voyons comment gérer plusieurs entrées uniques sur le gestionnaire dans React C'est très utile lorsque vous avez plusieurs champs de saisie, comme le formulaire d'inscription. Dans le tutoriel de l'USDA, nous voyons comment gérer un ou deux champs de formulaire. Mais imaginez que vous ayez cinq à six champs et que vous créiez une variable d'état pour chaque entrée, ce qui rend notre code compliqué et difficile à gérer. Voyons donc comment gérer plusieurs entrées à l'aide d' une seule fonction OnChange. Ici, nous avons appuyez sur le composant F. Et ce composant, je veux prendre les détails de l'utilisateur tels que le nom, e-mail, le mot de passe et l'adresse. Nous allons donc créer un formulaire. Je sais que certains développeurs n'utilisent pas cette balise de formulaire pour créer directement des éléments d'entrée, mais ce n'est pas une bonne pratique. Maintenant, dans ce formulaire, je veux une balise S3 et un texte de type de saisie de nom de passe. Maintenant, je duplique ce code trois fois de plus en utilisant la flèche vers le bas C Plus Plus et en changeant deuxième pilule comme e-mail et en saisissant par e-mail. Ensuite pour mot de passe et tapez mot de passe. Et le dernier, c'est l'adresse. Et pour cela, nous avons besoin d'une zone de texte. Je supprime donc cette balise de saisie et crée une zone de texte. Et à la fin, nous avons besoin d'un bouton, tapez submit, et nommez-le submit form. Maintenant, enregistrez les modifications et jetez un coup d'œil. Tu vois, nous recevons notre formulaire avec toutes les pilules. Dans la leçon précédente, nous créons des entrées de variables d'état individuelles. Ensuite, dans onchange, nous définissons cette valeur sur notre variable d'état. Mais dans cette méthode, nous ne créons qu'une seule variable d'état pour tous les champs de saisie. Si vite, j'importe usted depuis la bibliothèque React. Et dans notre composant fonctionnel, nous utilisons usted et le déstructurons comme des détails et des détails d'ensemble. Maintenant, je veux passer un objet et cet objet, nous avons plusieurs champs comme nom et sa valeur initiale sous forme de chaîne vide, e-mail, chaîne vide, mot de passe, chaîne vide. Et le dernier, adresse une chaîne vide. Créons maintenant notre fonction de changement de poignée. Et nous appellerons cette fonction sur chaque événement onchange input. Donc ici j'écris sur change et passe handle change function. Copiez-le et collez-le dans tous les champs. Ainsi, chaque fois que nous saisissons l'un de ces champs, seule cette fonction sera exécutée. Maintenant, étape la plus importante, et sans cette étape, Notre, cette méthode ne fonctionnera pas. L'étape consiste donc à ajouter le nom de toutes les pilules en tant qu'attribut name d'entrée de notre objet d'état. Laisse-moi te montrer ça. Ainsi, pour la saisie de nom, nous voulons stocker sa valeur d'entrée dans cette propriété name. Nous ajoutons donc l'attribut name égal à name. Maintenant, pour l'e-mail, nous voulons définir cette valeur e-mail dans cette propriété d'e-mail. Nous ajoutons l'attribut de nom d'entrée e-mail à l'e-mail. Maintenant, pour le mot de passe, le nom est égal au mot de passe et à l'adresse du port. Nous passons le nom est égal à l'adresse. Assurez-vous d'écrire le même nom que celui que vous écrivez dans cet objet. Maintenant, à l'intérieur de cette fonction de changement de poignée, nous écrivons notre logique principale. J'utilise donc ce e comme objet d'événement pour toutes ces pilules. Et nous allons consoler la cible point. Sauvegardez-le et jetez un œil. Vous voyez, quand nous saisissons notre nom, nous obtenons cette entrée de nom. Et lorsque nous saisissons une autre entrée, nous obtenons cette entrée. Donc, notre logique est que lorsque nous tapons dans le champ de saisie, nous obtenons le nom et la valeur du fichier d'entrée. Et avec ce nom, qui sera le même que nos propriétés d'objet de détails, nous remplacerons sa valeur par la valeur actuelle. Je sais que cela semble compliqué, mais ce n'est pas le cas. Voyons voir ça. Et après cela, tous les doutes disparaîtront. Je crée une variable de nom pour le nom du point cible du point E et une variable de valeur pour la valeur du point cible du point E. Consolons les deux variables. C. Nous obtenons FullName et sa valeur lorsque nous saisissons ces champs de saisie. Il ne nous reste plus qu'à définir cette valeur dans notre variable d'état. Laissez-le faire son nom. Donc, les détails du côté droit. Et dans la fonction de rappel, nous passons le paramètre précédent, quelle valeur précédente ? Donc tout d'abord, nous retournons toutes les valeurs précédentes en utilisant l'opérateur spread. Nous devons maintenant mettre à jour la propriété avec cette valeur. Nous savons donc que nous pouvons accéder à la propriété de l'objet en utilisant des crochets et en passant cette variable de nom à l'intérieur et deux-points sa valeur. Donc, si nous écrivons quelque chose dans une entrée de courrier électronique, cela retournera d'abord toutes les propriétés précédentes. Ensuite, nous trouvons l' e-mail de la propriété et remplaçons sa valeur par ce symbole de valeur de champ d'e-mail. Supprimons le solo de cette variable de données et voyons si nous obtenons des valeurs non. Enregistrez donc les modifications et jetez un œil. Quand nous mettons à jour un champ, nous obtenons sa valeur dans notre objet d'état. Maintenant, nous pouvons même trier ce code en utilisant la destruction d'objets. J'écris la cible de point E et en utilisant la structuration des données d'objet, nous stockons le nom et la valeur dans une variable. Donc ces deux lignes, identiques à cette ligne. J'ai donc supprimé ces deux lignes. Maintenant, je souhaite consulter cet objet Détails lorsque nous cliquons sur le bouton Soumettre. Je crée donc une nouvelle fonction appelée handle submit et gère tous ces objets de détails. Maintenant, dans la balise de formulaire onsubmit event, nous appelons cette fonction. Maintenant, enregistrez les modifications et jetez un coup d'œil. Permettez-moi d'écrire tous les détails. Ensuite, je clique sur le bouton Soumettre. Tu vois, pendant seulement 1 seconde, c'est imprimé. Ensuite, notre formulaire est refoulé parce que c'est le comportement par défaut de form. Chaque fois que nous soumettons le formulaire, cette fonction s'exécute puis elle supprime la page. Nous devons donc arrêter ça. Nous utilisons ce e comme objet d'événement et écrivons la fonction par défaut E point prevent. Cela empêchera le comportement par défaut de palm. Enregistrez donc les modifications et jetez un œil. Vous voyez, nous obtenons des détails dans la console. Dans ton projet. Vous pouvez appeler l'API dans cette fonction et envoyer tous les détails au serveur. J'espère donc que cette méthode vous plaira. Si vous avez la moindre confusion. Ce tutoriel était-il une fois de plus. Et essayez d'appliquer cette méthode à votre projet qui dissipera vos doutes. 5. useEffect dans la profondeur: Utilisez la cheville est utilisée pour effectuer des effets secondaires dans notre composant. Quels sont donc les effets secondaires ? Les effets secondaires, nos actions qui sont effectuées avec le monde extérieur. Nous effectuons un effet secondaire lorsque nous avons besoin faire quelque chose en dehors des composants de React. Quel exemple, récupérer des données depuis l'API, mettre à jour directement le DOM dans lequel nous utilisons un objet de document ou de fenêtre, et des fonctions de minuterie comme setTimeout ou set interval. Ce sont les effets indésirables les plus courants sous React. Donc, pour effectuer tout type d'effets secondaires, nous devons utiliser, utiliser l'effet Hooke. Voyons un exemple. Ici. J'ai créé une variable d'état et sa valeur augmentera d'une unité. Lorsque nous cliquons sur ce bouton pour utiliser n'importe quel hook, nous devons d'abord importer des données depuis la bibliothèque React. J'écris donc ici, utilise effect, et maintenant nous pouvons l'utiliser dans le composant fonctionnel. Utilisez donc un vecteur à l'exception de deux arguments. Callback, qui est une fonction dans laquelle nous écrivons notre logique d'effets secondaires. Cette fonction est exécutée chaque fois que quelque chose se trouve dans ce composant. Ensuite, les dépendances, qui sont une zone de variables et c'est un argument facultatif. En termes simples, le premier argument est ce qu'il faut exécuter, et le second est quand exécuter. L'effet utilisateur s'exécute sur chaque rendu, ce qui signifie que lorsque le décompte change ou lorsque cela se produit, nous pouvons le contrôler par des dépendances. Si vous êtes familier avec les composants de classe, l'effet d'utilisation est une combinaison du composant a monté, mise à jour des données du composant et du composant sera monté. Voyons la variation des crochets d'effet d'utilisation qui ne sont que trois variations du vecteur utilisateur. abord, utilisez-le sans aucune dépendance. Deuxièmement, l'effet utilisateur avec un tableau vide et le troisième utilisateur avec des variables. Voyons la première variante du hook vectoriel utilisateur. Bon ? Utilisez-le et passez uniquement la fonction de rappel. Et dans cette fonction, je souhaite mettre à jour le titre de notre site Web avec la même méthode. Donc, le titre du point du document est égal à deux en backticks, compte dollar nouveaux messages et enregistrez-le. Actualisez la page et voyez chaque fois que ce composant s'affiche, utilisez si x r1 et que notre titre est mis à jour avec notre message. Maintenant, quand quelque chose change ce composant, nous cliquons sur ce bouton et il utilise un livre vectoriel intitulé change avec compteur. Ainsi, lorsque nous utilisons user back pour accrocher sans aucune dépendance, use effect s'exécutera à chaque modification de ce composant. Dans ce cas, il s'agit d'un composant d'application car nous aurions un effet d'idées dans le composant de l'application. Voyons maintenant utiliser l'effet avec un tableau vide. Donc, dans ce même exemple, nous passons un tableau vide de dépendances de faits d'utilisateur final. Et voyons ce qui s'est passé. Alors enregistrez-le et jetez un coup d'œil, rafraîchissez la page, et voyez-nous si Exelon lors du rendu des composants. Maintenant, lorsque nous cliquons sur ce bouton, signifie que le compteur va changer, mais le titre ne fonctionne pas sur ce changement. Lorsque nous passons un vide aux indépendances, use effect ne s'exécutera qu'une seule fois. Quand notre composant est rendu pour la première fois. Après ça, on ne s'enfuira plus. C'est utile lorsque nous avions l'habitude de récupérer des données à partir d'une API ou serveur qui récupéraient des données lors du premier rendu du composant. En passant, le crochet est disponible dans la description. Voyons maintenant la dernière variation de l'effet utilisateur, quelles variables. Donc pour comprendre ce concept, je crée un autre nom de variable d'état ou le bouton Compte qui augmentera celui contré par Phi. Maintenant, je veux changer de titre lorsque nous ne changeons d'autres états de comptage ou que nous devons passer une autre variable de compte dans cette dépendance LA. Et je change cette variable de compte avec un autre compte. Enregistrez les modifications et jetez un coup d'œil, actualisez la page et constatez qu'elle fonctionne parfaitement sur Render. Maintenant, lorsque je clique sur cette autre variable d'état de compte, titre est mis à jour avec cette bande. Mais lorsque nous cliquons sur cet ancien bouton, cela ne fonctionnera pas car nous passons notre nouveau tableau d' indépendance de variable. Donc, utilisez-le uniquement lorsque la valeur de ces variables d'état changera et vous pouvez passer plus de variables en utilisant une virgule. Maintenant, la dernière partie de ce hook d'effet d'utilisation est la fonction de nettoyage. Et c'est un peu déroutant pour les débutants. Comprenons avec un autre exemple. Pour que tout le monde puisse comprendre. Ici, j'ai utilisé fonction setInterval appelée compte à rebours. Cet intervalle ne s'arrêtera pas tant que nous n'utiliserons pas la fonction clear interval. Si nous définissons l'état à l'aide de setInterval et que cet effet secondaire n'est pas nettoyé lorsque nos composants sont sur des monticules, ou si nous ne voulons plus l'utiliser, l'état est détruit avec le composant, mais la fonction d'intervalle d'échange continue-t-elle de fonctionner ? De ce fait, nos applications lentes et peu performantes. Il est donc important de nettoyer ces fonctions. Donc, pour utiliser la fonction de nettoyage, nous devons exécuter la fonction écrite dans l'effet d'utilisation. Laissez-moi vous le montrer ici. Dans cette utilisation, si je l'avais fait, j'aurais écrit la fonction flèche. Et à l'intérieur de cette fonction, iodure efface l'intervalle et passe le nom de variable fonction setInterval, qui est timer. Maintenant, la fonction de nettoyage sera appelée lorsque le composant est démonté. C'est difficile à voir dans cet exemple, j'ai créé un compteur, puis j'ai mis à jour ce compteur sur ButtonClicked by one. Maintenant, je crée une nouvelle fonction vectorielle utilisateur qui compte la dépendance et écrit console.log autour de l'effet avec la variable count. Donc, lorsque la variable count changera, l'utilisateur s'exécute et maintenant j' écris la fonction return. À l'intérieur de cette fonction, je console simplement le nettoyage du journal des points. Également avec variable count. Nous commençons juste à comprendre quand la fonction de nettoyage fonctionnera. Enregistrez donc les modifications et jetez un coup d'œil, actualisez la page, et elle fonctionne après le rendu. Maintenant, chaque fois que ceux-ci sont utilisés, si je pouvais les exécuter, encore une fois, toutes les fonctions de nettoyage seront suspendues, puis cette fonction de rappel s'exécutera. Voyons cette diapositive. Ici, il s'agit du rendu proposé. Et quand nous cliquons sur ce bouton augmenté, cela signifie que cet utilisateur va courir jusqu'à ce que le nettoyage avec la valeur 0 s'exécute. Et puis la fonction de rappel print pour la valeur un. Encore une fois, nous cliquons sur ce bouton, la fonction de nettoyage précédente s' exécutera , puis appellera l'arrière-plan. La fonction de nettoyage n'est donc pas requise dans tous les cas. Elle n'est requise que dans quelques cas, par exemple lorsque vous devez arrêter un effet secondaire répété lorsque votre composant est monté. est aussi simple que ça. Récapitulons. Ce que nous avons appris. J'utilise l'effet est utilisé pour effectuer des effets secondaires tels que manipulation de données de correctif avec un document et une fenêtre. Les événements de minuterie tels que SetInterval et SetTimeout. Utilise-le. Acceptez deux arguments. Le coût est par fonction de rappel et le second est pour les dépendances, ce qui est facultatif en termes simples, ce qu'il faut exécuter et quand l'exécuter. Il existe trois variantes d'utilisation si je me débrouille sans dépendances, ce qui signifie qu'il fonctionne avec le post-rendu et fonctionne également sur tout changement dans ce composant. Ensuite, avec un tableau vide, ce qui signifie qu'il ne s'exécute qu'après le rendu et qu'il est utile pour corriger les données. Troisièmement, state et props, ce qui signifie qu'il s'exécute après le rendu. Et puis toutes les variables que nous transmettons changent d'indépendance. Cela fonctionnera aussi simplement que cela. délais d'attente, les abonnements, l'écouteur d'événements et les autres effets qui ne sont plus nécessaires doivent être éliminés à l' aide de la fonction de nettoyage. 6. Récupérer des données à l'aide d'AXIOS: Dans ce tutoriel, nous allons apprendre ce que sont les ICO, pourquoi nous avions besoin de transmettre des données en utilisant certaines erreurs à éviter. Et mon truc préféré pour utiliser les axiomes dans React, gros un tutoriel complet sur zOS. Alors ne perdons pas de temps et lançons-nous. Tout d'abord, qu'est-ce qu'Axioms ? Axiom est un package utilisé pour faire une requête HTTP à partir du navigateur d'une manière simple et améliorée patch en JavaScript, nous pouvons dire qu'axioms est la version mise à jour de celui-ci car XES fournit de meilleures fonctionnalités Requête HTTP, près de 70% des utilisateurs utilisent x equals pour effectuer des requêtes HTTP pour le back-end comme NodeJS. Voici quelques avantages de l'utilisation d'un système d'exploitation dans React. Si vous utilisez la méthode Bayes, nous devons d'abord transmettre les données au format JSON , puis nous pouvons les utiliser. Mais SEoS utilise par défaut le format jason, ce qui signifie que X ans convertit automatiquement les données au format JSON lorsque nous obtenons des données du serveur. C'est pourquoi nous n'avons besoin que d'une seule méthode then. Cela rend notre code propre et facile à comprendre. Seo's fournit tous les types de méthodes HTTP telles que GET, post, PUT, elite et bien d'autres. Nous pouvons faire mieux en matière de manipulation en utilisant x ans. C'est donc beaucoup pour les théories. Voyons maintenant comment utiliser XES dans un réactif. Ici, je crée une nouvelle application React et je supprime tous les fichiers inutiles. Rendez-vous maintenant sur Damages et .com. C'est l'une de mes API préférées pour les tests. Ici, nous pouvons lire sa documentation si vous le souhaitez. Faites maintenant défiler vers le bas jusqu'à Ressources. Et ici, vous pouvez voir différentes données telles que les détails du produit , les gardes, les utilisateurs, la publication, etc. Maintenant, vous ne verrez peut-être pas ces données au format JSON comme celui-ci, car j'utilise ce format ou extension JSON. C'est un outil très pratique pour voir les données JSON dans le navigateur. Vous allez l'installer depuis le Chrome Web Store. Ici, nous pouvons obtenir les données factices des produits à partir de cette API. Nous utilisons XES pour appeler l'API et afficher ces données à l'aide de la méthode map. Alors tout d'abord, ouvrez les zéros comme dans NPM, et voyez qu'il a 2,4 millions de téléchargements hebdomadaires, ce qui est insensé. Copions donc cette commande npm et collez-la dans VS Code Terminal et appuyez sur Entrée. Il est donc installé avec succès. Nous pouvons le vérifier par le fichier package.json C. Nous obtenons x années d'indépendance. Maintenant, je ferme ce fichier et dans app.js, pendant que j'importe des axes depuis x equals package. Nous pouvons donc utiliser des zéros dans ce composant. Ici, je veux transmettre des données sur les composants rendus la première fois dont nous avons besoin, non ? C'est un effet usé. J'écris donc use effect. Et le premier argument est la fonction de rappel. Le deuxième argument est un tableau de dépendances. Je voulais donc simplement transmettre des données une fois. Lorsque les composants sont rendus, je passe un tableau vide sans aucune dépendance. Maintenant, dans la fonction de rappel, nous récupérons les données de l'API. Supposons à droite, point x ici nous tapons méthode comme GET, post, PUT, delete. Alors je l'écris. Maintenant, dans cette parenthèse, nous passons l'API. Je copie donc cette API et je la colle ici. Pareil à la méthode fetch. Nous les utilisons et utilisons la fonction flèche et passons la réponse en tant que paramètre. Puis console cette variable de réponse pour voir ce que nous obtenons. Enregistrez donc les modifications et jetez un œil. Nous obtenons donc un objet avec la configuration, les données, le code d'état, etc. Dans l'objet de données, nous obtenons les produits. Nous devons donc stocker ce tableau dans la variable d'état. Revenons donc à VS Code, et en haut, je crée une variable d'état appelée products et passe un tableau vide comme valeur initiale et j'importe le hook usted de React. Maintenant, dans ce cas, nous utilisons produits secondaires et des produits point response.data. Nous obtenons maintenant la valeur de ce produit dans la variable du produit. Par écrit, nous affichons le nom du produit et son prix. Donc, entre accolades, carte de points de produits. Et à l'intérieur de cela, nous passons la fonction de rappel et passons paramètres tels que product pour un produit et un index individuels. Oubliez la valeur d'indice de ce produit actuel et renvoyez la balise h3. Et à l'intérieur, nous passons entre parenthèses, titre du point du produit et le dollar, le prix du produit. Et nous passons l'indice en tant que valeur clé. Maintenant, enregistrez les modifications et jetez un œil. Vous voyez, nous obtenons les noms de produits avec leur prix. Vous pouvez ajouter vos styles et les rendre plus cool. Pour l'instant, je suis d'accord avec ces tuiles parce que nous apprenons des axiomes. Et c'est notre objectif principal. Vous verrez donc à quel point il est facile et simple de faire une requête HTTP. Maintenant, si vous voulez faire une demande de publication, vous devez simplement enchaîner cette méthode à la publication et aux gènes supérieurs à 0,48. Ensuite, si nous voulons envoyer des données, vous pouvez passer cette variable comme deuxième paramètre après l'API, c'est aussi simple que cela. Je vais vous donner tous les types de méthodes, des exemples dans mon XES Ultimate Guide. Vous pouvez le télécharger depuis la boîte de description. Voyons maintenant comment gérer les erreurs à l'aide d'un système d'exploitation. Donc, après ces dix méthodes, nous écrivons la méthode cash. Cette méthode ne s'exécutera que lorsque quelque chose ne va pas. Dans cette méthode, nous pouvons dire que si une erreur se produit seulement alors, la méthode de ces gars s'exécutera. Nous passons donc l'erreur en tant que paramètre et consolons cette variable d'erreur. Maintenant enregistrez-le et jetez un coup d'œil. Nous n'obtenons donc rien dans la console car il n'y a pas d'erreur. Maintenant, je fais une faute de frappe dans l'orthographe de cette API. Maintenant, enregistrez les modifications et jetez un œil. voyez, ici nous obtenons un objet d'erreur avec un code d'erreur, un message d'erreur, etc. Maintenant, nous allons afficher le message d'erreur sur le navigateur. Nous créons donc une autre variable d' état appelée error et passons une chaîne vide comme valeur par défaut. Maintenant dans la cage, définissez l'erreur, message d'erreur et imprimez cette erreur sur le navigateur. Ici, nous pouvons définir des conditions comme si une erreur n'est pas égale à une chaîne vide, alors seulement puis imprimer erreur. Enregistrez donc les modifications et jetez un œil. Vous voyez, nous recevons un message d'erreur. Et si je supprime la faute de frappe, message d'erreur ne s'affichera. Laissez-moi vous montrer mon truc pour utiliser des axiomes. Vous pouvez donc voir ici que nous devons écrire l'URL complète de notre API lorsque nous l'appelons. Dans le monde réel, vous avez la même origine pour toutes vos API dans un seul projet. Je suis donc très paresseux dans l' écriture de code dupliqué. Ce n'est pas une bonne pratique. Je crée donc une variable réutilisable et je l'utilise dans mon projet. Créons donc un nouveau fichier appelé XES point js. Et dans ce fichier, je saisis x années. Créez maintenant une nouvelle variable appelée instance. Tu peux l' appeler comme tu veux. Peu importe. Et exportez par défaut cette variable. Ici, j'écris X years dot create. Et dans cette fonction create, nous pouvons passer un objet. Et dans cet objet, nous ajoutons l'URL de base. Et en virgule inversée, j'ai obtenu cette URL de base et je la colle ici. Enregistrez maintenant les modifications. Et dans notre composant d'application, je supprime ce référencement et j'importe nos nouveaux axiomes à partir du fichier zéros point js. Maintenant, enregistrez les modifications et jetez un œil. Cela fonctionne de la même manière qu'auparavant. Nous n'avons donc plus besoin d'écrire cette URL de base encore et encore. Mais n'oubliez pas que vous devez importer X ans à partir de notre nouveau x égal à cinq. Si vous avez importé à partir du package axioms d'origine, vous devez écrire le point de terminaison avec l'URL de base. Donc, si vous obtenez une erreur dans cette méthode juste à partir de laquelle vous importez X années. Maintenant, dernière et dernière partie, XES avec async attend, ce qui le rend super cool. Async wait est donc le meilleur moyen de gérer les promesses en JavaScript. Permettez-moi de vous expliquer que vous insérez dans notre composant d'application, je crée une nouvelle fonction pour les produits de patch, fonction de données obtenir des produits. Et dans cette fonction, nous voulons utiliser wait for response. Nous devons donc ajouter une fonction async, et ce n'est qu'alors que nous pouvons utiliser await dans cette fonction. Donc, sur huit zéros, obtenez des produits et stockez cette valeur dans une variable appelée réponse et console cette réponse. Donc, en gros, lorsque nous appelons cette fonction plus cette API appellera et tant que nous n'aurons pas de données, elle ne s'exécutera pas. Ligne suivante. Maintenant, je commente ces axiomes de la musique et j'appelle notre nouvelle fonction à l'intérieur. Maintenant, enregistrez les modifications et jetez un œil. Nous obtenons le même objet que celui que nous obtenons dans la méthode then. Définissons donc les produits, les données ponctuelles de réponse, produits scalaires, et nous imprimons les données dans notre navigateur. Certains d'entre vous se demandent peut-être comment pouvons-nous gérer les erreurs dans ce domaine ? La solution est donc d' utiliser la méthode try and catch. J'écris donc à sec et sélectionne la deuxième suggestion. Et cela va générer, essayer et attraper un passe-partout. Maintenant, à sec, nous écrivons toute notre logique et nous nous engageons. Nous écrivons du code pour la gestion des erreurs. Je déplace ces trois lignes à l'intérieur, essaie de bloquer et d'engager. J'ai dit additionneur et j'utilise ce message d'erreur. Donc, si nous obtenons un additionneur dans ce bloc d'essai seulement , alors ce sketch sera exécuté. Dans le cas contraire, JavaScript l' ignorera pour. Maintenant, refaisons le dipôle. Enregistrez les modifications. Jetez un œil, vous voyez, nous avons un additionneur en haut et ça marche bien. Revenons donc au code VS. Et voyez, cette carte postale a l' air un peu déroutante et notre nouveau code est assez propre et facile à comprendre. Essayez donc d'utiliser async wait avec x ans. Cela fera bonne impression sur votre patron et votre client également. Si vous voulez une révision rapide des SCO, vous allez télécharger mon guide ultime des axiomes à partir de la boîte de description. Dans ce guide, j'écris tous les exemples de méthodes et de cas d'utilisation différents. Et en prime, vous apprenez à utiliser XES avec async wait. 7. useContext: Quel est le contexte utilisé. Use context hook est utilisé pour gérer les données globales dans l'application React, comme l'état global, l'équipe , les services, les paramètres des utilisateurs, etc. Voici donc une situation. Imaginez que vous créez une application avec ce type de structure de composants. Le composant principal est donc l'application, puis il en a pour les composants enfants. Et les composants j ont également une composante génétique. C'est donc comme une hiérarchie de composants. Maintenant, imaginez que nous avons les détails de l'utilisateur, ce composant de l'application, et que nous ayons besoin de détails utilisateur dans cet article unique. Si vous utilisez des accessoires pour partager ces détails, nous devons d'abord passer le composant principal, puis le flux, puis le post suivant. Ensuite, nous obtenons les détails de l'utilisateur dans un seul composant post. C'est donc très ennuyeux et difficile à entretenir. Les contextes d'utilisation nous aideront à créer des données globales pour notre application React. Et nous n'avons pas besoin de transmettre ces données à tous ces composants. commencé à accéder à ces données dans tous les composants dont nous avions besoin. Voyons maintenant comment créer des contextes. création de contextes dans React nécessite donc trois étapes simples. abord, créer le contexte, ensuite fournir le contexte, et troisièmement, consommer le contexte. Commençons donc par l'étape numéro un, la création des contextes. Nous créons l'état global pour la connexion des utilisateurs dans les deux fonctions de création de contextes à partir de la bibliothèque React. Cette fonction est utilisée pour créer des contextes. Maintenant, juste avant votre composant fonctionnel, créez un contexte et stockez-le dans une variable appelée contextes de connexion, vous pouvez prendre ce que vous voulez. Passons maintenant à l'étape numéro deux, qui fournit le contexte. Après avoir créé le contexte, nous devons définir dans quels composants nous voulons accéder à ces contextes. Encore une fois, dans cette hiérarchie, si vous souhaitez transmettre des données à un seul composant post, nous devons simplement fournir les données au composant principal et qui peuvent être accessibles dans tous leurs composants enfants. Dans notre exemple, nous voulons accéder à ces données dans le composant principal. Et il a un composant enfant, un message unique, contextes de connexion à droite, un fournisseur de points, et un composant de dette entre ces fournisseurs de contextes, quel que soit le composant que vous passez entre ce fournisseur, il et son enfant. peut accéder à la valeur de ces contextes. Nous pouvons maintenant transmettre la valeur en utilisant l'attribut value. Donc, la valeur est égale à entre accolades, je passe simplement par ici. Voyons maintenant comment accéder à cette variable dans notre composant de publication unique. Ouvrez donc le composant dans lequel vous souhaitez utiliser cette variable. Pour utiliser la variable de contextes de connexion, nous devons utiliser, utiliser le hook de contextes. Il est donc important d'utiliser les contextes hook de la bibliothèque React Et à l'intérieur de ce composant fonctionnel, utilisez des contextes. Et il accepte un argument, qui est celui des contextes de connexion. Nous devons donc importer ces contextes de connexion à partir de notre composant d'application. Exportons donc d'abord cela depuis le composant de l'application, puis importons les contextes de connexion à partir du composant de l'application. Passez maintenant ces contextes de connexion dans le hook de contexte américain. Et nous stockons cette valeur dans une variable appelée login. Consolons-le, sauvegardons les modifications et jetons un coup d'œil. Tu vois, on passe. Donc, quelle que soit la valeur que vous transmettez dans ce fournisseur de contexte, dépassez cette valeur en utilisant use context hook. Si vous comprenez ces trois étapes, félicitations, vous comprenez le hook des contextes d'utilisation. Récapitulons rapidement ce que nous avons appris. Use context est utilisé pour gérer les données globales dans React. Nous n'avons donc pas besoin de transmettre ces données via des accessoires du premier composant parent au dernier composant enfant. Si nous voulons transmettre des données uniquement pour le composant enfant, vous pouvez utiliser des accessoires. N'utilisez pas de contextes partout. Il suffit de l'utiliser quand vous en avez besoin. Maintenant, pour utiliser les contextes d'utilisation, il vous suffit de suivre trois étapes. Tout d'abord, créez le contexte, en utilisant create context et nommez les contextes comme nous l'avons fait pour les contextes de connexion. Maintenant, deuxième unité pour décider quels composants peuvent accéder ces contextes avec l'utilisation de contextes point, fournisseur, et passer d'autres composants entre cette balise de fournisseur dans l'attribut value, pass value entre accolades. Et dernière étape, vous devez importer ces contextes à partir de votre fichier et transmettre ce contexte à l'intérieur de vos contextes d'utilisation, accrocher et le stocker dans une variable, aussi simple que cela. Vous allez maintenant voir que notre composant d'application est un peu moche, mais il est simple. Contextes. Imaginez que nous ayons un phi ou six contextes, alors vous n'aimez tout simplement pas coder dans ce projet. Et si vous travaillez pour une entreprise, elle n'aime pas non plus le code non organisé. Créons donc une structure organisée pour créer des contextes. Tout d'abord, je crée un nouveau dossier dans le dossier source appelé contextes. Nous créons tous les contextes ici dans ce dossier. Maintenant, créez un nouveau fichier dans ce dossier appelé contextes de connexion fournis ab.js. Et dans ce fichier, nous sauvegardons notre ancienne logique de contextes de connexion. Tout d'abord, je crée une image à l'aide d'un FCE. Maintenant, je viens de copier ces contextes de création à partir du composant de l'application et de les coller ici. Maintenant, en retour, nous devons définir le fournisseur. Ajoutez donc des contextes de connexion fournisseur de points et fournisseur de dette interne. Nous devons passer tous les enfants, directement dans les accessoires enfants et passer les enfants à l'intérieur du fournisseur. Donnez maintenant un attribut value dans provider. Et je veux transmettre la valeur de date pour ces contextes. Je crée donc les détails de l'utilisateur et passe la valeur par défaut true. Vous pouvez transmettre n'importe quel type de données et transmettre cette variable d'état en valeur. Revenons maintenant à notre composant d'application, Un fournisseur important de contextes de connexion et de remplacement du fournisseur par un fournisseur de contextes de connexion. Parce que nous passons les enfants à l'intérieur fournisseur de dettes et supprimons les éléments inutiles de ce composant Maintenant, dernière et dernière étape, générez le chemin de ces contextes de l'application à nos contextes. C'est moins fournisseur de contextes de connexion. Et c'est ça. Nous avons organisé ce vilain code en code organisé. 8. useRef: Alors, qu'est-ce que l'utilisateur ? L'utilisateur F nous permet d'accéder aux éléments DOM et également de créer des variables mutables qui ne rendront pas le composant à nouveau. Ce sont les deux cas d'utilisation les plus courants de user if hook. Laissez-moi vous montrer comment créer une variable mutable. Donc, dans cet exemple, j'ai créé un champ de saisie et un événement onchange, je mets à jour cet état de nom avec la valeur d'entrée actuelle et j'affiche le nom ici. Maintenant, imaginons que nous voulions compter nombre de fournisseurs lorsque nous saisissons le nom. Quand j'enseigne cela à mes étudiants, ils m'ont demandé pourquoi nous ne pouvions pas l'utiliser, utilisé pour cela. Et je pense que vous avez peut-être la même question. Voyons ça en direct. Pourquoi nous n'utilisons pas le hook usted ce que compte rend. Donc d'abord, je crée une autre variable d' état et le nombre de noms donnés et je passe 0 comme valeur par défaut. Maintenant en cours d'utilisation, je vais mettre à jour le décompte d'une unité pour chaque rendu. Iodure dit Compte précédent, fonction flèche, précédent plus un. Et après le nom, j' afficherai la variable count. Maintenant, sauvez-le. Jetez un œil. Vous voyez, count est constamment mis à jour car lorsque ce composant est affiché, il met à jour la variable de réduction d'une unité. Et comme cette variable d'état est mise à jour, le composant est affiché encore et encore. Nous sommes donc coincés dans une boucle infinie parce que nous utilisons la date d'utilisation. Nous allons donc résoudre ce problème avec un hook d'application utilisateur. J'ai donc supprimé cette variable d'état et j'utilise effect et j'importe l'utilisateur f de la bibliothèque React. Maintenant, utilisateur f. Et ici nous pouvons donner une valeur par défaut identique à celle que vous avez indiquée. Maintenant, cette fonction renvoie un objet dont une propriété est active. Nous allons donc le stocker dans un nombre variable. Et consolons cette variable c, nous obtenons un objet avec une propriété courante. Nous pouvons mettre à jour ou afficher cette valeur en utilisant la propriété count point current here, right, count dark current et enregistrer les modifications. Maintenant, mettons à jour cette valeur lorsque le composant est rendu, à droite, utilisez un nombre d'animaux de compagnie égal à compter le point courant plus un. Sauvegardez-le et jetez un œil. Lorsque nous tapons dans la zone de saisie, le nombre est mis à jour d'une unité. Le premier cas d'utilisation de l'utilisateur F est donc de créer une variable mutable sans provoquer de nouveau rendu. Voyons maintenant le deuxième cas d'utilisation de l'application utilisateur, qui est l'accès aux éléments DOM. Dans React, nous pouvons ajouter un attribut href à l'élément, y accéder directement. Comprenons avec l'exemple. Nous avons donc ici une boîte de saisie et un bouton. Lorsque nous cliquons sur ce bouton, cette fonction s'exécute. Maintenant, je veux modifier la largeur de cette entrée. Lorsque nous cliquons sur ce bouton. Nous pouvons le faire en JavaScript Vanilla en utilisant document.getElementById ou par nom de classe. Mais dans React, nous n'avons pas besoin de le faire. Nous utilisons directement rep et nous obtenons cet élément dans variable. Laissez-moi vous le montrer. Jusqu'à présent, le plus important est d'utiliser rep, hook et write user et de le stocker dans une variable. Maintenant, donnez à cette entrée une propriété qui est égale à l'élément d'entrée, qui est le nom de notre variable ref. Maintenant, nous allons consulter la valeur actuelle C. Nous obtenons ce remplissage d'entrée dans la propriété courante. Maintenant, je vais changer cette entrée avec 2300 pixels. Alors que nous faisons du JavaScript à la vanille, n'est-ce pas ? Courant de point de l'élément d'entrée , style de point, largeur de point égale à 300 pixels. Ici, l'élément d'entrée point current est notre pilule d'entrée. Alors enregistrez-le et jetez un œil. Vous voyez, lorsque nous cliquons sur ce bouton, largeur d'entrée est augmentée à 300 pixels. Concentrons-nous maintenant sur cette entrée lorsque nous cliquons sur ce bouton. Revenons donc au code VS. Et dans la même fonction, je dois ajouter, devinez quoi ? Bon ? Point actuel de l'élément d'entrée point pocus. Enregistrez donc les modifications et jetez un œil. Lorsque nous cliquons sur ce bouton, largeur d'entrée augmente et la saisie est mise au point. C'est la même chose que dans Vanilla JavaScript, juste pour utiliser l' élément d'entrée point current. Ensuite, vous pouvez accéder à toutes les méthodes JavaScript de l'élément. Certains d'entre vous se demandent comment pouvons-nous savoir quelles méthodes nous pouvons utiliser avec des éléments et comment pouvons-nous nous en souvenir ? La réponse est donc que vous n'avez pas besoin de vous souvenir d'un nom de méthode. Laissez-moi vous montrer mon truc pour voir toutes les méthodes que nous pouvons utiliser avec les éléments. Ici. Il suffit de supprimer cette propriété actuelle et de l'enregistrer. Maintenant dans la console, vous pouvez voir cet objet d'élément d'entrée avec la propriété actuelle. Cliquez maintenant sur cette petite flèche, puis cliquez à nouveau sur cette flèche. Vous pouvez voir ici toutes les méthodes que nous pouvons appliquer à cet élément. Quel exemple nous voulons appliquer le style. Faites donc défiler vers le bas et cliquez sur cette icône pour voir plus de propriétés. Vous pouvez voir ici la propriété de style. Cliquez dessus et vous pouvez voir toutes les propriétés de styles, aussi simple que cela. Récapitulons donc ce que nous avons appris. L'utilisation de rep nous permet de créer des variables mutables qui ne provoquent pas de nouveau rendu. Et il est très utile d'accéder aux éléments DOM sans écrire document.getElementById ou par nom de classe. Voici donc la syntaxe du hook de l'application utilisateur. Ici, nous pouvons passer la valeur par défaut de cette variable, est facultative. Cette variable possède un seul objet, et cet objet ne contient qu'une seule propriété qui est active. Si nous voulons accéder ou mettre à jour, nous devons utiliser un courant de point variable. Nous pouvons également accéder aux éléments en utilisant leur attribut app. Souvenez-vous de mon truc, avec l'aide de la console, nous pouvons voir toutes les méthodes. 9. useReducer: Alors, qu'est-ce que c'est ? Le réducteur. Reducer est utilisé pour gérer l'état dans notre application React. En d'autres termes, use reductor fonctionne comme une instruction est censée le faire. Vous vous demandez peut-être ce qu'est la gestion de l'État ? La gestion des états est donc utilisée pour gérer tous les états d'application de manière plus simple. Pour écrire du charbon simple et propre pour tous les états et toujours utiliser le crochet réducteur utilisateur lorsque vous avez beaucoup d'états et de méthodes à gérer. Nous allons donc comprendre l'utilisation du réducteur avec l'exemple. Ici, j'ai créé une application de compteur simple en utilisant le crochet US did. Nous avons donc une variable de compteur et deux boutons, augmenter et diminuer. Ainsi, lorsque nous cliquons sur le bouton Augmenter, le comptage a augmenté d'une unité. Et si nous cliquons sur degrés bêta1, nombre diminue d'une unité. Exemple très simple. Appliquons maintenant use reductor dans cet exemple. Tout d'abord, laissez-moi nettoyer cette variable d'état. Maintenant, il est important d'utiliser la bibliothèque React hook React dans le composant fonctionnel, non ? Utilisez un réducteur. Reducer accepte deux arguments. La première est la fonction de réduction, qui gérera tous les états. Le second est notre état par défaut. Pour l'instant, oubliez cette fonction de réduction. Nous verrons cela après explication. Maintenant, définissons d'abord notre état par défaut. Je vais donc créer un objet dans lequel nous pouvons définir tous nos états. L'état initial d'écriture est donc égal à l'objet. Nous ne compterons pas les variables. Donc comptez deux points 0. Maintenant, passez cet état initial ici. Ce réducteur utilisateur renvoie un tableau identique à celui que vous avez fait avec hook, ce qui signifie que le premier élément retournera l'état actuel, et le second élément retournera une fonction qui nous aidera à mettre à jour cet état. Utilisons donc la restructuration additive. stockant cette variable, nous appelons post element en tant qu'état. Et le second est l'envoi. C'est le nom le plus courant pour utiliser le réducteur. Si nous voulons prendre un autre nom, vous allez le prendre. C'est à toi de décider. Maintenant, définissons notre fonction de réducteur, qui est la partie la plus importante de nous, réduire notre crochet. Donc, à l'intérieur de cette fonction, nous allons écrire notre propre logique pour ce réducteur utilisateur. La fonction Réducteur comporte deux paramètres. Le premier paramètre est state, ce qui signifie où se trouve actuellement notre application. deuxième paramètre est l'action, c' est-à-dire l'action que nous devons effectuer. Exemple, augmentation, diminution, etc. Je sais que c'est un peu déroutant. Mais après avoir terminé l'exemple d' extraction, vous le comprendrez correctement. Maintenant, cette fonction retournera l'état mis à jour. Donc pour l'instant, je retourne simplement l'objet avec count et current count, qui est cet état point count plus un. Maintenant, pour appeler cette fonction, nous allons utiliser la fonction de répartition. Ici. Dans la fonction de comptage d'augmentation. J'appelle le répartiteur et je ne passe rien dedans. Maintenant, je supprime ce nombre défini, et ici j'écris le nombre de points d'état. Maintenant, enregistrez les modifications et jetez un œil. Vous voyez, lorsque nous cliquons sur ce bouton d'augmentation, le nombre augmente d'une unité. Voyons maintenant comment appeler différentes actions, comme augmenter et diminuer. Nous passons donc d'abord l'objet dans la fonction d' envoi avec la propriété de type deux-points en Grèce Nous devons maintenant gérer ce type dans cette fonction de réduction. Bloquons donc ce paramètre d'action pour savoir ce que nous pouvons enregistrer les modifications et y jeter un œil. Lorsque nous cliquons sur ce bouton agrandi, nous obtenons un objet avec la propriété. Donc, quoi que nous transmettions dans cette fonction spread, nous pouvons y accéder par ce paramètre d'action. Utilisons donc un changement de vitesse pour gérer différentes actions. Vous pouvez utiliser if else, if. Mais j'aime bien le boîtier Switch, c'est vrai, doux. Et passez ici, le type de point exon et à l'intérieur, c'est ça ? Premier cas, qui est une augmentation de ceux-ci. J'ai écrit ça. Maintenant pour le deuxième cas, qui est diminué, réécrit le même compte mais moins un. Enfin, nous passons un cas par défaut et retournons le même état. Donc, si nous passons un autre type sauf augmenter et diminuer, cette valeur par défaut s'exécutera dans la fonction de décompte diminué. Nous écrivons, devinez quoi, non ? Distribuez le type d'objet, diminuez, enregistrez les modifications et jetez un œil. Tu vois, ça fonctionne bien. Récapitulons donc ce que nous avons appris. Use Reducer est utilisé pour gérer des états complexes dans l'application React. Voici donc la syntaxe du hook réducteur utilisateur. Il faut deux arguments. La première est la fonction de réduction, dans laquelle nous écrivons notre propre logique. Et le deuxième argument est l'état initial, qui est l'objet de toutes les variables. Maintenant, ce hook renvoie un tableau avec deux éléments. Nous utilisons donc la structuration ajoutée. premier élément est pour l'état de courant excessif, réduisez notre état initial. Et le deuxième élément est distribué en mettant à jour ce droit, aussi simple que cela. Fonction de réduction maintenant redéfinie, qui a deux paramètres. Le premier est utilisé pour accéder à l'état actuel, et le second est une action réduite pour obtenir des actions différentes. Quoi que nous transmettions dans cette fonction dispersée, nous pouvons y accéder en fonction réducteur par ce paramètre d'action. Et puis avec l' utilisation du boîtier de commutation, nous pouvons effectuer différentes tâches. C'est ça. Maintenant, dans cet exemple, je me suis trompé en utilisant type in string. Nous devons donc corriger ses fautes d' orthographe à deux endroits différents. Au lieu de cela, nous pouvons créer un objet avec le nom action. Et nous utilisons toujours des majuscules pour cet objet d'action. Ainsi, chaque fois que nous voyons cela, nous savons que c'est pour le réducteur. Donc, dans cet objet, je crée d'abord Increase, Increase et Decrease ou Diminue. Maintenant, aux affichages, je le remplace par des actions qui augmentent et diminuent en dispersion. Réécrivez également l'augmentation de l'action et les degrés de points d'action. n'y a donc plus de risque de fautes d'orthographe. Et si nous voulons changer de nom, nous pouvons directement mettre à jour cet objet et à d'autres endroits, il se met à jour automatiquement. Maintenant, je veux couper ces trois variables et les coller à la fin de ce composant. Notre code semble donc propre et facile à lire. 10. useLayoutEffect: Alors, qu'est-ce qui est utilisé ? Effet de disposition ? Ils utilisent l'effet de mise en page qui fonctionne exactement de la même manière que l'effet Hughes, mais la différence est quand il est exécuté. Utilisez donc les faits qui courent après l'impression du dôme sur le navigateur. Mais généralement, l'effet de sortie s'exécute avant que le dôme ne soit imprimé sur le navigateur. Ainsi, chaque fois que nous voulons exécuter code avant que le dôme ne soit imprimé, comme si nous voulions mesurer la hauteur, la largeur d'un élément ou tout autre élément lié à la mise en page. Nous pouvons utiliser l'effet de mise en page. Et il s'exécute de manière synchrone, ce qui signifie qu'il exécute la première ligne et ne passe à deuxième ligne que si l'exécution de la première ligne est terminée. Le cas d'utilisation le plus courant de l' effet de mise en page est d'obtenir la dimension de la mise en page. C'est pourquoi son nom est utilisé. Effet de disposition. Laissez-moi vous montrer quand il fonctionne. Donc, dans cet exemple, il y a un bouton bascule qui bascule ce texte et un effet d'utilisation avec bascule de dépendance. Cet utilisateur s'exécutera lorsque cet état de basculement changera et que l'impression utilisera l'effet dans la console. abord, j'importe un énorme effet de mise en page de la bibliothèque React, et maintenant je duplique ce code et remplace use effect par use layout effect. Maintenant, enregistrez les modifications et jetez un œil. Voyez quand le composant est rendu, les deux hook s'exécuteront. Maintenant, quand je clique sur ce bouton bascule, encore une fois, les deux crochets s'exécuteront. Mais concentrez-vous ici. effet Utiliser la mise en page est toujours exécuté en premier. Maintenant, vous pensez que c'est parce que nous l' écrivons avant de le déclarer. Donc, je déplace l'effet de mise en page après l'utilisation du crochet vectoriel et je jette un coup d'œil, voir, utiliser l'effet de mise en page sera toujours lancé post. Donc, le flux de travail est Clostridia calculer tous ces composants, puis utiliser l'effet de couches qui s'exécutera, puis React imprime tous les éléments sur le dôme. Et enfin utiliser un vecteur va courir. Mais ce processus est très rapide. C'est pourquoi nous pouvons le voir en direct. Quatre-vingt-dix-neuf pour cent Nous utilisons, utilisons l'effet dans notre projet. Si le projet ne fonctionne pas comme nous le voulons, alors nous essayons d' utiliser l'effet de mise en page. Voyons maintenant le cas d'utilisation le plus courant, évidemment hors effet. Dans le même exemple. Je veux obtenir la dimension de ce texte , puis nous ajoutons un rembourrage supérieur autant que sa hauteur. Donc, pour accéder aux éléments DOM, que devons-nous utiliser ? Bon ? C'est utilisateur. Je crée donc un code utilisateur, F et VS, auto important use ref de React. Et c'est pourquoi j'adore cette langue et cette extension. C'est un excellent outil de productivité. Ce que les développeurs React. Maintenant, nous stockons cet utilisateur dans une constante appelée retour à la et passons l' attribut href à ce texte. Maintenant, nous avons d'abord essayé d'utiliser, d' utiliser l'effet et de commenter cet effet de mise en page d'utilisation. Donc, en cours d'utilisation effet, réécriture, taxe ref point courant, point, obtenir le client de délimitation racké. En utilisant cette fonction, nous pouvons obtenir toutes les dimensions de cet élément. Laissez-moi vous montrer rapidement. Tout d'abord, stockez cette dimension invariable. Maintenant, consolidons-nous et jetons un coup d'œil. Et nous obtenons, parce que nous devons ajouter une condition pour vérifier si ce retour à la ligne n'est pas nul. Ce n'est qu'alors que nous devons exécuter ce code. Donc, si x ref point courant n' est pas égal à null et déplacez ce code à l'intérieur. Enregistrez les modifications et jetez un œil. Vous voyez, nous obtenons l' objet de dimension avec toutes les propriétés. Maintenant, je veux ajouter un rembourrage en haut pour ce texte autant que sa hauteur. Donc, écrivez x ref point actuel style dot padding top égal à hauteur du point de dimension dollar invective. Réparez-le et enregistrez-le. Vous voyez, quand nous cliquons sur ce bouton bascule, postez ce texte ici, puis il se déplace vers le bas. Regardez au ralenti. C'est là le problème de l'effet américain. Nous constatons cette friction dans la production. Maintenant, je remplace l'effet u par l'effet de mise en page d'utilisation. Enregistrez les modifications et jetez un œil. Vous voyez, nous n'avons pas vu cette friction parce que effet de mise en page est utilisé avant l'impression du dôme. Récapitulons donc. Effet de disposition d'utilisation. effet Utiliser la mise en page est identique à l'accroche de l'effet utilisateur. Mais la seule différence est que lorsqu'ils exécutent le flux de travail, c'est la postérité. Je calcule toutes les mutations, puis j'utilise l'effet de mise en page, puis je rajoute tous les éléments sur DOM. Et après cette utilisation, l'effet s'exécutera. Et la deuxième différence est que l'effet de mise en page est synchrone et l'effet d'utilisation est asynchrone. Nous utilisons donc 99 % de fois l'effet utilisateur dans notre projet. Mais si cet effet d'utilisation ne fonctionne pas correctement, alors seulement nous utilisons l'effet de mise en page. Et je vous montre l'effet de mise en page d'abus de cas d' utilisation le plus courant . 11. useMemo: Qu'est-ce qui est utilisé mémo. Use memo hook est utilisé pour appliquer la mémoisation et réagir. Qu'est-ce que la mémorisation ? mémoisation est une technique permettant d' améliorer les performances du code. Et il est utile d'éviter des calculs coûteux à chaque rendu lorsque la valeur renvoyée ne changera pas. Comprenons ce que l'exemple. Dans cet exemple, je crée deux variables d'état, number , et ce nombre est pour l'entrée. Et passez ce numéro dans cette fonction coûteuse, que j'ai déclarée après le composant. Fondamentalement, cette fonction renverra le même numéro. Mais après avoir exécuté cette boucle indésirable, que j'ai créée juste pour explication, dans le monde réel, il peut s'agir de n'importe quel calcul long ou de tout ce qui prend plus de temps, puis de stocker sa valeur de retour dans le calcul variable. Maintenant, cet état sombre permet de basculer entre le mode sombre et le mode clair. Et selon cette variable sombre, nous avons changé la couleur de fond et la couleur du texte. Laisse-moi te montrer. Ainsi, chaque fois que nous augmentons la valeur de cette entrée, cette fonction coûteuse s' exécutera et retournera une nouvelle valeur dans le calcul et l'affichera ici. Et lorsque je clique sur ce bouton, couleur d' arrière-plan et la couleur du texte changent. Concentrez-vous maintenant sur ce calcul. Chaque fois que nous changeons ce numéro, nous appelons cette fonction coûteuse et la console que cette boucle a démarrée, mais cela prend 0,5 ou 0,3 seconde de délai pour la mise à jour. C'est à cause de notre fonction peu coûteuse de boucle indésirable. Mais lorsque nous cliquons sur ce bouton bascule, mise à jour du thème prend également quelques secondes. Et console UC. Encore une fois, la boucle Prince a démarré et c'est pourquoi nous collons cette équipe d'intervalle de retard. Ainsi, lorsque nous cliquons sur le bouton bascule, React affiche à nouveau le composant. Tout d'abord, cette ligne va s'exécuter et elle appelle cette fonction coûteuse. Et cela demande un surcroît de travail. Et nous ne pouvons pas changer d'équipe immédiatement. La solution est donc nous n'exécuterons cette fonction que lorsque ce nombre sera modifié. Nous utilisons donc le crochet mémo use pour cela. Et la bonne nouvelle est syntaxe des mémos est la même que celle du crochet d'effet Hughes. Si vite, j'ai importé use memo de bibliothèque React et je l'ai ajouté dans le composant fonctionnel. Use memo prendra deux arguments. Le premier est pour la fonction de rappel et le second pour les dépendances. Ainsi, chaque fois qu'une variable de cette dépendance change, n'est qu'alors que cette fonction de rappel sera exécutée. Je passe donc le numéro dans cette dépendance LA. Et à l'intérieur de cette fonction de rappel, nous appelons cette fonction coûteuse et passons le numéro en tant que paramètre. Maintenant, vous pensez quelle est la différence entre user et use memo ? L'effet d'utilisation et l'utilisation de mémo sont identiques. Mais la différence réside dans l'utilisateur, nous pouvons renvoyer la valeur et la stocker dans une variable. Nous devons créer une variable d'état supplémentaire. Ensuite, avec la fonction de valeur définie, nous pouvons mettre à jour la dette. Mais dans le mémo d'utilisation, nous pouvons renvoyer la valeur et la stocker dans une variable. Je stocke donc cette valeur dans le calcul des mammifères. Maintenant, je supprime cette ligne et au lieu de calcul, nous appelons calcul mémo. Maintenant, enregistrez les modifications et jetez un œil. Lorsque nous changeons le numéro, cela prend quelques secondes. Et c'est évident car nous ajoutons une boucle indésirable. Mais quand on clique sur ce bouton bascule, ça ne prend pas de secondes supplémentaires. Et nous pouvons immédiatement basculer entre les thèmes. Et cette technique améliore les performances de notre application, ce qui est très important dans le monde d'aujourd'hui. Récapitulons ce que nous avons appris. Use memo est utilisé pour améliorer les performances de notre application React. Nous pouvons arrêter d'exécuter des fonctions indésirables lors du nouveau rendu. Voici donc la syntaxe du memo hook utilisé. Il faut deux arguments. La première est la fonction de rappel, qui renverra la valeur. Et ici nous allons stocker cette valeur dans variable. Maintenant, le deuxième argument est le tableau de dépendances, dans lequel nous pouvons ajouter variables lorsque cette variable changera, puis ce rappel sera exécuté. Avec cette variable. Nous imprimons la valeur de retour. Nous effectuons tous les effets secondaires en cours d'utilisation Hooke et toutes les fonctions coûteuses, calcul en cours d'utilisation memo hook, aussi simple que cela. 12. useCallback: Qu'est-ce que le callback utilisé. Use callback est utilisé pour renvoyer une fonction mémo. Elle est également utile pour empêcher la recréation de fonctions sur le rendu. Je sais que cela semble un peu déroutant, mais ce n'est pas le cas. Comprenons avec l'exemple. Dans cet exemple, je crée deux variables d'état. premier est le numéro pour la saisie du nombre, et le second est pour l'équipe bascule. Et en fonction de cela, notre couleur d'arrière-plan et la couleur du texte changeront. Nous avons maintenant une fonction appelée calculer la table, et elle renvoie les cinq premières lignes de ce nombre stable. Dans le monde réel, cela peut être comme appeler une API. Maintenant, j'ai créé un composant simple appelé tableau d' impression pour imprimer le tableau. Et je passe cette fonction en tant qu'accessoires. Donc, dans ce composant, je crée des lignes d'état et dans l'icône utilisateur, je résout cette ligne et passe cette fonction de calcul de table. Fonction Insérer des lignes. Donc que les valeurs d'Eddie étaient variables en lignes. Ensuite, imprimez le tableau de cette ligne en utilisant cette méthode cartographique, c'est aussi simple que cela. Voyons cette diapositive. Ici. Nous avons un seul numéro d'entrée. Et après cela, j'imprime ce tableau en utilisant le composant bring table. Et enfin, nous avons le bouton bascule pour basculer l'équipe. Ainsi, lorsque nous cliquons sur le bouton bascule, le thème changera. Lorsque nous changeons de numéro, nous voyons le tableau ci-dessous. Maintenant, je vais vous montrer le problème. Tout d'abord, permettez-moi d'ouvrir la console et de rafraîchir la page. Voyez quand j'apporte un composant double qui rendra console pour la première fois que cette table d'impression s'exécute. Maintenant j'ai changé le nombre et cette fonction de calcul de table va changer. Et c'est le composant de table de lecture et d'impression terminé à nouveau console que cette table d'impression fonctionne, ce qui fonctionne bien. Maintenant, quand je bascule à nouveau l'équipe, consultez ces exécutions imprimables, ce qui signifie que le composant imprimable vous est rendu à nouveau. Et si nous changeons d'association, et c'est le problème de performance car lorsque nous changeons un état de ce composant, cette fonction sera recalculée. Et même si notre nombre est le même, il retournera la même valeur avec nouvelles instances soviétiques, c'est un nouveau résultat. Ensuite, il affiche à nouveau le composant imprimable. Nous devons maintenant arrêter cette récréation de fonction indésirable. Et c'est pourquoi nous utilisons, utilisez le hook de rappel. Et la bonne nouvelle est que l'utilisation du rappel est exactement la même chose qu' ils utilisent memo hook. C'est donc une petite différence dans l'utilisation du rappel et de l'utilisation du mémo hook. Donc, use memory renvoie la valeur de mémorisation et use callback renvoie un memoir est une fonction simple comme ça. Donc tout d'abord, j'ai importé use callback de React et j'ai ajouté ici, use callback. Maintenant, il accepte deux paramètres, comme use memo et use effect. Le premier est la fonction de rappel et le second est Dependencies. Dépendances, j'écris des nombres. Dans callback, je copierai et collez simplement cette instruction return. Nous pouvons maintenant stocker cette fonction dans une variable appelée table de calcul. Et je supprime cette ancienne fonction. Donc ici, si nous utilisons use memo, nous n'obtenons que cette valeur dans cette variable. Mais si nous utilisons use callback, alors nous obtenons cette fonction complète dans cette variable. Et si nous voulons exécuter cette fonction, nous devons écrire comme ceci. Donc, chaque fois que nous changeons le nombre, n'est qu'alors que cette fonction s'exécutera. Maintenant, enregistrez les modifications et jetez un coup d'œil. Quand nous augmentons le nombre. Il peut résoudre ces courses de table d'impression. Et maintenant je clique sur le bouton bascule. Il ne console pas les exécutions de cette table d'impression. Nous résolvons donc ce problème à l'aide de l'utilisation de callback. Maintenant, nous pouvons passer une valeur en tant que paramètre dans cette fonction. Par exemple, je passe pour entendre, je stocke cela dans la variable value et vous pouvez l'utiliser dans cette fonction. Je crée une nouvelle variable, nombre nu est égal au nombre plus la valeur. Et au lieu de ce numéro, on passe un nouveau numéro. Nous obtenons donc le double du numéro d'origine plus deux. Cela dépend de vous de la façon dont vous pouvez utiliser ce paramètre. N'oubliez pas, n'importe quel mémo d'utilisation, vous pouvez le faire. Maintenant, récapitulons ce que nous avons appris. L'utilisation de callback est donc utilisée pour retourner la fonction de mémorisation et améliorer les performances de notre application React. La syntaxe Use callbacks est la même que celle utilisée pour memo hook, mais use memory renvoie la valeur de mémorisation et use callback renvoie une certaine fonction MY is, puis utilise callback, nous pouvons passer la valeur comme paramètre, mais dans le mémo d'utilisation, nous pouvons le faire aussi simplement que cela. J'espère que vous comprenez utiliser callback, hook et la différence entre use callback et use memo. 13. Crochets personnalisés (useFetch): Alors, qu'est-ce que le crochet personnalisé ? Les crochets personnalisés sont essentiellement fonctions réutilisables dans les villes simples. Des crochets personnalisés à vos propres crochets que vous créez pour votre propre usage. Et vous pouvez les utiliser plusieurs fois dans votre projet. Par exemple, vous avez une certaine logique dans laquelle vous utilisez un ou plusieurs Hooks React intégrés. Et vous devez utiliser cette logique plusieurs fois dans votre projet. Ainsi, au lieu d'écrire la même logique longue à chaque endroit, vous créez votre propre hook ou fonction, qui est un hook personnalisé. Et vous l'utilisez comme nous utilisons d'autres hooks de React, c'est aussi simple que cela. Créons l'un des crochets personnalisés les plus utiles pour récupérer des données depuis l'API. J'adore cette coutume parce que je l'utilise beaucoup dans mes projets. Ici, je crée un exemple simple dans lequel nous appelons API ou les détails des utilisateurs aléatoires et affichons leurs noms avec l'ID. Tout d'abord, je crée une variable d'état appelée réponses et je passe un tableau vide comme valeur initiale. Après cela, j'utilise le hook d'effet avec les dépendances MDMA. Il ne s'exécute donc que lorsque le composant est rendu pour la première fois. En effet, je transmets les données de cette API et les convertis au format JSON, puis je les place dans les réponses. Et après tout cela, j'affiche ces données en utilisant la méthode cartographique. Maintenant, imaginez que vous vouliez récupérer des données de l'API destinées à 12 composants. Vous devez donc écrire ce code dans tous ces composants, qui n'est pas une bonne pratique dans React. Nous allons donc créer un hook personnalisé pour la récupération des données. Donc tout d'abord, je crée un dossier, des crochets personnalisés. Nous stockerons tous nos hooks personnalisés dans ce dossier pour organiser notre code, ce qui est une bonne pratique pour les développeurs. Dans ce dossier, nous créons un nouveau fichier appelé use fetch NodeJS. Commencez toujours votre nom de hook personnalisé par un mot-clé use, qui est une convention courante. Maintenant, j'écris ajouter un FCE pour passe-partout fonctionnel en utilisant cette extension ESL et React. Donc tout d'abord, j'ai obtenu cette date et j'utilise un vecteur de ce composant et collé dans use patch et import utilisateur et utilise des données de la bibliothèque React. Nous acceptons maintenant un paramètre dans cette fonction appelé URL. Nous utilisons cette variable URL à la place de l'API. Ainsi, chaque fois que nous utilisons, utilisons phage, nous devons simplement passer l'API dans cette fonction. Ici, réécrivez cette variable d'état de réponse et enregistrez-la. Revenons maintenant à notre composant d'application. Et nous avons juste essayé d' utiliser phage et de réagir dette Auto Import à partir de notre dossier de hooks personnalisés. Donc, dans ce cas utilisé pour sa fonction, nous pouvons passer n'importe quelle API et nous pouvons stocker cette valeur dans une variable de données. Et enfin, atteindre ces réponses avec des variables de données. Maintenant, je l'enlève, je l'utilise et je l'ai utilisé d'ici. Nous n'en avons pas besoin. Maintenant, enregistrez les modifications et jetez un œil. Nous obtenons nos données. Nous avons créé avec succès notre article et l"espoir personnalisé le plus utile que vous pouvez voir s"appelle un look soigné et propre. Ce n'est donc qu'un exemple. Maintenant, c'est à vous de savoir comment utiliser votre logique pour différents cas d'utilisation. Essayez donc de réfléchir et d'appliquer votre logique et de créer des hooks personnalisés qui vous aideront dans vos futurs projets. Récapitulons ce que nous avons appris. Les hooks personnalisés sont votre logique, que vous avez créée en tant que fonction réutilisable. Et dans ce cas, vous pouvez utiliser plusieurs crochets et créer quelque chose qui vous aidera à ignorer les tâches répétées dans votre projet. De plus, vous pouvez simplement utiliser ces crochets personnalisés dans vos différents projets. 14. Validation de formulaire avec FORMIK et YUP: Dans la vidéo d'aujourd'hui, nous allons voir la validation de formulaire, qui est un sujet très important dans React. Jusqu'ici. Gestion des formulaires, nous utilisons formic et pour la validation de formulaire, nous utilisons la bibliothèque Yup car elle facilite grandement la validation des formulaires. J'en suis très heureux et j'espère que vous l'êtes aussi. Commençons donc. Tout d'abord, nous verrons comment gérer notre propre formulaire en utilisant la pandémie. abord, installons la bibliothèque ouvrir le terminal en utilisant Control plus back take for Windows et Command Plus back tick pour Mac et écrivons npm installed pour moi. Ou si vous utilisez Yan, écrivez Yan, ajoutez un formic et appuyez sur Entrée. Fermez le terminal, nous n'en avons pas besoin. Et créons d'abord un formulaire de base. Je crée donc un formulaire et je lui donne un formulaire d'inscription au nom de classe. Maintenant, ajoutons une étiquette ou un nom et un chemin ici. Et un type d'entrée, texte et un nom sont égaux à name. Maintenant, je duplique ces deux lignes trois fois de plus. Donc, deuxième étiquette pour l'e-mail et également type d'entrée à e-mail et nom à e-mail également. Ensuite, je veux une étiquette pour le mot de passe, type de saisie du passeur et du nom, ainsi que le mot de passe et le dernier niveau ou le pays et le mot Entrez le type de mot de passe et le nom pour voir le mot de passe Enfin, nous ajoutons le type de bouton, soumettons, enregistrons les modifications et jetons un œil. Tu vois, nous avons ce poème clair et quelques styles de base. Donc j'ai Guam qui a l'air bien. Vous pouvez également obtenir ce style de paume en copiant et collant simplement le code CSS dans votre fichier. Maintenant, gérons ce formulaire en utilisant la bibliothèque pattern make. Donc tout d'abord, j'importe utilisé pour make function à partir de la formation de ces bombing d'utilisation est essentiellement un hook personnalisé. Gestion des états et gestion des événements. Ne vous embrouillez pas. Il suffit de voir cela une fois et vous serez tous les doutes résolus. Donc, dans notre composant a été dérivé, utilisez formic et nous passons object. La première propriété de cet objet est la valeur initiale de notre poème. Nous devons donc passer quatre valeurs ici parce que nous voulons gérer ces entrées de pores. Nous créons donc une nouvelle variable en dehors de cette fonction pour nos valeurs initiales. Et nous écrivons des objets. Maintenant, faites attention ici. Nous devons utiliser exactement le même nom lorsque nous transmettons nos noms d'entrée. Donc la première propriété est name, car ici nous passons name chaîne vide. Ensuite, nous avons un e-mail, une chaîne vide, puis un mot de passe, une chaîne vide. Et le dernier. Devine dans quel sens, non ? Bon. C'est le mot de passe parce que nous passons dernière entrée nommée see password et aussi une chaîne vide. Maintenant, nous transmettons nos valeurs initiales. Donc, dans l'objet JavaScript, si le nom de la propriété et le nom de la variable de valeur sont identiques, nous pouvons supprimer cette variable de valeur. Je l'enlève donc et cela fonctionne de la même manière. C'est pourquoi je crée une variable avec le même nom. Maintenant, dans cet objet, nous devons passer une propriété supplémentaire, qui est onsubmit. Ici, nous passons la fonction flèche et nous pouvons accéder aux valeurs de notre formulaire et imprimer ces valeurs dans la console. Connectez-vous et appuyez sur Tab. Et nous obtenons console.log. Ce sont de petites astuces qui vous aideront à écrire du code rapidement. Nous transmettons donc des valeurs. Maintenant, stockons cela dans une variable appelée formic. Et consolons cette variable de formation et voyons ce que nous obtenons les modifications enregistrées, et jetons un coup d'œil, voyons cette forme de variable, de valeurs, d' erreurs et de nombreuses autres méthodes comme handle, blur, handle, change, handle, submit, etc. Utilisons ces méthodes. Je vais structurer cet objet parce que je ne veux pas écrire valeurs de points formiques ni changement de poignée de point formique parce que cela rendrait notre code désordonné. Nous voulons donc d'abord des valeurs qui stockent toutes les valeurs de cette forme. Ensuite, nous voulons gérer le flou, gérer les modifications et gérer l'envoi. Il s'agit de fonctions prédéfinies. Nous n'avons donc pas besoin de les définir. C'est pourquoi le formic est si populaire pour la gestion des formulaires. Vous n'avez pas besoin d'écrire toutes ces fonctions. Maintenant, dans notre formulaire, est-ce que je passais la valeur pour cette entrée de nom, qui est le nom du point de valeur. Ensuite, je veux ajouter l'événement onblur, qui s'exécute lorsque nous vivons la boîte de saisie. Ici, nous passons simplement le flou de poignée. Et enfin j'ajoute onchange et passe handle change. Maintenant, je copie simplement ces trois attributs et je les colle dans toutes les balises d'entrée. Nous n'avons qu'à modifier ces valeurs. J'écris donc ici un e-mail. Analyseur suivant et dernier analyseur de vue. Maintenant, dernier événement qui est géré submit in form tag, nous ajoutons un nouvel attribut sur submit et passhandle submit method et supprimons cette ligne. Enregistrez les modifications et jetez un œil. Nous allons remplir le formulaire et cliquer sur le bouton Soumettre. Tu vois, nous obtenons toutes les valeurs de pilule. Ainsi, dans cette fonction onsubmit, nous pouvons écrire notre logique Submit Form. Comment la manipulation des formulaires devient simple et facile avec le formage. De plus, notre code est très propre et facile à comprendre. Voyons maintenant comment valider ce formulaire à l'aide du bus de bibliothèque. Installons la bibliothèque, ouvrons le terminal et écrivons npm install yup et appuyez sur Entrée. bibliothèque yup nous aidera donc à valider les valeurs de notre pilule de saisie et à renvoyer les erreurs. Et puis avec l' aide du pauvre moi, nous afficherons l' erreur aussi simple que cela. Fermons ce terminal. Maintenant, créons notre message de schéma de validation en utilisant la bibliothèque Yup Le schéma JSON valide est essentiellement conditions que nous vérifions pour effectuer la validation. Pour cela, je crée un nouveau dossier dans SRC appelé schemas. Et dans ce dossier, je crée un nouveau fichier appelé index.js. Je vous expliquerai plus tard pourquoi je crée un fichier nommé index.js. Donc dans ce fichier, d'abord, j'importe tout comme yup de votre bibliothèque. Je crée maintenant une variable appelée schéma d'inscription. Tu peux l'appeler comme tu veux. Nous utilisons yup dot object et à l'intérieur, nous passons notre objet de validation. Si vite j'ajoute un nom. Assurez-vous d'utiliser le même nom que celui indiqué dans nos valeurs initiales. Ajoutez donc name, Garland, yup, dot string, dont nous vérifierons que notre valeur entrée est chaîne ou non. Ensuite, point signifie trois, ce qui signifie qu'il faut au moins trois caractères. Et le dernier point est requis, ce qui permettra de s'assurer que cette facture ne sera pas vide. Si nous voulons savoir d'où j'écris ces méthodes, vous pouvez consulter la documentation sur NPM. Nous ajoutons maintenant notre champ suivant appelé e-mail. Et encore une fois était de rejeter la chaîne. Ensuite, nous avons la méthode e-mail pour valider l'adresse e-mail. Et la dernière est requise. Maintenant, encore une chose ici, dans presque toutes les fonctions, nous pouvons transmettre notre message d'erreur personnalisé, que nous voulons afficher dans notre formulaire. Par exemple, dans cette fonction requise, je veux s'il vous plaît entrer votre nom. Maintenant. Pareil dans cette fonction e-mail. Je veux s'il vous plaît entrer un e-mail valide. Et puis j'ai besoin d'écrire, s'il vous plaît entrer votre e-mail. Maintenant, notre prochaine facture est le mot de passe. Tout d'abord, vérifiez à nouveau la chaîne. Maintenant, vous pouvez ajouter une condition liée à votre choix, minimum 6, maximum 15. Mais je vous suggère d'utiliser une expression régulière pour la validation. Vous pouvez effectuer une recherche sur Google et Google Exploration ou mot de passe. Et je vous donne ce lien d'expression régulière dans la boîte de description. Vous pouvez copier à partir de là. Nous avons ici une expression régulière pour mot de passe. Alors recopiez ça. Et dans notre fichier de schéma, je crée une nouvelle variable appelée password rejects et je la colle ici. Maintenant, nous avons ajouté une autre méthode appelée matches. premier argument est que notre mot de passe est refusé. Ensuite, nous transmettons notre message d'erreur. Veuillez saisir un mot de passe valide. Et enfin, nous passons la fonction requise avec le message. Veuillez saisir votre mot de passe. Maintenant, dernière propriété, qui est mot de passe C, deux-points, chaîne de points yup. Nous devons maintenant vérifier ce mot de passe C, identique à ce mot de passe. Donc pour cela, nous avons une autre méthode appelée une expression approfondie est LA. Et pour obtenir la valeur de ce mot de passe, nous écrivons yep point ref, puis nous passons notre nom de fichier, qui est mot de passe. Et le deuxième argument est notre message d'erreur, qui est mot de passe, ne correspond pas. Enfin, nous ajoutons la fonction requise avec le message. Entrez le mot de passe de confirmation. Nous exportons maintenant ce schéma depuis notre fichier et l'enregistrons. Maintenant ou composant. abord, nous importons ce schéma d'inscription depuis le dossier du schéma. Et ici, nous n'avons pas à écrire ce fichier d'index car React prend le fichier index.js comme fichier par défaut si nous n' écrivons que le nom du dossier. Et c'est pourquoi j'ai nommé ce fichier index.js. Maintenant, dans ce formulaire d'utilisation, nous avons une propriété pour valider ce schéma, validation Schema. Et ici, nous passons le schéma d'inscription. Maintenant, nous obtenons toutes les erreurs dans les variables adultes. Ajoutons ceci ici. Et flingue toutes ces erreurs. Enregistrez les modifications et jetez un œil. Voir West, nous avons un objet vide. Maintenant, je clique sur le bouton Soumettre et z, nous obtenons toutes ces erreurs. Maintenant, j'écris nom et je vois que notre erreur de nom a disparu. Maintenant, ajoutons un e-mail et un mot de passe. Une lettre majuscule, une minuscule, un chiffre et un caractère spécial c. Notre erreur de mot de passe a également disparu. Maintenant, ajoutons un mot de passe différent. Nous obtenons donc ce mot de passe, ne correspond pas à l'erreur. Et si nous écrivons le même mot de passe, toutes les erreurs disparaîtront. Nous obtenons donc des adders dans la console. Et maintenant, nous devons montrer ces erreurs dans notre formulaire. cas d'erreur d'affichage, j'ajoute une DU et je lui donne un nom de classe dans notre conteneur. Et dans ce cas, nous afficherons notre erreur. Maintenant, j'ajoute simplement une condition, qui est si le nom du point d'erreur est disponible, puis affiche l'erreur. J'utilise le paragraphe avec l'erreur de forme ClassName, puis j'imprime le nom du point d'erreur, enregistre les modifications et jette un œil. Maintenant, je n'écris rien et je clique sur le bouton Soumettre. Vous voyez, nous obtenons notre erreur de nom. Mais un petit bug ici, qui est que nous ne touchons même pas saisie de nom et à l'écriture d' autres champs, nous obtenons également l'erreur, ce qui n'est pas bon. Allons résoudre ce problème, cette utilisation Wyoming a une autre propriété appelée nous. Consolons cela, sauvegardons les modifications et jetons un coup d'œil. Tout d'abord, nous obtenons un objet vide. Maintenant je clique sur ce champ e-mail et rien ne se passe. Mais quand nous aurons quitté ce champ de saisie, puis l'e-mail, nous ajouterons cet objet. Nous sommes maintenant dans le champ du mot de passe. Et quand nous avons quitté cette facture en cliquant sur une autre pilule ou en appuyant sur Tab, nous obtenons le mot de passe dans cet objet. Donc, dans notre paume, j'ajoute une autre condition, ce nom de point et n. Maintenant, sauvegardez les modifications et jetez un œil. Maintenant je clique sur ce champ e-mail puis sur Leptis input, alors nous n'obtenons pas cette erreur de nom. Si nous cliquons sur le bouton Soumettre ou si nous vivons ce nom vide, alors seulement nous obtenons cette erreur. Copions donc ce conteneur d'erreur et collez-le après toutes les pilules d'entrée. Maintenant, pour l'e-mail, nous changeons d'adresse, d'e-mail. Cet e-mail. Et les erreurs cérébrales parsèment les e-mails. Quel mot de passe nous changeons les erreurs mot de passe point, mot de passe point et les erreurs d'impression mot de passe Et le dernier pour confirmer le mot de passe. Nous changeons d'époque. Voir mot de passe, ne voit pas le mot de passe et erreurs d'impression point c mot de passe. Et je supprime ces consoles, enregistre les modifications et jette un œil. Maintenant, cliquez sur le bouton Soumettre et nous obtenons tous les noms d'Aaron et z, nous obtenons une erreur différente. Et j'écris trois caractères ou plus. C'est parti maintenant. Alors je sens toutes les pilules. Ensuite, cliquez sur le bouton Soumettre et nous obtenons toutes les valeurs dans la console. Nous pouvons maintenant effacer toutes les pilules de saisie après avoir envoyé le formulaire. Donc, dans la propriété onsubmit, nous avons la méthode actions. Et après console, nous écrivons excellence point reset, form. Sauvegardez-le et jetez un œil. Je ressens tous les détails. Et quand je clique sur le bouton Soumettre, tous les champs de saisie sont clairs. Maintenant, nous pouvons faire cette soudure à froid en utilisant un composant de fabrication, qui est la deuxième méthode pour manipuler la paume à l'aide de comic. J'importe pour moi un composant de formulaire et de build. Maintenant, je sélectionne le pull form et j'appuie sur Ctrl plus Shift plus P dans Windows et command plus P sous Mac. Et écrivez, enroulez entrée et droite. Et appuyez sur Entrée. Maintenant, nous passons des valeurs initiales égales à deux valeurs initiales. Eh bien, écoutez, le schéma est égal au schéma d'inscription. Et pour onsubmit, nous créons une nouvelle fonction appelée onsubmit et copions ce code et le collons ici. Nous transmettons donc submit égal à sur Submit. Maintenant, ce bombardement utilise méthode des accessoires de rendu pour rendre le poème. Donc, écrivez des accolades et nous avons des invites, fonction flèche, et nous déplaçons notre paume à l'intérieur. Ces sondes ont donc toutes les méthodes que nous obtenons ici. Nous allons donc le détruire après tous les changements. Je sais que ça a l'air compliqué, mais ça ne l'est pas. Après avoir terminé ce tutoriel, vous le comprendrez correctement. Maintenant, remplaçons notre balise de formulaire. Quel composant de formulaire ? Assurez-vous également de mettre à jour la balise de fermeture. Maintenant, supprimez-le onsubmit. Nous n'en avons pas besoin. Nous avons donc maintenant un composant défaillant, qui est le remplacement de nos champs de saisie. Donc j'écris ici, nous allons passer le type est égal au texte et le nom est égal au nom. Et fermez ce composant de champ. Assurez-vous d'écrire le même nom que celui que nous transmettons dans les valeurs initiales. Ce composant de champ fonctionne de la même manière que ce champ de saisie. Nous n'avons pas besoin de transmettre ces trois attributs. Form, il le fait tout seul. Et c'est le pouvoir de la formation. Vous pouvez y transmettre autant attributs que vous souhaitez transmettre dans un champ de saisie. Par exemple, l'espace réservé est égal à saisir votre nom, enregistrer les modifications et y jeter un œil. Vous voyez, nous obtenons InputField, identique à cette entrée de nom. Supprimons donc notre pilule de saisie et supprimons également cet espace réservé. Je n'en veux pas. Maintenant, je copie ce composant de champ et je le remplace par tous les champs de saisie. Maintenant, pour l'e-mail, je passe le type à l'e-mail et au nom. E-mail. Maintenant pour le mot de passe, tapez passe-haut vers mot de passe et nom, également mot de passe et confirmation du mot de passe. Je passe le type au mot de passe et au nom, voir mot de passe. Maintenant dernière étape, nous devons déstructurer à Rs, entrer dans la pilule à partir de ces invites. J'écris donc un test de virgule d'objet. Maintenant, supprimez ce utilisé pour la marque et supprimez également utilisé pour les oméga d'important. Enregistrez les modifications et jetez un œil. Cela fonctionne de la même manière qu'auparavant. Vous pouvez utiliser la méthode que vous voulez. C'est à toi de décider. Ici. Vous pouvez ajouter une boîte Jack et d'autres entrées à l'aide de cette propriété de champ. Si nous voulons savoir comment procéder, vous pouvez lire la documentation sur les formats. Ici. Dans la section des exemples, vous trouverez des exemples de tous les types de formulaires. 15. BONUS : Réagir le routeur v6: Dans ce tutoriel, nous allons voir le routeur React à partir de zéro. Alors ne perdons pas de temps et lançons-nous. Ici, je crée cette nouvelle application React en utilisant l'application NP x Create React, puis je supprime tous les fichiers inutiles. Maintenant, nous installons la bibliothèque de routeurs React, ouvrons le terminal en appuyant sur Control plus bacteria et tapez npm install React router down. Si vous utilisez Yan, tapez Yan had React router dome et appuyez sur Entrée. Nous utilisons donc le routeur dom React ou créons différentes routes dans notre application. En gros, nous définissons sur quel chemin, quels composants doivent être affichés. Par exemple, nous faisons une demande de code point www plus u.com. Ensuite, nous voulons afficher le composant home. Et si nous demandons www point code bless you.com, c'est moins à propos, alors nous voulons afficher about component. Voyons maintenant la mise en œuvre. Donc tout d'abord, si vous voulez utiliser routeur dom de React dans votre projet, comment obtenir la pleine obligation avec un composant. Donc, vous savez quel composant d'application nous importons certains composants du routeur React, dom, n'est-ce pas ? Navigateur routeur en tant que routeur, et enveloppez notre JSX avec ce composant de routeur. N'oubliez pas que sans ce routeur React ne fonctionnera pas. Maintenant, pour le définir, nous avons deux autres composants. Donc des itinéraires importants, qui sont utilisés pour définir dans quelle partie vous voulez montrer que vous êtes tous des itinéraires. Je vais t'expliquer dans une seconde. Et un autre itinéraire, qui est utilisé pour définir le nom réel de notre circuit et les détails de nos composants. Ajoutons notre composant routes avant la version 6 du routeur React, ces routes sont connues sous le nom de switch. Maintenant à l'intérieur, nous ajoutons notre itinéraire. Nous devons maintenant passer deux invites ici. Le premier est mauvais, et entre ces guillemets doubles, nous écrivons notre nom de chemin. Donc pour la maison, nous n'ajoutons que moins d'avants. Nous le savons lorsque nous écrivons uniquement google.com ou n'importe quel site Web et que nous ajoutons des insultes. Italy Dido va sur la page d'accueil de ce site Web. C'est pourquoi nous n'écrivons que des barres obliques ici. Et puis nous avons l'élément égal à deux entre accolades. Nous ajoutons nos composants. Tout d'abord, créons quelques pages. Je crée donc un nouveau dossier dans SRC appelé pages. Dans ce dossier, nous créons un fichier appelé home point js et écrivons RFC pour React Boilerplate et ajoutons ici la page d'accueil. Créez maintenant un nouveau fichier appelé profiled ou JS, utilisez ce passe-partout et remplacez également la page de profil texte. Et nous créons une dernière page avec le nom users.js. Ajoutez un passe-partout et remplacez la page de texte de l'utilisateur. Revenons maintenant à notre composant d'application. Et dans l'élément, j'ajoute notre composant home et je ferme ça. Maintenant, dupliquez cette ligne deux fois de plus. 19 est le chemin qui est moins profilé et qui passe notre composant de profil. Et enfin, mais réduisez les utilisateurs et biaisez notre composant utilisateurs. Enregistrez les modifications et jetez un œil. Tu vois, c'est notre page d'accueil. Maintenant en URL, j'ai passé moins de profil et nous obtenons la page de profil. Ou si nous passons moins d'utilisateurs, alors nous obtenons la page des utilisateurs. Maintenant, créons une autre page appelée northbound point js. Et nous ajoutons un passe-partout et écrivons la page 404 introuvable. Nous allons résoudre cette page lorsque quelqu'un passe autre chose, mais que nous ne définissons pas. Revenons donc au composant de l'application et nous ajoutons une autre route et un autre chemin pour démarrer un composant element not found. Cela signifie donc que si nous passons autre chemin qui ne provient pas de ces chemins, alors affichez ce composant introuvable. Et assurez-vous que j' écris toujours ces itinéraires introuvables à la fin de tous les itinéraires. Parfois, ça gâche les autres. Si nous le déclarons en haut de la page, enregistrez les modifications et jetez-y un œil. Si nous passons ici quelque chose d'autre, nous obtenons cette page en direction du nord. Voyons maintenant quelques propriétés plus utiles de React router dom. Créons une barre de navigation simple. Permettez-moi de fermer ces autres dossiers. Je crée donc un nouveau dossier appelé components. En cela, je crée un nouveau fichier appelé ab.js à proximité. Tapez maintenant AFC et appuyez sur Entrée. Maintenant, je les supprime et n'ajoute aucune balise avec la classe à proximité. Et à l'intérieur, nous créons un tag, un additif à la page d'accueil, qui est moindre. Et le bus pour rentrer ici. Maintenant, dupliquez cette ligne deux fois de plus. Et deuxièmement, le profil et le profil de conduite ici. Maintenant, le dernier chemin est réservé aux utilisateurs et aux bons utilisateurs. Maintenant, sauvegardez ça. Et dans notre composant d'application, nous ajoutons notre composant Navbar en haut des itinéraires. Cette barre maintenant est donc fixée en haut. Et en dessous, nous voyons tous les itinéraires. Nous n'avons donc pas besoin d'ajouter maintenant, mais dans tous les composants, enregistrez les modifications et jetez un œil. Tu vois, on a tous les liens. Maintenant, lorsque nous cliquons sur l'un de ces liens vers ce chemin. Mais voyez-vous que notre candidature est refusée ? On ne voulait pas, non ? Pour cela, nous avons un composant dans le dom du routeur React, qui est lié dans le composant Navbar. Nous importons le lien du routeur React, dom, et supprimons ce tag et le lien droit vers. Maintenant, nous écrivons le chemin qui ne vaut rien, comme avec ce profil. Et il en va de même pour ces utilisateurs. Sauvegardez-le et jetez un œil. Vous voyez, maintenant que nous cliquons sur ce lien, notre page ne sera pas refoulée et le routage fonctionne sans problème. Nous pouvons maintenant améliorer cela en surlignant l'itinéraire actuel. J'ajoute quelques styles basiques à notre Nerva et l' effet de survol sur une étiquette. Vous pouvez copier les styles depuis mon dépôt GitHub. Maintenant, je veux faire en sorte que l' arrière-plan des liens d'itinéraire actuels soit noir et changer sa couleur de police. Nous avons donc besoin de savoir quel est le lien actif ici. Pour cela, nous avons un composant qui est maintenant link. Ce lien est une version avancée de ce composant de lien. Importez ça. Et maintenant, je sélectionne un lien et j'appuie sur Ctrl plus D sous Windows et Commande plus d sous Mac. Avec cela, nous créons plusieurs curseurs et remplaçons ce lien par un lien de navigation. Maintenant, ce grignotage nous donne la classe active ajoutée dans nos liens. Enregistrez les modifications et jetez un œil. Cliquez maintenant avec le bouton droit sur l'un de ces liens et allez dans Inspecter. Voir maintenant le lien en classe active vers le lien de nos utilisateurs. Si nous changeons de profil, classe active est supprimée du lien des utilisateurs, puis l' ajoute au profilage. Revenons maintenant au fichier CSS de la barre de navigation et ajoutez l'espace de la barre de navigation, un point actif, et entre accolades, ajoutez l'arrière-plan, la couleur et la couleur à f, f, e, 400. Agendas. Jetez un coup d'œil. Tu vois, on a ce joli lien actif. Nous avons maintenant quelques crochets importants qui sont très utiles dans notre application. Le premier est utilisé navigate. Dans la version précédente du routeur React. Ce crochet est connu sous le nom d'histoire des États-Unis. Donc, dans ce composant de profil, je crée un bouton appelé C, d'autres utilisateurs. Donc, quand quelqu'un clique sur ce bouton, il devrait être redirigé sur l'espace utilisateur que nous avons utilisé le hook de navigation. C'est si important, utilisez navigate from React, router, dom. Et dans notre composant, nous écrivons d' abord use navigate et stockons sa variable de valeur appelée navigate. Maintenant, je crée une nouvelle fonction appelée redirection vers les utilisateurs. Et entre accolades, nous écrivons navigate. Et nous passons notre chemin ici, qui est celui des utilisateurs de barres obliques. Et si vous n'écrivez pas ces quatre mots en moins , il redirige vers le chemin imbriqué paye, qui sera des utilisateurs de barre oblique de profil. Si nous voulons lire directement sur une autre page, ajoutez une barre oblique avant le chemin. Maintenant, dans l'événement button onclick, nous passons ce rendu à la fonction utilisateur, enregistrons les modifications et jetons un œil. Tu vois, ça fonctionne. Enfin, nous avons utilisé params hook. Dans cet exemple, nous avons le parcours de notre utilisateur dans lequel nous pouvons afficher tous les détails ou profils des utilisateurs. Ensuite, si quelqu'un clique sur un utilisateur en particulier, nous devons montrer que les utilisateurs détaillent dans une autre page. Ainsi, un itinéraire devient le dernier de l' utilisateur, qui est l'ID utilisateur. Nous passons maintenant les données des utilisateurs depuis le backend en utilisant cet ID. Alors, comment pouvons-nous définir cet itinéraire pour que je crée un nouvel itinéraire ? Mais deux utilisateurs, c'est moins l'identifiant utilisateur deux-points. Et pour l'élément, créons une nouvelle page. Créez donc un nouveau fichier dans les pages appelées détails de l'utilisateur. Et écrivez notre AFC et sauvegardez-le. Revenons maintenant au composant de l'application. Ici, nous passons le composant Détails de l'utilisateur. Donc, si quelqu'un redirige vers les utilisateurs uniquement, il rend le composant de ces utilisateurs. Et si quelqu'un redirige vers les utilisateurs moins quelque chose, alors cela rend le composant de détails utilisateur, aussi simple que cela. Voyons maintenant comment transmettre cet ID utilisateur à ce composant. Allez donc dans le composant Détails de l'utilisateur. Et ici, j'incarne, utilise les paramètres du dôme du routeur React. Maintenant, dans le composant, à droite, utilisez params et stockez-le dans une variable appelée parameters. Ces paramètres ont toutes les valeurs de nos paramètres d'itinéraire. Consolons ces participants aux ventes et jetons un coup d'œil. Vous voyez, lorsque nous redirigeons vers des utilisateurs de moins un, nous obtenons UserID vers un utilisateur. Nous pouvons donc le déstructurer et écrire l'ID utilisateur. N'oubliez pas qu'il s'agit exactement de la même variable que celle que nous passons dans notre itinéraire. Et j'affiche ici les détails de l'utilisateur de l'identifiant utilisateur. David, et jette un œil. Vous voyez, nous obtenons notre identifiant. Maintenant, nous pouvons transmettre des données depuis votre back-end en utilisant cet identifiant. J'espère donc que vous comprenez le dom du routeur React. Si nous voulons en savoir plus, vous allez consulter sa documentation. Le lien est en bas dans la description. Si vous avez des doutes, vous pouvez me le demander et je vous verrai dans le prochain tutoriel. Au revoir.