Le cours React ultime 2025 - Concevoir 3 projets concrets

1. Introduction à la masterclass React: Bienvenue dans le cours de réaction ultime. Dans ce cours, nous allons apprendre à réagir sur la base de concepts plus avancés. Nous allons donc commencer par le fonctionnement de React. Pourquoi React est une compréhension si populaire de Bb et JSX, de la création de composants, de l'ajout d' événements, de variables d'état, de hooks importants, de l' accès au stockage local, du mode React Street, du filtrage et du court-circuit des données, de la recherche avec des autorizgons, routage et de la navigation à l'aide plus populaire Ensuite, nous verrons également l'appel d'API, la gestion des erreurs, l'affichage des fonctionnalités du chargeur, gestion et la validation du formulaire, la pagination, le défilement infini, l'authentification et l'autorisation des utilisateurs avec le jeton Web JSON, ce qui est très important, appel d'API protégées, la création des contextes, et bien plus encore Si vous êtes un débutant absolu en matière de réaction, vous ne connaissez peut-être pas ces concepts. Permettez-moi donc de vous montrer la mise en œuvre de ces concepts. En utilisant ces concepts, nous allons créer trois applications React réelles. premier est l'application de gestion des tâches, et on peut dire qu'elle est difficile à utiliser comme base. Dans cette application, l'utilisateur peut gérer sa tâche quotidienne. Ainsi, en utilisant ce formulaire, nous pouvons ajouter une tâche en sélectionnant les balises, et selon le statut, elle s'affichera ici. Et nous pouvons également supprimer cette tâche de notre application, fait le meilleur projet pour les débutants. Maintenant, laissez-moi vous montrer notre deuxième projet, qui est une application cinématographique. étonnant dans ce projet, c'est que ces données sont réelles, ce que nous obtenons d'un autre site Web. À partir de là, nous pouvons également filtrer notre liste de films et la raccourcir par date et par classement, ainsi que par ordre croissant et décroissant On peut dire que c'est du niveau de difficulté à intermédiaire. Je vais maintenant vous présenter notre troisième projet. Ce projet est très excitant. Nous allons donc créer une application de commerce électronique qui ressemble à ceci. Vous pouvez voir à quel point c'est beau. Dans ce projet, nous mettrons en œuvre nombreux concepts avancés tels que le routage, appel d'une API, le défilement infini, réduction des produits par prix ou note, recherche de produits avec des suggestions automatiques, l' authentification, comme l'inscription, la connexion et la déconnexion, connexion et la déconnexion gestion de notre panier d'achat et Et une fois ce projet terminé, je vous montrerai le processus de déploiement de l'application React. Maintenant, vous pourriez me demander qui je suis ? Je suis ingénieur logiciel et j'enseigne également programmation dans un langage facile à expliquer en utilisant ma chaîne YouTube. Dieu vous bénisse ainsi que mes cours en ligne. Je vais également vous donner de nombreux conseils et astuces qui vous aideront beaucoup à créer de meilleures applications React. Après avoir terminé ce cours, vous allez écrire du code React avec plus de confiance et en utilisant les meilleures techniques. Je sais que vous avez hâte d' apprendre et de créer des applications à réaction rapide. Alors allons-y et plongeons-nous dans ce cours. 2. Qu'est-ce que React ?: Bienvenue dans la première section du cours Ultimate React. Maintenant, avant de commencer à apprendre React, comprenons bien ce qu'est React. React est une bibliothèque JavaScript open source utilisée pour créer des applications frontales. En termes simples, avec React, nous pouvons créer des applications frontales rapides et de meilleure qualité. React a été créée par Facebook en 2011, c'est actuellement la bibliothèque frontale JavaScript la plus populaire et la plus utilisée. Il existe également d'autres bibliothèques JavaScript comme Angular et view, mais elles ne sont pas aussi bonnes que React. Si vous recherchez un emploi en tant que front-end ou développeur Stack complet, vous devez savoir comment créer une application meilleure et plus rapide avec React. Vous vous demandez peut-être quelle est la particularité de React ? Pourquoi React est-il si populaire ? Avant la création de React, lorsque notre page Web était chargée dans un navigateur, créait une structure arborescente avec notre code STML Cette structure arborescente est appelée modèle d'objet de document ou en abrégé dom. Maintenant, en utilisant ce doom en JavaScript, nous pouvons ajouter diverses fonctionnalités à notre application Masquer la barre latérale lors d'un clic sur un bouton, gérer les entrées du formulaire, etc. Voici donc l'exemple de masquage de la barre latérale lors d'un clic sur un bouton Il s'agit du code de Vanilla JavaScript, c' est-à-dire du code JavaScript pur sans utiliser d'outils externes. Imaginez maintenant si nous créons des applications à grande échelle comme Instagram ou Amazon avec Vanilla JavaScript. Et combien de lignes de code devons-nous écrire ? Même si nous parvenons à écrire ce long code, notre code deviendra compliqué et difficile à gérer Maintenant, à ce moment-là, la réaction entre en ligne de compte. Avec React, nous n'avons pas à nous soucier d' écrire du code Javascript Vanilla. Au lieu de cela, nous allons diviser notre application en petits morceaux de code. Ce petit morceau de code s'appelle un composant, puis React se chargera d'écrire du code simple pour créer et mettre à jour dom. Les composants sont utilisés pour écrire code réutilisable et mieux organisé. Laissez-moi vous expliquer à l' aide d'un exemple. Nous avons donc ici notre troisième projet, qui est une application de commerce électronique. Ici, nous pouvons voir que nous avons une nouvelle barre, et sur le côté droit de la barre Neb, nous avons quelques liens vers différentes pages Nous pouvons donc créer séparément le composant Nabar, et dans ce composant, nous pouvons également ajouter un composant pour ces liens, puis nous pouvons le réutiliser plusieurs fois pour les liens Ny Bar Maintenant, dans la page des produits, nous avons la barre latérale et ici nous avons la liste des produits, nous créons donc deux autres composants, barre latérale et la liste des produits Maintenant, dans cette liste de produits, nous avons quelques fiches produits Nous pouvons donc définir un autre composant pour fiche produit, puis le réutiliser plusieurs fois dans cette liste de produits. Nous construisons donc tous ces composants individuellement, puis nous les combinons pour créer notre page. En créant de petits composants, nous pouvons facilement gérer notre code et notre application fonctionne également rapidement. De plus, avec React, nous pouvons créer une application d'une seule page, ce qui signifie que notre application ne se charge qu'une seule fois, puis toutes les pages puis toutes les pages sont affichées sans recharger la page entière, ce qui rendra notre application presque 50 % plus rapide que les applications SDML CSS et JavaScript normales Maintenant, une autre raison pour laquelle React est si rapide est que React possède la fonctionnalité Virtual DOM. Maintenant, c'est le sujet qui embrouille de nombreux développeurs, mais c'est vraiment simple. Permettez-moi donc de vous expliquer par un exemple. Imaginez que vous avez un puzzle sur votre table. C'est une belle image de paysage, et elle contient de nombreuses pièces de puzzle qui s'assemblent pour former une image complète. Chaque pièce du puzzle représente une partie différente de votre page Web, comme un en-tête, une barre latérale ou une section de contenu principal Supposons maintenant que vous ayez un assistant magique appelé Virtual Puzzle Solver. Cet assistant possède une copie exacte de votre puzzle, mais il est virtuel, pas Désormais, chaque fois que vous souhaitez apporter une modification à votre puzzle, vous décrivez les modifications apportées à votre solveur de puzzle virtuel Au lieu de manipuler directement les vraies pièces du puzzle. Par exemple, vous pourriez dire : « Hé, résolveur d'énigmes virtuel, je veux déplacer la pièce bleue du coin inférieur droit vers le coin supérieur gauche Au lieu de déplacer physiquement la pièce du puzzle sur la vraie table, votre assistant examine rapidement sa propre copie. Déterminez ensuite les modifications nécessaires et vous indique à droite, retirez la pièce bleue en bas droite et ajoutez-la en haut à gauche. Maintenant, vous apportez ces modifications au vrai puzzle en vous basant sur les instructions de votre assistant. L'avantage est que votre solveur de casse-tête virtuel peut rapidement identifier les pièces à déplacer pour compléter l'image mise à jour sans que vous ayez à réorganiser manuellement chaque Dans cet exemple, le vrai JigsoPuzzle représente le véritable destin et le solveur d'énigmes virtuel représente le dôme virtuel représente Appliquons maintenant ce concept à Rax Virtual Doom. Ainsi, lorsque vous créez une page Web avec React, celle-ci conserve une représentation virtuelle de votre page Web, appelée Virtual Dom. Chaque fois que vous souhaitez mettre à jour votre page Web, vous décrivez les modifications apportées au dom virtuel au lieu de modifier directement le véritable doom Reax Virtual Doom compare efficacement le nouveau dôme virtuel au précédent Identique à votre logiciel de résolution de casse-tête virtuel, qui identifie rapidement les puzzles PC ont besoin pour résoudre leur propre puzzle Ensuite, React sait exactement quelle partie du Dom réel doit être modifiée pour correspondre au nouveau Dom virtuel En utilisant cette approche du dom virtuel, React optimise le processus de mise à jour du véritable doom, ce qui signifie qu'il n'applique que les modifications nécessaires, rendant ainsi votre page Web plus efficace et réactive, en particulier lorsque les mises à jour ou les interactions sont fréquentes. En résumé, le solveur d'énigmes virtuel rend la mise à jour du vrai puzzle plus facile à gérer, DX Virtual Doom rend la mise à jour du vrai doom plus fluide et plus efficace, tout en améliorant les performances et l' rend la mise à jour du vrai puzzle plus facile à gérer, DX Virtual Doom rend la mise à jour du vrai doom plus fluide et plus efficace, tout en améliorant les performances et l'expérience utilisateur de votre application Web. Voilà pour la théorie. Pour l'instant, ne vous inquiétez pas pour tout cela. Vous comprendrez ces concepts lorsque nous créerons plusieurs projets. 3. Configurer un environnement de développement: Configurons un environnement de développement pour ce cours. Donc, tout d'abord, nous avons besoin de node JS. Une chose que je veux préciser, que nous n'utilisons qu' une partie du nœud JS, qui est NPM appelé Node Package Manager Ce NPM est utilisé pour installer des applications React et certaines fonctionnalités supplémentaires Rendez-vous sur nodjs.org et téléchargez la dernière version stable de NodeJS Cliquez sur huit, et le téléchargement commencera. Et j'ai une suggestion si NodeJS est déjà installé sur votre système, veuillez supprimer cette version et installer la dernière version de node Ouvrez maintenant cette configuration et cliquez sur Suivant. Acceptez les termes suivant, encore une fois , suivant, suivant et installez. Et voyez que le processus d'installation est lancé. Et c'est fait. Nous avons donc installé nodejs avec succès dans notre système. Maintenant, vérifions-le. Ouvrez donc l' invite de commande dans Windows, ou si vous êtes Mguser , ouvrez le terminal et écrivez le nœud V, puis appuyez sur Entrée Si vous avez correctement installé nodejs, vous verrez cette version Si vous obtenez quelque chose que node n'est pas reconnu comme une commande interne ou externe, vous devez réinstaller node. Après cela, écrivez NPM et appuyez sur Entrée. Et nous avons également cette version, très jolie. Maintenant, la prochaine chose dont nous avons besoin pour ce cours est Vascde, qui est l'un des meilleurs éditeurs de code et près de 95 % des développeurs utilisent Rendez-vous donc sur code.visualstudio.com et installez-le. C'est extrêmement simple. Ouvrez le code VS et pour améliorer notre expérience de codage, nous installerons quelques extensions. Accédez à ce panneau externe et nous recherchons d'abord sept React Snippets et installons cette extension C'est l'une des meilleures extensions pour écrire rapidement du code React JS. Après cela, nous avons une autre extension sympa appelée Prettier Il s'agit de l'extension que tous les développeurs utilisent dans le code Vas. Prettier formatera votre code de manière très organisée. Installez cette extension. Sympa. Maintenant, nous devons faire de petits réglages pour l'installation de Prettier Dans la section d'installation, faites défiler la section du formateur par défaut et copiez cette première ligne de code Ouvrez maintenant les paramètres et dans le coin supérieur droit, ouvrez les paramètres, les chiens et le fichier et collez cette ligne à la fin Enregistrez ce fichier. Revenons maintenant au réglage et au format de recherche lors de la sauvegarde. Impossible et c'est fait. Maintenant, encore une chose, de nombreux étudiants demandent mon thème de code VS. Recherchez AU et installez cette extension de thème. Cliquez maintenant sur ces paramètres, accédez au thème du code et définissez-le sur la bordure au, et c'est tout. Notre environnement est prêt. Dans la leçon suivante, nous allons créer notre première application React. 4. Créer une application React: Il existe donc deux manières de créer des applications React. Tout d'abord, nous pouvons utiliser l'application Create React, ou nous pouvons utiliser le blanc. L'application Create React est l' ancienne et prend plus de temps à créer. Nous utiliserons le blanc pour créer les nouvelles applications React. Donc, tout d'abord, créez un dossier dans lequel vous souhaitez vous entraîner à réagir et ouvrez ce dossier dans la commande prom. Et si vous êtes un utilisateur Mc, ouvrez le dossier interminal. Maintenant, écrivez NPM, create, white, au plus tard, et appuyez sur Entrée pour continuer, écrivez Y et Inscrivez maintenant ici le nom de votre application. J'écris la première application et j'appuie sur Entrée. Maintenant, ici, nous devons sélectionner le cadre. Nous sélectionnons donc React et appuyons sur Entrée. Ici, nous pouvons sélectionner Ja Script ou TypeScript. Ne t'inquiète pas pour ça. Il suffit sélectionner le script Ja et d'appuyer sur Entrée. En quelques secondes, notre application est prête. Cela crée un modèle de réaction de base, nous n'avons donc pas besoin de créer une application React à partir de zéro. Cette commande nous donnera un modèle de réaction rapide. Maintenant, ici, nous devons écrire ces trois commandes. Nous devons donc d'abord accéder à notre application en écrivant un CD, touche Tab et en appuyant sur Entrée. Maintenant, écrivez NPM, installez et appuyez sur Entrée. Cette commande installera tous les packages nécessaires pour créer une application React telle que webpack, qui est utilisée pour regrouper différents fichiers dans un seul fichier La Bible est un autre package important. Ce package est utilisé pour convertir JSX, qui est le code JavaScript moderne appelé code JML La Bible convertit donc ce JSX en un simple code JavaScript , compréhensible par les navigateurs Ne vous inquiétez pas, je vais vous le montrer dans cette section. Maintenant, écrivez simplement le code, le point et appuyez sur Entrée. Cette commande ouvrira le dossier Curen dans le code VS. Nous pouvons fermer ce terminal. Nous n'en avons pas besoin. Maintenant, pour exécuter cette application React dans notre système, nous ouvrons le terminal en appuyant sur Control plus Peptic ou Command plus BTI, écrivons NPM run dive et Cette commande prendra un certain temps et nous obtenons ici le lien de notre application vers l'hôte local. Maintenez la touche Ctrl ou Commande enfoncée et cliquez sur ce lien. Cela ouvrira notre application dans notre navigateur. Voici donc à quoi ressemblait le pack de démarrage de React et voyez qu'il fonctionne sur l'hôte local 5173 Nous avons donc créé avec succès notre application React. Dans la leçon suivante, nous allons écrire premier code dans notre application React. 5. Comprendre le modèle React: Tout d'abord, voyons ce que nous obtenons dans ce modèle de réaction. Tout d'abord, nous obtenons un dossier non modulaire. Dans ce dossier, nous avons tous les packages installés pour notre application. Sans ces modules de nœuds, nous pouvons exécuter notre application React, mais ne vous inquiétez pas, nous ne toucherons même pas ce dossier. qui est amusant, c'est que lorsque je crée deux ou trois projets dans React, je ne sais même pas à quoi sert ce dossier de modules de nœuds. Dans SOT, node modules est le dossier dans lequel se trouvent tous nos packages et bibliothèques d'installation. Ensuite, nous avons le dossier public. Ce dossier public contient des actifs statiques qui sont fournis directement au client. Par exemple, nous avons ici le white tot SVG, qui est notre fabuleuse icône. Laisse-moi te montrer. Ici, dans l'onglet de notre navigateur, nous pouvons voir notre fabuleuse icône Après cela, nous avons le dossier SRC, qui signifie dossier source C'est le dossier dans lequel nous passons presque tout notre temps à écrire du code. Ici, nous avons d'abord le dossier ASES. Dans ce dossier, nous allons mettre toutes nos images, icônes, étangs, etc., que nous allons utiliser dans nos composants Ensuite, nous avons un tas de fichiers. Le premier est app point JSX, qui est le composant racine de notre application, ce qui signifie que c'est le point de départ de notre chaîne de composants Notez que ce Jx est l' extension du composant React. Cela ressemble presque aux chiens. Nous verrons la différence dans les prochains cours. Pour l'instant, ouvrons-le et voyons à quoi ressemblent les composants. Tous les composants de réaction ont cette structure de base. En haut, nous importons certains fichiers comme d'autres composants, des fichiers CSS, ou nous importons des objets à partir de packages ou de logos, d' images, etc. Ensuite, nous avons une fonction qui porte le même nom que le nom de notre composant. Dans ce cas, il s'agit d'une application. Maintenant, cette fonction renvoie toujours quelque chose qui semble similaire. Balisage HTML. Notez toutefois qu'il ne s'agit pas du balisage DML d'origine. C'est ce qu'on appelle JSX, qui signifie JavaScript XML Ainsi, en utilisant ce JSX, nous pouvons écrire du code STML et du code JavaScript ensemble, et c'est le cœur de React C'est donc cette partie qui décide de l' apparence de notre site Web, et ce code de sortie est le suivant, ce que nous voyons dans notre navigateur. De plus, la syntaxe JSX est similaire au balisage STML. Nous pouvons donc facilement écrire du code en JavaScript en moins de code. Et à la fin de chaque composant, nous exportons ce composant par défaut, afin de pouvoir l'utiliser dans un autre fichier ou composant. Maintenant, comme vous l'avez déjà dit, Weblelibrary, prenez ce code JSX et convertissez-le en un simple code JavaScript compréhensible prenez ce code JSX et convertissez-le en un simple code JavaScript compréhensible par notre navigateur. Après cela, nous avons le fichier CSS app point, qui est utilisé pour styliser le balisage du fichier app point JSX Et aussi que nous saisissons en haut du composant de l'application. Ensuite, nous avons le fichier JSX à points principaux, qui est le fichier le plus important de React Il s'agit du fichier qui relie nos composants à notre fichier HTML à points d'index, que nous avons ici. Ne vous inquiétez pas, c'est le même que nous avons notre fichier STML. Il s'agit du fichier HTML principal qui s' exécute dans notre navigateur. Laisse-moi te montrer. Je change ici ce titre pour celui de ma première application React. Enregistrez ce fichier, et dans le navigateur, voyez, nous obtenons ici notre titre mis à jour. De plus, nous n'avons pas besoin d' actualiser notre page comme dans le cas du SDML. React recharge automatiquement notre application lorsque nous sauvegardons notre fichier, et c'est très cool Maintenant, avec cela, nous avons l'icône F, que nous avons vue précédemment. Maintenant, faites défiler l'écran jusqu'à la section du corps et voyez, nous n'avons ici que deux balises. Le premier est DU avec un identifiant root. Il s'agit de la balise principale dans laquelle tous les composants apparaîtront. Laisse-moi te montrer. Dans notre navigateur, cliquez avec le bouton droit de la souris sur la page et accédez à Inspecter. Ici, vous pouvez voir que nous avons notre Du avec ID root et à l'intérieur, nous avons notre composant d'application. Maintenant, après cela, nous avons la balise Script, et ici nous lions notre fichier JSX principal Voyons rapidement à quoi ressemble le code dans le fichier JSX à point principal Au sommet, nous avons quelques importations. Maintenant, après cela, nous avons des lignes de code par lesquelles nous pouvons connecter notre composant d'application à Du qui a l'ID root. Nous avons donc React Dom, que nous avons importé du client React Dom, et qui a une méthode, create root. Et à l'intérieur de celui-ci, il cible la racine par point du document Get element by ID. Ensuite, cette variable racine a une méthode appelée render, et à l'intérieur de celle-ci, nous passons le composant que nous voulons afficher dans cette racine Du. Ne t'inquiète pas pour ça. Dans la prochaine leçon, nous allons écrire tout ce code à partir de zéro. Maintenant, après le dossier source, nous avons le fichier Getting nor dans lequel nous pouvons définir quels fichiers ou dossiers ne seront pas téléchargés sur Github Ensuite, nous avons le fichier GSN à points de package, qui contient toutes les informations sur notre application Vous pouvez voir ici le nom, la version, et dans ce tableau de dépendances, nous avons un tas de packages qui sont installés avec l'installation, et nous avons également leur version. Si à l'avenir, nous perdons notre dossier nor models, alors en utilisant ce fichier GSN à points de package, pourrons recréer nos modules de nœuds Maintenant, nous avons également des scripts, qui sont des cartes de tri pour ces commandes. Par exemple, auparavant, nous utilisions NPM run Dao pour exécuter notre application Donc, en interne, cela exécute cette commande Dav du script React. Ensuite, nous avons les packages log point JSn, qui sont essentiellement utilisés pour verrouiller la dépendance à un Vos et à un numéro spécifiques Et enfin, nous avons le fichier js confit à points blancs, qui est l' objet de configuration de notre application Pour l'instant, nous n'avons pas à nous soucier de ces autres fichiers. Nous nous concentrons principalement sur la manière de créer des applications rapides et réactives. 6. Écrire du code à partir de zéro: Maintenant, écrivons du code à partir de zéro. Si je veux que vous écriviez du code à partir de zéro, c'est parce que je veux vous montrer comment composants React se connectent à l'élément racine. Tout d'abord, supprimez le dossier source complet, nous le créerons à partir de zéro. Créez maintenant un nouveau dossier appelé SRC et à l'intérieur de celui-ci, nous créons un nouveau fichier appelé point principal Jx Vous souvenez-vous de ce que fait ce fichier Jx principal ? Écrire ? Il déclarera le composant racine, ou nous pourrons voir ce que nous voulons afficher dans cette DU avec l'ID root. Maintenant, en haut, nous importons des objets de la bibliothèque et en utilisant ces objets, nous pouvons connecter notre application au fichier DML d'index Tout d'abord, importez l'objet React depuis la bibliothèque React. Si vous n'êtes pas familier avec cette importation ou tout autre concept JavaScript, vous inquiétez pas, écrivez ce code fur et à mesure que j'écris, car dans la section suivante, nous comprendrons tous les concepts utiles de JavaScript que nous utilisons dans React. Ensuite, nous importons React Dom, depuis le client React Dom. Maintenant, dans la ligne suivante, nous créons une variable, const. Encore une fois, il s'agit d'une fonctionnalité de script ES six da, et je vais vous le montrer dans la section suivante. Alors const et donne le nom de ta variable. Disons mon premier élément. Tu peux prendre ce que tu veux. Cela dépend entièrement de vous. Égal à, ici nous écrivons H une balise. C'est mon premier élément. Et fermez le tag H one. Notez qu'il ne s'agit pas d'un balisage SDML. Il s'agit de JSX, qui ressemble à SDML car nous n'avons ajouté aucun code JavaScript Ensuite, nous allons afficher cet élément dans notre racine D. Nous réagissons donc, Dom, point, créons racine. Et dans cette méthode, vous devez cibler notre DU avec un identifiant root. Donc, le point du document obtient élément par ID, et passe ici la racine en double code. Enfin, nous devons déclarer quel élément ou composant nous voulons afficher. Nous écrivons donc point, render, et à l'intérieur de celui-ci, nous passons notre élément, mon premier élément. Enregistrez les modifications et jetez-y un œil. Tu vois, nous avons reçu notre texto. C'est mon premier élément. Maintenant, vérifions que cela se trouve dans notre RootT ou non. Donc, la jambe droite sur le texte et va inspecter. Et vous pouvez voir que c'est notre raison d'être, donc cela fonctionne. Félicitations, vous avez créé votre première application React. Maintenant, nous ajoutons ici cet élément. Mais dans la vraie application React, nous ajouterons ici notre composant d'application. Ne t'inquiète pas pour ça. Je vous promets que vous serez à l'aise avec l'idée de réagir rapidement et que vous n'essayez pas de comprendre tous les sujets en une seule fois. Parce qu'avec de la pratique, vous comprendrez chaque sujet. 7. Section 02 Mise à niveau de JavaScript ES7: Bienvenue dans la deuxième section du cours Ultimate React. Dans cette section, nous allons voir certains des sujets importants de Javascript que nous utilisons beaucoup dans React. Nous commençons par War, c'est-à-dire la syntaxe ArwFuncton qu'il a laissée à Cs, permettant d'accéder aux propriétés des objets de différentes manières Ensuite, nous assisterons à la déstructuration des objets. agit donc de méthodes telles que la carte et le filtre, l'opérateur de propagation, l'opérateur ternaire , les modules, etc. Vous connaissez peut-être déjà certains de ces concepts, mais considérez cette section comme une mise à jour. Vous êtes sûr de vos connaissances en Javascript, alors vous pouvez sauter cette section. Cela dépend entièrement de vous. L'objectif de cette section est de vous familiariser avec tous les concepts nécessaires de JavaScript utilisés dans React. Ainsi, vous pouvez facilement apprendre à réagir sans vous soucier concepts modernes de JavaScript et vous concentrer entièrement sur l'apprentissage de React. 8. var, let et const: A t et const, ces trois mots clés sont utilisés pour définir des variables en JavaScript Latin Const est une nouvelle fonctionnalité du JavaScript moderne. La plupart des développeurs utilisent Let et const au lieu d'utiliser War Comprenons la différence entre et const et War needed. Dans notre projet précédent, que nous avons créé dans la première section, openmin point JSX, et ici nous avons supprimé tout le code La première question est de savoir quel est le problème avec la guerre et que nous devons utiliser de nouvelles fonctionnalités pour la déclaration. Je définis donc ici une fonction appelée boucle d'impression, et dans cette fonction, nous utilisons une boucle simple for. Tout d'abord, nous définissons une variable, I égale à zéro. Ensuite, nous avons mis la condition I inférieure à trois, et enfin, I plus plus. Et à l'intérieur de cette boucle, nous voulons imprimer cette valeur I. Donc, console point log I. Maintenant, à la fin, nous appelons cette fonction de boucle d'impression. Dites les modifications et jetez-y un coup d'œil. Tu vois, ici, on obtient zéro, un et deux. Parfait. Maintenant, laissez-moi vous montrer quel est le problème de la guerre. Donc, après cette boucle automnale, nous passons à la diapositive I. Pouvez-vous deviner à quoi ressemblera notre sortie ? Laisse-moi te montrer. Enregistrez les modifications et C, nous obtenons ici cette valeur I, qui est trois. Nous voulons donc définir ici variable I uniquement pour cette boucle. Dans d'autres langages de programmation, variable ne doit être accessible que pour le bloc dans lequel elle est définie, et c'est ce qu'on appelle une portée. R n'est pas une variable de portée de bloc. Il s'agit de la variable de portée fonctionnelle, ce qui signifie que nous pouvons accéder à cette variable I dans l' ensemble de cette fonction. Imaginons maintenant que nous devions toujours trouver un nouveau nom de variable. Donc, pour résoudre ce problème dans la variable ESC Oxcope en utilisant deux mots clés, let et const Il nous suffit donc de passer ici, de nous arrêter sur le lieu de la guerre, sauvegarder les modifications et d'y jeter un coup d'œil. voyez, ici nous avons une erreur, je ne suis pas défini. Alors maintenant, cette variable I n' est accessible qu' à l'intérieur de ces quatre boucles. On peut parler de ce bloc de portée. Nous utilisons la guerre lorsque nous voulons accéder à une variable en pleine fonction, mais c'est rare. La plupart du temps, nous utilisons late ou const lorsque nous voulons accéder à cette variable uniquement dans le bloc de code dans lequel ils ont été définis Maintenant, vous pourriez vous demander : quelle est la différence entre late et const ? Ici, cette constante signifie constante. Constant signifie que nous ne pouvons pas le changer. Laisse-moi te montrer. Supprimons ce code, et nous définissons ici deux variables. Le premier avec lat, X est égal à dix, et le second avec const, Y est égal à dix Nous pouvons maintenant réaffecter la valeur de la variable que nous déclarons tardivement Ici, nous pouvons faire que X est égal à 20, mais nous ne pouvons pas réaffecter la valeur de variable que nous déclarons avec const, nous ne pouvons donc pas écrire que Y est égal à Cela nous donnera une erreur. Et prenez. voyez, ici, nous obtenons l'attribution d'une erreur de type à une variable constante. Donc, si nous voulons changer sa valeur, nous utilisons const et si vous voulez changer sa valeur, nous utiliserons late Donc, pour récapituler, n'utilisez pas le mot clé War car il a une portée fonctionnelle et préférez utiliser le mot clé Cs avant la fin N'utilisez le mot clé at que lorsque vous souhaitez réattribuer le 9. Fonction de flèche: Alors, qu'est-ce que la fonction flèche ? La fonction d'erreur est un autre moyen de définir une fonction JavaScript. En d'autres termes, nous pouvons écrire une fonction JavaScript de manière simple et facile. C'est une fonctionnalité très utile de Javascript lorsque nous travaillons sur des sujets avancés. J'ajoute notre code précédent dans le dossier source si vous souhaitez réviser les concepts. Nous définissons ici une fonction appelée say hello. Dans cette fonction, nous nous contentons d'enregistrer les points par console, et nous voulons imprimer ce monde Hello JavaScript. Nous définissons cette fonction avec le mot-clé function. Voyons maintenant comment créer la même fonction en utilisant la fonction flèche. Donc, pour définir la fonction de flèche , nous devons d' abord utiliser let ou const Mais dans la plupart des cas, nous utilisons const parce que nous ne voulons pas réaffecter cette fonction Nous écrivons ici le nom de notre fonction. Imaginons que nous créions des valeurs égales, puis que nous utilisions des parenthèses pour la fonction, puis des valeurs égales et supérieures à, qui forment cette flèche Ensuite, nous ajoutons des crochets Ci pour ajouter un bloc Cd pour cette fonction de flèche. À l'intérieur de celui-ci, nous écrivons le journal des points de la console. Bonjour tout le monde de JavaScript. Appelons maintenant cette fonction. Ici, nous pouvons appeler la fonction flèche par son nom , comme nous appelons notre fonction normale. Les modifications et jetez-y un coup d'œil. Ouvrez la console et voyez ici que nous obtenons le même résultat. Les deux fonctions sont donc identiques. Cette syntaxe de fonction de flèche nous aidera pour le Javascript avancé. Permettez-moi de vous montrer mon astuce pour me souvenir de la syntaxe de cette fonction de flèche lorsque j'ai commencé à apprendre le Javascript. Notre fonction dit bonjour. Maintenant, supprimez ce mot-clé de fonction et jouez à const. Ensuite, entre le nom de la fonction et les parenthèses, nous ajoutons égal à, et entre les parenthèses et les crochets C nous ajoutons une flèche, aussi simple Maintenant, si dans le bloc de code de la fonction flèche, nous n'avons qu'une seule ligne, nous pouvons supprimer ces crochets Supprimons-les. Enregistrez les modifications et voyez quel point la fonction est simple et facile à définir. Maintenant, pouvez-vous les gars ? Comment pouvons-nous ajouter des arguments dans la fonction flèche ? C'est vrai, c'est de la même manière que nous passons au fonctionnement normal. Nous ajoutons donc ici la langue, et dans cette console, nous affichons ce paramètre de langue. Maintenant, lorsque nous appelons cette fonction, nous passons ici, disons react. Enregistrez les modifications, et vous verrez, Hello Javascript world react. 10. Accéder aux objets: Parlons un peu des objets. Nous savons donc que cet objet est une paire clé-valeur. En d'autres termes, un objet JavaScript est une collection de valeurs nommées. Vous savez peut-être tout cela, mais je veux juste m' assurer que les concepts fondamentaux de Javascript sont corrects. Désolée pour ça, si tu le sais. Regardez simplement cette leçon à titre de rappel. Donc ici, j'utilise const car je ne veux pas réattribuer à cet objet une autre valeur Donc const user est égal à entre crochets C, nous définissons les données dans une paire clé-valeur Le premier est donc le nom de Halley. Au fait, c'est mon prénom préféré. Et une autre propriété, disons, envoyer un e-mail et régler sur Halley 07 sur le gmail.com rouge Pouvez-vous me dire comment nous pouvons accéder à cette propriété ? Bien, nous pouvons utiliser le nom d'utilisateur ou l'adresse e-mail de l'utilisateur point. Nous nous contentons donc de consigner le nom de point de l'utilisateur point par point. Enregistrez ceci et voyez ici que nous obtenons Harley très facilement. Maintenant, laissez-moi vous montrer une autre option pour accéder à la valeur de l'objet. Ainsi, à la place de ce nom de point, nous utilisons des crochets et, dans les codes doubles, nous transmettons le nom de notre propriété. Vous voyez, ici, nous obtenons également l'automatisation. Voyons voir, envoyez un e-mail, enregistrez les modifications et jetez-y un coup d'œil. Vous voyez ici que nous recevons notre e-mail. Nous utiliserons la méthode des crochets dans une partie de React. C'est pourquoi j'ajoute cette leçon. 11. Destructure d'objet: Maintenant, un autre concept Javascript très utilisé dans React est la déstructuration d'objets Voyons ce que c'est. Imaginons donc que nous ayons un objet appelé user wtorsInformations utilisateur telles que le nom SAM et l'e-mail à SAM email@gmail.com et le pays Dans ce code, nous voulons extraire la valeur de la propriété de cet objet. Disons le nom, l' adresse e-mail ou le pays. Pour cela, nous écrivons const name égal au nom du point utilisateur. Ensuite, nous écrivons const email égal à user point email. Enfin, nous écrivons contre country égal à user point country. Ensuite, nous imprimons simplement ces valeurs. Donc, journal des points de la console, nom, e-mail, pays. Enregistrez les modifications et jetez-y un œil. Vous voyez ici que nous obtenons ces valeurs. Maintenant, le problème avec ce code est le nombre de lignes. Imaginons que nous ayons cinq à dix propriétés , puis que nous devions déclarer cinq à dix variables différentes, et ce n'est pas la meilleure pratique. Pour résoudre ce problème, nous avons procédé à la déstructuration des objets. Je commente ce code précédent et j'écris ici, const Maintenant, nous devons utiliser ulipacket égal au nom de notre objet qui est user Maintenant, vous pensez à ce que nous avons à écrire entre crochets Cali Nous devons écrire ici uniquement les noms des variables que nous voulons extraire de cet objet. Nous écrivons le nom, l'e-mail, le pays, et c'est tout. Ce code à une seule ligne fonctionne de la même manière que ces trois lignes de code. Vérifions-le. Enregistrez les modifications et voyez que cela fonctionne de la même manière qu'avant. Vous pouvez voir à quel point la déstructuration d'objets est simple. Maintenant, vous vous demandez peut-être si nous devons toujours ajouter toutes les propriétés dans le Calibacket et la réponse est non Nous devons uniquement ajouter le nom des propriétés que nous voulons extraire. Par exemple, si nous voulons accéder uniquement au nom et à l'e-mail , nous pouvons supprimer cette variable de pays. Maintenant, que se passe-t-il si nous voulons changer le nom de cette variable de nom en un nom d'utilisateur, par exemple ? Donc, pour cela, nous devons ajouter ici deux points et après cela, nous ajoutons le nom d'utilisateur. Vérifions que cela fonctionne ou non. Changez votre nom en nom d'utilisateur, enregistrez les modifications et jetez-y un œil. Tu vois, ça marche. C'est ce que nous avons appelé la déstructuration d'objets. 12. Méthode cartographique: Dans cette leçon, nous allons maintenant voir la méthode map pour le tableau. C'est l'une des méthodes matricielles les plus utilisées dans les applications React. Dans React, nous utiliserons la méthode map pour afficher la liste des données. Par exemple, imaginez que nous travaillions sur un projet de commerce électronique. Maintenant, dans ce projet, nous avons une gamme de produits que nous voulons exposer. Ici, nous utilisons la méthode cartographique pour afficher chaque produit. Ne vous inquiétez pas, dites-le simplement et vous le comprendrez. Nous créons ici une nouvelle gamme de produits Ici , nous ajoutons le produit un, le produit deux par une virgule et le produit trois par une virgule Nous voulons maintenant afficher chaque élément de la liste de produits comme ceci. Nous pouvons donc le faire en utilisant la méthode MP. Nous écrivons donc ici les produits point MAP. Maintenant, dans cette méthode cartographique, nous devons transmettre une fonction de rappel qui s'exécute pour chaque élément Définissons donc la fonction ici. Maintenant, comment pouvons-nous obtenir la valeur de chaque élément de cette fonction ? Nous obtenons la valeur de chaque élément en utilisant le premier paramètre de cette fonction. Disons un article ou un produit. Vous pouvez utiliser un nom descriptif. Maintenant, nous renvoyons simplement en double code, étiquette d'élément de liste. Maintenant, que voulons-nous ajouter ici ? Oui, ce produit. Ajoutez donc plus de produit, plus, et nous ajoutons des codes doubles, clôturant ainsi l'élément de la liste. N'oubliez pas que cette méthode cartographique renvoie un nouveau tableau. Cela ne modifiera pas le tableau précédent. Stockons donc ce nouveau tableau dans une variable appelée éléments d'affichage. Ensuite, nous nous contentons de consoler les éléments d'affichage du journal à points. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous obtenons un ensemble d'éléments de liste. Rappelez-vous donc toujours que tout ce que nous renvoyons de cette fonction ajoutera un nouveau tableau. Et cette fonction s'exécute pour chaque élément, c'est aussi simple que cela. Maintenant, ce code semble un peu long Nous pouvons donc utiliser la syntaxe de la fonction flèche, supprimer le mot-clé de la fonction et ajouter une flèche ici. Maintenant, nous pouvons même simplifier ce code car dans cette fonction, nous n'avons qu'une seule ligne écrite. Nous supprimons donc ce qui est écrit et nous pouvons également retirer les supports de voiture. Vous voyez maintenant que notre code semble facile à lire. Vérifions que cela fonctionne ou non. Enregistrez les modifications et jetez-y un œil. Tu vois, ça marche comme avant. Maintenant, ça a l'air un peu moche. Au lieu d'utiliser ces doubles codes, nous pouvons utiliser des modèles littéraux. C'est très simple et utile. Nous supprimons toute cette déclaration et ajoutons ici des backticks à l'intérieur de celle-ci, nous écrivons notre élément de liste d'ouverture et notre élément de liste de clôture Au centre des tags, il faut ajouter ce produit unique. Donc, dans les littéraux de modèles, si nous voulons ajouter une variable, nous devons utiliser des crochets Dollar et Cali Et à l'intérieur de ceux-ci, nous pouvons accéder à ce produit variable. Enregistrez les modifications et jetez-y un œil. Vous voyez, encore une fois, nous obtenons le même résultat. C'est donc à vous de décider de la syntaxe que vous souhaitez utiliser. Dans la leçon suivante, nous allons voir une autre méthode matricielle, qui est le filtre. 13. Méthode de filtrage: Voyons la méthode de filtrage, qui est utilisée pour filtrer un tableau. En termes simples, le filtre est utilisé pour supprimer des éléments d'un tableau existant et il renvoie toujours un nouveau tableau. Dans notre exemple de commerce électronique précédent, imaginez que nous devions ajouter une fonctionnalité de recherche pour les noms de produits. En utilisant cette méthode de filtrage, nous pouvons filtrer le tableau existant selon notre choix. Laissez-moi vous montrer ce que je veux dire. Je supprime le code précédent, mais pour votre information, je vais l'ajouter dans un dossier séparé, afin que vous puissiez l'obtenir pour révision. Nous créons donc ici un nouveau tableau appelé ages equals to in square packet, five, 23, 14, 30 et 21. Consignons simplement ce tableau par points sur console. Supposons maintenant que nous voulions filtrer les arêtes de plus de 18 ans. Nous écrivons un filtre à points pour les pages. Maintenant, à l'intérieur de celui-ci, nous passons une fonction, comme nous l'avons fait dans la méthode map. Nous pouvons définir une fonction, ou nous pouvons également utiliser la syntaxe de la fonction flèche. Comment pouvons-nous obtenir chaque élément du tableau dans cette fonction ? C'est vrai, en contournant la variable au premier paramètre. Nous ajoutons ici une variable appelée âge. À cette époque, nous obtenons chaque élément de ce tableau. D'abord, nous en arrivons à cinq, puis à 23 , puis à 14, 30 et 21. Maintenant, dans cette fonction, nous devons renvoyer la condition. Disons, âge supérieur à 18 ans. Quel élément répond à cette condition, cet élément sera ajouté dans un nouveau tableau. Donc, d'abord, cette méthode de filtrage, vérifiez la condition pour f, qui ne passera pas cette condition afin que la méthode de filtrage ne fasse rien. Ensuite, il vérifie la condition pour 23, qui passera cette condition, sorte qu'il ajoutera un nouveau tableau. Après ce 14, qui ne passera pas. Après cela, 30, qui satisfera à cette condition, il en ajoutera 30 puis 21. Désormais, cette méthode de filtrage renvoie toujours un nouveau tableau. Stockons cela dans une variable appelée adultes À la fin, enregistrons ces adultes par points sur console. Enregistrez les modifications et voyez ici que nous obtenons 23, 30 et 21. Ici, nous pouvons également supprimer ce retour et appeler les crochets. Tu vois, ça a l'air plus simple. N'oubliez pas que quel élément passe cette condition pour laquelle nous ajoutons un tableau innu, c'est aussi simple que cela Maintenant, disons que de ce tableau, nous voulons supprimer ce 30. Ici, on passe l'âge n'est pas égal à 30 ans. Enregistrez ceci et vous verrez que sans 30, nous obtiendrons tous les éléments. C'est ainsi que nous utilisons la méthode de filtrage pour filtrer les données. 14. Opérateur de spread: Maintenant, une autre fonctionnalité utile du JavaScript moderne est l'opérateur de propagation. Nous créons donc ici un tableau appelé tableau un, et nous ajoutons ici un, deux, trois et quatre. Maintenant, après cela, nous définissons un autre tableau appelé tableau deux. Et nous ajoutons ici sept, huit, neuf et dix. Comment pouvons-nous combiner ces deux tableaux en un seul tableau ? Donc, pour combiner ce tableau, nous créons une nouvelle constante égale à un point dans le tableau. Ici, nous utilisons la méthode concat, qui est utilisée pour combiner deux ou plusieurs tableaux Et dans cette méthode concat, nous passons notre deuxième tableau, qui est le tableau deux Voyons ce que nous allons obtenir. La console enregistre par points ce tableau de nombres. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons réussi à combiner ces deux tableaux. Maintenant, permettez-moi de vous faire un petit exercice. Ici, nous voulons ajouter les nombres manquants entre ces deux tableaux Notre sortie devrait donc ressembler à ceci : un à dix dans l'ordre. Interrompez cette leçon et essayez d'ajouter cinq et six entre ces tableaux Maintenant, j'essaie également de résoudre ce problème avec une autre méthode. Si vous avez votre méthode, vous pouvez la poser dans la section Q&R Nous créons donc un nouveau tableau de cinq et six. Et dans la méthode concat, nous ajoutons ce tableau avant le tableau deux Et c'est avec cela que nous obtenons notre résultat. Maintenant, laissez-moi vous montrer la façon moderne de le faire. Nous commentons donc cette ligne et écrivons nombres constants égaux à maintenant, nous créons un tableau, et à l'intérieur de celui-ci, nous devons d'abord obtenir toutes les valeurs du tableau un Nous écrivons donc point, point, point, ce que l'on appelle un opérateur de propagation, puis nous ajoutons le nom de notre tableau, qui est le tableau 1. Cette expression renverra toutes les valeurs de ce tableau 1. Maintenant, après cela, nous voulons ajouter le tableau deux. Nous écrivons donc à nouveau le tableau d'opérateurs de propagation deux. Enregistrez ceci et jetez-y un œil. Vous voyez, ici, nous combinons ces deux tableaux. Maintenant, vous vous demandez peut-être si nous voulons ajouter cinq et six entre ces deux. Donc, pour cela, nous n'avons pas besoin de créer un nouveau tableau comme nous le faisions auparavant. Ainsi, lorsque nous voulons ajouter nos éléments, nous pouvons simplement les écrire à cet endroit. Si nous voulons ajouter quelque chose au début ou à la fin, nous pouvons aussi simplement le faire, enregistrer les gènes et y jeter un œil. Tu vois, ici on en a cinq et six. Vous pouvez voir qu'en utilisant l'opérateur de spread, nous n'avons pas à nous soucier de quoi que ce soit. Il suffit d'écrire point, point, point, un nom de tableau, et nous obtenons toutes les valeurs de ce tableau. C'est aussi simple que ça. Nous pouvons également utiliser l' opérateur de propagation avec des objets. Nous définissons donc ici l'objet constant un. Et à l'intérieur, nous ajoutons un nom à la méthamphétamine. Ensuite, nous définissons un autre objet constant deux. Et à cela, nous ajoutons le hobby à l' enseignement et à l'apprentissage. Nous voulons maintenant combiner ces deux objets. Nous définissons donc une constante, disons que l'utilisateur est égal à deux. Maintenant, nous devons utiliser des objets parce que nous voulons obtenir un nouvel objet, et ce que nous écrivons ici, écrire, opérateur de propagation, objet un, opérateur de diffusion com, objet deux. Et après cela, consultons simplement le point log de cet objet utilisateur. Enregistrez les modifications et jetez-y un œil. Vous voyez, ici nous combinons deux objets. Maintenant, comme nous le faisons dans un tableau, nous pouvons également ajouter d'autres propriétés dans cet objet. Nous ajoutons ici, disons, YouTube à code plus. Sauvegardez ceci et vous verrez, ici, nous obtenons notre propriété. Vous pouvez voir à quel point il est simple de combiner des tableaux et des objets à l'aide de l'opérateur de propagation C'est pourquoi l'opérateur de spread est très utile. 15. Opérateurs ternaires: Dans cette leçon, nous allons donc en apprendre davantage sur l'opérateur ternaire ou l'opérateur conditionnel D'après son nom, vous pouvez deviner à quoi il servira. C'est vrai, il est utilisé pour ajouter une condition. En termes simples, l'opérateur ternaire est le raccourci pour écrire la condition Voici donc une syntaxe d'opérateur ternaire. À la première position, nous avons notre condition. Après cela, nous avons le point d' interrogation, qui signifie essentiellement si et ensuite nous avons une expression vraie, qui s'exécutera si la condition est vraie. Et puis nous avons une colonne, qui signifie se, et si la condition est fausse, alors cette fausse expression s'exécutera. Donc, en termes simples, si la condition est vraie, alors la première expression s'exécutera, la deuxième expression s'exécutera. Voyons cela dans la pratique. Supprimons ce code, et nous créons simplement une variable en utilisant const Mx égal à 50 Maintenant, après cela, nous voulons ajouter une condition. Si le maximum est supérieur à 35, alors nous voulons revenir, passer, sinon nous revenons, échouer. Nous écrivons donc notre condition à la première position, qui est supérieure à 35 au maximum. Nous ajoutons un point d'interrogation et nous adhérons à la chaîne que nous voulons renvoyer. Donc, dans les codes, passez, et après cela, nous ajoutons deux points, et nous ajoutons ici une chaîne de caractères dans les codes, fail. Maintenant, nous renvoyons une chaîne à partir de cette expression, nous devons donc la stocker dans une variable. Disons le résultat. Et à la fin, enregistrez simplement ce résultat par point sur la console. Enregistrez les modifications et jetez-y un œil. Vous voyez, ici, nous sommes autorisés parce que notre maximum est supérieur à 35. Maintenant, si nous changeons notre maximum à 30, enregistrez-le et vous verrez que nous échouerons. Vous pouvez donc voir à quel point il est simple d'utiliser des opérateurs ternaires si nous avons une expression sur une seule ligne Si nous devons écrire le même code dans la condition EL, nous devons l'écrire de cette façon. Donc, d'abord, nous déclarons la variable de résultat. Ensuite, nous ajoutons la condition eLS pour remplir ce résultat. Voyez ici que nous utilisons let parce que nous voulons réaffecter la valeur de cette variable Quoi qu'il en soit, vous pouvez voir comment l'opérateur ternaire réduit les lignes de code pour ajouter une condition EFL C'est la beauté des fonctionnalités modernes de JavaScript. Cette fonction de flèche Les opérateurs Dinari sont de petites choses qui augmenteront votre vitesse d'écriture de code et réduiront le nombre de lignes de code Un développeur intelligent n'est pas celui qui écrit plus de lignes. Un développeur intelligent est capable écrire du code en moins de lignes, mais cela fonctionne toujours mieux qu'un mauvais code. 16. Modules en JavaScript: Les modules sont l'un des concepts les plus importants du JavaScript moderne utilisé dans React, ou nous pouvons dire que React fonctionne sur des modules. Commençons donc par ce qu'est le module. Le module est un fichier qui contient du code permettant d'effectuer une tâche spécifique. Il peut contenir des variables, des objets, des fonctions, etc. que notre application grandit, nous devons écrire des milliers de lignes de code. Mais au lieu de tout mettre dans un seul fichier, nous pouvons diviser notre code en fichiers séparés en fonction de leurs fonctionnalités, que nous pouvons appeler modules. Et en utilisant ces modules, nous pouvons organiser notre code et le rendre très facile à gérer. Voyons cela dans la pratique. Supprimons donc ce code précédent, et nous créons simplement une fonction appelée post pour notre application. Pour l'instant, imaginez que cette fonction renverra la partie interface utilisateur d'un seul article. Dans cette fonction, nous écrivons le journal des points de la console. C'est un post. Maintenant, après cela, nous créons une autre fonction appelée feed pour afficher plusieurs publications dans cette fonction Nous écrivons d' abord le journal des points de la console. C'est du fil et après cela, nous appelons ici cette fonction de publication. Comme nous l'imaginons, cette fonction de publication renvoie l'interface utilisateur de publication, et cette fonction ressentie renverra la publication multiple Nous appelons simplement cette fonction de publication plusieurs fois. Je sais que c'est un peu confus, mais ne t'inquiète pas pour ça. À la fin de cette leçon, tout cela prend tout son sens. Voyons ce que nous allons obtenir ici. À la fin, nous appelons cette fonction d'alimentation, enregistrons les modifications et jetons un coup d'œil. voyez, d'abord nous arrivons ici, c'est un fil d'actualité, et après cela, nous avons plusieurs articles. Maintenant, il ne s'agit que d'une partie de notre application. Nous avons plus de fonctions ou nous pouvons dire plus de parties, alors la gestion de ce code ne sera pas facile. Nous pouvons donc diviser ce code en plusieurs parties appelées modules, puis nous pouvons facilement gérer notre code, et nous pouvons également le réutiliser dans différentes applications. Nous avons donc supprimé cette fonction de publication à partir ici et dans notre dossier source, nous créons un nouveau fichier appelé post point jsx, également appelé module de publication Et dans ce fichier, il suffit de coller cette fonction de publication. Maintenant, nous avons peut-être une question, comment pouvons-nous utiliser cette fonction de publication dans notre fichier JSX à points principaux Parce qu'actuellement, nous ne pouvons accéder à cette fonction de publication que dans le fichier postjsx Tout d'abord, nous devons rendre cette fonction publique afin de pouvoir accéder à cette fonction dans d'autres modules. Pour cela, au début, nous ajoutons simplement un clavier d'exportation. Maintenant que nous exportons, nous pouvons accéder à cette fonction de publication dans n'importe quel fichier. Donc, dans le fichier principal ou JSX, nous devons importer cette fonction Donc, en haut, nous écrivons des crochets Cali d'importation, et dans ces crochets CL, nous devons ajouter le nom de la fonction que nous voulons importer Dans notre cas, il est désormais publié sous forme de code, faut écrire le chemin des modules à partir desquels on souhaite l'importer. Nous écrivons donc point ou point et barre oblique. Cela fait référence au dossier actuel et vous voyez, ici, nous obtenons les suggestions. Sélectionnez « Publier » et c'est fait. Notez qu'ici, nous pouvons également écrire fichier GSX post point si nous avons un post-point TXT ou tout autre fichier post avec d'autres extensions, mais c'est rare Nous n'écrivons donc pas toujours cette extension GSX à points. Enregistrez les modifications et jetez-y un œil. Tu vois, ça marche comme avant. Nous avons créé avec succès notre premier module. Maintenant, permettez-moi de vous lancer un petit défi amusant. Ici, nous créons un module de publication. Vous devez créer un module de flux distinct de ce fichier Gx à points principaux et appeler cette fonction d'alimentation dans ce fichier JSX à points principaux Je sais que tu peux le faire. Essayez-le un petit peu. Alors interrompez cette leçon et voyez ensuite cette solution. J'espère que tu auras résolu cet exercice. Si vous ne parvenez pas à terminer cet exercice, ne vous inquiétez pas. Maintenant, vous pouvez apprendre que nous sommes tous là pour apprendre. Mais l'important, c'est qu' au moins tu essayes de résoudre ce problème. Alors attribuez-vous le mérite de cela. Donc, tout d'abord, au point principal Jx 5, nous avons supprimé cette fonction d'alimentation avec l'instruction import car nous utilisons la fonction post que dans cette fonction de flux Et nous créons un nouveau fichier appelé feed point JSX, et dans ce fichier, nous collons cette fonction de flux Maintenant, pour rendre cette fonction accessible dans d'autres fichiers, nous devons l'exporter. Enregistrez ceci, et dans le fichier JSX principal en haut, nous importons les crochets Cali et ce que nous y transmettons Écrivez le nom de la fonction ou de la variable à laquelle nous voulons accéder. Nous ajoutons donc un flux à partir des codes, des points, des barres obliques, et nous sélectionnons le flux Enregistrez les modifications et jetez-y un œil. Vous voyez, cela fonctionne comme avant. Vous pouvez donc voir comment nous divisons ou divisons notre code en plusieurs fichiers appelés modules. Et si vous apprenez ce système de modules, vous pourrez facilement comprendre les composants de React. Dans la leçon suivante, nous verrons une méthode légèrement différente d' exporter et d'importer des modules, que nous avons beaucoup utilisée dans la section suivante. 17. Exporter par défaut: Dans la leçon précédente, nous définissons les modules et les exportons nous définissons les modules et les exportons pour les rendre accessibles aux autres modules. Imaginons maintenant que nous ayons une autre fonction dans ce module d'alimentation appelée une autre fonction. Et à l'intérieur de celle-ci, nous enregistrons simplement une autre fonction par point. Maintenant, pour exporter cette fonction, nous ajoutons ici le mot-clé export, enregistrons et dans le fichier mainpoint Jx, nous pouvons également importer cette autre fonction Ici, nous supprimons ce flux de importation et appuyons simplement sur Ctrl plus espace sous Windows ou sur Commande plus espace sous Mac pour ouvrir la liste de suggestions. Nous pouvons maintenant voir ici la liste des objets ou des fonctions exportés. D est appelé export de nom, ce qui signifie qu'en utilisant le nom d'une variable, nous pouvons les importer. Mais il existe une autre méthode d'exportation, qui est l'exportation par défaut. J'alimente donc le fichier JSX point, je veux que cette fonction de flux, qui est la fonction principale de ce module de flux, l'exporte par défaut Donc, pour faire de l'exportation par défaut , il suffit d'ajouter l'exportation par défaut au lieu d'exportation. est aussi simple que ça. Vous vous demandez peut-être quelle est la différence entre cette exportation et cette exportation par défaut. La seule différence réside dans la déclaration d'importation. Laissez-moi vous montrer ce que je veux dire. Enregistrez ce fichier et dans fichier Jx principal à la place des crochets, nous adhérons directement à l' alimentation, et c'est tout nous adhérons directement à l' alimentation, et c'est Ici, nous pouvons donner n'importe quel nom à cette fonction. C'est la seule différence. Maintenant, si nous voulons également importer une autre fonction depuis le module d'alimentation, nous pouvons également l'importer en utilisant virgules et ici, nous pouvons importer toutes nos exportations nommées depuis le module de flux Vous vous demandez peut-être pourquoi nous devons connaître cette valeur d'exportation par défaut ? Parce que dans React, nous verrons également cette exportation par défaut pour exporter tous les composants. Je ne veux pas que vous vous embrouilliez en regardant une autre syntaxe d'exportation. Maintenant, dans ce fichier GXS à points d'alimentation, cette exportation par défaut semble un peu moche Nous pouvons le supprimer en bas, nous ajoutons l'export par défaut, et ici nous passons le nom de notre objet ou de notre variable, que nous voulons exporter, qui est un flux. Et nous pouvons également supprimer cette exportation et après l'exportation par défaut, nous écrivons export et dans object, nous passons notre nom de fonction ou de variable, c'est aussi simple que cela. Pour résumer l'exportation par défaut, notre déclaration d'importation ressemble à ceci. Et pour l'exportation nommée, notre déclaration d'importation ressemble à ceci. Il suffit d' utiliser des crochets Cal. Tout tourne autour des modules et des exportations. Félicitations. Vous êtes maintenant complètement prêt à apprendre React Jazz. Si vous regardez ce cours en permanence, faites une pause de cinq à dix minutes loin de votre écran pour prendre l'air Je vous vois dans la section suivante. 18. Section 03 : concepts de base dans React: Bienvenue dans la section React Basic. Dans cette section, vous apprendrez certains des concepts de base qui sont très importants dans React. Nous commençons par créer des composants, comprendre JAX et le Web, ajouter des éléments, ajouter des expressions Javascript, des attributs, des événements Après cela, le concept le plus important de React, qui est l'état et aussi l'un des hooks les plus utilisés , utilise l'état. Gestion des entrées, liste de mappage et bien plus encore. Je suis très enthousiasmé par cette section et j'espère que vous l'êtes aussi, car en utilisant ces concepts, nous allons créer notre première application dans la section suivante. Alors faisons-le. 19. Préparer un nouveau projet: Créons d'abord une toute nouvelle application, que nous allons utiliser dans notre premier projet. Ouvrez donc l' invite de commande ou le terminal dans le dossier dans lequel vous souhaitez créer cette application. Et vous souvenez-vous comment créer une application React ? Écrire en utilisant NPM, créer du blanc au plus tard en rouge ? Maintenant, écrivez le nom de notre application, qui est Task Track, et appuyez sur Entrée. Assurez-vous de toujours écrire nom de notre application en petits caractères et sans soulignement Sinon, cela nous donnera une erreur. Maintenant, nous sélectionnons l'application React, puis nous sélectionnons la variante JavaScript. Bien. Maintenant, exécutons ces trois commandes. Donc, tout d'abord, nous devons changer de répertoire par CD et appuyer deux fois sur Tab. Installons maintenant tous les packages et bibliothèques à l'aide de NPM Install. Et c'est fait. Maintenant, ouvrons ce nouveau projet dans le code VS. Nous écrivons donc code space period. Cela ouvrira le code VS dans ce répertoire. Fermons cette invite de commande. Nous n'en avons pas besoin. Génial. Voyons maintenant si nous avons correctement configuré notre application ou non. Ouvrez le terminal en utilisant Control plus Batak ou Command plus Bata et écrivez simplement NPM run DV Vous voyez, nous obtenons ce modèle de réaction, qui signifie que nous avons correctement configuré notre application. 20. Créer votre propre composant: Dans cette leçon, nous allons créer notre premier composant de réaction. Pour récapituler rapidement, le composant est un morceau de code réutilisable utilisé pour définir certaines parties de l'interface utilisateur Ici, dans le dossier source, nous créons un nouveau dossier appelé components. Dans ce dossier, nous stockons tous les composants de notre application, à l'exception de notre composant racine, qui est ce composant d'application. Maintenant, dans ce dossier, nous créons un nouveau fichier appelé card point JSX ou Js. Vous vous demandez peut-être quelle est la différence entre l'extension JSX et JS ? Tout d'abord, nous pouvons écrire n'importe quelle extension car elles fonctionnent toutes les deux de la même manière. Mais généralement, nous utilisons l' extension JSX car lorsque notre application grandit, nous devrons peut-être écrire du code JavaScript moment-là, cette extension JSX vous indiquera quel fichier est un composant arrière et quel fichier est simplement du code JavaScript Vanilla De plus, lorsque nous utilisons point JSX, notre éditeur de code peut nous offrir un meilleur service, comme la suggestion de syntaxe, vérification des erreurs et d'autres fonctionnalités Utilisé pour écrire du code JSX. Mais certains développeurs utilisent également l'extension point js, et si vous travaillez sur un seul projet avec plusieurs développeurs, vous devez utiliser la même extension qu'ils utilisent déjà. Nous utilisons donc ici point JSX. Ce sont des petits détails que de nombreux développeurs expérimentés ne connaissent pas et les intervieweurs aiment poser ce genre de questions Vous pouvez donc noter ce point. Et encore une chose, écrivez toujours nom du composant en majuscule. Sinon, cela ne fonctionnera pas dans le navigateur. Je vous expliquerai la raison dans la prochaine leçon. Maintenant, dans ce composant en haut, nous devons importer React depuis le package React. Ensuite, nous devons définir ici la fonction ou la classe, qui renverra JSX Il s'agit donc de deux types de composants de réaction, les composants fonctionnels et les composants de classe. Les composants de classe sont un peu vieux pour le moment, car pour implémenter des composants de classe, nous devons apprendre certains des concepts avancés de JavaScript. De plus, le composant de classe est peu complexe que le composant fonctionnel. Lorsque Facebook s'est développé, React First Time, il n' y a qu'un seul type de composant qui est un composant de classe. Mais au fur et à mesure que React se développait, il comportait des composants fonctionnels ce qui rend React très simple et facile. Actuellement, presque tous les développeurs passent aux composants fonctionnels et c'est pourquoi j'ai décidé de créer du discours en utilisant des composants fonctionnels. Nous définissons ici une fonction portant le même nom que notre composant, qui est carte. Et dans cette fonction, nous renverrons simplement H une balise avec du texte, disons, un composant de carte. Notez que nous pouvons également créer une fonction en utilisant la syntaxe de la fonction R, et c'est tout. Nous créons notre premier composant React. Vous pouvez voir à quel point il est simple de créer un composant React. Il suffit d'importer React depuis la bibliothèque React, puis une fonction avec le nom du composant et de renvoyer l'élément que nous voulons afficher. Maintenant, vérifions que cela fonctionne ou non. Comme nous le savons, nous devons ajouter ce composant dans la méthode de rendu de fichier principale ou JSX Pour cela, nous devons exporter cette fonction de carte à partir de ce composant de carte. Nous nous souvenons de la façon dont nous exportons la fonction depuis le module directement en utilisant le mot clé Export. Tu t'en sors vraiment très bien. Donc, écrivez, exportez, et cette fonction de carte est notre méthode principale. Nous pouvons donc exporter par défaut et écrire ici la carte de nom de la fonction. Enregistrez ceci, et maintenant nous devons importer cette fonction de carte dans le fichier point sx principal. Donc, ici, après cette saisie dans l'application, nous importons la carte depuis, et dans les codes, nous devons transmettre le chemin de notre fichier. Donc, carte des composants d'époque. Maintenant, à la place de ce composant d'application, nous passons simplement le composant de la carte. Enregistrez ce fichier et jetez-y un œil. Vous voyez, ici, nous obtenons notre balise H one avec du texte. Il est donc vraiment très simple de créer des composants dans React. Si vous êtes un peu confus, ne vous inquiétez pas avec l'entraînement, vous maîtriserez React. Quand j'ai commencé à apprendre à réagir, j'étais également confuse, mais j'ai continué à apprendre et surtout à m'entraîner. Maintenant, voici une astuce pour créer la structure de base des composants en une seconde seulement. Assurez-vous d'installer l'extension ES seven react Nippet. C'est nécessaire pour cela. Nous supprimons donc ce code complet et écrivons simplement ici RAFCE qui signifie React Arrow Function Component with export et pressons la touche Tab Vous voyez, nous avons ici le passe-partout pour les composants de réaction. En les utilisant, nous n'avons pas besoin de saisir manuellement cette fonction d'importation et d'exporter les instructions encore et encore. Capuchon de louange pour un seul curseur et juste ici pour le composant de la carte. Utilisez les modifications et jetez-y un coup d'œil. Tu vois, ça marche pareil. Maintenant, vous vous demandez peut-être pourquoi ne pas vous montrer ce type de coupe au début ? La raison en est donc que je souhaite vous expliquer la structure complète de création de composants. Si je vous montre d'abord cette astuce, vous ne pourrez pas comprendre correctement les composants. Et je parie que vous comprenez très bien la création de composants. Maintenant, permettez-moi de vous faire un petit exercice. Je dois créer un autre composant réel appelé create todo. En retour, des balises simples, créez de nouvelles tâches à partir d' ici dans une balise H. Je suis sûr que tu peux terminer cet exercice. 21. Solution de cet exercice: Maintenant, avant de commencer notre prochaine leçon, laissez-moi vous montrer très rapidement la solution de l'exercice précédent. Ainsi, dans ce dossier de composants, nous créons un nouveau fichier appelé createdo point jsx Et à l'intérieur de ce composant, nous écrivons RAA, CE et appuyons sur step, et notre composant est prêt Maintenant, appuyez sur Escape et à la place de ce D, nous écrivons h une balise et créons une nouvelle tâche à partir de là Enregistrez-les et dans la pile main point jsx, nous importons create to do, et nous pouvons également voir des suggestions ici Sélectionnez la suggestion, et cela importera notre composant depuis notre dossier. Maintenant, il suffit de passer ici, de créer pour le faire. Enregistrez les modifications et voyez, nous avons ici notre composant Create to Do. Si vous ne parvenez pas à terminer cet exercice, vous inquiétez pas non plus. Vous pouvez à nouveau regarder la leçon précédente. C'est bon Il n'y a aucune pression. 22. Comment fonctionnent JSX et Babel: Dans la leçon précédente, nous avons créé notre composant et nous avons également écrit du code qui ressemble au code HTML. Mais comme je vous l'ai déjà dit, ce n'est pas du code HTML. Il s'agit de JSX, qui est un code moderne permettant d'écrire simultanément du STML et du JavaScript. Nous l'avons vu dans la section, mais ce n'est qu'une petite introduction. Voyons maintenant comment cela fonctionne en interne. Comme vous le savez peut-être, notre navigateur ne peut pas comprendre le code JSX, mais il peut comprendre le code JavaScript Vanilla Nous devons convertir notre code JSX en code JavaScript Vanilla, afin que notre navigateur puisse le comprendre Pour cela, nous avons besoin d'un compilateur appelé Babble. Il convertira notre code JSX en code JavaScript brut, que les navigateurs pourront comprendre et afficher Laissez-moi vous le montrer de façon pratique. Dans notre navigateur, ouvrez un nouvel onglet et rendez-vous sur Bblejs point IO Et allez à cette section de rédaction. Ici, nous pouvons écrire notre code JavaScript moderne, et Babble convertira ce code en code JavaScript compréhensible par les navigateurs Donc, ici, nous écrivons simplement un titre const égal à H une balise Et passe ici une chaîne. C'est JSX. Et vous voyez, nous avons ici ce code. JSX est donc converti en cette fonction JSX. Maintenant, le premier argument de cette méthode est H un, qui est notre type d'élément. Et le deuxième argument est l'objet qui a une propriété appelée enfants. En gros, les enfants sont ce que nous transmettons dans notre élément. Maintenant, ici, nous pouvons également passer un attribut de classe égal à en-tête principal et voir ici nous obtenons la propriété de classe dans cet objet. Pour les développeurs, écrire du code à l'aide de JSX est plus simple et plus facile que d'écrire ce code JavaScript classique Bref, nous utilisons toujours JSX pour nos composants, et Webble compilera notre code dans cette fonction JSX Et c'est la raison pour laquelle nous n'avons pas à importer obligatoirement la bibliothèque React en haut. Mais avant la mise à jour de React 18, nous devons importer React en haut. Maintenant, vous pourriez vous demander comment pouvons-nous voir l'ancienne méthode de réaction par point et création d'éléments ? Ici, dans cette option, nous avons le temps d'exécution de réaction. Par défaut, elle est réglée sur automatique, qui est cette fonction JSX, et nous pouvons la changer en classique Et voici cette ancienne méthode de transformation du JSS en code JavaScript en utilisant la méthode read point create element Si vous souhaitez en savoir plus sur ce sujet, vous pouvez lire cet article. Je vais joindre le lien de la documentation officielle. C'est ainsi que JSX et Babel fonctionnent dans l'application React. 23. Ajouter des éléments dans des composants: Dans cette leçon, nous allons maintenant ajouter des éléments dans notre composant. Donc, après cette balise d'en-tête, nous voulons ajouter un bouton. Nous ajoutons donc un bouton appelé at task. Maintenant, nous avons une erreur dans notre expression JSX. Passons en revue et voyons que expression JSX doit avoir un élément parent Maintenant, vous vous demandez peut-être pourquoi. Ainsi, dans la leçon précédente, je vous montre que l'expression JSX est convertie en fonction d'exécution JSX Et aussi, nous avons vu la méthode reatt create element. Dans ces deux méthodes, nous ne pouvons spécifier ici qu'un seul élément. Donc, si nous écrivons plusieurs éléments dans JSX, nous ne saurons pas quel élément choisir Ainsi, dans JSX, nous ajoutons toujours des éléments dans un élément parent. Nous ajoutons donc ici Du et déplaçons notre code entre ce dé. Enregistrez les modifications et découvrez format plus joli de notre code de manière structurée. C'est pourquoi les développeurs aiment tellement Prettier et Prettier ajoute également cette parenthèse et ce point-virgule Cela est dû à l'insertion automatique de points-virgules en JavaScript. Par exemple, si nous n'avons que return et rien d'autre dans cette ligne, alors JavaScript met automatiquement point-virgule ici. Laisse-moi te montrer. Nous déplaçons notre JSX sur la ligne suivante. Maintenant, si nous sauvegardons ce fichier, voir Ja script et ici Sami Colin, à cause de cela, voir Ja script et ici Sami Colin, à cause de cela, les lignes suivantes ne seront jamais exécutées C'est pourquoi il est plus joli d' ajouter des parenthèses, de sauvegarder les modifications et d'y jeter un œil Vous voyez ici que nous avons un titre et un bouton. Examinons huit afin que nous puissions également voir le balisage. Ici, dans la racine du, nous avons notre du et à l'intérieur de ce du, nous avons nos éléments. Maintenant, parfois, nous ne voulons pas ajouter ce div indésirable pour tous les composants de réaction. Voyons une autre méthode pour ajouter plusieurs éléments. Dans React, nous avons une méthode appelée fragment. Ce fragment est utilisé pour ajouter un élément parent dans notre JSX, mais il ne renverra aucun composant d' interface utilisateur sur le navigateur Laissez-moi vous montrer ce que je veux dire. Donc, à la place de ce Du, nous écrivons un fragment de point de réaction. Maintenant, si vous vous demandez comment je modifie ces textes d'ouverture et de fermeture ensemble, c'est parce que j'utilise cette extension de balise autoem Vous pouvez également installer cette extension ou augmenter votre vitesse de saisie. Et voici l'extension d' installation actuelle que j'ai utilisée, afin que vous puissiez également les vérifier. Ce thème d'icônes matérielles est destiné au thème de Con. J'aime beaucoup ça. Revenons maintenant à notre sujet, ajoutez un fragment de réaction en tant qu'élément parent. Enregistrez les modifications et jetez-y un œil. voyez, lors de l'inspection, nous n'avons ici que nos deux éléments sans cette contrainte indésirable. Maintenant, il existe également un autre raccourci et une méthode simple pour ajouter des fragments de réaction. Nous pouvons simplement supprimer ce fragment de point de réaction, et c'est tout. Ces balises vides fonctionnent également de la même manière que les fragments de réaction. Enregistrez les modifications et voyez que cela fonctionne de la même manière. 24. Expression JavaScript dans JSX: Ainsi, dans la leçon précédente, nous avions plusieurs éléments SDML dans notre JSX Voyons maintenant comment ajouter une expression ou un code Javascript dans JSX Ainsi, au lieu d'afficher ce texte, nous voulons afficher le nombre total de tâches de ce type. Maintenant, ce zéro est codé en dur, mais nous voulons afficher le nombre réel de tâches de manière dynamique. Donc, juste pour une démonstration avant notre déclaration écrite, nous créons une variable appelée task égale à, disons, cinq. Maintenant, comment pouvons-nous afficher cette variable de tâche à la place de ce numéro codé en dur ? Et la réponse est très simple. Supprimez donc ce numéro et collez les crochets Cully. Et entre ces crochets, nous pouvons ajouter n'importe quelle expression JavaScript valide. Nous ajoutons donc ici une variable de tâche, enregistrons les modifications et voyons ici que nous en avons cinq. Remplaçons cette tâche à zéro, et nous pouvons également ajouter du texte au début ou après ces crochets ci. Enregistrez ceci et voyez, nous obtenons ici la tâche zéro. Ainsi, entre ces crochets, nous pouvons écrire n'importe quelle expression Javascript. Cette expression doit renvoyer une valeur qui s' affichera lors du dépôt. Par exemple, si nous écrivons ici uniquement vrai et que nous l'enregistrons, nous n'obtenons rien. Donc, si nous ne voulons rien afficher, c'est pourquoi nous écrivons ici cette expression en JSX C'est pourquoi je vous dis d'ajouter une expression, qui renvoie une valeur, ou nous pouvons même appeler une fonction, qui peut renvoyer une valeur. Donc, après cette tâche, nous créons une fonction, appelée tâche de comptage, fonction d'erreur, et à l'intérieur de celle-ci, nous renvoyons cette variable de tâche. Et à la place de cette tâche, nous appelons la fonction de tâche de comptage. Enregistrez les modifications et jetez-y un œil. Tu vois, ici, on obtient à nouveau zéro. Maintenant, rendons ce noyau un peu intéressant en tant qu'exercice. Ainsi, dans cette fonction, lorsque cette variable de tâche est définie sur zéro, nous voulons afficher un message, aucune tâche disponible, sinon, il s'agit du numéro de tâche actuel. C'est vraiment très simple. J'espère que tu pourras le faire. Conseils, nous pouvons supprimer ce texte de tâche et renvoyer une chaîne complète à partir de cette fonction. Passez donc un peu de temps sur cet exercice, et après cela, vous pourrez regarder la solution. Donc, tout d'abord, dans cette fonction, nous ajoutons une condition si la tâche est égale à zéro, puis nous ne renvoyons aucune tâche disponible. Sinon, nous renvoyons une chaîne en utilisant une chaîne modèle. Si vous ne le savez pas dans la chaîne du modèle, nous pouvons accéder à la variable avec une chaîne. Il suffit de voir ceci, nous ajoutons acti, task, deux-points, et pour accéder à la variable, nous ajoutons des dollars entre crochets et une Supprimons maintenant cette tâche de Jx. Nous n'en avons pas besoin. Entrez et jetez un œil. Vous voyez, aucune tâche n'est disponible ici. Et si nous changeons notre tâche en deux, et que nous arrivons à cette tâche également. Vous pouvez voir à quel point c'est simple. Je sais que vous avez terminé cet exercice, ou du moins que vous avez essayé de le résoudre. Alors, prenez-en le mérite. Maintenant, laissez-moi vous montrer un système de raccourcis pour écrire ce même code. Je commente donc ce code et au lieu d'utiliser Ils, nous utilisons des opérateurs ternaires, nous l'avons vu dans la section précédente Écrivez donc return, et d'abord, nous ajoutons une condition, la tâche égale à zéro. Ajoutez maintenant un point d' interrogation pour vrai et revenez ici, aucune tâche n'est disponible. Après cela, deux points pour les chutes, et retournez ici ticks, task , colon, dollar, crochets ci, tâche. Sauvegardez-le et voyez qu'il fonctionne de la même manière qu'avant. Nous pouvons le tester en changeant sa valeur à zéro. Et voilà, aucune tâche n'est disponible. 25. Définir des attributs dans des éléments: Voyons maintenant comment ajouter des attributs à ces éléments. C'est vraiment simple. Nous pouvons faire la même chose que dans le SDML Par exemple, nous voulons ajouter ici une propriété de valeur pour ce bouton. Nous ajoutons donc simplement ici une valeur égale à un bouton de tâche. Maintenant, désactivons ce bouton de manière dynamique. Ainsi, dans notre fonction, nous définissons une nouvelle variable appelée Hide button, égale à true. Maintenant, lorsque cette variable du bouton de hauteur est définie sur true, nous désactivons notre bouton at task. Nous écrivons donc ici disable equals to now to excess variable, nous ajoutons des crochets et passons ici le bouton Masquer Enregistrez ceci et voyez que notre bouton est désactivé. Et si nous réglons notre variable sur falls, notre bouton est incapable. C'est ainsi que nous utilisons des attributs simples et dynamiques à l'intérieur des éléments. Maintenant, permettez-moi de vous poser une question. Comment pouvons-nous transmettre un attribut de classe aux éléments ? Vous pourriez dire que la classe est égale à deux, et nous passons le nom de la classe ici, mais cela nous avertira. Enregistrons-les et ouvrons la console. voyez, nous recevons ici cet avertissement concernant la classe de propriété dom non valide, et cela nous donne également une suggestion : vouliez-vous dire le nom de la classe ? Dans JSX, nous devons utiliser l' attribut de nom de classe au lieu d'utiliser une simple classe. Mais pourquoi ? Donc, comme je vous l'ai déjà dit, cette expression JSX se convertit en un simple objet Javascript, et dans cet objet, si nous utilisons attribut de classe, et en JavaScript, mot-clé de classe déjà réservé. C'est pourquoi dans React, nous utilisons le nom de classe à la place de l'attribut de classe. Maintenant, un autre attribut important et différent est le style, qui était utilisé pour spécifier un style en ligne pour un élément Donc, dans le langage TML ordinaire, nous écrivons quelque chose comme ceci Le style est égal à, et en double code, nous écrivons nos styles, disons, de la couleur au rouge. Enregistrez ceci et C, nous obtenons une erreur, qui indique que nous devons utiliser des valeurs ici, pas une chaîne. Dans JSX, nous devons définir cet attribut de style sur un simple objet de script Ja, qui contient des styles En haut, nous créons un objet appelé styles égaux à object. Nous devons maintenant transmettre toutes les propriétés CSS en notation camel, ce qui signifie qu'à l'exception de la première lettre, chaque première lettre du nouveau mot est majuscule Par exemple, si vous souhaitez ajouter une couleur d'arrière-plan, nous écrivons un arrière-plan et un nouveau mot qui est couleur dont C et passons la valeur au rouge. Je sais que c'est un peu confus, mais ne vous inquiétez pas 99 % du temps, nous n'utilisons même pas ces styles intégrés Passons maintenant cet objet de styles dans cet attribut de style. Pour cela, nous ajoutons ici des crochets Cali car nous ajoutons du JavaScript et ajoutons ici l'objet Styles Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons ici ce fond rouge. Désormais, certains développeurs ne définissent pas cet objet séparément. Ils l'ajoutent directement entre crochets. Laisse-moi te montrer. Nous avons donc coupé cet objet d' ici et l'avons collé dans cet objet de styles. Ces deux premiers Calibackets sont donc destinés à accéder à JavaScript et pour le style, nous devons transmettre un objet, ce qui est un autre Calibacket qui rend ces styles en ligne très confus et C'est pourquoi nous n' utilisons généralement pas de styles intégrés dans JSX. Supprimons donc ces styles intégrés et supprimons également ces variables de styles 26. Événements dans React: Voyons maintenant comment définir ou gérer les événements dans React. La gestion des événements dans React est donc très similaire à la gestion des événements dans STML Tout d'abord, nettoyons notre composant, afin de supprimer cette constante, accepter cette tâche, de supprimer également cette fonction et de supprimer cet élément H un. Et entre celles-ci, nous passons la tâche calibracets à la tâche et supprimons également cette propriété de désactivation Parfait. Maintenant, comme je l'ai dit à Liu, tous les éléments réagissent sous forme d'événements basés sur des événements SGML Par exemple, nous voulons ajouter ici un événement de clic sur ce bouton sur le bouton Tâche. Nous avons donc ici un clic, nous avons également un double-clic. Ajoutez ici un événement de clic égal à et entre crochets C. Maintenant, pouvez-vous me dire pourquoi nous ajoutons ici des crochets ci ? C'est parce que nous devons ajouter ici une expression JavaScript. Dans ce cas, nous ajouterons une fonction qui s'exécute sur ce bouton. Maintenant, dans React, nous avons une convention de dénomination populaire pour la gestion des événements. Nous créons le nom de toutes les méthodes d'événements, en commençant par le handle. En regardant simplement le nom de la fonction ou de la méthode, nous pouvons dire que c'est pour gérer cet événement. Nous créons donc ici la fonction appelée HandleClick. Si nous gérons le double-clic, alors ce nom sera géré Double click. Notez que la plupart du temps, nous utilisons la notation CamelCase. Gérez donc la fonction de flèche cliquable, et dans cette fonction, nous enregistrons simplement les points de la tâche. Nous devons maintenant transmettre cette référence de fonction dans cet événement « on click ». Donc, ici, cliquez sur la poignée. Enregistrez les modifications et jetez-y un œil. Cliquez sur ce bouton et vous verrez que nous recevons un message de tâche. Maintenant, assurez-vous de ne pas appeler cette fonction, car si nous l' appelons ici, elle ne s'exécutera que lorsque ces composants seront affichés dans le navigateur. Maintenant, dans cette fonction, nous voulons incrémenter un certain nombre de tâches Donc, pour cela, nous devons d'abord donner à cette constante t car nous voulons réaffecter sa valeur Et dans notre fonction, nous écrivons simplement task plus plus ici. Enregistrez les modifications et jetez-y un œil. Cliquez sur le bouton Tâche, et vous pouvez voir que le nombre de tâches ne se met pas à jour sur la page, mais nous le recevons dans le message de tâche. Cela signifie que la fonction fonctionne correctement. Vérifions donc que la valeur de cette tâche augmente ou non. Donc, après ce message, nous ajoutons une virgule et ajoutons une variable de tâche Enregistrez cette page et supprimez cette page. Cliquez sur le bouton et vous verrez que les valeurs augmentent, mais cela ne se reflétera pas sur la page Web, et c'est le sujet de la prochaine leçon. 27. Qu'est-ce que l'État: Ainsi, dans la leçon précédente, nous avons vu que la valeur de notre tâche augmente, mais qu'elle n'est pas mise à jour sur dom. Ainsi, lorsque nous voulons afficher un changement sur notre dom, nous pouvons définir que cette variable, cet objet ou ce nous pouvons définir que cette variable, cet objet ou tableau est la variable JavaScript normale. Donc, pour afficher le changement sur dom, nous avons state dans React. Cet état nous permet de gérer et d'afficher les données changeantes dans notre application. Ainsi, lorsque nous définissons notre variable comme variable Javascript normale, React ne reflétera pas ces modifications si nous modifions la valeur de cette variable. Mais si nous définissons notre variable comme état, React reflétera ce changement si nous modifions la valeur de cette variable. Donc, en termes simples, state est utilisé pour indiquer à React quelle est cette variable, et si elle change, alors refléter ce changement sur le dom. Donc, comme nous le savons, React possède un DOM virtuel. Lorsque nous changeons l' état d'un composant, React récupère ce nouveau composant et compare ce nouveau composant avec l'ancien composant, puis ne reflète ces changements que sur le vrai dom. est aussi simple que ça. L'état est un concept très important de React, et de nombreux développeurs débutants ont du mal à comprendre ce concept, mais ne vous inquiétez pas, tous vos doutes mais ne vous inquiétez pas, tous vos doutes disparaîtront lorsque vous le verrez dans la pratique. Maintenant, vous vous demandez peut-être comment définir une variable en tant qu'état ? Donc, pour définir une variable en tant qu' état dans un composant fonctionnel, comment utiliser un crochet. Mais avant d'utiliser le crochet, voyons ce qu'est le crochet. 28. Introduction aux React Hooks: Alors, que sont les hameçons ? Les hooks sont les fonctions permettant d'utiliser certaines fonctionnalités de réaction dans des composants fonctionnels. En d'autres termes, nous pouvons dire que les hooks sont des fonctions qui permettent aux composants fonctionnels fonctionner comme des composants de classe. Je sais que cela semble un peu compliqué, mais ce n'est pas le cas. Comprenons avec cette histoire. Avant que React ne lance les hooks, il n'y avait qu'une seule façon d'utiliser méthodes d'état et de cycle en utilisant les composants de classe. Les développeurs ont eu quelques problèmes avec les composants de classe, tels que les classes sont un peu difficiles, en particulier pour ceux qui venaient de commencer à réagir. confusion avec ce mot clé, nous devons écrire tout standard encore et encore lorsque nous créons un nouveau React met donc un certain temps à développer des fonctions spéciales. Nous pouvons les utiliser dans un composant fonctionnel et ces fonctions spéciales sont appelées crochets. Je pense donc que vous comprenez maintenant ce que sont les hooks de réaction, qui sont des fonctions qui font fonctionner les composants fonctionnels comme des composants de classe. Et de nos jours, les hooks sont un concept très important de React , que chaque développeur de React doit apprendre. Dans la leçon suivante, nous verrons le premier crochet utilisé pour définir une variable en tant qu'état. 29. useState Hook: Définissons maintenant cette tâche en tant que variable d'état. Pour définir l'état, nous avons un crochet appelé use state, et c'est l'un des crochets les plus importants et les plus utilisés de React. Donc, pour utiliser n'importe quel hook, nous devons d'abord importer ce hook depuis la bibliothèque React. Le nom de tous les hooks commence par le préfixe use. Toutes les fonctions qui commencent par l'utilisation sont des React Hooks. En haut, après cette réaction, nous ajoutons une virgule et entre crochets Ci, nous importons l'état d'utilisation Maintenant, dans notre composant fonctionnel, nous appelons cela un crochet d'occasion. À l'intérieur de celui-ci, nous devons transmettre la valeur par défaut de la variable, qui est zéro car nous voulons définir la tâche comme zéro. Maintenant, cette fonction renverra un tableau. Stockons cela dans une variable appelée count array. Ensuite, consultons simplement ce tableau de comptage par points pour voir ce qu'il contient. Enregistrez les modifications et jetez-y un œil. Vous voyez, ce tableau comporte deux éléments. Le premier élément est notre valeur initiale, qui est zéro, et le second est une fonction. Laisse-moi te montrer. Donc, tout d'abord, nous stockons le premier élément, tableau d'index zéro, dans une variable appelée count. Et maintenant, affichons cette variable Tate sur la page Web. Donc, ici, je ne supprime pas cette variable normale car je veux vous montrer la différence. Nous dupliquons donc cette ligne en appuyant sur sift plus alter, plus flèche vers le bas sous Windows et Saft plus Opson plus flèche vers le bas Ce sont de petits trucs qui augmenteront votre vitesse globale Maintenant, à la place de cette variable de tâche, nous ajoutons ici le nombre. Enregistrez ceci et voyez que les deux se ressemblent. Voyons maintenant comment mettre à jour cette valeur d'état de comptage. Donc, pour mettre à jour la valeur de l'état, nous avons la fonction comme deuxième élément dans cet état d'utilisation. Revenons donc au code VS, et nous stockons ce nombre dans un deuxième élément, dans une variable appelée set count. Il s'agit de la convention de dénomination courante pour les États. Donc, valeur de l'état, nous avons appelé un nom de variable normal et fonction qui peut définir la valeur de cette variable, nous avions défini un préfixe pour le nom de cette fonction Par exemple, le nombre, le nombre défini, chargement, le chargement des ensembles, etc. Quelle que soit la valeur que nous transmettons dans cette fonction de comptage définie, ce sera la valeur de cette variable de comptage. Laissez-moi vous montrer ce que je veux dire. Ici, nous voulons augmenter ce nombre d'un lorsque nous cliquons dessus sur le bouton Tâche. Nous écrivons donc set count, et à l'intérieur de celui-ci, nous voulons la valeur actuelle, qui est count plus un. Ainsi, lorsque nous cliquons sur ce bouton, il obtient d'abord la valeur actuelle du compte, puis en ajoute un, et cette fonction de réglage du nombre définira cette valeur, qui est zéro plus un comme ce nombre, aussi simple que. Enregistrez les modifications et jetez-y un œil. Cliquez sur ce bouton et voyez que l'état du décompte augmente d'un, mais que les variables de tâche sont toujours les mêmes et que les tâches restent toujours égales à un. Pourquoi ? Parce que lors d'un changement d'état dans notre composant, des composants entiers sont rendus ou nous pouvons dire « exécuter à nouveau ». Et c'est pourquoi la tâche est toujours de rester concentré. Ne t'inquiète pas. Nous expliquerons ce rendu en détail dans la section à venir. Autre chose, si nous actualisons la page, ce décompte recommence à zéro car ici nous définissons la valeur par défaut comme zéro. Si nous passons ici cinq, puis en actualisant, nous arrivons à cinq. Supprimons maintenant cette variable de tâche et supprimons également cette balise actuan Maintenant, ici, notre code semble un peu moche car nous pouvons voir que pour créer une variable d'état, nous devons écrire trois lignes de code. Imaginez si nous avons trois à quatre variables d'état, alors à quel point notre code semble désordonné. Raccourcissons ce code en utilisant la déstructuration des tableaux. Laisse-moi te montrer. Je commente ces trois lignes et nous écrivons ici use state, et à l'intérieur de celles-ci, nous passons la valeur par défaut à zéro. Stockons cela dans une variable et à la place du nom de la variable, nous ajoutons des crochets et à l'intérieur de ceux-ci, écrivons d'abord le nom de la première variable, qui est count, puis écrivons le nom de la fonction, qui est set count. Cette seule ligne fonctionne de la même manière que ces trois lignes, ce qui rendra notre code propre et facile à maintenir. Récapitulons cela avec Use TT Hook. Le tt utilisé est utilisé pour créer des variables d'état dans un composant fonctionnel. Pour utiliser le hook utilisé, nous devons d'abord l'importer et l'utiliser dans le composant fonctionnel. Ici, nous pouvons transmettre n'importe quel type de données, comme des données booléennes, numériques, textuelles, objets, tableaux, etc., puis les stocker à l'aide de la déstructuration des tableaux La première variable est sa valeur actuelle, et la seconde est la fonction de mise à jour de cette valeur. C'est aussi simple que ça. Je sais que certaines personnes sont un peu confuses ici. J'étais également confuse quand j'ai appris que j'utilisais ce crochet pour la première fois. Mais avec la pratique, j'ai appris ce concept et je l'ai utilisé dans mes projets. 30. Gérer les entrées des utilisateurs: Maintenant, dans notre application, nous devons souvent prendre en compte les commentaires des utilisateurs. Par exemple, si l'utilisateur remplit un long formulaire ou si l'utilisateur écrit quelque chose dans la barre de recherche, nous devons obtenir cette valeur d'entrée dans notre composant. Créons donc une entrée avec du texte de type. Maintenant, lorsque nous écrivons quelque chose dans cette zone de saisie, nous voulons afficher cette valeur. Pour cela, nous adhérons à l'événement onchange, qui s'exécute chaque fois quelque chose change dans cette zone de saisie. Comme nous le faisons dans Vanda Javascript. Donc, dans cet événement de changement, nous avons eu une fonction appelée handle change. Définissons maintenant cette fonction. Donc const, handle change égal à, ici nous utilisons la fonction flèche Maintenant, nous voulons consulter le journal à points de la valeur entrée actuelle. Pour cela, nous devons passer ici l'objet d'événement, et cet objet d'événement contient diverses informations sur ce champ de saisie. Écrivez donc le journal de points CLG pcsle et ajoutez ici la valeur du point cible du point d'événement Cette expression renverra la valeur actuelle de cette zone de saisie. Enregistrez les modifications et jetez-y un œil, écrivez quelque chose et voyez ici que nous obtenons ces valeurs, donc cela fonctionne. Nous voulons maintenant afficher ce texte actuel sur notre page Web. Alors, devinez ce que nous allons vous donner un petit indice. Cette valeur actuelle est en train de changer, et nous devons afficher cette modification. Pouvons-nous utiliser des variables normales ? Non, alors qu'est-ce que nous allons utiliser ? C'est vrai, nous utilisons l'état d'utilisation. Maintenant, avant d'utiliser us state, supprimons ces trois lignes de code. Ce n'est pas ce que nous voulons. De plus, nous supprimons cette tâche plus et ce journal de points de console de la fonction HandleClick Maintenant, voici une dernière chose. Nous définissons toujours notre hook d'état d'utilisation en haut de notre composant fonctionnel, afin de pouvoir utiliser cet état dans l'ensemble de la fonction. Nous appelons donc ici use state, et à l'intérieur de celui-ci, nous transmettons notre valeur par défaut. Et pour la saisie, nous voulons le définir sur une chaîne vide. Maintenant, stockons cela dans une variable, et nous utilisons ici la restructuration du tableau, entrée et l'entrée des ensembles. Maintenant, dans cette fonction de changement de poignée à la place de ce journal de points de console, nous écrivons la fonction d'entrée set, simple as set. Maintenant, à la fin, affichons l'entrée actuelle. Ajoutez donc une autre balise h one et entrez dans l'entrée Ci Brackets. Enregistrez les modifications et jetez-y un œil, écrivez quelque chose ici et verrez immédiatement que nous obtenons la valeur actuelle. C'est ainsi que nous obtenons la valeur des entrées dans React. Ici, j'ai un petit bonus pour vous, et c'est le raccourci pour écrire cette ligne d'état d'utilisation. Il suffit donc d'écrire use state. Si ce n'est pas le cas, installez l'extension ES seven, que je vous ai demandé d'installer au début de ce cours. Sélectionnez-le et voyez ici que nous obtenons un modèle pour l'état d'utilisation. Ici, nous avons plusieurs curseurs, qui changeront ces deux noms. Écrivez donc la saisie et appuyez sur la touche Tab. Cela écrira automatiquement l'entrée définie dans Camel Case et transmettra ici la valeur par défaut, une chaîne vide, puis appuiera sur Escape, et notre nouvelle variable d'état sera prête C'est la beauté de des extension. J'espère donc que cette astuce vous plaira. Dans la leçon suivante, nous verrons comment afficher une liste et comment réagir. 31. Listes de cartographie: Voyons maintenant comment afficher la liste des tableaux dans React Par exemple, nous créons ici un tableau appelé tâche, et pour le moment, nous ajoutons simplement ici Tâche 1, Tâche 2 et Tâche 3. Maintenant, nous devons afficher chaque tâche sur notre page Web comme ceci. Nous ajoutons une liste non ordonnée, et à l'intérieur de celle-ci, nous ajoutons trois éléments de liste Nous devons le faire en utilisant la méthode de la carte. Ici, nous devons ajouter des calibrackets, car nous allons ajouter ici une expression JavaScript Donc, task point MAP et à l'intérieur de celui-ci, nous obtenons chaque fonction de flèche de tâche, et maintenant nous renvoyons simplement ici JSX, qui est un élément de liste Permettez-moi de vous expliquer ce qui se passe ici. Ainsi, lorsque nous utilisons la méthode map dans cette tâche unique, nous obtenons d' abord cette tâche. Nous devons donc afficher cette chaîne de tâche ici entre cet élément JSX Encore une fois, nous utilisons des crochets pour accéder à l' expression Javascript dans JSX, et nous passons ici cette tâche. C'est aussi simple que ça. Maintenant, ajoutons ici notre sous-liste, et à l'intérieur de celle-ci, nous allons déplacer les éléments de notre liste. Enregistrez les modifications et jetez-y un œil. Voyez ici que nous obtenons cette liste avec tous les articles. Si vous avez des doutes sur la méthode map, vous pouvez à nouveau regarder leçon de méthode MP dans le rafraîchisseur JavaScript Maintenant, voici un petit problème. Dans notre console, nous obtenons cette erreur. Chaque enfant d'une liste doit avoir un accessoire clé unique. La raison pour laquelle nous recevons ces erreurs est que nous devons identifier de manière unique chaque élément de cette liste car si quelque chose change dans l'un de ces éléments de liste dans le dom virtuel React doit identifier rapidement quel élément a changé, et en fonction de cela, React doit mettre à jour le vrai dom. Revenons donc au code VS, et souvenez-vous toujours que lorsque nous utilisons la méthode MP dans React, nous devons transmettre une clé unique pour renvoyer l'élément. Nous écrivons donc ici la clé, et ici nous devons transmettre une valeur dynamique unique, qui est cette chaîne de tâches. Nous nous contentons donc de confier cette tâche. Ici, nous utilisons cette chaîne de tâche, mais dans une application réelle, chaque objet de tâche possède un identifiant unique, et à ce moment-là, nous passons un identifiant de point de tâche. Ne t'inquiète pas pour ça. Nous le verrons également dans les sections à venir. Notez également que cette clé doit uniquement être unique dans cette liste actuelle. Cela ne signifie pas que vous ne pouvez plus afficher cette liste dans cette application, d'accord ? Enregistrez les modifications, actualisez la page et voyez que l'erreur a disparu. C'est ainsi que nous cartographions la liste dans React. Alors félicitations. Vous avez exécuté avec succès les concepts de base de React. Maintenant, en utilisant ces concepts, nous allons construire notre premier projet. Je suis très enthousiaste à ce sujet et j'espère que vous l'êtes aussi. Rendez-vous donc dans la section suivante. 32. Section 04 Créer votre premier projet dans React: Bienvenue dans la quatrième section du cours Ultimate React. Dans cette section, nous allons créer notre première conception d' application React dans laquelle nous verrons comment le développeur pense avant de commencer à développer l'application et comment décider composants à créer dans notre projet. Dans cette section, nous n' ajouterons aucune fonctionnalité à notre projet. Nous nous concentrerons uniquement sur la création de composants et d'UIP. Je suis vraiment enthousiasmé par ce projet et j' espère que vous l'êtes aussi, car ce type de projet est un excellent point de départ pour tous les débutants de React. Plongeons-nous donc dans ce projet. 33. Aperçu et planification du projet: Tout d'abord, permettez-moi de vous donner un bref aperçu de ce projet appelé task Track. C'est un joli nom, non ? L'objectif de base de cette application est de réduire la tâche. Voici donc à quoi ressemble notre application lorsque nous n'avons aucune tâche. Ensuite, pour ajouter une tâche, nous l'écrivons dans cette zone de saisie. Ensuite, nous sélectionnons les balises que nous voulons, et nous pouvons également les désélectionner, puis en utilisant cette liste déroulante, sélectionner la catégorie de tâche à effectuer ou à terminer Ensuite, nous ajoutons une tâche. Et dès que nous cliquons dessus sur le bouton Tâche, sans actualiser la page, notre tâche s'affiche ici. Nous pouvons même ajouter plusieurs tâches, et si nous n'en avons pas besoin , nous pouvons supprimer cette tâche individuelle. C'est donc un très bon projet, que vous pouvez également ajouter à votre CV ou à votre portfolio. Maintenant, avant de commencer à construire un projet, j'aime personnellement planifier le processus de création du projet. Et avec un plan, nous pouvons économiser beaucoup de temps et d'efforts. C'est le secret pour lequel je crée des projets rapidement et sans écrire, j'utilise du code. C'est tout à fait normal si vous ne voulez pas suivre ce processus ou si vous pouvez créer votre propre processus. Permettez-moi donc de vous dire ce que je pense de la création du projet at. Tout d'abord, nous allons créer les parties SDML et CSS de l'application, ce qui signifie à quoi ressemble notre application sans aucune fonctionnalité Maintenant, une fois que notre conception est prête, nous passons à la partie fonctionnelle, ce qui signifie que si nous cliquons sur Ettask, la tâche ajoutera sections ou supprimera une tâche, etc. Ici aussi, nous pouvons définir certains composants. Par exemple, nous avons ici cette conception technique identique pour de nombreux endroits, et c'est le seul élément. Ensuite, nous avons le composant à carte unique. Le squelette de toutes les cartes est le même. Il suffit de modifier les détails, et c'est notre autre composant. Ensuite, nous avons le même design pour ces trois sections. Pareil, nous devons simplement modifier les données qu'il contient, mais le squelette est le même, c' est-à-dire un autre composant. C'est ainsi que nous pouvons deviner les composants du projet Rag Mais ne t'inquiète pas pour ça. Nous pouvons également le comprendre lors de la conception de notre projet. Il vous suffit de trouver un design et nous pouvons le fabriquer en tant que composant. peux voir les composants en regardant simplement le design, car je m'entraîne dans de nombreux projets React, et avec de la pratique, vous y arriverez également. Ne vous inquiétez donc pas pour ces choses commençons à construire notre premier projet. 34. Créer la mise en page du site web: Donc, tout d'abord, nous allons créer la mise en page de base, ou nous pouvons dire le squelette de notre application. Notre page Web est donc divisée en deux sections, l'en-tête et la principale. Et dans la section principale, nous avons trois sous-sections. Créons donc cette mise en page. Revenons donc au code VS, et tout d'abord, nous allons réinitialiser tous les CSS prédéfinis, tous les éléments, car nous savons qu'une marge et rembourrage sont déjà ajoutés par le navigateur à certains éléments Nous devons le supprimer. Dans le fichier CSS à points d'index, nous supprimons tous les styles prédéfinis et nous ajoutons étoile pour tous les éléments contenus dans ce premier, nous fixons la marge à zéro et le rembourrage à zéro Et de la taille de la boîte à la bordure. Ce sont tous des concepts CSS que je pense que vous connaissez déjà. Enregistrez ce fichier, puis dans le fichier JSX app point, qui est notre composant racine, nous supprimons tout le code et nous écrivons RAFC pour ajouter le code standard. Dans le fichier JSX app point, nous ajouterons les composants de nos applications car il s' agit du point d'entrée principal pour la hiérarchie des composants des applications Maintenant, tout d'abord, dans ce DU, nous ajoutons une balise d'en-tête pour notre sélection d'en-tête. Et donnez-lui un nom de classe, un en-tête de soulignement de l'application. N'oubliez pas que nous devons utiliser nom de la classe à la place de la classe. R, ici j'utilise SnAccSE pour écrire toutes les classes CSS. Tu peux utiliser ce que tu veux. Ensuite, nous ajoutons une balise principale pour notre section principale et passons nom de la classe à l'app underscore main Maintenant, dans cette section principale, nous voulons ajouter trois sections. Nous écrivons donc une section et ajoutons le nom de la classe dans la colonne de tâches, et nous dupliquons ce score deux fois de plus. Donc, dans ce dé, nous ajoutons ici le nom de la classe à l'application, et c'est tout. Ajoutons maintenant du CSS pour cette mise en page. En haut, nous importons les codes, les périodes pour le dossier en cours et le code CSS des points d'application. C'est une étape que presque tous les débutants ou même les développeurs expérimentés ont oublié d'ajouter. Avant d'ajouter du CSS à un composant, assurez-vous de saisir ce fichier CSS haut du composant, car sans cela, notre CSS ne s'appliquera pas. Enregistrez ce fichier, et maintenant ouvrons le fichier CSS app point. Et enlevons toutes ces tuiles. Nous n'en avons pas besoin. Et en haut, nous sommes dans l'application, et à l'intérieur, nous devons simplement la diviser en sections. Pour cela, nous utilisons l'affichage cred so write pour et noter les lignes du modèle car nous voulons définir lignes de 150 pixels pour section d'en-tête et automatique pour la section principale Enregistrez ce fichier, et nous verrons ce que nous obtiendrons. Oh, désolé, nous avons oublié d'ajouter notre composant d'application en tant que composant racine. Donc, dans le fichier JSX principal à l' endroit de cette création nous écrivons l'application et supprimons également ces deux importations Nous n'en avons plus besoin. Enregistrez les inges et nous obtenons ici juste un en-tête car nous n'avons rien ajouté dans notre balise principale Revenons donc au code VS. Et dans la section de la colonne des tâches, nous avions la section 1. Ensuite, section deux. Et la section trois. Enregistrez les modifications et voyez, nous avons ici ces trois sections dans la section principale. Nous voulons maintenant afficher cette section de tâches une par une en colonne. Pour cela, nous utiliserons donc du lin. Dans le fichier CSS à points de l'application, nous soulignons le principal contenu à l'intérieur de ceux-ci, nous écrivons un drapeau d'affichage pour ApplyFlexBX, et également pour définir Ensuite, nous avons défini le contenu de justification sur un espace uniforme pour aligner ces sections. Et nous ajoutons également un peu de rembourrage à 20 pixels pour le haut en bas et à 8 % pour la droite et la gauche Enregistrez les modifications et jetez-y un œil. Tu vois, ici, nous avons notre section au centre. Vérifions-le à l'aide d'Inspect. Cliquez donc avec le bouton droit sur cette section et passez à l'inspection. Voyez ici que notre section est au centre. Nous voulons maintenant que cette section soit suffisamment grande pour qu'elle couvre l'espace. Nous ajoutons donc une nouvelle colonne de tâches de classe et nous définissons la largeur à 333 %. Pour l'instant, ajoutons de la couleur de fond à la tomate. Enfin, nous ajoutons une marge de 20 pixels. Enregistrez les modifications et jetez-y un œil. Voir ici notre section couvre la largeur. Dans la leçon suivante, nous allons créer notre formulaire d'en-tête. 35. Créer un composant de formulaire de tâche: Comme nous le savons, React fonctionne selon une approche basée sur les composants. Et ici, dans notre application, nous n'avons créé aucun composant. Commençons donc par notre premier composant pour notre formulaire de tâches. Avant cela, supprimons ces deux composants. Nous n'en avons pas besoin. Et nous créons un nouveau composant appelé taskfm JSX. Bien. Maintenant, dites-moi ce que nous faisons en premier dans le composant. C'est vrai. Nous avions un modèle standard en utilisant le RAFC Ouvrez maintenant le fichier JSX de l'application. Placez cette balise d'en-tête et collez-la dans notre composant de formulaire de tâches. Maintenant, à la place de ce texte d'en-tête, nous voulons d' abord ajouter un formulaire. Et dans ce formulaire, nous ajoutons d'abord une entrée avec du texte de type et nous lui donnons un nom de classe pour souligner la tâche, ainsi qu'un espace réservé pour saisir votre Maintenant, après cela, nous devons ajouter une balise DV avec le nom de la classe au formulaire de soulignement de la tâche, au bas du trait de soulignement et à la ligne de soulignement Ensuite, nous devons ajouter quelques boutons de tag. Nous ajoutons donc un bouton avec le tag de nom de classe. Et à l'intérieur de celui-ci, nous transmettons du HTML. Maintenant, dupliquons cette ligne trois fois de plus et changeons ce texte en CSS. Après cela, Ja script. Et réagis. Je vais un peu plus vite pour cette partie de conception et de CSS car il s'agit de notre langage STML et CSS simples Je pense que tu connais déjà ces styles. Je peux vous donner tous les styles, mais ce n'est pas juste car si vous travaillez dans React, vous devez également écrire du STML et du CSS Ensuite, nous avons sélectionné l'entrée pour liste déroulante et ajouté le nom de la classe au statut de soulignement de la tâche Et à l'intérieur de celles-ci, nous ajoutons une balise d'option avec la valeur todo et des balises d'affichage pour todo Deuxième option : valez la valeur à faire, et passez ici également à faire. Et la troisième valeur de l'option est à effectuer, et ici également terminée. Enfin, nous ajoutons un bouton avec le nom de la classe type submate à tâche underscore submate et nous écrivons ici et sur task. Enregistrez ce fichier. Et maintenant, affichons ce composant dans le composant de l'application. Donc, un fichier JSX par point d'application, et nous ajoutons simplement ici un crochet angulaire, formulaire de tâche et le code C VS suggère automatiquement ce composant Sélectionnez cette option et appuyez sur Entrée ou Tab pour voir notre composant importé automatiquement en haut Maintenant, assurez-vous de fermer cette balise de composant. Dans le cas contraire, nous aurons une erreur de compilation. Nous pouvons utiliser ici un élément à fermeture automatique. Bien, enregistrez les modifications et jetez-y un œil. Tu vois, nous avons ici notre formulaire. Dans la leçon suivante, nous allons ajouter des styles pour ce composant de formulaire. 36. Ajouter des styles pour les composants de forme: Ajoutons donc des styles pour ce composant de formulaire. Donc, pour ajouter des styles, nous créons ici un nouveau fichier appelé taskform point css Vous vous demandez peut-être pourquoi nous devons créer un fichier séparé pour ce composant ? Pouvons-nous ajouter les styles dans le fichier CSS app point ? Et la réponse est oui. Nous pouvons ajouter des styles dans le fichier CSS à points de l'application, et c'est ce que font certains développeurs, mais ce n'est pas une bonne approche car nous n' avons actuellement qu'un seul composant, mais imaginez si nous avons cinq à dix composants et que nous ajoutons tous nos styles dans le même fichier, pour changer les styles particuliers, nous devons trouver le CSS dans ce seul fichier, et ce sera difficile et aussi stressant. C'est pourquoi nous définissons les styles de chaque composant dans un fichier CSS distinct. Commençons donc par importer les codes périodes taskfm point CSS Enregistrez-les et examinons les styles dans ce fichier. Tout d'abord, nous voulons placer tout ce formulaire au centre. Nous ajoutons un en-tête de soulignement de l'application et à l'intérieur de celui-ci, nous définissons d' abord l'affichage de deux drapeaux et nous alignons les éléments au centre, ce qui placera notre formulaire au centre verticalement et justifiera que le contenu soit également centré, ce qui placera notre formulaire horizontalement au centre Enfin, nous ajoutons le fond de l'eau à un pixel solide contenant du DC DC DC. Enregistrez ceci et jetez-y un œil. C, notre formulaire est au centre. Ajoutons maintenant des styles pour cette zone de saisie. La tâche par points souligne donc les entrées. Et entre crochets Gully, taille de police de 20 pixels, poids de police de 500 pixels, couleur de fond F 9f9f9, couleur d' eau noire d'un pixel, solide et couleur d'un DF E trois, E six Ensuite, le rayon de l'eau passe à cinq pixels, rembourrage à huit pixels et 12 pixels, marge inférieure à 15 pixels et la largeur à 100 % Enregistrez ceci et voyez comment la saisie est prête. Nous voulons maintenant agrandir ce formulaire. Nous ajoutons donc ici l' en-tête point app underscore, le crochet angulaire, formulaire cible, et à l'intérieur de celui-ci, nous définissons sa largeur à 40 % Enregistrez ceci et voyez que la largeur de notre formulaire est bonne maintenant. À présent, définissons les styles des balises. Mais avant cela, nous devons séparer ces balises avec cette liste déroulante et ajouter le bouton Tâche. Ainsi, dans le composant du formulaire de tâche, nous enveloppons toutes ces balises avec une balise Dv et nous enveloppons une autre partie avec un autre div Enregistrez ce fichier, et dans le fichier CSS taskfm, nous ajoutons la ligne inférieure du formulaire de tâche Et entre crochets, suffit d'ajouter DF et C, cela suggère des drapeaux d'affichage. Ce sont de petites astuces que j'ai apprises en créant de nombreuses applications. Ensuite, nous ajoutons des éléments d' alignement au centre et justifions le contenu par un espace entre les deux. J'ai vu ceci et nos tags, et ces deux sont séparés. Maintenant, définissons le style des balises. Nous écrivons donc tag et entre crochets, nous ajoutons d' abord la taille de police à 14 pixels, le poids de police à 500, la couleur de fond, deux F neuf, F neuf, la bordure, un pixel, le solide a DFE trois, E six, rayon de bordure à cinq pixels, puis ajoutant deux pixels pour haut en bas et dix pixels pour la gauche à droite, marge droite à dix pixels et le curseur au pointeur Enregistrez les gènes et jetez-y un œil. Vous voyez, voici nos styles de texte. Définissons maintenant le CSS pour le menu déroulant. Nous soulignons donc le statut des tâches. À l'intérieur de celui-ci, nous ajoutons la taille de police à 16 pixels, le poids de police à 500 wer pour un pixel, solide a un rayon de 999 Bader pour cinq pixels Ensuite, largeur à 120 pixels, hauteur à 40 pixels et remplissage à zéro et cinq pixels Enregistrez ceci et voyez qu'une liste déroulante est également prête. Maintenant, dernier style pour ce bouton d'envoi. Revenez donc au code VS et écrivez le point Task underscore submit. Et à l'intérieur de ce dernier, une taille à 16 pixels, un poids à 500, couleur de fond, deux ont 64 57f9 Couleur sur blanc, soit F, rayon d'eau jusqu'à cinq pixels, hauteur jusqu'à 40 pixels. Ensuite, le remplissage à trois pixels divertit le pixel, marge gauche à dix pixels, la bordure à zéro et le curseur au pointeur Ce sont des styles très basiques. Je ne veux pas vous faire perdre votre temps précieux en vous expliquant ces styles. S'il existe des styles importants, je vais sûrement vous l' expliquer. Enregistrez les modifications et regardez ici, nous zoomons un peu et voyons maintenant que notre formulaire est plutôt beau. Juste une chose. Je souhaite modifier la couleur de cet espace réservé car il semble un peu sombre Revenons donc à Aced. Et après ce style de saisie, nous ajoutons un point, un trait soulignement, un double point, un espace réservé Et à l'intérieur des crochets, nous ajoutons de la couleur à un 686868 Gardez les franges et jetez-y un coup d'œil. Tu vois maintenant, ça a l'air sympa. 37. Créer un composant de tag: Ainsi, dans la leçon précédente, nous avons créé notre composant de formulaire, et dans ce composant, nous pouvons voir que nous avons cette balise de bouton, que nous utilisons plusieurs fois. De plus, lorsque nous créerons une carte de tâche, nous utiliserons également ce bouton de balise. Il est donc préférable de stocker une seule étiquette dans un composant différent. Copions donc cette balise à bouton unique. Et dans ce dossier de composants, nous créons un nouveau composant appelé tag point Jx write RAFC for Maintenant, il suffit d'appuyer sur ce bouton. Maintenant que nous créons un nouveau composant pour cette balise, allons également créer un fichier séparé pour son CSS. Nous créons un autre fichier appelé tag point css, et comme nous le savons, avant d'écrire du CSS, nous devons l'importer dans ce composant. Importer la balise de période (point) CSS. Enregistrez ce fichier. Bien. Ouvrez maintenant le fichier CSS taskfmt Et nous avons découpé ce style de texte à partir d'ici, enregistré et nous l'avons collé dans notre fichier CSS tag point. Sauvegardez ceci. Maintenant, ajoutons ce composant de balise dans le composant tâche à la place des boutons de balise. Nous écrivons donc un crochet angulaire, étiquette et sélectionnons la suggestion automatique. Il saisira automatiquement le composant de balise. Maintenant, nous pouvons supprimer tous ces boutons et dupliquer ce composant technique trois fois de plus. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons ici ce bouton à quatre balises STML. Maintenant, vous vous demandez peut-être comment pouvons-nous modifier le texte du bouton ? Et c'est le sujet de la prochaine leçon. 38. Accessoires dans React: Voyons maintenant comment modifier le nom de ce bouton de balise. Pour cela, nous avons le concept d'accessoires dans React. Alors, tout d'abord, qu'est-ce que les accessoires ? Les props représentent les propriétés, et les props sont des arguments transmis aux composants de réaction En termes simples, les accessoires sont utilisés pour transmettre une variable dans les composants de réaction Voyons cela dans la pratique. Maintenant, tout d'abord, fermons tous les fichiers en cliquant le lien droit sur le nom du fichier et en sélectionnant Tout fermer. Ouvrons maintenant notre composant de formulaire de tâches. Si vous vous demandez comment j' ouvre ces fichiers, appuyez simplement sur Ctrl plus P ou Commande plus P et ici, le nom du fichier que nous voulons ouvrir et appuyez sur Entrée. voyez, sans utiliser de souris, nous pouvons ouvrir les fichiers, et ce sont de petites astuces de productivité utilisées par les développeurs Nous voulons maintenant transmettre un nom de balise différent pour ce composant de balise. Ainsi, ici, lorsque nous ajoutons des attributs dans les éléments SDML, nous pouvons également ajouter des attributs dans le composant Nous passons donc le nom égal à, et ici nous voulons transmettre le nom du tag. Nous ajoutons donc des codes, et à l'intérieur de ceux-ci, nous ajoutons du SDML. Ici, je tiens à clarifier une chose. Nous pouvons donner n'importe quel nom à cet attribut. C'est entièrement de notre faute. Par exemple, ici, nous pouvons transmettre le nom du tag ou quoi que ce soit d'autre. Et en utilisant ce nom d'attribut, nous accèderons à cette valeur dans ce composant. Je sais que c'est un peu confus, mais ne vous inquiétez pas, regardez cette leçon complète et tous vos doutes seront dissipés. Pour l'instant, commentons ces trois autres balises, sélectionnons-les et appuyons plus barre oblique ou Commande+barre oblique Ici, nous transmettons notre attribut. Voyons maintenant comment accéder à cette valeur d'attribut dans notre composant. Enregistrez ce fichier et ouvrez le fichier tag point JSX. Pour accéder à la valeur des props, nous pouvons simplement passer ici les props en paramètre sur cette fonction de composant Cet accessoire est un objet, qui contient toutes les valeurs de l'attribut que nous avons définies dans le composant technique Nous nous contentons donc de consoler les accessoires Dot Log et d'ajouter ici des accessoires. Enregistrez les modifications et jetez-y un œil. Ouvrez la console, et voyez, nous obtenons ici cet objet, qui a la propriété tag name et sa valeur. Maintenant, imprimons cette valeur pour notre bouton de balise. Ici, à la place de ce code HTML, nous ajoutons des crochets parce que nous écrivons une expression JavaScript, et à l'intérieur de celle-ci, nous écrivons props point tag Name Sauvez les gangs et voyez, nous avons le SGML. Ajoutons maintenant trois autres tags. Revenons donc à notre composant et nous supprimons les commentaires des balises en utilisant Control plus slash ou Command plus slash Et ici, nous passons le nom du tag au CSS. Ensuite, ajoutez le nom du tag à JavaScript, et enfin le nom du tag à Ra, enregistrez les modifications et jetez-y un œil. voyez, ici, nous obtenons ces balises avec un nom de balise différent, et c'est ainsi que nous transmettons les attributs aux composants. Récapitulons rapidement tout ce qui concerne les accessoires. Les accessoires sont un moyen de transmettre des données d'un composant parent à un composant enfant Dans notre cas, le formulaire de tâche est notre composant parent et balise qui se trouvent à l'intérieur de ce composant parent, nous l'appelons un composant enfant et nous voulons transmettre des données du taskfm au composant tag Nous passons simplement l'attribut du nom du tag, et ici nous passons la valeur de la chaîne. Mais nous pouvons également transmettre des tableaux, des objets ou même des fonctions dans les accessoires Ensuite, pour accéder à la valeur de ces accessoires, nous ajoutons le paramètre props dans cette fonction de composant et nous intégrons nos données dans ce composant enfant, c'est aussi simple que 39. Créer un composant de liste de tâches: Construisons maintenant chaque colonne de la liste de sortie. Ici, nous pouvons voir que dans notre design, ces trois colonnes sont liées l'une à l'autre. Il suffit de changer le titre de la colonne et Imoge. Mais la structure de toutes ces colonnes est la même. Nous pouvons créer un composant pour la colonne, puis le réutiliser. C'est ce à quoi nous devons penser lorsque nous travaillons sur React, car React est basé sur la structure des composants. Créons un nouveau composant appelé task Column point JSX. À l'intérieur de celui-ci, nous ajoutons du passe-partout et dans le fichier JSX de l'application, nous coupons simplement cette section de colonne de tâches et la collons dans notre Maintenant, tout d'abord, dans cette colonne, nous voulons ajouter un titre. Nous créons donc has to tag, et nous écrivons pour faire. Maintenant, comme nous le savons, nous avons ici une image. Ouvrez donc le dossier des ressources, et à l'intérieur de celui-ci, nous avons le dossier Assets. Il suffit maintenant de faire glisser toutes les images de ce dossier et de les déposer dans le dossier des actifs du projet. Voyons maintenant comment ajouter une image dans React car c'est un peu différent de ce que nous faisons dans SDML Nous ajoutons donc une balise d'image dans cette balise ST, et ici nous ne pouvons pas ajouter chemin d'image relatif. Cela ne marchera pas. Donc, pour ajouter une image, qu'elle soit JPG, PNG ou même SVG, nous devons d'abord importer cette image en haut Comme nous le savons, React utilise un bundler comme webpag pour regrouper tout le code et actifs utilisés dans Et lorsque nous saisissons un fichier image dans notre composant, bundler sait qu'il faut inclure l'image dans le bundle C'est pourquoi nous devons importer une image. Nous écrivons donc en haut : «   Importer todo », à partir de là, nous accédons à un dossier dans les actifs et nous importons directement au format PNG. Maintenant, dans cette source d'image, nous ajoutons des calibracets et ajoutons notre Maintenant, vous vous demandez peut-être ce qu' il y a à l'intérieur de ce studio ? Ce n'est donc rien d'autre qu'un chemin de notre image placé par bundle. Laisse-moi te montrer. Donc, avant le retour, il suffit de consulter le journal à points ce studio, d'enregistrer les modifications et d'y jeter un œil Oh, ça a l'air massif. Donc, tout d'abord, supprimons cette console d'accessoires. Ouvrez le fichier tag point jsx et supprimez cette ligne de journal point de console Enregistrez les modifications et nous n'obtiendrons rien car nous devons ajouter notre composant de colonne de tâches dans notre composant d'application. Revenons au code VS et dans notre composant d'application, nous ajoutons un composant de colonne de tâches et voyons comment l'importation fonctionne. Enregistrez les modifications et jetez un œil et voyez ici le chemin de notre image. De plus, nous pouvons directement ajouter une URL dans la source, mais c'est ainsi que nous ajoutons des images locales dans React. Ajoutons maintenant du style à cette image et à ce titre. Ainsi, dans cette balise d'image, nous ajoutons le nom de la classe à l'icône de la colonne de tâches. De plus, pour cet en-tête, nous ajoutons le nom de la classe à l'en-tête de la colonne de tâches. Enregistrez ce fichier et créons un fichier séparé pour nos styles de colonnes de tâches appelé taskcolumn point CSS La raison pour laquelle nous lui donnons toujours le même nom que le nom notre composant, car il suffit de regarder le nom du fichier savoir que ce fichier contient le code CSS de ce composant de colonne de tâches. Commençons donc par importer le fichier CSS à points de colonne de tâches en haut de notre composant. Sauvegardez ceci. Et maintenant, ajoutons du CSS. Donc, tout d'abord, nous voulons réduire la taille de notre image. Nous écrivons donc l'icône de la colonne des tâches. Et à l'intérieur, nous écrivons la largeur jusqu'à 30 pixels de marge, nous écrivons jusqu'à cinq pixels. Ceux-ci et notre icône sont parfaits. Mais ce texte et cette icône ne sont pas centrés verticalement. Et aussi, supprimons ce fond de tomate. À l'en-tête de la colonne Task, et à l'intérieur de ces crochets Cully, nous ajoutons deux drapeaux et alignons les éléments au centre Enregistrez ceci et supprimons cet arrière-plan de tomate du fichier CSS app point. Ouvrez donc ce fichier et supprimez cette propriété d'arrière-plan. Enregistrez les modifications et jetez-y un œil. Vous voyez maintenant que notre titre est joli. Remplaçons maintenant ces deux sections par notre composant de colonne de tâches. Rendez-vous donc dans le fichier GSX de l'application point et nous supprimons ces deux sections Et ajoutez simplement deux autres composants de colonne de tâches. Dites les modifications et jetez-y un coup d'œil. Tu vois, nous avons trois sections. Maintenant, voici un petit exercice pour vous. Nous devons simplement changer le titre de ces deux colonnes. Ne vous inquiétez pas si vous modifiez cette image. Essayez simplement de modifier ces rubriques. 40. Solution de cet exercice: J'espère donc que vous allez résoudre cet exercice. Et si vous ne pouvez pas résoudre ce problème, ne vous inquiétez pas, essayez au moins. Et c'est ce qui compte. Voyons maintenant la solution de cet exercice. Ici, nous devons utiliser des accessoires car nous voulons transmettre des données du composant parent au composant enfant Nous passons donc ici les accessoires, le titre à Tudo en second, le titre à faire et le dernier titre à terminer Enregistrez ce fichier et accédons à ces accessoires dans le composant de la colonne de tâches Dans cette fonction de composant, nous passons des accessoires en tant que paramètre, et nous remplaçons simplement ce todo par des crochets et Supprimons donc cette console. Nous n'en avons pas besoin, enregistrez les modifications et jetez-y un œil. Tu vois, on obtient des titres. Alors maintenant, je pense que vous comprenez clairement comment utiliser les accessoires. Voyons maintenant comment modifier ces icônes. Pour cela, nous utilisons également des accessoires. Laissez-moi vous expliquer la logique. Tout d'abord, nous saisissons les trois images dans ce composant de l'application. Nous allons utiliser cela comme accessoire. En haut, nous importons d'abord des icônes à partir de périodes, des actifs et des points de chaleur directs au format PNG. Ensuite, importez l'icône en cours à partir des ressources et des points étoilés lumineux au format PNG Enfin, nous importons l'icône De à partir des ressources et cochez le bouton en forme de point PNG. Passons maintenant ces icônes à l'aide d'accessoires. Ici, nous écrivons les icônes égales et nous utilisons des crochets. Peux-tu me dire pourquoi j'écris ? Parce que nous écrivons une expression JavaScript et que nous passons à l'icône do. De même, contre équivaut à faire Con après cela, contre équivaut à faire une icône. Enregistrez ce fichier. Et dans le composant de la colonne des tâches à la place de cette tâche, nous écrivons simplement props point C. Sauvez les gangs et jetez-y un coup d'œil Vous voyez, nous avons ici ces icônes. Vous pouvez voir à quel point il est simple de réagir. Au début, presque tous les développeurs avaient peur de réagir, même moi qui avais peur de réagir. Mais en pratiquant et en créant plus d'applications, nous apprenons à réagir rapidement. Donc, ne t'inquiète pas pour ça. Il suffit de mettre en pratique vos compétences, et avec cela, vous maîtriserez également React. Ici, dans notre composant, nous pouvons voir à quel moment nous voulons accéder à un accessoire, nous devons écrire ici le titre du point d'accessoire et l' icône du point d'accessoire Mais ça a l'air un peu moche. Nous pouvons donc utiliser la restructuration d'objets pour cela. Nous écrivons donc ici contre un objet égal à des accessoires. Et à l'intérieur de cet objet, nous passons simplement ici les noms de nos propriétés, notre titre et notre icône. Ou nous pouvons même les simplifier en ajoutant directement cet objet à la place de ces accessoires, les deux fonctionnent de la même manière Donc, le plus souvent, nous utilisons cette méthode, nous supprimons ces lignes, et aussi à la place de cette icône en forme de point d'accessoire, nous écrivons l'icône, et aussi ici, nous écrivons le titre Enregistrez les modifications, et cela fonctionnera comme avant. Maintenant, dans la leçon suivante, nous allons créer notre dernière partie de l'interface utilisateur, qui est la carte des tâches. 41. Créer un composant de carte de travail: Créons donc un nouveau composant appelé Tascardt JSX. Nous créons également un nouveau fichier CSS appelé Tascard point CSS Maintenant, dans notre composant de carte de tâches, ajoutons un modèle standard pour ce composant à l' aide de RAFC et en haut, nous importons simplement le fichier CSS nous importons simplement Nous n'avons donc pas à nous inquiéter à ce sujet. Ajoutons maintenant des éléments à cette carte. Ainsi, à la place de ce DU, nous pouvons écrire un article avec le nom de la classe et la carte de tâches. Vous pouvez également utiliser DU, mais j'aime utiliser des balises sémantiques Maintenant, à l'intérieur de celui-ci, nous créons d'abord un paragraphe pour ajouter les détails de la tâche et le nom de la classe au texte de soulignement de la tâche Et à l'intérieur de ceux-ci, nous écrivons simplement ceci un exemple de texte. Maintenant, dans la ligne suivante, nous avons besoin de texte sur le côté gauche et du bouton de suppression sur le côté droit. Nous en créons donc un dû ici avec nom de la classe, la carte des tâches, en fin de compte. Et à l'intérieur de celui-ci, nous ajoutons deux autres DUO avec le nom de la classe, les balises de la carte des tâches, et le second, le nom de la classe avec la suppression de la tâche. Maintenant, dans le premier du, nous ajoutons notre composant technique, voir quelle entrée ne fonctionne pas. Donc, en haut, nous saisissons le composant technique à partir du module tag. Et ajoutons ce composant dans notre carte. Maintenant, nous passons simplement ici des accessoires de nom, disons DML. Dupliquons cette balise et changeons le nom en CSS. Terminé. Ajoutons maintenant une image dans cette tâche de suppression. Et pour ajouter une image en haut, nous devons importer une image. Importez, supprimez l'icône de Go One Folder up Assets et supprimez le point PNG. Et dans la source de l'image, nous passons des crochets, une icône de suppression, ainsi que le nom de la classe à l'icône de suppression Enregistrez ce fichier, et maintenant ajoutons ce composant dans la colonne des tâches. Donc, l'un des composants de la colonne des tâches. Ici, après notre titre, nous ajoutons un composant de carte des tâches, et C now to Import fonctionne. Enregistrez les modifications et jetez-y un œil. E, nous trouvons ici nos éléments. Ajoutons maintenant des styles à cette carte. Notre carte ressemble donc à une vraie carte. Ainsi, dans le fichier CSS à points de la carte des tâches, nous écrivons la carte des tâches. Et entre crochets, nous ajoutons d' abord la largeur à 100 %, la hauteur moyenne à 100 pixels, la bordure à un pixel, solide a DC DC. Ensuite, rayon de bordure de dix pixels. Rembourrage à 15 pixels et marge à 15 pixels pour haut et le bas et zéro pour la gauche et la droite Ensuite, nous avons eu des styles pour le texte. Nous écrivons donc le texte de la tâche à point. Et dans les paquets cli, nous avions une taille de police de 18 pixels. Poids de la police : jusqu'à 600, marge inférieure à 15 pixels. Si vous sauvez les ficelles, je ne vois aucune différence à cause de cette icône géante. Ajoutons donc des styles pour cela. Nous ajoutons donc task underscore delete. Et à l'intérieur, nous écrivons une largeur allant de 35 pixels à une hauteur de 35 pixels. Rayon d'eau de 100  % pour compléter le cercle. Nous voulons maintenant placer l'icône de suppression au centre de celle-ci afin d' ajouter des drapeaux d'affichage, d' aligner les éléments au centre, de justifier le contenu, également de centrer, de placer le curseur sur le pointeur, et de passer à 0,3 seconde d'entrée et de sortie. C'est pour ajouter une petite animation fluide. Ajoutons maintenant l'effet Hover pour l'arrière-plan de l'icône. Donc, point task, soulignez la colonne dLate, survolez et nous voulons simplement changer la couleur d' arrière-plan. Deux ont IB, IB, Ib Maintenant, après cela, réduisons la taille de notre icône. Donc, supprimer l'icône par points. Et à l'intérieur, nous ajoutons une largeur de 220 pixels. Enregistrez les modifications et jetez-y un œil. Bien. Maintenant, nous devons créer ces deux divs en une seule ligne et les placer dans les coins gauche et droit Revenons donc au code VS, nous ajoutons ici une tâche à points, une carte, une ligne de bas de page. À l'intérieur, nous écrivons l' affichage sur les drapeaux, alignons les éléments au centre et justifions le contenu par un espace entre les deux. Sauvegardez-le et nous verrons obtenir notre carte. Maintenant, je vais vous montrer un petit truc que j'ai beaucoup utilisé. Actuellement, cette icône de suppression semble trop foncée. Dans l'icône de suppression CSS, nous ajoutons une opacité à 50 % Nous ajoutons également ici la transition : toutes les 0,3 secondes sont écoulées. Ensuite, nous ajoutons la tâche par points, le delt, l'appel au survol, l'espace, l'inclinaison des points, l'icône, et nous augmentons l'opacité à 80 % car nous voulons augmenter cette opacité des icônes lorsque quelqu'un Dites les modifications et jetez-y un coup d'œil. Tu vois maintenant, notre voiture est belle. Maintenant, à partir de la section suivante, nous commençons à ajouter des fonctionnalités à cette application, qui est l' objectif principal de ce cours. Je sais que j'écris du CSS un peu rapidement, mais c'est parce que nous sommes là pour apprendre à réagir. Si dans le cours React, nous apprenons le CSS, cela ne plaira peut-être pas à certains d'entre vous. De plus, j'écris d'abord ce CSS parce que je pratique cette application avant d'enregistrer ce cours. Donc, ne vous y trompez pas. Et si vous regardez ce cours en permanence, faites une pause de 10 à 15 minutes pour prendre l'air. Je vous verrai dans la section suivante. 42. Section 05 : ajouter des fonctionnalités dans le projet 1: Bienvenue dans la cinquième section du cours Ultimate React. Dans cette section, nous allons terminer notre premier projet, qui est l'application Sask Track Nous comprenons les bases des fonctionnalités, de gestion des formulaires, de la sélection de balises, puis de l'ajout de tâches en leurs propriétés, de l'implémentation de la fonctionnalité de suppression, et nous apprendrons également deuxième point le plus important de React, l'effet d'utilisation. Après avoir terminé cette section, votre confiance dans la création de l'application React augmentera. Je suis très enthousiaste à ce sujet et j'espère que vous l'êtes aussi. Passons donc à cette section. 43. Forme de la poignée: Maintenant, avant de commencer à ajouter des fonctionnalités à notre application, commençons par comprendre la logique de cette application. Donc, ici, d'abord, nous créons un ensemble de tâches qui ont toutes des tâches. Désormais, chaque tâche est un objet doté de trois propriétés. Tout d'abord, la tâche elle-même, après cela, nous avons le statut de la tâche, qui peut être effectuée, exécutée ou terminée. Et troisièmement, nous avons les textes, qui sont le tableau du texte sélectionné. Ainsi, lorsque l'utilisateur ajoute une nouvelle tâche, nous ajoutons un nouvel objet de tâche avec ces trois propriétés, puis nous les affichons dans la colonne des tâches, aussi simple que cela. Donc, tout d'abord, nous allons gérer ce formulaire. La manipulation du formulaire signifie ici que nous devons obtenir les valeurs saisies par l'utilisateur, telles que le texte, statut de la tâche et le texte sélectionné. Si nous n'avons pas ces informations, comment pouvons-nous les stocker ? Donc, lorsqu'il s'agit d'un composant de formulaire de tâches, vous souvenez-vous de ce que nous utiliserons pour obtenir les entrées des utilisateurs ? C'est vrai, c'est un State Hook d'occasion. Ici, en haut, nous saisissons UseTateHok et dans notre composant, en haut, nous créons variable d' état appelée task et définissons une tâche Par défaut, nous passons ici une chaîne vide. Maintenant, lorsque quelque chose change dans notre entrée, nous définissons simplement cette valeur dans cet état de tâche. Nous passons donc ici un événement appelé changement. Et à l'intérieur de cet événement, nous avons un objet d'événement, une fonction d'erreur, et ici nous appelons simplement set task. Maintenant que nous savons que quelle que soit la valeur nous transmettons dans cette fonction de tâche définie, ce sera la valeur de l'état de notre tâche, et la valeur du point cible. Maintenant, vérifions-nous si nous obtenons notre tâche ou non. Il suffit de consigner cette tâche par points sur la console. Enregistrez les gènes et jetez un œil, écrivez quelque chose dans cette zone de texte et voyez que nous obtenons la valeur d'entrée Maintenant, au lieu d'écrire cette expression ici, nous pouvons l'écrire dans une fonction séparée. Nous passons donc ici le nom de la fonction, gérons le changement de tâche. Et à l'intérieur de celui-ci, nous passons cet objet d'événement. Définissons maintenant cette fonction. Donc, const handle task change équivaut à ici nous obtenons notre objet d'événement, que nous transmettons à partir d' ici, la fonction flèche, et à l'intérieur de celui-ci, nous définissons la valeur du point cible de la tâche sur l'événement Enregistrez les modifications et voyez, cela fonctionne comme avant. Nous pouvons écrire ce code dans les deux méthodes. Maintenant, nous pouvons même raccourcir ce code. À la place de cette expression dans React, nous pouvons directement transmettre le nom de notre fonction, qui est gérer le changement de tâche. Les deux fonctionnent de la même manière. Mais n'oubliez pas que nous devons utiliser ici la syntaxe de la fonction flèche. Sinon, cela n'obtiendra pas d'objet d'événement. Nous obtenons la valeur de notre entrée. Voyons maintenant comment nous pouvons obtenir la valeur de cette liste déroulante. Donc, comme nous le faisons pour cette entrée, nous faisons de même avec cette liste déroulante. Donc, tout d'abord, nous créons une autre variable d'état pour stocker la valeur de l'état actuel. Nous indiquons et transmettons ici statut et le définissons. Par défaut, nous passons ici pour faire car par défaut, si les utilisateurs ne sélectionnent aucune valeur, nous ajoutons le statut à to do. Maintenant, dans cette balise de sélection, nous ajoutons ici un événement appelé changement. Et à l'intérieur de celui-ci, nous transmettons une nouvelle référence de fonction, gérons le changement de statut. Maintenant, définissons également cette fonction. Nous pouvons également dupliquer cette fonction, et à la place de ce nom, nous écrivons le nom de notre nouvelle fonction, gérons le changement de statut. Et à la place de cette tâche définie, nous écrivons le statut de l'ensemble, et c'est tout. Vérifions que cela fonctionne ou non. Ici, nous ajoutons également un statut dans la console, enregistrons les modifications , jetons un œil, écrivons quelque chose, et nous pouvons voir que par défaut, nous pouvons faire en tant que statut. Maintenant, changeons la valeur dans le menu déroulant et voyons comment nous obtenons cette valeur. Donc ça marche. Voici maintenant un problème. Comme nous pouvons le constater pour chaque valeur, nous devons créer ici des variables d' état et définir fonction distincte pour le changement de poignée, ce qui représente beaucoup de travail. Vous vous demandez peut-être s'il existe un raccourci pour cela ? La réponse est oui. Il y a une petite astuce que nous verrons dans la leçon suivante. 44. Astuce de raccourci pour gérer la forme: Donc, actuellement, dans notre formulaire, nous n'avons que deux formulaires à remplir. Mais imaginez que nous ayons cinq à six remplissages et que vous créiez une variable d'état pour chaque entrée, ce qui rendrait notre code compliqué et difficile à gérer Voyons donc comment gérer plusieurs entrées en utilisant une seule fonction de modification. Dans la leçon précédente, nous avons créé des variables d'état individuelles pour le remplissage des formulaires. Ensuite, dans chaque fonction de changement de poignée, 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 remplissages d'entrée. Laisse-moi te montrer. Commentons ce code, et en haut, nous créons une nouvelle variable d'état appelée données de tâche et définissons les données de tâche. Et maintenant, comme valeur par défaut, nous passons ici object. Et dans cet objet, nous avons plusieurs propriétés dans une paire clé-valeur. Nous ajoutons donc task à une chaîne vide et status à todo. Créons maintenant une nouvelle fonction, gérons le changement comme une fonction d'erreur. Et nous appellerons cette fonction à chaque entrée lors d'un événement de changement. Donc, dans notre champ de saisie, nous écrivons ici handle change. Maintenant, il suffit de copier cet événement de changement et de le coller dans notre balise de sélection. Ainsi, chaque fois que nous saisissons ou modifions la valeur dans l'un de ces champs, seule cette fonction de changement de descripteur s'exécute. Maintenant, étape la plus importante et sans cette étape, cette méthode ne fonctionnera pas. L'étape consiste donc à ajouter toutes les propriétés en tant qu' attribut de nom à partir de notre objet d'état. Laissez-moi vous montrer ce que je veux dire. Donc, pour la saisie de notre tâche, nous voulons stocker sa valeur d'entrée dans cette propriété de tâche. Ainsi, dans notre balise d'entrée, nous ajoutons ici un attribut name égal à task. Maintenant, pour notre liste déroulante de statut, nous voulons définir sa valeur dans cette propriété de statut. Nous ajoutons donc cet attribut de nom de champ de sélection au statut. Assurez-vous d'écrire le même nom que celui que nous écrivons dans l'objet de données de tâche. Maintenant, dans cette fonction de changement de handle, nous écrivons notre logique principale. Nous passons donc ici ce E comme objet d' événement pour tous ces remplissages, et enregistrons simplement cette cible par points sur console . Enregistrez les modifications et jetez-y un œil. Vous voyez, lorsque nous saisissons une tâche, nous obtenons cette entrée de tâche, et lorsque nous sélectionnons une valeur dans la liste déroulante, nous obtenons cette balise de sélection Notre logique principale est que lorsque nous saisissons un champ de formulaire, nous obtenons d' abord le nom et la valeur de ce champ et avec ce nom, qui sera identique à la propriété des données de notre tâche, nous remplaçons sa valeur par la valeur actuelle. Je sais que cela semble un peu compliqué, mais ce n'est pas le cas. Voyons voir ça et après cela , tout sera clair. Nous créons ici une variable de nom égale à e point cible. Nom du point. Et nous créons une autre valeur variable égale à la valeur du point cible e point. Et consolons ces deux variables. Dites les modifications et jetez-y un coup d'œil. Vous voyez, nous obtenons le nom du remplissage et sa valeur lorsque nous saisissons les remplissages d'entrée. Il ne nous reste plus qu'à définir cette valeur dans notre variable d'état liée au nom de sa propriété. Nous écrivons donc ici les données des tâches définies, et nous obtenons ici les valeurs précédentes par ce paramètre précédent. Cette valeur précédente est identique à la valeur actuelle des données de la tâche. Maintenant, dans cette fonction de flèche, nous renvoyons l'objet Tout d'abord, nous renvoyons toutes les valeurs précédentes en utilisant l'opérateur de propagation. Il ne nous reste plus qu'à mettre à jour le champ avec sa valeur. Donc, quel que soit le résultat de cette fonction de rappel, ce sera la valeur de notre variable d'état Maintenant, nous savons que nous pouvons accéder à propriété de l' objet en utilisant des crochets et en passant cette variable de nom huit et Colm sa valeur. Maintenant, si nous écrivons quelque chose dans la saisie de la tâche, cela renverra d'abord toutes les propriétés précédentes, puis nous trouverons la propriété task et remplacerons sa valeur par la valeur remplie de la tâche. est aussi simple que ça. Consignez cette variable de données de tâche par point Consult et voyons si nous obtenons des valeurs ou non. Conservez les ginges et jetez-y un coup d'œil. E, lorsque nous mettons à jour un champ, nous obtenons sa valeur dans notre objet d'état, donc cela fonctionne. Nous pouvons maintenant raccourcir encore ce code en utilisant la restructuration des objets. Nous écrivons donc e point target, et en utilisant la restructuration des objets nous récupérons une variable de nom et de valeur Ces deux lignes sont donc identiques à ce code d'une seule ligne. Nous supprimons donc ces deux lignes. Nous voulons maintenant consoler cet objet de données de tâche lorsque nous cliquons sur le bouton Lors de l'envoi de la tâche. Nous créons donc ici une nouvelle fonction appelée handle submit. Et dans cette fonction, il suffit de déplacer cette console. Maintenant, dans la balise de formulaire, nous transmettons l'événement de soumission et nous passons ici la fonction handle submit. Maintenant, vous vous demandez peut-être si nous pouvons transmettre cette fonction en cas de clic sur ce bouton ? Et la réponse est oui. Vous pouvez également transmettre cette fonction lors d'un clic. Mais pourquoi transmettons-nous cette fonction lors de la soumission ? La raison en est que lorsque quelqu'un écrit dans la zone de saisie puis appuie sur Entrée et également lorsque quelqu'un clique sur le bouton Soumettre, dans les deux cas, cette fonction de gestion de soumission s'exécute. Nous ne transmettons cette fonction que dans un événement tlk, puis elle ne fonctionnera qu'en cliquant sur le bouton Enregistrer les modifications, y jeter un œil, écrire une tâche Sélectionnez la valeur du menu déroulant et cliquez sur Consommer. voyez, pendant une seconde, nous obtenons la valeur, mais ensuite, notre page est actualisée car c'est le comportement par défaut du formulaire Ainsi, chaque fois que nous soumettons le formulaire, cette fonction handle submit s'exécute puis actualise la page. Nous devons arrêter ça. Nous adhérons donc à ce E en tant qu'objet d'événement. Et écrivez E prevent Default. Cette fonction empêchera le comportement par défaut du formulaire. Enregistrez les modifications et jetez-y un œil. Remplissez ce formulaire et voyez ici que nous obtenons ces informations. Récapitulons rapidement cette astuce. Tout d'abord, au lieu de créer un état à usage multiple, nous créons une variable d'état unique, qui est un objet. Et dans cet objet, nous ajouterons le nom des propriétés et la valeur par défaut. Maintenant, en oubliant le nom du champ de formulaire, nous allons transmettre la propriété du nom exactement de la même manière que le nom des propriétés de cet objet. Après cela, nous transmettrons une seule fonction pour tous les champs du formulaire lors de la modification de l'événement. Dans cette fonction, nous obtenons d'abord le nom et l'attribut de valeur de l'objet d'événement, puis nous remplaçons la valeur actuelle de notre objet de données de tâche, c'est aussi simple que cela. C'est ainsi que nous gérons plusieurs champs de formulaire dans React en utilisant la méthode des raccourcis. Vous pouvez voir qu'en utilisant simplement deux lignes de code, nous pouvons définir des valeurs dans notre objet. 45. Mode de réaction strict: Maintenant, laissez-moi vous montrer quelque chose d'intéressant. Nous dupliquons simplement ici données des tâches de disconsol et les déplaçons vers l'extérieur dans notre composant Maintenant, l'une des questions les plus fréquentes que me posent tous les débutants de React est la suivante : lorsque nous enregistrons les points sur console, pourquoi voyons-nous toutes les données deux fois ? Devrions-nous faire quelque chose de mal ? Et quand j'ai appris React pour la première fois, j'ai également posé la même question. La réponse est non. Tu ne fais rien de mal. Cela se produit à cause du mode React. Dans notre projet, ouvrez le fichier JSX principal. Ici, nous pouvons voir React encapsuler notre application avec ce composant du mode React Stric Pour l'instant, commentons ce composant du mode ric. Enregistrez les modifications et jetez un œil et voyez ici que nous obtenons nos données une seule fois. C'est donc ferme. Cela est dû au mode React Street. Mais pourquoi avons-nous besoin de ce mode urbain ? React Street Mode est donc un outil fourni par React qui aide les développeurs à écrire du code de meilleure qualité en mettant en évidence les problèmes potentiels lors du développement. Lorsque nous intégrons notre application au mode React point Street, cela active des contrôles et des avertissements supplémentaires qui vous aideront à identifier le problème avant qu'il ne cause un problème en production. Par exemple, il vérifiera la présence d'API et de composants de réaction non pris en charge ou obsolètes, enregistrera des mises à jour directes, des rendus potentiellement inutiles, et c'est pourquoi il affichera notre application deux fois Il est donc préférable d'activer le mode rue pour notre application. Supprimons ces commandes et activons le mode rue pour notre application. Enregistrez les modifications et jetez-y un œil. Vous voyez, encore une fois, nous obtenons deux objets de données. Donc, je réagis 18, le mode rue est activé par défaut et React rend chaque composant deux fois C'est ainsi que fonctionne le mode strict dans le processus de développement. Lorsque nous déployons notre application pour la production, le mode urbain n'est pas ajouté et nos composants ne seront affichés qu'une seule fois. Ne vous inquiétez donc pas pour ça. Supprimons également notre ligne de journal Consult. Dans la prochaine leçon, nous verrons la mise en œuvre de la sélection fiscale. 46. Sélection de tags: Implémentons maintenant la fonctionnalité de sélection de balises. Mais avant cela, supprimons ce code de commentaire. Maintenant, dans notre variable de données de tâche, nous ajoutons une autre propriété appelée tags et passons un tableau vide comme valeur par défaut. Lorsque nous sélectionnons une balise, nous l'ajoutons à ce tableau. Et si cette balise est déjà dans ce tableau, nous supprimerons cette balise aussi simplement que cela. Et c'est mon truc pour implémenter n'importe quelle logique dans la programmation. Si je dois te donner cette astuce, laisse-moi te la donner. L'astuce consiste, chaque fois que nous voulons ajouter une fonctionnalité, à décrire cette fonctionnalité en langage humain, et c'est tout décrire cette fonctionnalité en . C'est ainsi que vous pouvez déchiffrer la logique de n'importe quelle fonctionnalité. Donc, tout d'abord, nous créons ici une nouvelle fonction appelée select tag, error function, et cette fonction s'exécute lorsque nous cliquons sur l'une des balises. Nous devons donc transmettre la fonction à l'intérieur de ce composant de balise. Pouvons-nous le faire ? En utilisant des accessoires. Ici, nous passons simplement des accessoires appelés select tag et passons ici le nom de notre fonction qui est select tag Ici, nous utilisons le même nom de propriété que nom de notre fonction, car nous n'avons pas à nous soucier de donner le nouveau nom. Vous pouvez écrire ici n'importe quel nom. Cela dépend entièrement de vous. Maintenant, copiez-le et collez-le pour tous les composants du tag. Enregistrez ceci, maintenant ouvrons ce composant de balise. Et ici, à l'accessoire, nous pouvons déstructurer l'objet et obtenir ici le nom du tag et le tag Celac Maintenant, supprimons ces accessoires et là nous transmettons l'événement de clic et nous passons simplement le tag Celac Et c'est tout. Notre fonction SellActag s' exécutera lors de ce clic sur Etag Écrivons maintenant notre logique pour la fonction sectag. Tout d'abord, la question est savoir comment pouvons-nous obtenir le tag actuellement sélectionné ? Parce que sans connaître le nom du tag, comment peut-on écrire une quelconque logique ? Ainsi, dans le composant technique, nous pouvons transmettre ce nom de balise comme argument de cette fonction technique sélectionnée. Mais nous ne pouvons pas appeler cette fonction ici car notre fonction ne s' exécutera qu'une seule fois. Donc, pour résoudre ce problème, nous pouvons transmettre ici une erreur de fonction et à l'intérieur de celle-ci, nous pouvons appeler la fonction selecteg et passer le nom du tag en argument Enregistrez ce fichier et dans le composant du formulaire de tâches, nous obtenons la balise here en tant que paramètre, et il suffit de consulter log cette balise, enregistrer les Gengs et d'y jeter un œil Vous voyez, lorsque nous cliquons sur ce bouton de tag, nous obtenons le nom de ce tag. Mais notre formulaire est également soumis car nous obtenons l'objet de données de tâche ici. Tu vois ? Alors résolvons ça. Ouvrez donc le composant tag. Nous devons simplement passer ici un type de bouton à un autre. Parce que dans tous les navigateurs, à l'exception d'Internet Explorer, type de bouton par défaut est Soumettre, et c'est pourquoi notre formulaire est soumis. Sauvegardez-les et vous verrez, maintenant nous n'avons que le nom du tag. Maintenant, notre prochaine tâche est de stocker cette balise dans un tableau de texte. Donc, dans la fonction Seat tag, tout d'abord, nous écrivons si la condition est, et ici nous voulons vérifier. Notre tag est déjà disponible dans le tableau fiscal ou non. Nous écrivons donc des balises à points pour les données des tâches. Maintenant, ici, nous utilisons une méthode, et à l'intérieur, nous obtenons ici chaque élément, fonction flèche, et nous devons passer ici la condition, l'article est égal à Eg. Explique-toi cette expression. La méthode sum renverra une valeur vraie ou fausse. Nous vérifions ici chaque élément de notre tableau de balises de données de tâches, et nous le comparons ici avec un nom de balise. Par exemple, nous sélectionnons une balise STML, puis cette expression vérifiera chaque valeur de ces balises, et si STML est disponible dans ce tableau, renverra true, sinon false, c' est aussi simple que Ce que nous ferons si la balise est déjà disponible, nous la supprimerons de ce tableau. Nous écrivons donc les données de tâche, le texte à points, le texte, le point, le filtre. Maintenant, également dans ce cas, nous obtenons la fonction de flèche de chaque élément, et nous passons ici la condition, l'élément n'est pas égal à l'étiquette. Maintenant, comme nous le savons, cette méthode de filtrage obtiendra les éléments qui satisferont cette condition et renverront un nouveau tableau. Nous le stockons donc dans une variable appelée balises de filtre. Nous devons maintenant mettre à jour notre valeur de texte aide de ces nouvelles balises de filtre. Nous écrivons donc des données de tâches définies. Nous obtenons d'abord ici la valeur précédente, la fonction d'erreur, et à l'intérieur de celle-ci, nous renvoyons ici l'objet, et d'abord, nous ajoutons toutes les valeurs précédentes à l'aide de l'opérateur de propagation. Et nous remplaçons simplement les balises pour les filtrer. Maintenant que nous ajoutons la condition Ls, ce qui signifie que notre balise n'est pas disponible dans ce tableau de texte, nous pouvons directement ajouter cette balise dans notre tableau. Nous y écrivons les données d'une tâche définie, nous obtenons la valeur précédente, la fonction flèche, et ici nous renvoyons l'objet, et ici nous ajoutons toutes les valeurs précédentes l'aide de l'opérateur de propagation. Parce que sans cela, notre tâche et notre statut seront également remplacés. Ensuite, nous remplaçons les balises et nous transmettons ici notre balise actuelle Voyons maintenant si cela fonctionne ou non. suffit donc de configurer point log, tagdata point tex, d'enregistrer les modifications et d'y jeter un œil Sélectionnez n'importe quel tag et vous verrez que nous l'obtiendrons ici. Maintenant, encore une fois, cliquez sur cette étiquette. Je vois que c'est parti. Voici maintenant un bogue. Sélectionnez un tag, puis un autre tag. Vous pouvez voir que notre ancien tag a disparu. Alors pourquoi cela se produit, découvrons-le. Dans cet état, nous remplaçons directement la valeur des balises par la balise actuelle, et c'est pourquoi nous avons remplacé notre ancienne balise par une nouvelle balise. Ici, nous utilisons également les anciennes balises à points de l'opérateur de propagation, qui contiennent toutes les anciennes balises et ajoutons simplement une nouvelle balise à la fin. Je commets intentionnellement cette erreur parce que je veux vous montrer l'importance de ces valeurs précédentes. Enregistrez les modifications et jetez-y un œil. Sélectionnez les balises et voyez que cela fonctionne. 47. Afficher le tag sélectionné sur l'interface utilisateur: Maintenant, lorsque nous sélectionnons notre tag, nous ne pouvons afficher aucun effet sur notre page, et c'est la mauvaise expérience utilisateur. Donc, pour afficher la balise sélectionnée, il suffit de vérifier si cette balise est disponible dans notre tableau de balises ou non. Nous créons ici une nouvelle fonction appelée fonction Jack tag arrow. Maintenant, à l'intérieur de celui-ci, nous voulons simplement renvoyer vrai ou faux pour le tag. Vous souvenez-vous de la méthode que nous avons utilisée pour vérifier ? Nous l'avons déjà fait dans la fonction de balise Sylac, qui utilise une méthode Nous renvoyons simplement ici les données des tâches (points tags, points). À l'intérieur, nous obtenons fonction flèche de chaque élément et nous vérifions que l'élément est égal à notre étiquette, et nous obtenons cette balise à partir du paramètre. Nous passons maintenant cette valeur vraie et fausse pour chaque balise. Faites donc défiler l'écran jusqu'au composant technique. Nous passons ici un autre accessoire appelé sélectionné, et ici nous appelons fonction check tag Et à l'intérieur, nous transmettons le nom de notre tag en double code. Notez que nous écrivons le même nom lorsque nous transmettons le nom du tag. Enregistrez ce fichier, et dans le composant technique, nous obtenons ici les accessoires sélectionnés Maintenant, en utilisant ces probes sélectionnées, nous pouvons ajouter l'effet sélectionné. Ici, nous utiliserons des styles intégrés car nous voulons définir une couleur différente pour les balises SDML, CSS, JavaScript et React Pour cela, nous créons une variable appelée tag style et nous la déclarons en tant qu' objet et à l'intérieur de cet objet, nous formons une paire clé-valeur. Laisse-moi te montrer. Tout d'abord, nous passons le SDML et ici, en tant que valeur, nous passons l'objet avec la propriété de couleur d'arrière-plan Et la valeur d'un FD est 821. Maintenant, vous pouvez vous demander pourquoi nous ajoutons ici un objet. La raison en est que nous savons que dans les styles intégrés, nous devons transmettre un objet de style Nous pouvons donc directement ajouter cet objet par nom de tag. Ajoutons maintenant des styles pour d'autres balises. Dupliquez cette paire clé-valeur quatre fois de plus, et ici nous ajoutons du CSS et changeons couleur de fond en 15 d4c8 Maintenant, pour JavaScript, nous changeons la couleur d' arrière-plan : deux pour FF D un, deux pour C, et pour React , deux pour C, DA FC. Notez que nous avons le même nom de balise que celui que nous transmettons dans les accessoires de nom de balise Dans le cas contraire, cela ne fonctionnera pas. Vous vous demandez peut-être pourquoi nous ajoutons une paire clé-valeur supplémentaire. Ce dernier est utilisé comme arrière-plan par défaut pour les balises non sélectionnées. Nous ajoutons donc la couleur de fond par défaut à has F 9f9f9. Ajoutons maintenant des styles en fonction des conditions. Nous ajoutons ici un style égal à celui des crochets Coli car nous ajoutons une expression Javascript, c' est-à-dire que si cette option est sélectionnée, nous ajoutons le textile textyle et entre crochets, nous passons le nom de la balise Sinon, nous ajoutons un point textile par défaut. est aussi simple que ça. Enregistrez les modifications et jetez-y un œil. Vous voyez, lorsque nous sélectionnons le tag, sa couleur d'arrière-plan change et revient ensuite à la normale. Maintenant, avec les autres balises, nous ne voyons pas ces styles car nous ne leur avons pas transmis certains accessoires Revenons donc au composant du formulaire de tâches, ici nous sélectionnons les accessoires sélectionnés, nous les copions d'ici et nous les collons ici, et nous changeons le nom de la balise en CSS Maintenant, comme nous le faisons pour JavaScript, et nous faisons de même pour React. Regardez les modifications et jetez-y un coup d'œil. Vous voyez maintenant que nos tags ont cet effet sélectionné. Je sais que cet objet de style intégré vous embrouille. Mais si vous révisez ce code, vous le comprendrez bien. Ensuite, vous verrez à quel point il est simple d'implémenter cette fonctionnalité de sélection. Il suffit de penser dans le langage de tous les jours et vous ne recherchez pas tout sur Google. Si vous essayez quelque chose et que vous le stockez, utilisez-le comme outil. Maintenant, nous avons ici tous les détails sur la tâche dans cette variable de données de tâche. Dans la prochaine leçon, nous verrons donc comment afficher cette tâche dans notre section. 48. Afficher les fiches de tâches: Maintenant, ajoutons notre fonctionnalité principale de cette application, qui est l'ajout de tâches. Sans cette fonctionnalité, notre application n'est pas utile. Nous allons donc ici stocker toutes nos tâches dans un seul tableau, et en utilisant la propriété status, nous les afficherons dans chaque section. Nous transformons ce tableau en variable d'état car lorsque nous ajoutons ou supprimons la tâche, nous voulons voir les modifications apportées à notre dôme. La question est maintenant de savoir dans quelle partie de notre application nous avons besoin de ce tableau. Tout d'abord, nous devons accéder à cette fonction d'ensemble de tableaux dans notre composant de formulaire de tâches, car lorsque nous soumettons notre tâche, nous voulons l'ajouter à ce tableau. Ensuite, nous devons afficher état du tableau dans ce composant de colonne de tâches. Nous avons donc besoin du tableau de tâches dans ces deux composants, taskfm et task column Nous devons donc créer cette variable d'état dans ce composant d'application. Nous pouvons donc utiliser cela comme accessoire dans ces deux composants. Donc, en haut, nous importons l'état d'utilisation depuis la bibliothèque React. Et dans le composant, nous écrivons State et passons le nom de la variable, tâche et la tâche définie. Et nous passons mon tableau comme valeur par défaut. Passons maintenant cette fonction de tâche définie en tant qu'accessoire dans ce composant du formulaire de tâches Ce fichier et maintenez la touche Ctrl ou Commande enfoncée et cliquez simplement sur le nom du composant. Cela nous mènera à ce fichier de composants. Maintenant, au niveau du paramètre, nous déstructurons les accessoires. Je sais que dans ce volet, nous n'en avons pas besoin, mais c'est une bonne pratique qui nous aidera à l'avenir. Nous obtenons donc ici une tâche définie, et dans la fonction handle submit, nous définirons nos données de tâche dans la fonction set task. Donc, en bas, nous écrivons set task. Maintenant, ici aussi, nous obtenons les premières valeurs précédentes, fonction de flèche et renvoyons ici le tableau, et nous ajoutons d'abord toutes les valeurs précédentes l'aide de l'opérateur de propagation. Ensuite, nous ajoutons simplement un objet de données de tâche, et c'est tout. Maintenant, faisons un petit zoom arrière sur mon code VS avec Control et moins ou Command et moins. Enregistrez ce fichier et vérifierons ce que nous obtenons. Revenez donc au fichier JSX app point et la console point log Tasktask, enregistrez les modifications et jetez-y un œil Écrivez ceci et nous verrons que nous obtenons un tableau de texte. Nettoyons donc cette console. Ouvrez le composant du formulaire de tâches, et ici nous supprimons cette ligne de texte de console. Enregistrez ceci et actualisons la page. Il s'agit de la gravure de tâches, nous sélectionnons les tags, nous sélectionnons le statut à exécuter et nous cliquons sur Attask Vous voyez, nous avons cette tâche ici. Maintenant, ajoutons une autre tâche. Indique le statut pour effectuer une tâche. Tu vois, je comprends ça aussi. Donc ça marche. Maintenant, affichons ces tâches dans cette colonne. Dans le composant d'application, ici dans ce composant de colonne de tâches, nous transmettons la première tâche en tant qu'accessoires, puis nous devons filtrer ces tâches par statut Par exemple, si le statut est en cours, nous n' affichons que la tâche dont le statut est en cours d'exécution. Nous passons donc ici un statut égal à. Copions maintenant ces deux accessoires et passons ici dans cette colonne de tâches Et nous changeons simplement le statut en action et ici aussi, nous collons ces accessoires et changeons le statut en terminé Sauvegardez-les. Maintenant, dans le composant de la colonne des tâches, nous déstructurons simplement la tâche et le statut Maintenant, à la place de cette carte de tâches statique, nous appliquons calibraket task point Map Ici, nous obtenons chaque tâche ainsi qu'un index, et nous ajoutons simplement ici une condition, statut du point de tâche est égal à ce statut et à un composant de tâche puritain et à l'intérieur de celui-ci, nous passons un attribut clé pour chaque élément unique, qui est notre Cet opérateur final ne servira qu'à une expression vraie. Donc, ce n'est que si cette condition est vraie que nous renvoyons ce composant de carte des tâches. Sinon, nous n' obtenons rien, sauvegardons les modifications et jetons un coup d'œil. Tu vois, nous avons ici deux cartes. Un dans le faire et un dans l'action. nous reste plus qu'à modifier ces informations à l'intérieur de cette carte. Donc, pour afficher ces informations dans le composant de notre carte, nous devons les transmettre à l'aide d'accessoires. Ici, le titre est égal à task point Task. Ensuite, les balises sont égales au texte du point de tâche. Enregistrez ce fichier. Maintenant, affichons ces deux valeurs sur notre carte. Donc, dans le composant de la carte, nous déstructurons les accessoires ici et obtenons le titre et les tags Maintenant, à la place de ce texte, nous écrivons le titre, et à la place de ce texte, nous écrivons Cul brackets et text point Map method. Ici, nous obtenons chaque balise ainsi qu'un index pour la transmettre à Key. O function, et nous retournons ici tag component, et nous passons la clé à l'index et le nom de la balise à la balise. Enregistrez les modifications et jetez-y un œil. Vous voyez, c'est ici que nous obtenons ces détails et ces tags. Enfin, dernière chose, nous voulons montrer des tags colorés. Vous souvenez-vous que nous avons sélectionné une propriété ? Et ainsi, nous pouvons ajouter des tags colorés. Laisse-moi te montrer. Nous passons donc ici égaux sélectionnés à vrai, et c'est tout. Enregistrez les modifications et jetez-y un œil. Vous voyez maintenant que notre carte est vraiment belle. De plus, si nous voulons passer valeur d'accessoire à true à tout moment, nous ne pouvons écrire que ce nom d'accessoire De la même manière que nous écrivons l'attribut disable en HTML. Sauvegardez-le et voyez qu'il fonctionne comme avant. 49. Supprimer une tâche: Maintenant, avant de commencer à implémenter la fonctionnalité de suppression, corrigeons ce petit détail dans notre formulaire. Ainsi, lorsque nous ajoutons notre tâche, ces anciens détails sont toujours là. Donc, si l'utilisateur souhaite ajouter une autre balise, il doit d' abord décortiquer les balises, et ce n'est pas une bonne expérience utilisateur Ainsi, lorsque vous créez un site Web pour un client, vous devez également vous considérer comme l'utilisateur de cette application et déterminer quels problèmes ou bogues sont disponibles dans votre application. Dans le composant de formulaire de tâche, nous voulons réinitialiser ce formulaire après avoir défini nos données de tâche dans la fonction de définition des tâches. En gros, nous rétablissons la valeur par défaut de cet objet de données de tâche valeur par défaut de cet objet de données de Nous écrivons donc des données de tâches définies, et à l'intérieur de celles-ci, nous copions simplement cet objet par défaut et le collons ici, et c'est tout. Dites les modifications et jetez-y un coup d'œil. Soumettez le formulaire et votre texte sera réinitialisé, mais cette zone de texte et cette liste déroulante sont toujours les mêmes. Pourquoi cela se produit-il ? Découvrons-le. Donc, ici, dans cet élément d'entrée, nous ne lions pas la valeur de notre tâche à cette valeur d'entrée. Laissez-moi vous montrer ce que je veux dire. Donc, ici, lorsque nous modifions quelque chose dans cette entrée, cette valeur d'entrée s'ajoute à notre propriété de tâche point data point. Mais lorsque nous modifions la propriété de notre tâche point de données de tâche, façon dont nous réagissons modifiera la valeur d'entrée. Nous n'avons rien fait pour cela. Ne t'inquiète pas C' est très simple. Pour cela, il suffit d'ajouter ici attribut value et , entre crochets CL, task data point task. De plus, dans cette sélection, nous passons un attribut de valeur égal à l'état du point de données de la tâche. C'est pourquoi nous devons ajouter de la valeur à la propriété afin qu'elle fonctionne dans les deux sens. Enregistrez les modifications et jetez-y un œil. Écrivez le tag de sélection de la tâche, sélectionnez également le statut, soumettez le formulaire et vérifiez que notre formulaire est correctement réinitialisé. Voyons maintenant comment supprimer une tâche à partir d'ici. Revenons donc à notre composant d'application, nous créons ici une fonction qui gérera la fonctionnalité de suppression. Maintenant, comment pouvons-nous supprimer une tâche spécifique ? Nous savons donc ici que chaque élément de tâche a son index unique. Nous passons donc ici l'index des tâches. Maintenant, à l'intérieur de celles-ci, nous utilisons la méthode filtrage, donc task point Filter, ici nous obtenons chaque tâche, et en second paramètre, fonction d'erreur d' index, et ici nous passons notre condition. Nous voulons uniquement prendre cette tâche, dont l'index n'est pas égal à l'index de tâche. Nous savons maintenant que cette méthode de filtrage renvoie un nouveau tableau. Nous le stockons donc simplement dans une variable appelée nouvelle tâche. Ensuite, nous avons défini cette nouvelle tâche dans la fonction set task. Notre fonction de suppression est prête, nous ne devons exécuter cette fonction que lors de notre événement de clic de suppression. Nous introduisons donc de nouveaux accessoires dans ces trois composants de la colonne de tâches. Cliquez ici, maintenez la touche Alt ou Option enfoncée, puis cliquez ici et ici Cela créera plusieurs curseurs, et nous écrivons simplement ici, handle delete equals to handle delete. Et appuyez sur Escape. Enregistrez ce fichier et ouvrez maintenant ce composant de colonne de tâches. Ici, nous pouvons gérer accessoires de suppression et les transmettre simplement dans ce composant de carte des tâches Le délai de gestion est égal à celui de gestion de la suppression. Et nous passons également index égal à index car nous devons transmettre cet index dans cette fonction handle delete. Et nous pouvons voir que nous transmettons ici des probs imbriqués, cette fonction de suppression de poignées Enregistrez ce fichier, et maintenant, dans le composant de la carte des tâches dans les probs, nous obtenons handle delete et indexer Maintenant, dans ce DU, nous passons ici à un événement appelé « clic ». Et ici, nous passons la fonction handle it. Nous devons maintenant transmettre la valeur de l'index dans cette fonction handle it. Dans le cas contraire, les fonctionnalités de notre site ne fonctionneront pas. Alors, comment pouvons-nous le faire ? Bien, il suffit de passer ici la fonction de flèche, enregistrer les modifications et d'y jeter un œil. Cliquez sur l'icône Supprimer et vous verrez à quel point cette tâche s'est déroulée sans problème. C'est donc aussi simple que cela d' implémenter la fonctionnalité de suppression. Maintenant, vous vous demandez peut-être pourquoi nous créons une fonction de suppression dans notre composant d'application. Nous pouvons le créer dans le composant de tâche. Oui, nous pouvons également créer une fonction de suppression de poignée dans le composant de la carte des tâches. Mais ici, vous pouvez voir cette fonction Handle Delit nécessite une date de tâche et définit également la fonction de tâche Nous créons une fonction handle delete dans le composant de la carte des tâches, puis nous devons transmettre cette tâche et définir la tâche à la fois comme accessoires, et si nous créons un handle delat dans le composant app, qui contient les deux variables, alors nous ne devons transmettre que la fonction handle t comme accessoires. Voilà donc la raison. 50. Les bases d'utilisation du crochet à effet: Commençons donc par comprendre ce qu'est l'effet d'usage. L'effet d'usage est utilisé pour provoquer des effets secondaires dans notre composant. Quels sont donc les effets secondaires ? Les effets secondaires sont des actions effectuées avec le monde extérieur. Nous produisons un effet secondaire lorsque nous devons aller au-delà de nos composants de réaction pour faire quelque chose. Par exemple, la récupération de données depuis l'API met directement à jour le dôme dans lequel nous utilisons un document ou un objet Window ou une fonction de minuterie telle que définir le délai ou l'intervalle Ce sont les effets indésirables les plus courants de React. Donc, pour effectuer tout type d'effets secondaires, nous devons utiliser un crochet à effets. Ne vous inquiétez pas pour cette théorie. Disons-le de façon pratique. Donc, pour utiliser n'importe quel hook, nous devons d'abord saisir ce hook depuis la bibliothèque React. Nous écrivons donc ici use effect, et maintenant nous pouvons l'utiliser dans le composant de fonction. Nous nous appelons effect hook, qui accepte deux arguments. Tout d'abord, la fonction de rappel, qui est une fonction dans laquelle nous écrivons notre logique d'effets secondaires Cette fonction s'exécute chaque fois que quelque chose change dans l'ensemble de ce composant. Et le deuxième argument est les dépendances, qui sont un tableau de variables, et c'est un argument facultatif. En termes simples, le premier argument est ce qu'il faut exécuter et le second, quand exécuter. L'effet Use s'exécute à chaque rendu, c' est-à-dire lorsque le nombre change ou que la fin se produit, cela déclenche un autre effet. Mais nous pouvons contrôler cela par des dépendances. Si vous connaissez les composants de classe, l'effet d'utilisation est la combinaison du composant monté, composant mis à jour et du démontage du composant L'effet d'utilisation comporte trois variantes. Ne t'inquiète pas Nous verrons chaque variation en détail dans la prochaine section. Mais pour l'instant, permettez-moi de vous le dire très brièvement. Donc, tout d'abord, utilisez l'effet sans aucune dépendance. Donc, si nous ne transmettons aucune dépendance, cette fonction de rappel s' exécutera à chaque fois que quelque chose change dans notre composant Ensuite, utilisez l'effet avec un tableau vide. Donc, si nous ne transmettons qu' un tableau vide, cette fonction de rappel ne s' exécutera qu'une seule fois lorsque nos composants seront abandonnés pour une durée indéterminée Et troisièmement, utilisez l'effet avec des variables. Ainsi, par exemple, si nous transmettons une variable de tâche, donc lorsque l'état de cette tâche change, n'est qu'alors que cette fonction de rappel s'exécute, et c'est ce que nous voulons faire ici Dans cette fonction de rappel, nous écrivons un élément d'ensemble de points de stockage local Maintenant, au premier paramètre, nous passons le nom de notre variable qui est task. Et au deuxième paramètre, nous passons notre tableau de tâches. Mais ici, nous devons convertir ce tableau format chaîne car le stockage local ne peut stocker des chaînes que sous forme de valeurs. Si nous stockons directement le tableau en tant que valeur, il le convertira automatiquement en chaîne, mais nous ne pourrons pas accéder à cette lettre sous forme de tableau. Nous utilisons donc ici la méthode UPI de chaîne de points Json. Et transmettez notre tableau de tâches ici. Cette fonction convertira également notre tableau au format chaîne. La seule différence est que nous pouvons à nouveau convertir cette chaîne en tableau et l'utiliser, enregistrer les modifications et y jeter un œil, soumettre une tâche, et nous obtenons la tâche ici. Maintenant, voyons qu'il est également stocké dans le stockage local ou non. Ouvrez le stockage local, et nous voyons ici notre nouvelle tâche. Maintenant, si nous ajoutons une autre tâche , notre stockage local sera mis à jour. Maintenant, comme nous le savons, nous stockons notre tableau dans une chaîne de caractères. Donc, lorsque nous obtenons ce tableau, nous devons le reconvertir en tableau. Revenons donc à notre composant d'application et à la place de ce tableau vide, nous passons des points pars json, et à l'intérieur de celui-ci, nous transmettons cette ancienne valeur de tâche. Cette fonction convertira notre chaîne en tableau. Enregistrez les modifications et actualisez la page. voyez, nous ne perdons pas notre tâche, supprimons une tâche et essayons également d'actualiser la page. Vous voyez, nous recevons également une tâche mise à jour, donc elle fonctionne correctement. Maintenant, voici un petit bug. Ouvrez le stockage local, et si nous supprimons ce tableau de tâches d'ici, nous actualisons ensuite cette page. voyez, nous obtenons ici cette erreur car nous ne trouvons pas de tâche dans le stockage local. Donc, pour résoudre ce problème, nous passons ici ou par opérateur. Voici un tableau vide. Si cette expression renvoie null, elle prend un tableau vide comme valeur par défaut. Sauvez les anneaux et jetez-y un coup d'œil. Maintenant, notre application fonctionne bien. 51. Ajouter des polices personnalisées: Maintenant, notre projet est presque terminé. J'ajoute ici une tâche de démonstration. Il ne nous reste plus qu'à modifier les styles de police de notre application. Il existe donc deux méthodes les plus populaires pour ajouter des polices dans l'application React. La première est que nous avons un fichier de police hors ligne dans notre système, et nous pouvons également utiliser CD et Link pour ajouter des polices. Voyons le moyen le plus simple, qui consiste à utiliser CD et Link. Nous verrons la méthode hors ligne plus loin dans ce cours. Ne t'inquiète pas pour ça. Dans ce projet, nous allons donc ajouter la police Montserrat. Rendez-vous donc dans le navigateur, ouvrez un nouvel onglet et effectuez une recherche une fois que vous êtes sur Google Font. Ouvrez ce lien de publication. Maintenant, sur ce site Web, nous obtenons de nombreuses polices gratuitement. Nous avons également un autre site Web, Font Squirrel. Tu peux utiliser ce que tu veux. Cela dépend totalement de vous. Ici, nous pouvons sélectionner différents styles de police que nous voulons utiliser. Sélectionnez donc 400, 500, 600, 708 cents. Maintenant, dans cette section, nous avons l'option, il suffit de sélectionner la section Importer et de copier cette déclaration d'importation Dans notre fichier CSS à points d'index en haut, nous collons ce CD et ce lien. Bien. Revenez maintenant au navigateur faites défiler l'écran vers le bas et copiez ce CSS pour cette famille de polices. Et dans notre fichier CSS à points d'index, nous ajoutons ici des styles pour le corps, et à l'intérieur, nous y collons notre famille de polices. Enregistrez ce fichier et vous verrez, nous aurons nos styles et nos polices. Maintenant, notre application a l'air vraiment incroyable. 52. Conclusion du projet 01: Félicitations. Vous avez terminé avec succès votre premier projet dans React. Je sais que vous en apprenez beaucoup, et vous pouvez également voir qu'il n'est pas vraiment difficile de créer une application dans React. C'est vraiment simple. Vous devez apprendre les fonctionnalités et les fonctionnalités de React. Ne vous inquiétez pas d'apprendre tous les concepts en une seule fois, car cela vous submergera Apprenez donc certaines fonctionnalités et pratiquez-les, puis encore une fois, apprenez certaines fonctionnalités et pratiquez-les à nouveau. pratique est la clé du succès, et cela doit être notre objectif principal. Si vous souhaitez pratiquer à nouveau ce projet complet, vous pouvez le faire. De cette façon, vous pourrez en apprendre davantage sur React, et si vous êtes à l'aise pour aller de l'avant, vous pouvez poursuivre ce cours. Cela dépend entièrement de vous. Différentes personnes aiment différentes approches. Merci beaucoup d'avoir créé ce projet. Je sais que vous avez davantage confiance en React, à bientôt dans la section suivante. 53. [Facultatif] Fonction glisser-déposer dans React: Dragon RopFeature est une fonctionnalité très utile pour donner plus de flexibilité aux utilisateurs de votre site Web, et elle a aussi l'air tellement cool Nous pouvons déplacer cette carte de tâches haut ou vers le bas dans le même statut de tâche, ou nous pouvons également modifier le statut, ce qui peut être fait ou fait. Dans ce tutoriel, nous verrons donc comment implémenter la fonctionnalité Dragon Rob dans React. Il existe de nombreuses bibliothèques pour cela, mais je ne suis pas un grand fan de l'utilisation de ces bibliothèques. Au lieu de cela, nous pouvons créer fonctionnalité Dragon Rob en utilisant les événements de dépôt de SDMLPi C'est très simple. Ne t'inquiète pas pour ça. Regardez ce didacticiel complet et tous vos doutes seront dissipés. Donc, sans perdre de temps, commençons à implémenter la fonctionnalité Dragon Drop dans cette application React to Do. Alors permettez-moi de vous demander une chose. Que se passe-t-il dans la fonctionnalité Dragon Rob. Ne pensez pas à écrire du code, pensez à la façon dont Dragon Rob se produit dans la vraie vie. Nous saisissons une chose la placer à un autre endroit C'est simple. Supposons que nous ayons une liste de tâches et nous les divisions en deux catégories à faire et à faire, et que nous les classions également par ordre de priorité, c'est-à-dire quelle tâche nous voulons faire en premier, puis en deuxième , troisième, etc., et nous puissions également effectuer plusieurs tâches en même temps Supposons maintenant que nous voulions déplacer la deuxième tâche à effectuer vers la liste des tâches, mais avec la deuxième priorité. D'autres détails dont nous avons besoin ici. Pensez-y. La première chose dont nous avons besoin est donc de savoir quelle tâche nous allons déplacer. Nous avons également besoin de la catégorie dans laquelle nous plaçons cette tâche à accomplir ou à accomplir. Nous avons également besoin de la position à laquelle nous plaçons cette tâche. Dans ce cas, c'est le deuxième. Et voilà, nous déplaçons simplement cette tâche vers cette catégorie et cette position, c'est aussi simple que cela. Dans cette application, nous avons trois catégories, mais la fonctionnalité Dragon Rob restera la même. J'ai donc divisé la fonction Dragon Rob en trois étapes. Tout d'abord, nous devons savoir quelle carte nous déplaçons. Ensuite, nous créons une zone de dépôt où nous pouvons placer notre carte parce que nous ne voulons pas placer notre carte partout dans notre application Nous allons donc créer une zone de dépôt pour cela. Et dernière partie, écrivez la fonction permettant de positionner la tâche de dépôt et de changer le statut si nous passons à un autre statut. Commençons par l' étape numéro un, savoir quelle carte nous déplaçons. Actuellement, dans notre application, notre carte n'est pas déplaçable Avant tout, nous devons les rendre déplaçables. Donc, dans cette application, pour chaque colonne, j'ai créé ce composant de colonne de tâches que nous réutilisons, et pour chaque carte de tâche, nous avons un composant de carte de tâche. Nous devons donc rendre ce composant de la carte des tâches traçable. Maintenant, pour rendre notre carte de tâches traçable, nous avons l'attribut SML phi traçable sur true ou nous ne pouvons écrire Enregistrez ceci, et maintenant nous pouvons voir que nous pouvons déplacer notre composant de carte des tâches. Maintenant, nous voulons savoir quelle carte nous déplaçons. Nous avons donc besoin de quelque chose d'unique pour chaque carte, comme un identifiant de tâche, mais nous n'en avons pas dans notre liste de tâches. Ne t'inquiète pas Nous pouvons également utiliser ici cet index, qui est également unique pour chaque tâche. Maintenant, pour stocker cet index de cartes glissantes, vous devez créer une variable d' état locale car nous pouvons sélectionner n'importe quelle carte, et la valeur de notre carte glissante changera également Maintenant, la question est de savoir où créer cette variable d' état traitable, où nous avons besoin de l'état de la carte à pignon Ainsi, dans notre composant d'application, nous avons l'état de notre tâche, et également dans le composant d'application, nous avons besoin d'un index de cartes à pignon, afin de pouvoir modifier notre liste de tâches actuelle Ainsi, après cet état de tâche, nous créons une nouvelle variable d'état appelée active card set active card. Par défaut, nous l' avons définie sur null, ce qui signifie qu'aucune carte ne glisse Maintenant, lorsque nous commençons à faire glisser une carte, nous stockons la valeur de l'index de cette carte dans cet état de carte actif Et à la fin du glissement, nous rendons à nouveau la valeur nulle de cette carte active. Maintenant, pour affecter la carte active à cet index de carte de tâche, nous devons définir la fonction de la carte active dans composant de la carte de tâche, et comment nous pouvons le faire. Juste en utilisant des accessoires. Pour en revenir au composant de l'application, nous déplaçons notre curseur ici, maintenons la touche Alt ou Option enfoncée, et nous cliquons également sur ces deux composants de colonne de tâches. En maintenant la touche Alt ou option enfoncée, nous pouvons créer plusieurs curseurs Nous passons un nouvel accessoire, définissons une carte active égale à définir une carte active Appuyez sur Escape pour quitter l'édition avec plusieurs curseurs. Enregistrez ceci et dans le composant de la colonne des tâches, nous obtenons d'abord une carte statique dans les accessoires et nous la passons également dans le composant de la carte des tâches, une carte Stective est égale à une carte catective Enregistrez ceci, et dans le composant de la carte des tâches, nous obtenons enfin la fonction de carte cetactive Maintenant, dans la balise article ou si vous avez dû , dans cette balise, les événements de balise DDT SDMLPi Ici, nous avons besoin de glisser-démarrer, car lorsque nous commençons à faire glisser cette carte de tâche, nous définissons la carte active sur l'index de la carte actuel, qui est cet index Donc fonction flèche et simple fonction de sélection de la carte à indexer. De plus, lorsque notre glissement est terminé, nous voulons attribuer la valeur null à la carte active. Nous ajoutons donc un autre événement sur la fonction de déplacement de la flèche, définissons la carte active sur null. Enregistrez les modifications. Et pour la dégustation, imprimons la carte active. Dans le composant de l'application en bas de la balise principale, nous ajoutons une balise H et imprimons simplement ici la carte active. Enregistrez les modifications et jetez-y un œil. Faites glisser une carte. Ici, nous obtenons l' index de la tâche, et au moment où nous déposons notre carte, nous voyons qu'elle n'existe plus. Maintenant, lorsque nous faisons glisser notre carte de tâches, nous pouvons mettre en évidence la carte sélectionnée pour une meilleure expérience utilisateur Ainsi, dans le fichier CSS à points de la carte des tâches, après le style de la carte des tâches, nous ajoutons la carte des tâches, deux points actifs et à l'intérieur de celle-ci, nous définissons d'abord l'opacité à 0,7 et la bordure à un pixel, solide en a 111, ce qui est noir Et aussi pour la carte des tâches, nous avons défini le curseur à saisir. Enregistrez ceci et vous verrez maintenant que nous obtenons ces tuiles. Notre première étape est donc terminée. Maintenant, la deuxième étape, qui consiste à créer une zone de dépôt, signifie où nous pouvons déposer notre carte active. Nous pouvons utiliser notre carte à deux endroits. Après chaque carte ou avant notre liste de tâches, qui est l'endroit entre cet en-tête d' état de tâche et la première tâche de la liste. Ce sont donc les endroits où nous pouvons placer n'importe quelle carte. Ainsi, lorsque nous faisons glisser notre carte à cet endroit, nous pouvons afficher quelque chose comme déposer ici ou une simple boîte. Laissez-moi vous montrer comment créer cela. C'est vraiment simple. Ainsi, dans notre dossier de composants, nous créons un nouveau composant appelé drop area point JSX Nous créons un composant distinct pour afficher zone de dépôt, car nous pouvons utiliser le même composant plusieurs fois. Ici, nous ajoutons du code standard en utilisant RAFC à la place de cette date, nous pouvons ajouter une balise de section, et ici nous écrivons du texte à déposer ici Enregistrez ceci, et affichons ce composant de zone de dépôt après chaque carte. Donc, ici, dans le composant de la colonne des tâches, nous pouvons voir que nous mappons toutes les tâches de la colonne. Donc, après ce composant de carte de tâches, nous ajoutons notre composant de zone de dépôt. Maintenant, nous obtenons une erreur d'exécution car nous revenons ici aux composants. Donc, pour les résoudre, nous pouvons envelopper les deux composants avec un fragment de point de réaction. Et déplacez ce fragment de fermeture après avoir déposé le composant de zone. Et ici, nous devons passer la clé égale à index dans le fragment de point de réaction car nous sommes ici en train de mapper une liste. Regardez les modifications et jetez-y un coup d'œil. voyez, après chaque carte de tâches, nous obtenons le composant Drop Here. Maintenant, nous avons également besoin de ce composant de zone de dépôt ici en haut de la liste. Revenons donc au code VS. Ici, avant cette liste de tâches, nous ajoutons une zone de dépôt. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons ici cette zone de dépôt. Améliorons un peu ces styles car ici je pense que c'est un problème de marge. Ouvrez donc la colonne de tâches point Cssle et pour cet en-tête, ajoutez une marge inférieure à 15 pixels, enregistrez-la, et également dans le fichier CSS Tascard Au lieu de cette marge, nous avons défini la marge inférieure à 15 pixels. Sauvegardez ceci, et maintenant ça a l'air un peu joli. Nous allons maintenant styliser cette section de zone de dépôt. Pour en revenir au composant de zone de suppression, nous donnons le nom de classe à ce composant pour supprimer la zone de soulignement Maintenant, pour le CSS, j'aime créer un fichier CSS séparé, drop area point CSS. Ici, nous avions une zone de dépôt et à l'intérieur de cette largeur 200 % de hauteur à 100 pixels, couleur correspond à DC DC DC, la bordure à un pixel a DC DC DC, rayon d'usure à dix pixels, un rembourrage 15 pixels et une marge inférieure, également de 15 Maintenant, pour appliquer ces vignettes à notre composant de zone de dépôt, nous devons importer ce fichier en haut. Importez donc point slash drop area point css. J'ai beaucoup oublié cette chose quand j'ai commencé à apprendre React. Enregistrez les modifications et jetez-y un œil. Tu vois, c'est à ça que ça ressemble. Maintenant, par défaut, nous ne voulons pas afficher cette zone de dépôt. Nous voulons uniquement afficher lorsque nous faisons glisser notre carte de tâches sur la zone de dépôt. Pour cela, nous devons créer une variable d'état locale dans le composant Drop Area. Donc, indiquez-lui et donnez-lui un nom, show drop, set, show drop, et par défaut, nous lui donnons la valeur falls. Maintenant, la logique est simple : lorsque nous faisons glisser notre carte sur cette section , nous rendons cet état vrai. Et lorsque nous sortons de cette section, l'état tombe en baisse, ce qui signifie « ne pas afficher ». Donc, dans la balise de section, nous avons un autre événement appelé faire glisser la fonction flèche Enter et définir show drop sur True. Et nous ajoutons un autre événement sur la fonction Drag Liu Arrow et appelons simplement set showdrop à ce que nous tombons De plus, pour ce nom de classe, nous pouvons ajouter une condition. Ici, nous ajoutons des crochets C. Si showdrop est vrai, nous ajoutons la classe drop area, sinon nous ajoutons la classe drop hide underscore Enregistrez les modifications, et dans le fichier CSS à points de dépôt, ajoutez d'autres styles. Ainsi, dans la zone de dépôt, nous ajoutons de l'opacité à un et la transition vers toutes les 0,2 seconde d'entrée et de sortie. Et au point Hyde underscore inférieur en haut, nous avons simplement réglé l'opacité Donc, les changements et jetez-y un coup d'œil. Faites glisser une carte et passez simplement au-dessus d'une zone de dépôt. Regarde comme c'est beau. Donc, ici, notre deuxième étape est également terminée. Il ne nous reste plus qu'à savoir dans quelle position nous déposons notre carte. Et puis, en fonction de cela, nous écrivons une fonction pour mettre à jour notre liste de tâches. Maintenant, d'abord, comment pouvons-nous savoir dans quelle colonne nous déposons la tâche ? Donc, dans la colonne des tâches, j'ai déjà transmis le statut, afin que nous puissions utiliser ce statut, tout oubliant la position que nous avons ici dans l'index. Donc, si vous souhaitez ajouter notre tâche à côté de cette tâche, notre nouvel index sera index plus un. Ne vous y trompez pas. Je vais vous le montrer dans une minute. Ainsi, dans le composant de l'application, nous créons une nouvelle fonction appelée on drop. Et dans le paramètre, nous obtenons le statut, qui est dans quelle colonne, nous abandonnons notre tâche. Et aussi, nous obtiendrons un index, ou nous pouvons dire la position, qui est la position de la tâche abandonnée. Pour l'instant, je vais simplement placer la carte active Consol point log Ti dollar en statut dollar et en position dollar index Le lieu de l'index, je voudrais donner le nom de ce paramètre à la position. Je pense que c'est plus exact. Nous devons maintenant appeler cette fonction lorsque nous déposons notre carte dans la zone de dépôt, car c'est à ce moment-là que nous voulons apporter des modifications à notre tâche. Nous transmettons donc cette fonction sous forme accessoires dans ces trois colonnes de tâches Je pense que par erreur, je donne le nom de la fonction Writ Sélectionnez cette option, appuyez sur F deux et renommez le nom de la fonction. Enregistrez ce fichier, dans le composant de la colonne des tâches. Tout d'abord, nous obtenons la fonction drop en tant qu'accessoires et nous transmettons simplement cette fonction en tant qu' accessoires dans ce composant de zone de dépôt De plus, pour la fonction « on drop », nous devons transmettre un statut égal à status. R Nous avons besoin d'un index, qui est index plus un parce que nous voulons placer cette carte après cette carte de tâche. Maintenant, au lieu de passer ces trois probes, nous pouvons faire quelque chose comme ça Dans les accessoires on drop, nous pouvons transmettre la fonction de rappel et nous appelons simplement la fonction here on drop Et premier paramètre, nous passons le statut, qui est le statut de cette colonne de tâches. Ensuite, nous passons index plus un. Si vous êtes confus dans cette méthode, vous pouvez transmettre trois accessoires séparément, et dans le composant de zone de dépôt, vous devez simplement appeler comme ceci Sauvegardons ce fichier, et dans le composant de zone de dépôt, nous obtenons la fonction de dépôt. Maintenant, dans cette section, nous avons un autre événement appelé drop, qui s'exécutera lorsque nous déposerons quelque chose dans cette section. Nous passons donc ici la fonction de rappel, et d'abord, nous l'appelons simplement la fonction on drop sans paramètre car nous avons déjà transmis ce paramètre dans les accessoires précédents Et ici aussi, nous devons masquer la zone de dépôt après avoir déposé la carte. set devrait donc tomber en chute libre. Sauvegardez ceci. Et si nous faisons un glisser-déposer dans une zone de dépôt, nous ne recevons aucun message de console car nous devons empêcher le comportement par défaut de l'événement on drag over. Nous ajoutons ici au glisser-déplacer, nous obtenons ici la fonction d'erreur d'événement, point d' événement empêche la valeur par défaut. Enregistrez ceci, et maintenant, si nous glissons et déposons à nouveau la tâche, nous recevons le message de notre console, qui va jouer un rôle en position trois, car le premier index de cartes peut être deux, mais peu importe. Nous obtenons donc les données dont nous avons besoin ainsi que la position. Maintenant, si nous glissons et déposons notre carte au tout début de la liste, nous obtenons une erreur. Le dépôt n'est pas une fonction car nous ne transmettons pas la fonction de dépôt sous forme d'accessoires dans cette zone de dépôt. Je les copie donc simplement sur les accessoires de dépôt par le bas et je les colle simplement ici Maintenant, pouvez-vous me dire quelle propriété nous devons changer ici ? Bien, nous avons juste besoin de modifier l'index car le statut sera le même. Alors, à quelle position se trouve cette zone de chute ? Simplement, il est à zéro car dans un tableau, l'indice zéro est la première position. Voici les modifications et jetez-y un coup d'œil. Maintenant que nous recevons le message de la console, nous avons le statut et la position de la carte active. Il ne nous reste plus qu' à écrire une logique pour réorganiser notre tâche dans la fonction On Drop Tout d'abord, nous vérifions la condition si la carte active est égale à zéro ou si la carte active est égale à non définie Ensuite, nous revenons simplement de ce point. Après cela, choisissons simplement la tâche que nous voulons déplacer. Donc const task to move équivaut à task, et nous obtenons une garde active Ensuite, pour mettre à jour notre liste de tâches, nous devons d' abord supprimer la carte tective actuelle de notre liste de tâches Filtre à points de tâche, ici nous obtenons chaque tâche et nous obtenons également la fonction flèche d'index, et ici nous passons indice de condition différent de celui de la carte active. Cette méthode de filtrage supprimera notre carte active actuelle de cette liste de tâches et renverra un tableau de tâches mis à jour. Nous pouvons donc stocker ce tableau dans la variable appelée tâche mise à jour. Il ne nous reste plus qu' à placer notre tâche à déplacer à notre position abandonnée. Nous pouvons donc utiliser une méthode d'épissage comme celle-ci, mise à jour de la tâche par points Maintenant, au premier paramètre, nous écrivons où nous voulons placer notre nouvel article. Dans notre cas, il est stocké en position. Ensuite, nous écrivons zéro, ce qui signifie essentiellement qu' aucun élément n'a été supprimé. Et au troisième paramètre, nous pouvons transmettre notre objet ou élément, que nous voulons stocker à cette position. J'ajoute donc ici un objet, et tout d'abord, je répartis toutes les propriétés de la tâche à l'objet de déplacement, et après cela, nous pouvons simplement changer la propriété status en ce paramètre status. Maintenant, comme nous le savons, nous avons mis à jour la liste des tâches, nous pouvons donc simplement définir une tâche sur une tâche mise à jour. De plus, en partant du bas, supprimons cette balise h one, qui affiche la carte active. Enregistrez les modifications et jetez-y un œil. voyez, maintenant nous pouvons déplacer notre tâche d'une liste à l'autre, et nous pouvons également les déplacer dans une liste simple. Voilà pour ce tutoriel. C'est un long tutoriel, mais j'espère que vous verrez Dragon Drop n'est pas si difficile que ça. Nous devons procéder étape par étape. 54. Section 06 Projet 02 - MovieManiac: Bienvenue dans la sixième section du cours ultime de React. Dans cette section, nous allons également commencer à développer notre projet, qui est le film Maniac Vous pouvez voir à quel point c'est cool et les détails du film proviennent d'un autre site Web. Nous pouvons également filtrer ces films en fonction de leur classement, puis les trier par date de sortie ou par classement, en ordre croissant ou décroissant L'objectif de ce projet est d'apprendre les fonctionnalités d'appel EPI , de filtrage et de tri utilisées dans de nombreuses applications du monde réel Sachez que vous êtes enthousiasmé par ce projet, alors plongeons-nous dans ce projet. 55. Préparer le projet et le style de mise en page: Commençons par créer le nouveau projet. Ouvrez donc le dossier de votre projet React et ouvrez l'invite de commande ou le terminal dans ce dossier. Maintenant, pouvez-vous me dire quelle commande nous allons utiliser pour créer une nouvelle application ? Écrivez NPM, créez du blanc, aérez, le dernier et appuyez sur Entrée Maintenant, nous écrivons le nom de notre projet, le film Maniac, et nous appuyons sur Entrée Maintenant, sélectionnez le framework, qui est React, puis sélectionnez la variante, qui est JavaScript et appuyez sur Entrée. Il ne nous reste plus qu'à exécuter ces trois commandes. Donc, tout d'abord, allez dans ce dossier avec le CD et appuyez sur l'onglet, sélectionnez le dossier Movie Maniac Maintenant, installons toutes les dépendances. Installez donc NPM et appuyez sur Entrée. Cela va prendre un certain temps. D'ici là, planifions notre application. Donc, tout d'abord, nous pouvons diviser mise en page de notre application en deux sections. Le premier est Nevar et le second est cette liste de films. Définissons maintenant les composants que nous pouvons créer pour cette application. Je tiens à préciser une chose : ce processus de planification n'est pas le plan absolu. Ce n'est qu'un point de départ rapide. Nous pouvons ajouter ou supprimer des composants en fonction de nos besoins. Nous pouvons donc d'abord séparer ce composant Naba. Après cela, nous pouvons créer un composant pour cette carte vidéo. Ensuite, dans cette section d'affichage, nous avons trois autres sections, qui sont la section la plus populaire et la mieux notée et à venir. Mais vous pouvez voir que la structure de base de toutes les sections est la même. Toutes comportent des en-têtes, des filtres, des raccourcis et une liste de cartes vidéo Nous pouvons donc également créer des composants réutilisables pour cela, et je pense que c'est tout ce dont nous avons besoin. Voyons maintenant si nos dépendances sont installées ou non. Et oui, il est installé. Ouvrons donc ce projet dans le code VS par un point d'espace de code, et appuyons sur Entrée. Bien. Nous pouvons maintenant fermer ce terminal. Nous n'en avons pas besoin. Et aussi, nous fermons notre dossier. Maintenant, vérifions-nous que notre projet fonctionne ou non. Ouvrez donc le terminal avec Control plus Batak ou Command plus Batak et écrivez NPM, exécutez DO et Enfin, si vous souhaitez arrêter cette application, appuyez sur Ctrl plus C ou Commande+C pour cela. Maintenez maintenant la touche Ctrl ou Commande enfoncée et cliquez sur l'URL de cet hôte local. Et ça marche. Maintenant, nous allons créer une mise en page de base pour notre application. Ouvrez donc le fichier JSX app point, et nous supprimons tout le code d'ici et créons un composant fonctionnel avec RAF CE Maintenant, tout d'abord, nous donnons à cette classe un nom égal à app. Et à l'intérieur de ce Du, nous voulons créer : d'abord, nous écrivons ici tag Naw et lui donnons un nom de classe Na Bar, ici nous écrivons le contenu de la Navbar Ensuite, nous créons notre section principale de notre application, et à l'intérieur de celle-ci, nous écrivons simplement le contenu principal. Sauvegardez-les et voyons ce que nous obtiendrons. Vous voyez, nous avons ici les deux sections. Maintenant, définissons le style de chacun d'entre eux. Mais avant cela, nous devons supprimer certains styles de base. Dans le fichier CSS à points d'index, nous supprimons tous les styles, et en haut, nous écrivons Star Calibackets et écrivons C, il écrira la marge zéro. Après cela, B zéro, et nous obtenons le remplissage zéro et la taille de la boîte par rapport à la zone de bordure Ce sont les astuces que j'ai apprises en travaillant sur plusieurs projets. Mais j'aimerais avoir les astuces dès le début, et c'est pourquoi je vous les donne très tôt. Maintenant, après cela, nous ajoutons des styles pour le corps et changeons la couleur de fond pour qu'elle soit 101010 Et de la couleur au FFF, qui est le blanc. Enregistrez ce fichier. Ajoutons maintenant du CSS à notre mise en page. Ainsi, dans notre fichier CSS à points d'application, nous supprimons tous les styles et applications et à l'intérieur de ces crochets, nous écrivons les lignes du modèle de grille display to grid de 80 pixels et auto. hauteur de la première section est donc de 80 % et la hauteur de la deuxième section est activée automatiquement. Vous le savez déjà, et c' est tout ce dont nous avons besoin pour la mise en page. Enregistrez ce fichier et jetez-y un œil. Nous n'avons pas nos meilleurs styles. Peux-tu m'expliquer quelle en est la raison ? Hein ? Nous n'avons pas importé fichier CSS à points d' application dans notre composant d'application, et c'est ce que de nombreux développeurs ont oublié de faire. Nous écrivons donc Import period slash app point css, enregistrons les modifications et jetons un coup d'œil Tu vois, nous avons nos styles. Dans la leçon suivante, nous allons créer notre section Navbar 56. Ajouter des polices personnalisées: Maintenant, ajoutons une police pour cette application. Donc, comme je vous l'ai dit, nous avons deux façons d'ajouter une police dans notre application React. Dans le premier projet, nous avons vu comment ajouter une police à l'aide de CDN Link. Voyons maintenant comment ajouter une police hors ligne. Encore une fois, nous allons utiliser MonstFont parce que c'est ma police préférée Donc, dans notre navigateur, ouvrez un nouvel onglet, nous recherchons les polices Google Monsaet et ouvrons ce premier lien Maintenant, en haut, nous avons l'option Télécharger la famille. Cliquez dessus pour voir le téléchargement commencé. Ouvrons-le dans le dossier de téléchargement et décompressez-le simplement à partir d'ici Ouvrons maintenant MonsttFolder. Et nous avons ici ce type de structure de dossiers. Dans ce dossier statique, nous avons tous les poids de police individuellement. Revenons maintenant à ce dossier, et nous avons ici les deux fichiers de polices complets qui contiennent tous les poids de police. Ici, nous ne voulons pas d'italique, nous voulons une police normale Mais la taille de cette police est assez grande. Nous pouvons voir qu'il s'agit de 218 KV, ce qui est la grande taille des fichiers de polices Vous pouvez convertir ce fichier de police en fichier de police de petite taille. Ainsi, dans le navigateur dans Nouvel onglet, nous recherchons TTF, qui est notre format de fichier actuel, vers W FF deux, qui est le fichier de police le plus populaire pour les navigateurs Web Ouvrez ce site Web Cloud Convert, et ici nous devons sélectionner notre police. Sélectionnez la police Monster At, ouvrez-la et cliquez sur C Convert. Cela ne prendra pas beaucoup de temps. Et cliquez sur Télécharger. Maintenant, dans notre dossier de téléchargement, nous pouvons voir que la taille du fichier est réduite à 82,8 Ko, soit une réduction de près de 60 à 70 % Ici, nous renommons ce fichier en Monsratt WFF. Maintenant, vérifions que ce format de téléphone fonctionne ou non pour tous les navigateurs. Rendez-vous donc sur caniuse.com, et en haut, nous recherchons Et vous voyez, cela fonctionne dans presque tous les navigateurs. Plus précisément, 97 % des navigateurs supportent cette police. Revenons donc au code VS, et dans notre dossier de ressources, nous créons un nouveau dossier appelé fonts, et dans ce dossier, il suffit de faire glisser cette police. Voyons maintenant comment appliquer cette police dans notre application. Ouvrez le fichier CSS à points d'index. Ici, en haut, nous définissons notre police. Il suffit donc d'écrire pendant la phase de police et de sélectionner cette suggestion automatique. Nous avons maintenant deux propriétés. Le premier est la famille de polices, et nous passons ici le nom de notre police, que nous voulons utiliser. Nous pouvons donc écrire ici une police importée ou autre. Par souci de simplicité, j' écris simplement Montserrat. Dans l'URL, nous devons transmettre le chemin de notre fichier de police. Donc, dans les codes doubles, nous écrivons une barre oblique, nous avons des actifs En cela, nous avons des polices, et ici nous avons notre police. Maintenant, dans notre corps, nous ajoutons une famille de polices à Monseret Sanserif. N'oubliez pas que quel que soit le nom que nous transmettons dans cette famille de polices, le même nom que nous devons transmettre ici. Dans le cas contraire, cela ne fonctionnera pas. Enregistrez les gènes et jetez-y un coup d'œil. Tu vois, nous avons la réponse à la police de caractères. C'est ainsi que nous ajoutons des polices hors ligne dans notre application. Mais à mon humble avis, si possible, essayez d'utiliser le lien CDN pour ajouter des polices Je vous montre simplement ceci parce que certains clients souhaitent ajouter leur propre police pour leur projet. Et voici comment vous pouvez ajouter ces polices. 57. Créer un composant de barre de navigation: Créons donc notre section Navbar. Maintenant, ce type de barre N est très courant dans de nombreuses applications, et nous ne voulons pas non plus compliquer notre composant d'application. Nous pouvons donc définir notre Nabar dans le composant séparé. Ainsi, dans notre dossier source, nous créons un nouveau dossier appelé components, et à l'intérieur de celui-ci, nous créons un autre dossier appelé Nabar Dans ce dossier NaBR, nous créons le fichier Navbar JSX Nous créons également un fichier CSS Navbar point. Créons maintenant un modèle standard dans notre composant Nabar et en haut, nous importons le fichier css point Navbar point par point et enregistrons ce fichier Revenons maintenant au composant F, nous avons obtenu cette balise Nab et à la place de celle-ci, nous ajoutons notre composant NaBR et voyons comment l'importation fonctionne Enregistrez maintenant ce fichier dans notre composant à la place de ce DU, nous collons notre tag NAO Maintenant, ajoutons tous les éléments de notre Navar. Donc tout d'abord, nous ajoutons une balise H one, et nous écrivons ici le nom de notre application, qui est le film Maniac Maintenant, pour ajouter trois liens, nous créons un Du et lui donnons un nom de classe, NaBr, underscore Permettez-moi de vous montrer le raccourci pour le créer. Écrivez un point et nous ajoutons ici nom de notre classe : NaBR, underscore inks et head tab Vous voyez, nous obtenons DV avec ce nom de classe. C'est ce qu'on appelle T qui nous aide à écrire du code en premier. Maintenant, à l'intérieur de ces liens Nebar, nous créons une balise d'ancrage, et nous écrivons « popular » ici Maintenant, après cela, nous voulons ajouter Imoge pour cela. Donc, dans notre dossier de ressources, que vous avez téléchargé précédemment. Et dans ce dossier, nous avons un projet dans un dossier, et à l'intérieur, nous avons le dossier Assets. Faites maintenant glisser toutes ces images dans notre dossier de ressources. Bien. Maintenant, dans notre composant Number en haut, nous importons Fire, à partir de là deux ensembles de dossiers et Fire Dot PNG. Importons maintenant deux autres images pour les liens les mieux notés et les liens à venir. Dupliquez ce lien deux fois de plus et nous changeons d'abord ce feu étoile et l'image en point étoilé lumineux PNG. Enfin, importez party from party phase point PNG Maintenant, pour ajouter ces images, nous ajoutons une balise image et nous passons ici, fire, et dans Alt fire et dans Alt fire Imoge ainsi que le nom de la classe à NabarUnderscore Maintenant, dupliquons ce tag d'ancrage deux fois de plus et nous changeons le nom du lien en le mieux noté et l'image en étoile et lt en étoile. Le dernier lien vers le prochain, l'image vers la fête et l'image vers l'image de la phase de fête Enregistrez les modifications, et nous obtenons une erreur. Nous pouvons voir que le chemin n' est pas disponible. Donc, dans notre phase de séparation, nous devons corriger l'orthographe Enregistrez les modifications et regardez, nous obtenons nos éléments. Maintenant, ajoutons-leur des styles. Donc, tout d'abord, nous séparons nom de cette application et ces liens. Ainsi, dans le fichier css navbar point, nous écrivons Navbar, et entre crochets, nous ajoutons display Tracez les éléments au centre, justifiez le contenu par un espace entre rembourrage jusqu'à zéro pour haut, le bas et 30 pixels pour la gauche et la droite Et en bas à un pixel, solide a E six, E six, E six. Enregistrez ceci et voyez qu'ils sont séparés. Maintenant, après ce NaBR, nous avons eu le support d'angle Nab, H un, et dans les crochets du ravin, une taille à 30 pixels et la couleur deux a Maintenant, après cela, nous ajoutons des styles pour nos tags nga. Ainsi, le point NaBr souligne les liens, angle, la cible en V, A, et à l'intérieur des crochets, à l'affichage sur les drapeaux, aligne les éléments au centre, aligne les éléments au centre, taille de la police à 20 pixels, le poids de la police à 500, couleur au blanc, la décoration du texte à zéro rembourrage à zéro et Dis-les gentils. Ça a l'air bien. Maintenant, réduisons cette Imoge. Nous ajoutons donc ici le point NabarUnderscore, Imo g, et entre crochets Coli, nous ajoutons la largeur à 25 pixels, hauteur à 25 pixels et la marge gauche à Enregistrez les modifications et jetez-y un œil. Ça a l'air sympa, mais nous n'avons pas nos liens d'affilée. Examinons donc cela et voyons ici que nous oublions d'ajouter des drapeaux d'affichage pour les liens Nevar dus Dans notre fichier CSS, nous ajoutons ici des liens de soulignement NBR à points, et entre crochets Guli, nous écrivons display sur les drapeaux et alignons les éléments au Enregistrez les modifications et jetez-y un œil. Découvrez maintenant que notre Nabar est parfait. Je sais que je vais aller un peu plus vite pour partie SDML et CSS car vous le savez déjà 58. Créer un composant MovieList: Maintenant, nous allons créer notre composant de liste de films. Nous créons donc un nouveau dossier dans le dossier des composants appelé Movie List. Et dans ce dossier, nous créons un nouveau fichier appelé movilest dot CSS, et aussi movilest dot et aussi movilest Ajoutons maintenant notre code par RAFC et en haut, nous importons le fichier css Movist point point point css. Nous ne nous inquiétons donc pas à ce sujet. Maintenant, à la place de ce DU, nous ajoutons une section et nous ajoutons nom de la classe, la liste des soulignements de films Maintenant, dans cette section, nous avons deux parties. L'une concerne notre ligne d'en-tête, qui contient l'en-tête du dernier filtre et le tri, et la deuxième partie est la liste des voitures de cinéma. Nous ajoutons une balise d'en-tête et lui donnons un nom de classe, un en-tête de liste de films. Maintenant, à l'intérieur de celui-ci, nous ajoutons d' abord au tag et ajoutons le nom de la classe, le titre de la liste des films. Maintenant, à l'intérieur de celui-ci, nous ajoutons notre titre, qui est populaire. Et après cela, nous voulons ajouter Imoge. Nous ajoutons donc une balise image, et dans la source, nous passons fire Alt pour lancer Imoge et nom de classe à Navar underscore Imog nous avons ajouté dans Nous devons maintenant importer cette Imoge de feu en haut. Importez Fire à partir de là, nous à deux dossiers dans Assets et ici nous obtenons Fire Dot PNG. Ajoutons D pour notre filtre et notre raccourcissement et donnons-leur un nom de classe MovistFSFS pour le filtrage et le raccourcissement. Maintenant, d'abord, je veux ajouter un élément non ordonné, et à l'intérieur de celui-ci, nous ajouterons un élément de filtrage Nous écrivons donc un filtre de soulignement MV à points, un crochet angulaire, un point, un filtre de soulignement de film, un élément de soulignement, le multiplions par trois et appuyons Tu vois, ici nous obtenons ce code. C'est le pouvoir d'Emet. Nous passons maintenant ici huit étoiles plus, sept étoiles plus et six étoiles plus. Maintenant, après cette liste, nous devons ajouter deux listes déroulantes. Nous ajoutons donc le shorting select point MV underscore. Et à l'intérieur de cela, nous voulons trois options. Maintenant, pour la première option, nous passons le tri par, qui est par défaut, la datation et l'évaluation. Maintenant, nous pouvons simplement dupliquer cette balise de sélection, et ici nous ne voulons que deux options. Nous pouvons donc supprimer cette option, et ici nous écrivons par ordre croissant, et enfin, par ordre décroissant Enregistrez les modifications et nous n'obtiendrons rien car nous avons oublié d'ajouter un composant de liste de films dans notre composant d'application. Ainsi, dans le composant de l'application à la place de ce contenu principal, nous ajoutons un composant de liste de films. Enregistrez les modifications et jetez-y un œil. Tu vois, c'est ici que nous trouvons nos éléments. Maintenant, ajoutons-leur des styles. Ainsi, dans le fichier CSS à points de liste de mouvements, nous ajoutons une liste de soulignements de films à points Et entre crochets, nous ajoutons un rembourrage de dix pixels pour haut en bas et de 30 pixels pour la gauche à droite Ensuite, nous avons défini l' affichage sur les drapeaux, les éléments Alan au centre, puis justifié le contenu par un espace entre les deux car nous voulons séparer titre par un filtre et un tri. Ensuite, nous ajoutons la marge inférieure à cinq pixels. Maintenant, nous ajoutons des styles à notre titre, donc pointez le point sur le titre Movist Et dans les clipacks, nous ajoutons deux drapeaux d'affichage, des lignes au centre et une taille de police de 226 pixels Color Two contient des dictons FFE 400 et nous ne connaissons pas nos styles ici Alors vérifions-le. Dans notre composant de liste de films, nous pouvons voir ici que nous devons ajouter du style à l'en-tête de la liste de films. Dans notre fichier CSS, nous changeons cette classe de liste de films en classe d'en-tête de liste de films. Dites les modifications et voyez, nous séparons ces deux parties. Maintenant, je sais que la taille de police est un peu petite. Vous pouvez les augmenter en fonction de vos besoins. Maintenant, définissons les styles de ce filtre et du menu déroulant. Revenons donc au code VS, et nous ajoutons ici que le film est FS. Et dans les crochets Cali, nous ajoutons un affichage pour indiquer les éléments de la ligne au centre. Maintenant, voici une chose. Nous répétons ces deux lignes de nombreuses reprises dans notre application. Voir ici, ici, et nous l' avons également utilisé dans le fichier CSS Nabar. Créons donc une classe séparée pour ces deux lignes. Coupez donc ces deux lignes et ouvrez le fichier CSS à points d'index. À la fin, nous ajoutons une nouvelle classe, Align underscore center, et à l'intérieur de celle-ci, nous collerons nos styles Désormais, chaque fois que nous voulons ajouter ces deux styles, nous pouvons simplement ajouter cette classe Align Center à cet élément, et c'est ainsi que Telvin CS est créé Enregistrez ce fichier, et dans le fichier CSS à points de liste de films, nous devons ajouter la classe Align Center pour ces deux éléments. Nous retirons donc ces deux lignes d'ici. Et supprimez également ce style de classe. Sauvegardez ceci. Et dans le composant de liste des films, nous ajoutons d'abord le centre d'alignement avant l'en-tête, et nous ajoutons également le centre d'alignement avant cet en-tête. De plus, pour ce jour et aussi avant ce film, soulignez le filtre Enregistrez les modifications, et cela fonctionne correctement. Maintenant, revenons au fichier CSS à points de liste de films, nous ajoutons un film à points, filtre, un style de liste à nan, une taille unique à 16 pixels. Maintenant, nous ajoutons un film à points, un élément de filtre. Et dans les étalonnages, nous ajoutons un rembourrage à cinq pixels et dix pixels et du curseur Maintenant, après cela, nous ajoutons du style à notre menu déroulant. Donc, un court-métrage à points et à l'intérieur de ces crochets, nous ajoutons une bordure à nun, un contour à Alsan, un rayon de bordure de cinq pixels à taille de police de cinq pixels à un poids de police de 16 pixels à 500, une famille de polices à hériter, afin qu'il puisse utiliser MonSetFont Après cela, hauteur à 30 pixels, addition à zéro et cinq pixels et marge à zéro et dix pixels. Enregistrez les modifications et jetez-y un œil. Tu vois, nous avons nos styles. Maintenant, enfin, je veux juste afficher ce filtre sélectionné afin que l'utilisateur puisse voir quel filtre il a sélectionné. Ainsi, dans le composant mobilisé, dans cet élément de liste, nous ajoutons une autre classe appelée active Nous remplacerons cette classe active par un filtre actif. Enregistrez ce fichier, et dans le fichier CSS, après ce filtre vidéo IAM, nous ajoutons le filtre de déplacement m point Des crochets bouclés actifs et à l'intérieur de ce solide boer d'un pixel se trouvent E six, E six, E six et un poids de police Enregistrez les modifications et jetez-y un œil. Tu vois, c'est magnifique. Maintenant, après cette balise d'en-tête, nous créons un autre du avec nom de la classe, des cartes de soulignement de films Dans ce duo, nous ajouterons toutes nos cartes vidéo. Dans la leçon suivante, nous allons donc créer ce composant de carte vidéo. 59. Créer un composant de carte vidéo: Maintenant, construisons notre dernier composant qui est le composant de la carte vidéo. Ainsi, dans le dossier de la liste des films, nous créons un nouveau fichier appelé movecard point CSS, et nous créons un autre fichier appelé movicardt La raison pour laquelle nous créons ce composant dans MovilistFolder, c'est parce que la carte vidéo fait partie du Vous pouvez également créer un dossier distinct pour cela. Cela dépend entièrement de vous. Ajoutons maintenant du code standard, et en haut, nous importons simplement le fichier CSS point point point point point point point point point point point point point point point point point point point point point point point point point point point point point point point point point point point point par point Sympa. Maintenant, dans ce composant, nous renvoyons une balise d'ancrage car lorsque quelqu'un clique sur la carte vidéo, nous ouvrons ce lien et nous lui donnons le nom de classe de la carte de soulignement du film Maintenant, dans cette balise d'ancrage, nous voulons ajouter notre affiche de film. Ajoutez donc une balise Image et ajoutez le nom de la classe à l'affiche de soulignement du film Trouvons maintenant une affiche factice pour une émission temporaire. Donc, dans notre navigateur, ouvrez un nouvel onglet et recherchez une image d'affiche de film, sélectionnez l'une d'entre elles, une image et lien droit sur l'image et copiez l'adresse de l'image. Revenez maintenant au code VS et collez ce lien dans la source, et dans Alt, nous ajoutons l'affiche du film. Enregistrez les modifications, et nous n'obtenons encore rien car nous avons encore une fois oublié d'ajouter ce composant de carte vidéo dans notre composant de liste de films. Ainsi, dans le composant Move List, nous ajoutons ici le composant de carte vidéo. Enregistrez les modifications, et C, nous recevrons notre message. Maintenant, dans notre application, lorsque nous passons notre souris sur la carte vidéo, nous voulons afficher quelques détails sur le film, tels que le nom, date de sortie, le classement et une petite description Après cette affiche, nous ajouterons un DU avec nom de la classe et les détails du soulignement du film Ensuite, nous ajoutons trois balises S par nom de film et ajoutons un nom de classe pour déplacer les détails du soulignement et le titre du soulignement Et à l'intérieur de celles-ci, nous écrivons le nom du film. Ensuite, nous ajoutons un jour avec le nom du cours, la date de soulignement du film, le taux de soulignement Et à l'intérieur de celui-ci, nous ajoutons d'abord un paragraphe dans lequel nous indiquons la date de sortie du film , puis un autre paragraphe pour afficher le classement. Maintenant, sur le côté droit de cette note, nous voulons afficher l'icône en forme d'étoile. Nous ajoutons donc une balise image, de la source à l'étoile, touche Alt à l'icône d'évaluation et lui donnons un nom de classe pour souligner la carte Imoge Nous devons maintenant importer cette icône en forme d'étoile. En haut, nous importons l'étoile de. Ici, nous allons aux dossiers ou aux actifs slash star point png. Bien. Maintenant, à la fin, nous voulons afficher une petite description. Après ce dU, nous ajoutons une autre balise de paragraphe et lui donnons un nom de classe au film sous description écossaise. À l'intérieur, nous ajoutons le texte Dummi, BLR 15 et appuyons sur la touche Tab Le roi et jetez-y un coup d'œil. Tu vois, nous avons nos mauvais éléments. Donc, dans la prochaine leçon, nous les rendrons magnifiques. 60. Styliser le composant MovieCard: Ajoutons donc rapidement des styles pour le composant de la carte vidéo. Tout d'abord, je ferme tous les autres fichiers. Maintenant, dans le fichier CSS point de la carte vidéo, point carte vidéo. Et entre crochets, nous ajoutons la largeur à 200 pixels, hauteur à 300 pixels, la marge à 15 pixels, marge à 15 pixels, trop-plein au rayon d'eau caché à dix pixels, la couleur au blanc Et l'ombre de la boîte à zéro pixel, trois pixels, huit pixels pour le flou, RGBA, zéro, zéro, zéro, 0,25 Maintenant, après cela, nous ajoutons une affiche de film à points et à l'intérieur elle avec 200 % de hauteur et 200 % de hauteur Dites les modifications et vous verrez, nous ne comprenons pas nos styles. Découvrons le problème. Faites donc un clic droit sur notre carte et passez à l'inspection. Sélectionnez cette balise d'ancrage et voyez ici que notre largeur et notre hauteur ne sont pas appliquées. Et cela nous suggère d' essayer de régler l'affichage sur autre chose qu'en ligne car si notre élément est défini sur en ligne, cela empêchera la propriété de largeur. Mais il existe un autre moyen de résoudre ce problème. Nous pouvons fabriquer nos cartes vidéo grâce aux drapeaux. Ainsi, dans le fichier CSS à points de liste de mouvements, nous ajoutons des cartes vidéo à points. Et à l'intérieur, nous écrivons « display » sur les drapeaux. Flexez l'emballage pour envelopper et répartir le contenu de manière uniforme. Réglez les modifications et voyez, nous obtenons notre carte ici. Nous devons maintenant afficher la section des détails de notre film. Nous devons donc utiliser ici la position absolue. Donc, tout d'abord, dans le fichier CSS de la carte vidéo, nous créons notre élément de carte vidéo, qui est notre élément parent de ces détails du film, et nous définissons sa position sur relative. Ensuite, en bas, nous ajoutons les détails du film en points, et à l'intérieur de ceux-ci, nous ajoutons la position du haut absolu à zéro. Largeur 100 %, hauteur 100 % et rembourrage de dix pixels. Dites ceci, et voici les détails du film. Maintenant, mettons ce texte en mosaïque. Revenons donc à notre fichier CSS et nous ajoutons ici les détails du film à points en ajoutant et à l'intérieur celui-ci, une taille à 16 pixels et une couleur deux contient FFE 400. Ensuite, nous ajoutons le film à points, la date, le taux, et à l'intérieur des crochets, nous affichons sur le drapeau, nous alignons les éléments au centre Oh, désolé, nous avons déjà créé une classe pour cela. Nous supprimons donc ces deux styles, et nous ajoutons du contenu de justification à l'espace entre la taille de police de 12 pixels, le poids de police marge de 500, 5 pixels pour le haut, le bas et zéro pour la gauche et la droite, et la couleur a FF E 400. Maintenant, dans le composant de la carte vidéo ajoutons d' abord la classe Align Center avant cette classe, sinon nous l'oublierons. Enregistrez ce fichier et revenez à notre fichier CSS. Ensuite, nous avons eu la carte à points Imog et à l'intérieur de celle-ci, nous avons défini la largeur à 20 pixels, hauteur à 20 pixels et la marge gauche à cinq pixels Enfin, chez ME, nous soulignons la description, taille de police de 12 Excel et un style de police pour l'Italie Dites les modifications et jetez-y un coup d'œil. voyez, voici nos styles, mais nous devons apporter quelques modifications. abord, nous voulons ajouter peu d'arrière-plan à ces détails afin que un peu d'arrière-plan à ces détails afin que le texte soit clair et nous voulons également le placer en bas. Revenons donc à Vacde et ici, dans la classe des détails du film, ajoutez une image d'arrière-plan au dégradé linéaire, et à l'intérieur, nous passons deux couleurs pour le dégradé Donc RGBA, 00, zéro, zéro, RGBA, 00, zéro, Elles sont toutes deux de couleur noire, mais la première avec une opacité nulle et la seconde avec une opacité Ensuite, nous avons dû afficher les drapeaux, indiquer direction du drapeau vers la colonne et justifier le contenu jusqu'à la fin. Schans et Take a al Vous voyez maintenant que nos détails semblent très clairs, et c'est la puissance du gradient. Maintenant, je n'ai aucun effet pour cette date et cette ligne tarifaire. Voyons donc ce que nous avons fait de mal. Revenons à notre composant de carte vidéo. Ici, nous pouvons voir que nous avons le nom de la classe, le trait soulignement du film, la date, le taux de soulignement Je fais probablement une erreur d'orthographe. Inspectons notre carte , voyons le DU et voyons. Ici, nous n'avons pas de styles pour cela. Revenons donc à notre fichier CSS, je corrige le nom de notre classe, vois les modifications et j'y jette un œil. Tu vois, nous obtenons nos coordonnées correctement. Nous voulons maintenant afficher ces informations uniquement lorsque nous survolons cette carte, et nous voulons également l'agrandir lorsque nous survolons Donc, en haut, nous ajoutons cette carte vidéo appelée Hover Effect et à l'intérieur de celle-ci, nous ajoutons simplement une transformation à l'échelle de 1,08 Maintenant, dans les styles de détail du film, ajoutez une propriété supplémentaire, opacité à zéro par défaut Et lorsque nous accrocherons notre carte vidéo, nous réglerons son opacité sur un carte vidéo So Dot, Call and Hoover Dot MVE. Et à l'intérieur de cette opacité, jusqu'à un. C'est aussi simple que ça. Dites gangs et jetez-y un coup d'œil. Tu vois, ici on obtient ce que l'on veut. Maintenant, cet effet est très soudain. Nous voulons que cela se passe bien. Ainsi, dans nos styles de cartes vidéo, nous avons dû passer à tout ce qui s'est écoulé depuis 0,2 seconde. Et il en va de même pour les détails du film. Dites les modifications et jetez-y un coup d'œil. Vous voyez, ici, nous obtenons un effet lisse. Nous avons donc ici tous les composants prêts avec des styles. Il ne nous reste plus qu'à ajouter des fonctionnalités à notre projet. Si vous regardez ce cours en permanence, faites une pause de 10 à 15 minutes pour prendre l'air. Prends soin de tes yeux, je te verrai dans la prochaine leçon. 61. Qu'est-ce qu'une API: Avant de commencer à appeler une API, voyons ce qu'est l'EPI API signifie interface de programmation d'applications, et c'est un moyen pour deux programmes de communiquer entre eux. Comprenons cela avec l'exemple. Voici un restaurant. Nous sommes assis sur la première table et nous voulons commander de la nourriture. Dans ce cas, que ferons-nous ? Nous ne nous rendons pas directement à la cuisine pour commander nos plats au chef. Au lieu de cela, nous appellerons un serveur. Le serveur prendra notre commande et la remettra à la cuisine Après cela, la cuisine commence à préparer notre commande et donne à manger au serveur Ensuite, le serveur livrera la nourriture à notre table. Ici, le serveur est comme un messager qui prend notre demande et la transmet à destination Ensuite, il recevra un message de réponse de la destination et nous le ramènera. Imaginez donc que cette table sur laquelle nous sommes assis soit notre interface d'application. Nous voulons obtenir des données sur les vêtements Nous allons donc appeler API, qui est notre serveur et qui envoie des demandes pour manger Désormais, l'API transférera cette demande vers le serveur ou la base de données, qui est notre cuisine, et ce serveur ou base de données partagera la réponse, c' est-à-dire les données que nous voulons, et l'API fournira les données de réponse à notre front-end. Maintenant que vous comprenez ce qu'est une API, l' EPI est un moyen pour deux programmes de communiquer entre eux Permettez-moi de vous expliquer avec un autre exemple concret. Vous visitez donc probablement le site Web qui réserve les billets d'avion, n'est-ce pas ? Donc, dans cette application, disons Emirates, nous écrivons notre ville de départ. Disons Londres et un endroit à atteindre, disons Mumbai. Et nous saisissons nos dates, le type de siège, et nous recherchons les vols, et les détails des vols seront affichés. C'est possible grâce à l'API. Nous appelons une API, et cette API obtiendra ces données du serveur et nous les fournira. est aussi simple que ça. Voici une chose. Comme nous utilisons ce site de l'émirat, nous ne recevons que les détails des vols de l' émirat. Mais il existe des sites Web sur lesquels vous recherchez les détails des vols et ils renvoient plusieurs vols avec plusieurs compagnies aériennes. Comment est-ce possible ? De nombreuses entreprises lancent leur API pour un usage public, et nous l'appelons API publique. En utilisant cette API publique, nous pouvons accéder à leurs données. Maintenant que les données sont ouvertes au public, l'entreprise doit utiliser une certaine protection. Et pour des raisons de protection, de nombreuses API publiques possèdent leur clé d'API. Ainsi, lorsque notre front end envoie des demandes à l'API, front end doit envoyer APIKey avec cette demande Après cela, l'API transmettra cette demande au serveur, et avant de prendre la demande, serveur demandera à APiKE d'accéder aux données Notre API transmet donc notre clé API au serveur, le serveur vérifie si elle est authentique, ce n'est qu'alors que le serveur renverra les données Dans le cas contraire, le serveur renvoie une erreur, accès refusé. C'est aussi simple que ça. Maintenant, vous vous demandez peut-être comment pouvons-nous obtenir APIKey si nous voulons accéder à l'API publique ? Pour obtenir la clé API, nous devons enregistrer sur leur site Web entreprises qui fournissent l'API, et elles nous enverront ApiKey Dans la leçon suivante, nous allons obtenir notre clé API pour les données des films 62. Générer la clé API: Dans notre projet Movie Maniac, nous allons donc utiliser l'API publique de TMDB pour obtenir les données des Nous ne créons pas l'API ici. Nous utilisons simplement l'API publique. La raison pour laquelle je veux vous enseigner l'API publique est qu'aujourd'hui, c'est une fonctionnalité très courante de l'application. Par exemple, certaines applications, donc les informations météorologiques et ce qu'elles utilisent, utilisent simplement l'API publique d'une autre entreprise. En utilisant une API publique, vous pouvez rendre votre application plus utile. De plus, si vous postulez pour un poste de développeur React, en examinant votre projet, intervieweur sait également que vous pouvez également utiliser des API publiques Voyons donc comment obtenir la clé d'API TMDB. Rendez-vous donc sur le site Web de TMDB et accédez à plus d'options et à l'option d'API ouverte Ici, nous pouvons voir cette option de lien API pour vous inscrire à ApiKey Ouvrez-le, et vous pouvez voir ici qu' un compte utilisateur TMW est requis pour demander une clé d'API Récupérons donc notre clé API. Cliquez donc sur rejoindre TMW Link et remplissez ce formulaire avec vos coordonnées Nom d'utilisateur Cb 24, Entrez votre mot de passe. Encore une fois, écrivez pour confirmer le mot entrez votre vrai compte e-mail et cliquez sur s'inscrire. Nous devons maintenant vérifier notre compte e-mail. Ouvrez donc votre e-mail ouvrez l'e-mail TMW et cliquez sur Activer mon compte Maintenant, on peut fermer ça. Nous pouvons maintenant nous connecter à notre compte. Entrez donc votre mot de passe ici et cliquez sur Login. Vous voyez, nous redirigeons vers notre tableau de bord. Maintenant, nous pouvons voir que nous devons demander la clé API. Cliquez ici et sélectionnez le développeur. Et acceptez cet accord. Tu peux le lire si tu veux. Nous devons maintenant remplir ce dernier formulaire pour APike. Je sais que ce processus est un peu long, mais ils nous fournissent des données utiles, et ce processus est très courant pour obtenir APike dans une entreprise comme Google ou Facebook Tout d'abord, sélectionnez le type d'utilisation, le nom personnel de l'application pour le film Maniac, l'URL de l' application vers l'hôte local Colonne 5173 Résumé de l'application pour le film Miniac est une application si populaire, mieux notée et les détails des films à venir Ensuite, écrivez votre prénom, nom de famille, numéro de téléphone, adresse 1, adresse 2, ville, État, code postal, et à la fin, cliquez sur Soumettre, et nous devons écrire la mauvaise adresse. Maintenant, cliquez sur Soumettre et voyez ici que nous avons obtenu avec succès notre clé API. Voyons maintenant comment obtenir l'API. Ouvrez donc ce lien de documentation et c'est ici que nous devons accéder à la section de référence de l' API. Et dans cette documentation, ils expliquent chacun des points de terminaison de leur API Mais nous voulons uniquement obtenir l'API des films. Faites donc défiler cette section et passez à la section détaillée du film. Nous avons maintenant cette API populaire, la mieux notée et à venir. Ouvrons donc Popular Now sur le côté droit, nous pouvons voir les détails de cette API. Notez qu'ici notre méthode SDTP est GT. Nous aborderons ces méthodes SDTP dans les prochaines sections dans lesquelles nous verrons comment appeler notre API privée Pour l'instant, n'oubliez pas que méthode GET est utilisée pour obtenir les données de l'API, aussi simple que cela. Maintenant, ne vous inquiétez pas, copiez simplement cette API d'ici et dans notre nouvel onglet, nous l'ouvrons. Vous voyez ici qu'il renvoie une erreur appelée clé d'API non valide, et vous devez obtenir une clé valide. En gros, il demande une clé API. De retour à l'onglet des paramètres de l'API M, nous pouvons voir ici que nous avons cet exemple d'API Nous copions donc simplement ce point d' interrogation et cette variable de clé d'API. Maintenant, dans notre TRL, nous passons cette APIKey en tant que chaîne Squery Et voyez ici, nous obtenons les données sur les films populaires. Si vous vous demandez comment vous pouvez voir vos données dans ce beau format, vous devez installer une extension Chrome appelée JSON Viewer Pro. Alors félicitations. Vous créez votre première clé d'API. 63. Appeler l'API en utilisant la méthode Fetch: Voyons maintenant comment appeler cette API dans notre application en utilisant la méthode Fetch Croyez-moi, c'est vraiment simple et facile. Maintenant, avant d'appeler l'API, nous devons décider dans quel composant nous devons appeler l'API. Nous avons donc besoin de données sur les films dans notre composant de liste de films, et en utilisant ces données, nous les afficherons sur des cartes vidéo. Maintenant, nous voulons appeler l'API lorsque ce composant est abandonné. Vous souvenez-vous du hook que nous utiliserons pour exécuter la logique sur le rendu des composants ? Bien, nous allons utiliser un crochet à effets. Maintenant, comme je vous l'ai dit, l' effet d'usage est utilisé pour trois variantes différentes. Ici, nous avons besoin d'une deuxième variété, qui passe un tableau vide à tableau de dépendances, car nous voulons n'appeler l'API qu'une seule fois lorsque ce composant de liste de films est abandonné. Nous allons donc écrire ici utiliser l' effet et appuyer sur la touche Tab. C, il est automatiquement importé en haut. Maintenant, en fait, nous savons que nous devons faire valoir deux arguments. Le premier concerne la fonction de rappel, qui est la fonction que nous voulons exécuter, et le second est le tableau de dépendances Ici, nous passons un tableau vide. C'est simple. Maintenant, dans cette fonction de rappel, nous allons écrire notre logique pour appeler l'API Donc, pour appeler l'API, nous utilisons la méthode fetch Si vous avez déjà travaillé en JavaScript, vous connaissez déjà ce concept. Et si vous ne connaissez pas la méthode fetch, ne vous inquiétez pas, voyez ceci et vous le comprendrez Nous ajoutons donc ici la méthode fetch. Maintenant, dans cette fonction, en première position, nous devons écrire l'URL de notre API. Retournez au navigateur, et ici nous copions l'URL de notre API. Et dans notre méthode de patch, en double code, nous allons le coller. Maintenant, cette expression renvoie une promesse. En gros, la promesse signifie que nous obtiendrons le résultat dans le futur, et non dans l'immédiat. Le résultat peut être nos données, ou si quelque chose ne va pas, nous aurons une erreur, mais nous obtiendrons certainement quelque chose. Laissez-moi vous montrer ce que je veux dire. Nous allons donc le stocker dans une variable appelée réponse. Ensuite, enregistrez simplement cette réponse par points sur la console. Enregistrez les gènes et jetez-y un œil. Ouvrez la console et voyez ici que nous sommes promis. Si nous étendons cette promesse, nous obtenons ici l'état de la promesse rempli car cette API fonctionne. Et dans ce résultat prometteur, nous recevons une réponse de l'API. Et dans ce corps de réponse, nous obtiendrons nos données et d'autres détails sur l'appel d'API. Pour gérer les promesses JavaScript, nous avons deux méthodes, puis method et acing await Ne t'inquiète pas. Nous verrons les deux un par un. Tout d'abord, supprimons cette variable de réponse ainsi que le journal des points de la console. Et après cette méthode de récupération, nous ajoutons le point DN Maintenant, dans cette méthode à dix, nous devons transmettre la fonction de rappel Et ici, nous obtenons notre réponse sous forme de fonction de flèche paramétrée. Et maintenant, enregistrons simplement cette réponse par points sur la console. Enregistrez ceci et jetez-y un œil. voyez, nous avons ici un tas de propriétés liées à notre appel d'API, comme le statut, l'URL, le corps. Ce corps possède toutes nos données. Maintenant, vous pourriez penser : pourquoi ne pouvons-nous pas le voir ? C'est parce que nous devons convertir ces données au format JSN Donc, à la place de cette réponse, nous écrivons le point de réponse JSON. Sauvegardez ceci et nous verrons encore une fois que nous aurons des promesses. Et dans ce résultat prometteur, nous obtenons les données de nos films. Pour accéder à ces données, nous devons renvoyer le point de réponse json à partir de cette fonction. Et grâce à cela, nous recevons une autre promesse. Maintenant, nous utilisons à nouveau cette méthode pour gérer cette promesse. Et à l'intérieur, nous écrivons fonction de rappel et nous obtenons ici des données en tant que paramètre, et nous consultons simplement ces données dans le journal à points Enregistrez ceci et jetez-y un œil. Vous voyez, nous obtenons des données vidéo dans ces résultats, donc cela fonctionne. Maintenant, cette méthode de patch avec deux méthodes semble un peu moche. Voyons la deuxième méthode de gestion des promesses. Supprimons ces deux méthodes. Nous n'en avons pas besoin. Maintenant, avant cette méthode de correctif, nous ajoutons une attente, ce qui signifie que notre code attendra la fin de l'exécution de cette promesse. Vous ne connaissez pas ces concepts, alors je vous recommande vivement de regarder les didacticiels Fetch Method et Async Rona Java Script Ce sont là des concepts vraiment très importants. Maintenant, pour utiliser await, nous devons rendre notre fonction asynchrone Ici, après notre effet d'utilisation, nous allons créer une nouvelle fonction appelée Fetch movies Maintenant, pour rendre cette fonction asynchrone, il faut passer un mot clé avant cette Déplaçons maintenant notre méthode fetch dans cette fonction. Bien. Nous savons maintenant que cette expression renvoie une réponse. Stockons donc cela dans une variable appelée réponse. Ensuite, nous consultons ou enregistrons simplement cette réponse. Maintenant, n'oubliez pas d'appeler notre fonction Patch Movies dans notre effet d'utilisation. Enregistrez les gènes et jetez-y un œil. Actualisez la page et voyez que nous obtenons la même réponse que celle que nous obtenons dans notre méthode first then. Nous devons donc convertir cette réponse au format JSON. Nous écrivons donc ici le point de réponse JSON. Et ça va revenir, promis. Nous allons donc à nouveau écrire ici await, et stockons ces données JSN dans une variable appelée data Et à la fin, enregistrons ces données par point sur console. Enregistrez les gènes et jetez-y un œil. Vous voyez ici que nous obtenons nos données. Et en utilisant acing await, notre code semble propre. Ainsi, chaque fois que nous voulons afficher les données d'un appel d'API, nous suivrons cette méthode. Si vous avez un peu de confusion, ne vous inquiétez pas avec la pratique, votre confusion disparaîtra. Et j'ai ajouté une section entière, spécialement pour appeler l'API. Ne vous inquiétez donc pas pour ça. 64. Exercice pour la MovieCard: Il est maintenant temps de faire un peu d'exercice. Ainsi, dans la leçon précédente, nous avons obtenu les données de nos films. Maintenant, vous devez afficher les données sur plusieurs cartes. Voici quelques propriétés que vous devez utiliser. Le conseil est que vous devez utiliser UTT Hook pour une raison quelconque. Passez donc un peu de temps et essayez de résoudre cet exercice. Et après cela, venez voir la solution. 65. Solution pour cet exercice: Voyons donc la solution de cet exercice. J'espère que tu essaieras de résoudre ce problème. Tout d'abord, en haut de la page, nous allons créer une variable d'état pour stocker les données de ces films. Alors écrivez l'état d'utilisation et appuyez sur la touche Tab, je vais importer l'utilisation en haut. Et maintenant, écrivez, utilisez des extraits d'état, des films et des films définis Et comme valeur par défaut, nous passons un tableau vide. Maintenant, à la place de ce journal des points de la console, nous utilisons simplement des films définis et stockons ici résultats des points de données, car nous obtenons un tableau de films sous forme de résultats de points de données. Maintenant, affichons ces films dans notre composant de carte vidéo. Nous voici donc chez culibackets, movies dot MAP. Et à l'intérieur de celui-ci, nous obtenons un seul élément vidéo, la fonction flèche, et nous renvoyons le composant de la carte vidéo. Maintenant, vous souvenez-vous que chaque fois que nous utilisons la méthode map, nous devons transmettre la valeur uni comme clé. Nous ajoutons une clé et passons ici l'identifiant Move Dot, qui est unique pour chaque film. Maintenant, nous devons transmettre les détails de chaque film, que nous voulons afficher dans le composant de notre carte vidéo. Au lieu de transmettre chaque détail individuellement, nous pouvons transmettre l'objet entier dans une variable. Laissez-moi vous montrer ce que je veux dire. Nous passons simplement ici, film égal à, et nous passons ici chaque élément du film. Enregistrez ce fichier et ouvrez le composant de la carte vidéo. Et ici, nous pouvons déstructurer nos accessoires de cinéma. Maintenant, tout d'abord, affichons tout le texte. Donc, à la place du nom de ce film, nous écrivons le titre original de soulignement Move Dot À l'endroit de cette date, la date sortie du film souligne la date Notation par rapport au nombre de points, valeur moyenne des points soulignés. Et une description du film pour déplacer la vue d'ensemble. Sauvegardez ceci et voyez ici que nous obtenons nos coordonnées. Mais la description de ce film est très longue. Alors résolvons d'abord ce problème. Si vous résolvez cet exercice jusqu'à ce point, croyez-moi, vous vous en sortez vraiment très bien. Il existe donc de nombreuses façons de le faire. Nous ajoutons simplement ici la méthode du point slice et passons zéro et 100 et ensuite, plus en double code point point point point point. Donc, en gros, la fonction Slice n' affichera que les cent premières lettres, puis nous affichons trois points. Sauvegardez-les et vous verrez que nous obtiendrons cette belle description. Maintenant, changeons notre affiche. Accédez donc à l'onglet de configuration et ouvrez la documentation de l' API TMDB et ici, dans la section images, nous ouvrons cette étape de base Ici, ils mentionnent comment nous pouvons ajouter le chemin des images. Il suffit donc de copier l'URL de cette image, et à la place de notre image codée en dur, nous ajoutons des crochets Cully, backticks et nous collons simplement cette URL ici Maintenant, dans cette URL, il suffit de modifier cet identifiant d'image. Nous supprimons donc cet identifiant d'image et supprimons également une barre oblique et ajoutons simplement des crochets Cali en dollars, déplaçant le point Poster Underscore La raison pour laquelle nous supprimons cette barre oblique est que la barre oblique est déjà disponible dans la variable de chemin de soulignement de l'affiche Enregistrez les modifications et jetez-y un œil. Tu vois, nous trouvons ici nos affiches de films. Nous voulons ouvrir la page officielle de ce film sur le site Web de TMW lorsque nous cliquons sur la carte vidéo Ici, dans notre balise d'ancrage en HRF, nous ajoutons à nouveau des crochets, des backticks, et ici nous passons HTTP sous le nom Colmlaww the movie db.org slash MovlatLar the movie db.org slash MovlatLar Nous voulons ouvrir ce lien dans un nouvel onglet. Nous ajoutons ici que la cible est égale à un trait de soulignement vide. Enregistrez les modifications et jetez-y un œil. Cliquez sur l'une des cartes et vous verrez qu'elle s'ouvrira dans un nouvel onglet. Parfait Ici, nous avons terminé partie de base de cette application. J'espère que c'est une expérience amusante et instructive pour vous. Si vous avez des questions, vous pouvez les poser dans la section Q&R. Dans la section suivante, nous allons commencer à implémenter des fonctionnalités de filtrage et de court-circuit 66. Section 07 - Fonctionnalités de filtrage, de tri et de mode sombre: Bienvenue dans les sections du cours Ultimate React. Dans cette section, nous allons voir comment implémenter le filtrage, le tri et une fonctionnalité supplémentaire, qui permettra à notre application de se démarquer de la foule, mode sombre et clair. Je suis très enthousiaste à ce sujet et j'espère que vous l'êtes aussi. Commençons donc par cela. 67. Filtrer ou trier: Avant de commencer à implémenter filtre et les fonctionnalités courtes, permettez-moi de clarifier la différence fondamentale entre le filtre et les fonctionnalités courtes. Nous utilisons donc la fonctionnalité de filtrage pour filtrer certaines données. Par exemple, dans notre application, si nous cliquons sur une note de plus de huit étoiles , seuls les enregistrements dont la note est supérieure à huit étoiles devraient s' afficher. Nous filtrons donc d'autres données de films. Maintenant, d'un autre côté, le shorting sert à organiser les données Par exemple, dans notre application, si nous sélectionnons les photos par date , nous devons réorganiser les données de nos films afin que la fonctionnalité organise toujours les données dans l'ordre Cela ne supprimera aucune donnée, et c'est ce que nous appelons le court-circuit. Donc, en termes simples, filtrage signifie que nous ne conservons que les données utiles, et en abrégé, nous conservons les données dans un certain ordre La raison pour laquelle je vous explique ceci est cette explication vous aidera à bien comprendre et à mettre en œuvre la logique. 68. Implémenter une fonctionnalité de filtre: Donc, avant de commencer à écrire la logique du filtre, nous devons d' abord obtenir le filtre actuellement sélectionné. Après cet état du film, nous créons un autre état d'utilisation et lui donnons un nom, note moyenne et une note moyenne définie. Et comme valeur par défaut, nous passons zéro. Maintenant, ce que nous voulons faire, c'est que lorsque nous cliquons sur cet élément de la liste, nous fixons notre note moyenne à ce taux. C'est vraiment simple. Laisse-moi te montrer. Alors cliquez ici, et si vous avez Windows, maintenez la touche Alt enfoncée ou si vous avez Mac, maintenez la touche Option enfoncée. Et maintenant, cliquez ici et ici. En les utilisant, nous pouvons créer plusieurs curseurs, et nous ajoutons ici un événement de clic, une fonction de flèche, une fonction de filtre de poignée. Appuyez sur SCA pour supprimer le curseur multiple et passez simplement ici les notes huit, sept et six Définissons maintenant cette fonction. Nous pouvons minimiser d'autres fonctions comme celle-ci. C'est une technique que j' utilise toujours lorsque j'écris plus de lignes de code. Maintenant, après cette fonction, const handle filter, et ici nous obtenons le taux, la fonction flèche, et dans cette première, nous fixons la valeur minimale à ce taux Maintenant, vous souvenez-vous de la méthode que nous allons utiliser pour filtrer les données ? vrai, c'est une méthode de filtrage. Tu le sais déjà. Sympa. Nous écrivons donc simplement Movies Dot Filter. Et à l'intérieur de celui-ci, nous obtenons chaque fonction d'erreur vidéo, et ici nous devons passer la condition. Déplacer le vote à points pour souligner moyenne supérieure ou égale au taux. C'est aussi simple que ça. Maintenant, cette méthode de filtrage renverra un nouveau tableau. Nous le stockons donc dans une variable appelée filtre. Et maintenant, nous pouvons programmer des films et transmettre ici des films filtrés. Enregistrez les modifications et jetez-y un œil. Maintenant, avant de vérifier nos fonctionnalités, je remarque que dans les détails de ce film, nous n'obtenons pas de note. Alors réglons ce problème. Ouvrez le composant de la carte vidéo et faites défiler l'écran vers le bas jusqu'aux détails du film. Ici, nous devons changer cette moyenne des taux en moyenne des votes. Enregistrez les modifications et voyez, nous obtenons ici notre note. Maintenant, cliquez sur Filtrer. Disons sept et voyons si cela fonctionne. Maintenant, cliquez sur huit, et cela fonctionne également. Mais voici un bug majeur. Encore une fois, cliquez sur sept ou six. Cela ne marchera pas. Permettez-moi de vous expliquer ce qui se passe ici. Ainsi, lorsque nous sélectionnons la note 7 plus, cette fonction de filtre de poignée s'exécute. Dans ce cadre, l' état de notre taux moyen sera mis à jour à sept. Ensuite, cette méthode de filtrage filtrera les films et nous les définirons dans cette fonction de définition des films. Maintenant, si vous cliquez sur la note de plus de six, cette méthode de filtrage ne filtrera que les données précédemment filtrées, qui ont toutes une note de plus de sept au lieu d' utiliser nos 20 films originaux, et c'est là ne filtrera que les données précédemment filtrées, qui ont toutes une note de plus de sept au lieu le problème. Résolvons ce problème. La solution est que nous allons initialement définir tous les films dans cette variable d'état du film à partir de l'API, puis nous ne toucherons pas ce tableau. créera une autre variable d'état et stockera nos films dans cette variable. Et lorsque nous voulons filtrer nos données, nous obtenons les données de l' état original du film, puis stockons les données de notre filtre dans notre nouvelle variable d'état. Je sais que c'est un peu confus, mais regardez ceci et vous le comprendrez. Nous créons donc ici une autre variable d' état et lui donnons un nom : filtrez les films et définissons les films filtrés. Et comme valeur par défaut, nous passerons un tableau vide. Tout d'abord, nous devons remplir ce tableau de films filtrés lorsque nous appelons notre API. Nous dupliquons donc la ligne des films de tournage et nous passons ici les films à filtres définis. Ces films filtrés et ces films sont donc tous deux égaux. Maintenant, dans la fonction de filtre Handel à la place des films en cours, nous avions défini les films filtrés Nous ne jouons donc pas avec la gamme de films originaux. Au lieu de cela, nous l'utilisons simplement pour stocker les données d'origine. Maintenant, en bas, nous devons utiliser des films filtrés à la place du tableau de films. Dites les modifications et jetez-y un coup d'œil. Sélectionnez sept, puis huit, puis six et C. Maintenant, cela fonctionne correctement. Maintenant, si nous avons sélectionné le filtre six, puis si nous cliquons à nouveau sur ce filtre, nous voulons afficher tous nos films. Mettons cela en œuvre. Ici, dans la fonction de filtre de poignée, ajoutez si le taux de condition est égal à la note moyenne. Dans ce cadre, nous allons d'abord définir la note moyenne par défaut, qui est zéro, puis régler les films filtrés sur nos films originaux. Sinon, nous allons passer en revue cette logique. est aussi simple que ça. Enregistrez les modifications et jetez-y un œil. Cliquez sur la note huit, et encore une fois, cliquez sur la note huit. Tu vois, on récupère les données. Cela fonctionne donc maintenant. Maintenant, voici un dernier changement. Nous voulons afficher le filtre actuellement sélectionné. Revenons donc au code VS, et à la place de cette classe de chaînes, nous ajoutons des crochets Ci, et ici nous ajoutons une condition, je veux dire une note égale à huit. Si c'est vrai, nous reviendrons aux classes, à l'élément de filtre de film et à actif, élément de filtre de film et sinon nous ne renverrons que l'élément de filtre de film. Copions cette expression et collons-la pour ces deux filtres. Et il suffit de changer ici sept et six. Dites les modifications et jetez-y un coup d'œil. Vous voyez, nous avons ici cette gamme de filtres actifs. Vous pouvez voir à quel point il est simple d'implémenter la fonction de filtre. Maintenant, dans notre filtre de films, il s'agit d'un processus reproductible. Nous pouvons donc séparer notre composant de film filtré de ce que nous ferons dans la leçon suivante. 69. Créer une section de filtres réutilisable: Ainsi, au lieu de simplement placer cet élément de liste dans un composant distinct, nous placerons toute cette liste de désordonnée dans le nouveau composant Supprimons cela et dans notre dossier de liste de films, nous créons un nouveau composant appelé groupe de filtres point JSX Maintenant, nous ajoutons ici notre modèle standard et renvoyons simplement notre sous-liste Maintenant, dans ce composant, nous avons besoin de ces deux propriétés, Min writing et handle filter function. Alors, comment pouvons-nous l'obtenir ? Hein ? En utilisant des accessoires, vous pouvez voir que réagir est très simple Enregistrez ce fichier et revenez à notre composant de liste de films. Et ici, nous ajoutons un composant de groupe de filtres. Maintenant, à l'intérieur de celui-ci, nous passons la note Man, égale à la note moyenne. Et pour le filtre Handle, nous attribuons des accessoires en évaluant que clique est égal à Handle Filter Vous pouvez voir ici que nous utilisons ces noms connexes parce que c'est la meilleure pratique pour les développeurs, et nous pouvons également mieux travailler avec d'autres développeurs. Sauvegardez ceci. Et maintenant, dans le composant du groupe de filtres, au niveau des probs, nous le déstructurons et obtenons ici la note moyenne et le clic sur l'évaluation Maintenant, remplaçons cette fonction de filtre de poignée, appuyons sur Ctrl plus D ou Commande+D pour sélectionner exactement le même code, et il suffit d'écrire ici sur l'évaluation, puis de cliquer. Enregistrez les modifications et jetez-y un œil. Tu vois, ça marche toujours. Maintenant, il y a encore une chose que je veux changer dans ce composant de groupe de filtres. Donc, aujourd'hui, nous ne voulons afficher que trois filtres. Demain, si nous décidons d'ajouter cinq plus quatre ou plus neuf étoiles, nous devrons dupliquer cet élément de liste plusieurs fois, qui est une mauvaise pratique. Nous pouvons donc utiliser un tableau pour cela. Donc, un composant de liste de films et nous ajoutons ici un autre accessoire appelé ratings égal à entre crochets Cali, nous ajoutons un tableau, et à l'intérieur de ceux-ci, nous ajoutons huit, sept et Donc, si vous souhaitez ajouter ou supprimer une valeur de filtre, nous pouvons simplement le faire en utilisant ce tableau d'évaluation. Enregistrez ce fichier et revenez au composant du groupe de filtres en haut, nous obtenons les évaluations. Maintenant, après notre liste de noms, nous ajoutons Calibrackets, ratings point MAP Nous obtenons ici une fonction d'erreur à taux unique, et nous renvoyons cette balise d'élément de liste. Maintenant, à la place de ce huit codé en dur, nous ajoutons le taux ici, taux également et ici aussi le taux entre tranches Ci. Maintenant, il nous manque une chose dans la méthode cartographique. Peux-tu me le dire ? C'est vrai. C'est une propriété clé. Nous passons donc une clé égale à O rate. Ici, tous nos tarifs sont uniques, et c'est pourquoi nous pouvons les attribuer comme clé. Sinon, nous ajouterons un index. Supprimons maintenant ces deux éléments de liste. Nous n'en avons pas besoin, enregistrez-les et voyez à quel point notre code semble propre en utilisant cette méthode matricielle. 70. Gérer la sélection de tri: Voyons comment gérer la sélection par tri. Donc, tout d'abord, nous devons créer une variable d'état pour stocker les détails du tri. Alors, donnez-lui un nom, une photo et définissez le tri. Maintenant, comme valeur par défaut, nous passons ici object. Cet objet possède deux propriétés. Le premier est acheter et nous l'avons défini par défaut et l'ordre sur ASC, ce qui signifie ordre croissant Dans ce premier achat immobilier, nous pouvons l'ajouter par date ou par note. Et dans l'ordre, nous stockons les données ascendantes et descendantes. Dans notre première balise de sélection, nous passons le nom à acheter, la première valeur par défaut. Deuxième valeur correspondant à la date de soulignement publiée et troisième valeur correspondant à la moyenne des votes Maintenant, dans la deuxième balise de sélection, nous passons le nom à la commande, la première valeur à ASC et la seconde valeur à DSC, qui est Vous vous demandez peut-être pourquoi nous ne transmettons que ces valeurs. Ne t'inquiète pas pour ça. Je t' expliquerai plus tard. Pour l'instant, nous nous concentrons uniquement sur la gestion de cette sélection. Vous souvenez-vous de la façon dont nous gérons plusieurs entrées en utilisant la même fonction ? Appliquons cette astuce ici. Nous passons ici à un événement, un changement équivaut à faire court. Et un bon rapport qualité/prix. Et pour cette sélection, nous transmettons le même événement de changement pour gérer Short. Et valeur par ordre de points courts. Définissons maintenant rapidement cette fonction de poignée courte. Après cette fonction de filtre de poignée, nous définissons une nouvelle fonction appelée handle short égale à ici nous obtenons un objet d' événement, une fonction flèche. Dans cette fonction, nous allons d'abord obtenir le nom et la valeur de l'entrée actuelle. Donc, objet C, la valeur du nom est égale à la cible E. Et après cela, nous appelons set sort. Tout d'abord, nous obtenons la valeur précédente, la fonction flèche. Et ici, nous renvoyons simplement l'objet. En cela, nous ajoutons les valeurs précédentes à l'aide de l'opérateur de propagation, puis, entre crochets, nous nommons la valeur Callan, aussi simple que cela Maintenant, nous pouvons même raccourcir ce code. Donc, à partir de la fonction, nous voulons renvoyer un objet, puis nous pouvons supprimer ce retour et également supprimer le crochet C et placer notre objet entre parenthèses car si nous dirigeons vers les crochets bouclés, notre code comprend que les crochets ci sont des blocs de code Voyons maintenant si nous obtenons ou non notre valeur dans cette variable courte. Il nous suffit donc de consulter le journal à points aussi court, enregistrer les modifications et d'y jeter un œil. Ouvrez la console et sélectionnez la date dans ce menu déroulant et vérifiez qu'elle est définie comme date de sortie. Après cela, nous sélectionnons la méthode descendante, et ici nous l'obtenons également Maintenant, voici un petit problème. Chaque fois que nous voulons voir l'état de l'un de nos composants, nous devons consulter ou enregistrer cette variable d'état, ce qui est un peu ennuyeux. Dans la leçon suivante, nous utiliserons l' outil de débogage pour l'application React 71. Débogage d'une application React: Donc, pour le débogage de l'application React, nous utiliserons l'extension de navigateur la plus populaire appelée React Developer Tools Ouvrez donc un nouvel onglet dans votre navigateur et recherchez Chrome Web Store. Ouvrez le premier lien. Et dans ce champ de recherche, nous écrivons React Developer Tools. Si vous utilisez un autre navigateur, vous pouvez effectuer une recherche directe sur l' extension Google React Developer Tools pour ce navigateur. Vous pouvez voir cette extension être téléchargée par 4 millions d'utilisateurs, elle est donc très populaire. Cliquez maintenant sur AttuCrom et autorisez-le à l'ajouter. Bien. Il est ajouté. Fermez maintenant cet onglet. Nous n'en avons pas besoin. Ouvrons Developer Tools. Et dans cette liste, vous pouvez voir ici une option appelée composants. Ouvre ça. Voici donc l'arborescence des composants de notre application. Vous pouvez voir ici que nous obtenons notre composant d'application, qui est notre composant racine. Ensuite, nous avons Nabar, puis la liste des films, et dans la liste des films, nous avons un groupe de filtres et un tas de composants de cartes vidéo Ici, nous pouvons voir l'état de tous les composants en les sélectionnant. Nous sélectionnons donc le composant de la liste des films. Ici, nous pouvons voir la section des crochets, et c'est notre résumé. Si nous changeons notre valeur courte, voyez, nous pouvons voir ici cette valeur. Et ici, nous pouvons également voir la liste des films. Maintenant, si nous voulons voir l'extrait de code de ce composant, cliquez sur cette icône de code et voyez ici que nous obtenons notre code Revenons maintenant aux composants Stab. Maintenant, si nous avons une structure en t complexe, nous pouvons également rechercher notre composant dans ce champ de recherche. Dans l'ensemble, les outils de développement React sont donc outil très utile pour le débogage et la compréhension des applications React Nous pouvons voir les composants, l' état, les accessoires et bien plus encore Et en les utilisant, nous pouvons facilement identifier et résoudre les problèmes dans notre application. 72. Implémenter une fonctionnalité de tri: Maintenant, implémentons la fonctionnalité de tri dans notre application. Il existe donc de nombreuses façons d' implémenter la fonctionnalité de court-circuit Nous allons donc utiliser ici une bibliothèque externe appelée LDSh C'est une bibliothèque très populaire en JavaScript pour la gestion d'objets et de tableaux. Ouvrez donc le terminal, et dans le nouveau terminal, nous écrivons NPM I dash Abréviation de Install. Et si vous voulez utiliser exactement la même version que celle que j'utilise, vous pouvez écrire aerate 4.17 0.21 et Voyez-le installé. Minimisons bien ce terminal. Maintenant, pour utiliser n'importe quelle bibliothèque, nous devons importer cette bibliothèque depuis son package. Donc, en haut, nous écrivons import underscore from Low Dash. Ici, vous pouvez également écrire Low dash ou tout autre nom, mais c'est le nom le plus courant que les développeurs aiment utiliser. Vous vous demandez peut-être pourquoi j'écris des importations parfois ici et parfois en dessous de cette liste. Donc, chaque fois que je veux importer quelque chose à partir des packages, je les importe tout en haut. Et si je veux importer quelque chose à partir de composants locaux, images, physiquement, de ce que nous créons dans le dossier source, je l'importe dans cette deuxième liste. Ce faisant, nous pouvons facilement voir quels packages nous utilisons et quels composants nous utilisons. Vous pouvez également le séparer ou écrire toutes les entrées ensemble. Cela dépend entièrement de vous. Mais quoi que vous fassiez, faites de même pour tous les composants. Concentrons-nous maintenant sur la fonction de tri. Et une chose que je veux vous dire à propos de React est que React exécute la mise à jour de l'état de manière synchrone, ce qui signifie que si nous changeons notre état court dans cette fonction, React ne mettra pas à jour cet état immédiatement Laissez-moi vous montrer ce que je veux dire. Nous passons donc ici aux méthodes de tri actuellement sélectionnées. Déplaçons simplement ce journal de points de la console ici. Dites les modifications et jetez-y un coup d'œil. Changez quelque chose dans le menu déroulant et vous verrez, ici, nous reprenons notre ancienne photo. Si nous changeons à nouveau ce tir en rate, C, nous obtenons l'état précédent. C'est donc clair, React ne met pas à jour l' état immédiatement. Mais pourquoi React fonctionne comme ça ? Laisse-moi t'expliquer. Ainsi, dans React, une fonction s'exécute, réagissez d'abord, laissez l'ensemble de la fonction s'exécuter. Et s'il y a plusieurs mises à jour d'état, il les empilera dans une rangée puis les exécutera une par une. Après avoir terminé cette exécution complète de la fonction, car si React met immédiatement à jour un état, cela entraîne un nouveau rendu indésirable pour ce composant complet, et ce n'est pas une bonne chose. C'est pourquoi React exécute commandes de changement d'état après avoir terminé l'exécution complète de la fonction. Nous pouvons donc écrire notre logique de tri dans cette fonction de tri des poignées. Nous devons utiliser quelque chose qui s'exécute automatiquement lorsque notre état court change. Connaissez-vous quelque chose de similaire, que nous avons déjà utilisé ? Hein ? C'est un crochet à effet d'utilisation. Après ce crochet d'effet d'utilisation, nous ajoutons un autre crochet d'effet d'utilisation. Et comme nous le savons, le premier argument est notre fonction de rappel et deuxième argument est le tableau des dépendances, et dans ce tableau, nous passons notre état court Maintenant, dans ce rappel, nous ajoutons une condition I short B non égale à la valeur par défaut Nous ne voulons rien raccourcir pour l'état par défaut. À l'intérieur de celui-ci, nous écrivons le trait de soulignement, qui est l'ordre des points les plus bas Cette méthode est utilisée pour raccourcir et changer l' ordre croissant ou décroissant dans la même fonction Donc, à la première position, nous devons adopter notre gamme actuelle que nous voulons raccourcir, à filtrer les films, car il est possible que nous ne filtrions que les films sept étoiles et plus, puis nous voulons raccourcir cela. Maintenant, au deuxième paramètre, nous devons passer un tableau et à l'intérieur de celui-ci, nous devons transmettre la propriété par laquelle nous voulons raccourcir. Donc SOT point B. Et à l'intérieur de ceux-ci, nous pouvons également transmettre plusieurs propriétés. Maintenant, au troisième paramètre, nous devons transmettre, encore une fois, un tableau, et à l'intérieur de celui-ci, nous devons passer ASC pour le croissant ou DSC pour le décroissant, et nous stockons cette valeur dans N'oubliez pas qu'au premier paramètre, nous passons le tableau que nous voulons photographier. Au deuxième paramètre, nous transmettons un tableau de propriétés par lequel nous allons tirer. Dans notre cas, il peut s' agir de la date de sortie ou moyenne des votes, qui sont disponibles dans la gamme de films. Enfin, au troisième paramètre, nous passons par ordre croissant ou descendant, c'est aussi simple que cela Maintenant, cette expression renvoie un nouveau tableau. Nous stockons donc cela dans une variable appelée films courts. Et après cela, nous avons défini les films filtrés en deux catégories de films. est aussi simple que ça. De plus, de notre fonction, nous supprimons ce journal de points de la console. Nous n'en voulons pas. Enregistrez les modifications et jetez-y un œil. Fermez notre console, actualisez la page. Réglez notre tri à ce jour et constatez qu'il change. Maintenant, changez l'ordre en ordre décroissant et voyez que cela fonctionne également Vous pouvez donc voir à quel point il est simple d' implémenter le tri à l'aide de ce package de chargement. Si vous ne souhaitez pas utiliser cette bibliothèque, vous pouvez écrire vous-même une logique de raccourcissement comme ceci. C'est totalement bon. Mais à mon humble avis, cette bibliothèque de chargement fonctionne le mieux pour nous. Je l'ai personnellement utilisé dans de nombreux projets de clients. 73. Ajouter un interrupteur pour le mode lumière sombre: Voyons maintenant comment ajouter commutateur de mode sombre et clair dans notre projet. Je crée donc ce commutateur pour mon projet client en utilisant vos codes STML et CSS Donc, dans le dossier des ressources, ouvrez notre dossier de projet 2, et nous obtenons ici ce dossier de composants en mode sombre. Il suffit donc de faire glisser ce dossier dans notre dossier de composants. Et c'est tout. C'est ainsi que vous pouvez utiliser les autres composants du projet dans votre projet. C'est le pouvoir de créer des composants distincts. Voyons maintenant ce qu'il y a à l'intérieur de ce composant. Donc, un composant en mode sombre, et ici nous pouvons voir que nous avons une entrée avec une case à cocher, et après cela, nous avons une étiquette, et j'en ai ajouté deux, à savoir composant, le soleil et la lune Laissez-moi vous montrer à quoi cela ressemble. Appuyez donc sur Ctrl plus P ou Commande plus B et recherchez le composant Navar Maintenant, en haut, nous devons importer le composant en mode sombre depuis le dossier en mode sombre, et nous ajoutons ce composant en mode sombre avant nos liens de navigation. Enregistrez les modifications et jetez-y un œil. Ici, nous avons une erreur. Ouvrons la console et voyons ici cette erreur. En effet, le blanc ne prend pas en charge cette importation de composants React En l'utilisant, nous pouvons importer du SVG en tant que composant Pour résoudre ce problème, nous devons utiliser bibliothèque appelée White plug dans SVGRNPmitPlug dans SVGR Enter Bon, terminal de minimisation et configuration à point blanc ouvert JSNFle Maintenant, ici en haut, nous saisissons le SVGR à partir d'un plugin blanc, ds SVGR Et dans ce tableau de plugins, après cette réaction, nous appelons cette fonction. Enregistrez les modifications et jetez-y un œil. Découvrez à quel point cet interrupteur est beau. Vous pouvez utiliser n'importe quel interrupteur ou design pour cela. Cela dépend entièrement de vous et vous pouvez également modifier ce CSS en mode sombre. Maintenant, dans le dossier du mode sombre, nous pouvons voir que nous avons deux Swigs Nous pouvons les placer dans notre dossier AsssFolder afin que notre projet soit mieux organisé Sélectionnez ces deux Swiges et déplacez-les dans le dossier Assets Et tout à coup, nous obtenons cette erreur, qui indique que le SVG n'a pas été trouvé à l'emplacement actuel parce que nous l'avons déplacé Nous devons donc modifier notre chemin SVG. Voici donc deux dossiers, SATs et sun point SVG Nous faisons de même pour ce chemin également. Point lunaire SVG. Enregistrez ceci et cela fonctionnera à nouveau. Maintenant, la raison pour laquelle je vous propose ce commutateur de mode sombre prêt à l'emploi, c'est parce qu'il est purement basé sur STML et CSS Si je vous explique chaque partie du STML et du CSS, beaucoup de gens seront déçus parce que nous sommes là pour apprendre De plus, je vais vous donner le lien du tutoriel Ts dans lequel vous pouvez voir comment créer ce switch à partir de zéro. 74. Mise en œuvre du mode sombre: Avant de commencer à implémenter la fonctionnalité du mode sombre, comprenons d' abord la logique du changement de thème. En gros, nous ne faisons que changer les couleurs de notre site Web. est aussi simple que ça. Nous n'ajoutons aucun élément ni ne modifierons la taille des éléments. Rien Nous sommes en train de changer les couleurs de notre application. La meilleure solution pour cette fonctionnalité est donc de définir variables CSS pour chaque couleur notre site Web pour le thème sombre par défaut. Et lorsque les utilisateurs changent le thème en clair, nous remplaçons la valeur de couleur de toutes les variables aussi simple que cela. Dans ce composant du mode sombre, nous créons d' abord une fonction appelée set dark theme. Et dans cette fonction, je souhaite ajouter un attribut à l'élément body. Donc, documentez le sélecteur de requête par points et passez ici le corps. Définissez l'attribut par un point, et ici nous passons le nom de l'attribut, qui est une virgule du thème de données, et nous le mettons à noir Donc, en utilisant cette propriété, nous obtiendrons l'état de notre thème. Dupliquons maintenant cette fonction et changeons nom de cette fonction pour définir thème de la lumière et attribuer la valeur à la lumière. Appelons maintenant l'une de ces fonctions ici. Disons définir un thème sombre et voir si cela fonctionne ou non. Enregistrez les modifications et jetez-y un œil. Cliquez avec le bouton droit sur la page et passez à l'inspection. Dans la balise body, vous pouvez voir ici que thème des données devient foncé, donc ça marche. Maintenant, nous voulons les activer lors de la modification de ce togal. Nous écrivons donc une nouvelle fonction appelée thème Tgal, et nous obtenons ici un objet événement, Et tout d'abord, nous vérifions si la vérification points de la cible de l' événement est vraie. Ensuite, nous appelons fonction de thème sombre défini , nous appelons fonction de thème satellite. Nous voulons maintenant transmettre cette fonction dans cet événement d'entrée lors d'un changement. Donc, sur le changement, nous équivalons à un thème global. Enregistrez les modifications et jetez-y un œil. Vous voyez, lorsque nous activerons ce thème, cela changera ici. Maintenant, changeons en CSS. Donc, un fichier CSS à points d'index pan. Tout d'abord, en haut, nous utilisons la racine de colonne. Et à l'intérieur de celles-ci, nous déclarons toutes les variables de couleur pour thème sombre de l' application, car nous voulons définir le thème sombre par défaut. Écrivez donc un double tiret et écrivez le nom de la variable. Supposons que le corps souligne l'arrière-plan et que la valeur deux ait 101010 Ensuite, nous avons le double tiret, la couleur du soulignement du corps et la valeur en blanc Ensuite, un double tiret ajoute couleur de soulignement et une valeur à un FFE 400 Si vous travaillez sur un autre projet, vous devez ajouter toutes les couleurs que vous souhaitez modifier dans les variables. Définissons maintenant les variables de couleur pour le thème de la lumière. Nous devons donc cibler ici les données le thème étant égal à la lumière. Vous souhaitez utiliser un thème clair par défaut, puis vous devez ajouter des couleurs de thème claires dans cette racine, et dans cette condition, vous devez ajouter du noir. Maintenant, à l'intérieur de ceux-ci, nous définissons le double tiret, le soulignement du corps en arrière-plan et la valeur en blanc Assurez-vous d'utiliser également le même nom de variable pour le thème clair, afin qu'il remplace ces variables de thème sombre. Ensuite, nous avons la couleur de soulignement du corps à double tiret. La valeur devient noir, et enfin le double tiret souligne le titre, la couleur, le noir également Nous devons maintenant remplacer toutes les couleurs de nos fichiers CSS par ces variables. Ici, dans le corps, nous changeons cette valeur de couleur d'arrière-plan en variable, et dans ce cas , nous passons le nom de la variable, le double tiret, le soulignement du corps de l'arrière-plan Couleur variable, double tiret, couleur de soulignement du corps. Enregistrez ce fichier. Remplaçons maintenant les couleurs par des variables dans d'autres fichiers CSS. Donc, fichier CSS à points panabar. Ici, nous pouvons changer la couleur de ce titre en couleur variable, double tiret, titre, soulignement De plus, nous changeons la couleur de ce lien en une couleur variable, à double tiret, soulignement du corps. Enregistrez ce fichier. Et maintenant, examinons le fichier CSS à points de la liste des films. Ici, nous devons changer la couleur du titre de cette liste de films en une couleur variable, double tiret, soulignement du titre Vous vous demandez peut-être pourquoi nous ne changeons pas cette couleur de bordure, car nous ne voulons pas changer sa couleur lorsque nous changeons de thème et c'est tout ce que nous voulons changer. Dites les modifications et jetez-y un coup d'œil. voyez, ici nous avons un thème sombre et si c'est pour une fille, nous avons un thème clair. Mais par défaut, ce curseur est en mode lumière. Dans le composant du mode sombre, dans notre case à cocher, nous transmettons une autre propriété appelée vérification par défaut égale à true Enregistrez les modifications et vérifiez qu'il est en mode sombre, donc cela fonctionne. Mais ce changement de thème est très soudain. Ajoutons une petite transition pour que ce soit fluide. Donc, ici, dans l'index de ce fichier CSS, dans tous nos styles, nous ajoutons une transition à tous les 0,3 secondes d'entrée et de sortie. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous obtenons cette transition de mode. Voici une chose. Si nous actualisons cette page, elle commencera par défaut par le thème sombre. Mais nous voulons que notre application se souvienne que si vous utilisez un thème togal to light, alors lors de l'actualisation, elle restera sur le thème clair Nous devons donc enregistrer ce paramètre dans le stockage local, savon et le composant en mode sombre. Et dans cette fonction de définition du thème sombre, nous ajoutons ici un élément de stockage local défini par un ensemble de points au thème sélectionné et une valeur définie sur le thème foncé. Maintenant, copiez cette ligne et collez-la dans la fonction du thème satellite et changez sa valeur en lumière. Maintenant, après cela, nous créons une variable appelée thème sélectionné et nous obtenons ici notre thème stocké. stockage local ne permet pas de récupérer l'article, et nous passons ici ce nom qui correspond au thème sélectionné. Ensuite, nous ajoutons une condition si le thème sélectionné est égal à la lumière, puis nous appelons cette fonction de réglage du thème de lumière. Sinon, par défaut, il commencera par le thème sombre. Nous ajoutons donc et appelons simplement ici la fonction Set Dark Theme. Enregistrez les modifications et jetez-y un œil. Réglez le thème en mode éclairage et voyez, maintenant que nous actualisons la page, nous sommes toujours en mode clair. Mais ici, nous devons corriger ce bouton total. Ainsi, dans notre balise de saisie, nous ajoutons simplement l'attribut coché par défaut, thème sélectionné, qui n' est pas égal à la lumière. Donc, si le thème sélectionné est une chaîne vide ou en mode sombre, le curseur restera en mode sombre Enregistrez les modifications et voyez maintenant que notre commutateur Togal fonctionne bien. Vous pouvez donc modifier ce code en fonction de vos besoins. Mais la logique du mode sombre restera la même. 75. Rendre le composant MovieList réutilisable: Actuellement, notre composant de liste de films est statique. Nous voulons le rendre réutilisable, ce qui signifie que nous pouvons transmettre le nom du titre, l'icône, et nous appellerons différentes API pour les meilleurs films connexes et les films à venir. Alors faisons-le. Permettez-moi de vous montrer mon trig que j'ai utilisé pour savoir quelles données nous voulons transmettre via les accessoires Donc, en ce qui concerne le composant de liste de déménagement , nous voulons tout d' abord modifier cette API. Revenons donc à la documentation de l' API TMDB. Ouvrez l'API des films les mieux notés, et nous pouvons voir ici qu'il s' agit de la même URL d'API que celle que nous avons utilisée pour les films populaires. Il suffit de remplacer « populaire par « top underscore ». Et pour les prochains films , il suffit de passer à côté. Nous déstructurons les accessoires ici et nous ajoutons d'abord du texte, qui peut être populaire, mieux noté ou Nous changeons les doubles codes avec des coches arrières et à la place de ce populaire, nous passons des crochets en dollars, tapez. Ensuite, nous voulons changer ce titre de manière dynamique. Nous passons ici Culibackets et passons ici le titre. Nous changeons également cette Imoge, nous passons ici à Imoge. Et nous changeons également ce t avec des ticks, dollars, des crochets, des icônes Imoge, et c'est tout Ajoutons ces propriétés dans les accessoires. Donc le titre et Imoge. C'est donc très clair. Nous devons uniquement utiliser ces trois propriétés comme accessoires. Maintenant, en haut, nous pouvons supprimer cette image inbot. n'est pas ce que nous voulons. Enregistrez ce fichier et revenez à notre composant d'application. Dans ce composant de liste de films, nous passons ici le type égal au titre populaire à populaire et ImoGetFR importons cet En haut, importez Fire from Period Slash Assets et Fire Dot PNG Importons également adhèrent à Imoges. Importez donc l'étoile de la période, les actifs, le point étoilé brillant PNG Et enfin, partie importée depuis la période, séparation des actifs, après la PNG Laissez-moi vérifier l'orthographe. Oui, c'est juste. Ajoutons maintenant à liste des films les mieux notés et à venir. Dupliquez donc ce composant deux fois de plus , et pendant une seconde, changez le type pour le trait de soulignement le mieux noté, le titre pour le mieux noté et l'image pour l'étoile Et pour le troisième type, à venir, titre à venir et Image to party. Enregistrez les modifications et jetez-y un œil. Tu vois, nous avons trois sections différentes pour les films. Maintenant, en haut, nous avons des liens Neva qui ne font rien Ainsi, lorsque nous cliquons sur le lien le mieux noté, notre page doit défiler jusqu' à la section la mieux notée. Et si nous cliquons sur le lien à venir, notre page devrait défiler jusqu' à la section à venir. Implémentez cela. C' est très simple. Ainsi, dans notre composant de liste de films, nous avons déjà des accessoires de saisie, nous pouvons donc transmettre le type comme identifiant de cette section de liste de films Et c'est le pouvoir de créer des composants réutilisables. Vous pouvez voir que par rapport aux applications SDML, CSS et JavaScript, nous pouvons rendre notre interface rapide et très dynamique Enregistrez ce fichier et ouvrez le composant NBR. Et au premier lien, on passe pour populaire. Et pour le deuxième lien, we pass a obtenu la meilleure note de soulignement Et au dernier lien, on passe pour à venir. Enregistrez la recherche et les G et jetez un œil. Cliquez sur le lien le mieux noté et faites défiler notre page vers la section la mieux notée. Maintenant, si nous cliquons sur «  À venir », notre page fait défiler la page vers la section « à venir ». Mais c'est un défilement très soudain. Rendons cela plus réaliste. Donc, un fichier CSS à points d'index. Ici, nous ajoutons des styles pour les balises SDML, les crochets, les comportements de défilement pour lisser. Et c'est tout. Oui, nous n'avons rien d'autre à faire. Enregistrez les anneaux et prenez-en un. Cliquez sur un lien et vous verrez, nous obtenons cet effet de défilement fluide De plus, nos fonctionnalités de filtrage et de court-circuit fonctionnent bien avec les composants individuels Cette application semble donc très simple, mais elle possède de nombreuses fonctionnalités réelles qui la rendront moderne et facile à utiliser. Alors félicitations. Ici, notre projet de film maniac est terminé. Vous pouvez voir que React est très facile et simple à utiliser. Il vous suffit de maîtriser certains concepts de base tels que les composants, l'état, les accessoires et certaines méthodes RM, et vous êtes prêt à partir Et encore une chose, regarder uniquement le cours ne vous aidera pas à créer vous-même une application. dois coder avec moi, ou tu peux regarder une leçon et écrire du code toi-même. Grâce à cette méthode, vous comprendrez mieux comment réagir et votre construction logique s' affinera également avec le temps. Si vous avez des doutes, vous pouvez me le demander dans la section Q&R J'adore répondre à vos questions, et je vous vois dans la section suivante. 76. Section 08 Routage de réaction: Bienvenue dans la huitième section du cours Ultimate React. Dans cette section, nous allons en apprendre davantage sur le routage, qui est le concept très important de React. Si vous voulez travailler sur de grands projets React, vous devez absolument ajouter routage React dans votre projet. Nous verrons plusieurs itinéraires, un routage à rythme unique, des paramètres d' itinéraire, une chaîne de requête, routage imbriqué, une navigation et bien plus encore Après avoir terminé cette section, vous aurez une solide compréhension du fonctionnement du routage dans React. Commençons donc cette section. 77. Préparer le projet: Maintenant, nous allons configurer notre nouveau projet parce que nous ne voulons pas le gâcher, et parce que nous n'apprenons pas tous les concepts de routage dans ce projet. Après avoir appris cela, nous ajouterons également le routage dans notre projet. Ainsi, dans le dossier des ressources, vous obtenez un dossier appelé modèle de routage. Ouvrez ce dossier et ouvrez-le dans le code VS. Donc, auparavant, nous construisions notre projet à partir de zéro. Maintenant, c'est ainsi que vous pouvez utiliser d'autres projets React et commencer à travailler dessus. Nous ouvrons donc notre terminal en appuyant sur Control plus backtick ou Command plus backtick Et juste ici, NPM lance Dow et appuie sur Enter Et c'est là que nous recevons ce message. Le blanc n'est pas reconnu comme une commande interne ou externe. Pourquoi recevons-nous ce message ? La raison en est que nous n'avons pas de modules de nœuds dans ce projet. Maintenant, comment pouvons-nous ajouter des modules de nœuds ? En utilisant NPM install et en appuyant sur Entrée. Cette commande exécutera tous les packages et bibliothèques que nous avons utilisés dans notre projet. En d'autres termes, il installera toutes les dépendances avec les versions disponibles dans notre fichier packet sn. Et c'est pourquoi le paquet JSNFle est plus important que les non-modules Nous pouvons maintenant exécuter NPM run Dov. Désolé, je fais une faute de frappe ici. Laisse-moi exécuter Dow par NPM. Ouvrez cette URL et voyez ici que nous obtenons notre application. Voyons ce que j'ajouterai dans cette application. Ainsi, dans le composant de l'application, nous avons NaBR en haut et une balise principale pour notre application Dans cette balise principale, nous voulons effectuer tous les routages. Voyons maintenant ce qu'il y a à l'intérieur de ce NaBR. Vous pouvez voir que NaBR n'a qu'une seule liste de commandes avec quatre articles de liste Et à l'intérieur de ceux-ci, nous avons une simple étiquette d'ancrage avec HF et nous avons mentionné différents liens ici. 78. Ajouter un routage pour une application React: Maintenant, avant d'implémenter le routage, commençons par comprendre ce qu'est le routage. Nous avons donc ici quelques balises d'ancrage. Si nous cliquons sur l'un des liens, nous serons redirigés vers ce lien. voyez, dans l'URL, nous avons un hôte local, appelez le 5173 slash Ainsi, lorsque nous utilisons l'URL des articles, nous voulons afficher la page de l'article, que nous appellerons routage en termes simples. Si nous cliquons sur le lien des produits, nous voulons afficher la page des produits. Il s'agit d' une fonctionnalité très courante de tout site Web. Dans nos deux projets, nous n'avons pas ajouté de routage car notre application ne comporte qu'une seule page. Mais si nous créons un autre projet et que nous devons ajouter d'autres pages, nous avons besoin d'un routage. Donc, comme nous le savons, React est une bibliothèque Ja Script, et elle ne possède aucune fonctionnalité permettant d' implémenter la fonctionnalité de routage. Pour ajouter le routage dans notre application, nous utiliserons une bibliothèque externe appelée React Router Dom. Il s'agit de l'une des bibliothèques les plus populaires pour gérer le routage. Ouvrez donc le terminal, ajoutez un nouveau terminal et écrivez NPM install, React router Dom Si vous souhaitez installer la même version que celle que j'utilise, vous pouvez l'ajouter ici au taux 6.11 0.1 et appuyer sur Entrée Donc, si à l'avenir React Router Dom est mis à jour de manière majeure, vous pouvez toujours suivre ce code. Maintenant, pour ajouter le routage dans notre application, nous devons tout d'abord encapsuler notre application avec un composant de routeur de navigateur disponible dans le package React Router Dom. Donc, penmin point JSX, et en haut, nous importons le routeur Browser depuis React Router Comme je n'écris pas le nom complet, j'écris juste la première lettre de cette bibliothèque, RRD, et j'appuie sur Entrée Maintenant, avant notre composant d'application, nous avions un composant de routeur de navigateur et déplaçons cette balise de fermeture après le composant d'application. Ce composant du routeur du navigateur est très important car sans cela, le routage ne fonctionnera pas. Ce composant conserve également un enregistrement de l' URL actuelle et de la navigation de notre historique. Ne t'inquiète pas Nous verrons cet historique dans les prochaines leçons. Pour l'instant, n'oubliez pas que sans ce routeur de navigateur, notre routage ne fonctionnera pas. Enregistrez ce fichier et revenez à notre composant d'application. Ici, nous allons définir notre itinéraire. Donc, tout d'abord, nous ajoutons ici un composant appelé route. En les utilisant, nous pouvons définir sur quelle page quel composant doit s'afficher. Ne t'inquiète pas, regarde ça. Donc, tout d'abord, nous voulons définir notre composant home, et ici nous ajoutons notre chemin qui est home. Nous n'ajoutons donc ici que slash Now , le composant que nous voulons afficher Nous voulons afficher ce composant d'accueil. Nous ajoutons donc un attribut d'élément égal à entre crochets CL, nous ajoutons un composant home. Ici, nous pouvons voir que l'importation automatique ne fonctionne pas. Voici donc une autre extension pour cela. Ouvrez le panneau d'extension recherchez Auto Import et ouvrez cette deuxième extension. Notez ce nom, vous devez installer cette même extension. Fermons cet onglet d'extension, et encore une fois, ici, à la page d'accueil. Vous voyez, maintenant nous avons la saisie automatique. Cette ligne de route indiquera donc notre application si l'URL du navigateur est ce chemin, puis affichera cet élément. C'est aussi simple que cela, enregistrez les modifications et jetez-y un œil. Ouvrez la console, et ici nous obtenons une erreur. Un itinéraire ne doit être utilisé que comme enfant de l'élément routes. Veuillez inclure votre itinéraire dans nos itinéraires. Il est donc clairement indiqué d'envelopper notre composant de route avec le composant de routes. Donc, en haut, nous importons des itinéraires après cet itinéraire. Et avant notre itinéraire, nous ajoutons le composant routes. Déplacez cette étiquette de fermeture après cet itinéraire, enregistrez les pouces et jetez-y un coup d'œil. R, nous trouvons ici notre composant d'accueil sur la page d' index de notre application. Maintenant, définissons d'autres itinéraires. Dupliquez ce composant de route trois fois de plus. Tout d'abord, nous changeons de chemin pour couper les produits et d'élément en composant de produits Vérifiez si l'importation fonctionne correctement. Chemin vers les articles et élément vers le composant des articles. Et enfin le chemin pour slash admin et element to admin component Enregistrez les modifications et jetez-y un œil. Tu vois, nous sommes d'abord chez nous. Cliquez maintenant sur Products Link. Nous obtenons des produits, des articles et des services administratifs. Cela fonctionne donc bien. Maintenant, vous vous demandez peut-être pourquoi nous définissons nos itinéraires uniquement ici ? Pouvons-nous définir des itinéraires ailleurs ? Oui, nous pouvons définir nos itinéraires à n'importe quel endroit où nous voulons afficher le routage. Par exemple, nous créons un site Web de commerce électronique et nous voulons ajouter le routage à ce projet. Ce site Web comporte différentes sections comme la barre de navigation en haut, le pied de page en bas, le panneau latéral gauche pour afficher les nouveaux produits et une section principale Maintenant, dans la barre de navigation, nous avons quelques liens tels que des téléphones portables, ordinateurs portables, des montres, des vêtements, etc. Lorsque nous cliquons sur l'un de ces liens, nous devons ouvrir cette page dans cette section principale. Les autres parties du site Web resteront les mêmes. Seule cette section principale est modifiée. Dans cette section principale, nous devons donc définir nos itinéraires et c'est exactement ce que nous avons fait dans notre projet de routage. Bref, n'oubliez pas que dans quelle partie nous définissons les itinéraires, seule cette partie changera lorsque nous redirigerons vers une autre page. 79. Ajouter une page non trouvée: Maintenant, dans notre application, l'utilisateur souhaite rediriger sur une URL comme un profil slash Donc, si notre projet n' a pas de page de profil, vous pouvez voir ici que nous n'obtenons rien, ce qui est très bien. Mais nous voulons afficher la page 40, quatre pages introuvables lorsque l'utilisateur redirige vers la page, qui n'est pas définie dans nos itinéraires. Voyons donc comment nous pouvons le faire. Donc, après toutes les routes, nous ajoutons un autre composant de route. Et nous passons le chemin égal à l'étoile, c'est-à-dire n'importe quel chemin qui n'est pas disponible sur ces autres itinéraires, et nous passons l'élément au composant introuvable. Voyons maintenant ce qu'il y a à l'intérieur de ce composant introuvable. Tu vois, j'ajoute juste une balise avec 404, texte de la page introuvable, et j'ajoute de la couleur au rouge. Revenons donc à notre composant d'application, enregistrez les modifications et jetez-y un œil. voyez, ici nous avons le message 404, page non trouvée. Vous pouvez ajouter des styles personnalisés à cette page introuvable. Cela dépend entièrement de vous. Maintenant, si nous allons sur la page d'accueil, nous obtenons notre page d'accueil, et si nous redirigeons vers une autre URL, disons ABC, alors nous obtenons 404, page introuvable. 80. Créer une application en une seule page: Maintenant, dans notre mise en œuvre, nous n'avons aucun problème. Si vous remarquez, lorsque nous cliquons sur un lien, toute notre page est actualisée. Laisse-moi te montrer. Ouvrez les outils de développement et accédez à NetworkTab. Cliquez maintenant sur Anink et voyez ici que nous faisons cette demande 21 Mais nous savons que React enveloppe tout le code dans un seul fichier groupé, puis le navigateur récupérera ce code en fonction de ses besoins Nous n'avons pas besoin d'envoyer un bundle complet pour chaque page. Par exemple, si nous utilisons YouTube, site Web de YouTube ne se chargera que pendant le temps. , si nous ouvrons une vidéo, Ensuite, si nous ouvrons une vidéo, elle chargera simplement la partie nécessaire, mais elle ne sera pas actualisée à nouveau. Ce type d'application est appelé application à page unique. Faisons donc de notre application une application à page unique, qui est la fonctionnalité la plus courante de tous les sites Web modernes. Pour cela, nous ouvrons notre composant Nebr et à la place de cette balise d'ancrage, nous ajoutons un composant appelé Link, nous obtenons de React Router Doom Voyez-le en entrée automatique en haut. Remplaçons également ces balises d'ancrage par ce composant de lien. Maintenant, à la place de cette HRF, ce composant de lien doit être attribué Sélectionnez cette HF et appuyez sur Ctrl plus D ou Commande plus D et remplacez cette HRF par deux Sans ces deux attributs, ce composant de lien ne fonctionnera pas. Enregistrez les modifications et jetez-y un œil. Maintenant, cliquez sur n'importe quel lien et vous verrez que nous ne faisons pas tout SgtprQuest et que nos sites Web ne sont pas actualisés à chaque fois que nous ouvrons nos sites Web ne sont pas actualisés à chaque fois Vous pouvez donc voir à quel point il est simple de faire de notre application une application d'une seule page. Il suffit d' utiliser le composant Link à la place des liens d'ancrage. Parfois, nous voulons mettre en évidence le lien de l'itinéraire actuel, ce qui signifie que si nous sommes sur la page des produits, nous mettrons en évidence son lien, afin que l'utilisateur sache sur quelle page il se trouve actuellement. C'est vraiment simple. Remplacez ce composant de lien par un autre composant appelé Navink. Supprimons cette importation de liens Nous n'en avons pas besoin. Enregistrez les gènes et jetez-y un coup d'œil. Il fonctionne de la même manière qu'avant. Maintenant, je vais te montrer quelque chose de cool. Inspectez ce lien et voyez si nous sélectionnons le lien des produits, nous obtenons ici la classe active. Ainsi, quel que soit le lien sélectionné, composant New Bar ajoutera une classe active à ce lien. Ainsi, en utilisant le CSS, nous pouvons changer son style. Ainsi, dans notre fichier CSS à points de barre de navigation, nous avons à point Navbar, list, point d'ancrage Active Cali Brackets, police weet à 500 et color to blue Enregistrez les modifications et le galec. Vous voyez, ici, le lien de nos articles est mis en évidence. Vous pouvez voir à quel point cela fonctionne bien, et c'est la puissance de React Router DOM. 81. Paramètres de route (useParams): Maintenant, parfois dans notre application, nous devons utiliser des paramètres de route. Permettez-moi de vous donner l'exemple. Nous avons donc ici notre composant de produits. Définissons maintenant quelques liens dans ce composant. Donc, après cette balise AHT, nous ajoutons une liste non ordonnée, et à l'intérieur de celle-ci, nous avons besoin de Li, et à l'intérieur de celle-ci, nous avons besoin d'un composant de lien Et ici, nous passons l'attribut deux égal à deux dans les produits à double code. Nous voulons trois alliés avec un lien à l'intérieur. Nous enroulons donc ce tag d'ancrage Ali, le lions entre parenthèses, le multiplions par trois et appuyons sur la touche Tab Tu vois, on a ce MT. Je sais que c'est un peu compliqué, mais ce n'est qu'un moment d'entraînement. Dès que vous en aurez assez de taper du code à plusieurs reprises, vous essaierez d'utiliser des METs et des raccourcis pour cela. Passons ici au produit 1, appuyez sur l'onglet, sur le produit 2, sur l'onglet et sur le produit. Nous voulons maintenant ajouter un identifiant de chemin de lien pour chaque produit, un, deux et trois barres obliques Donc, si nous ouvrons les produits s un, cela signifie que nous voulons voir le produit dont l'identifiant est un, ou quel que soit le paramètre que nous transmettons ici. Il s'agit de la structure courante du routage, appelée paramètres de route. En utilisant cet identifiant, nous récupérerons des informations sur ce produit en particulier et les afficherons sur notre page Web Enregistrez les modifications et jetez-y un œil. Accédez à la page des produits, et ici nous obtenons une erreur. Ouvrez donc la console et voyez, ici, l'encre n'est pas définie. Revenons donc au code VS, et ici nous importons ce composant de lien. Enregistrez les modifications et jetez-y un œil. Cliquez sur le premier produit, et vous voyez, ici, nous avons une page 404 introuvable parce que nous avons oublié d' ajouter un itinéraire pour ce lien. Revenons donc au composant de l'application, et ici, après l'itinéraire de ce produit, nous ajoutons un autre chemin de route pour couper les produits, deux points, et maintenant nous allons ajouter ici le nom de notre paramètre de route Disons une pièce d'identité. Notez que nous ne transmettons ici qu'un seul paramètre de route car nous n'en avons besoin que d'un seul. Mais nous pouvons également transmettre autant de paramètres de route que nous le souhaitons. N'oubliez pas que si nous voulons ajouter un paramètre de route, nous devons utiliser deux points au début. Dans le cas contraire, cela ne fonctionnera pas. Maintenant, l'élément est égal à ici, nous ajoutons un seul composant de produit. Enregistrez les modifications et jetez-y un œil. Cliquez sur le lien d'un produit et voyez que nous sommes redirigés vers un composant de produit unique. Donc ça marche. Maintenant, vous pouvez vous demander quel est le but de ce paramètre de route ? Nous obtenons la même page pour chaque produit. Laisse-moi te montrer ça. une des tâches consiste à obtenir cet identifiant dans ce composant unique du produit. Ainsi, sur un seul composant du produit, et pour récupérer le paramètre de route à partir de l'URL, nous avons un hook dans React Router dom Donc, en haut, nous saisissons les paramètres d'utilisation de React Router dom. Les paramètres sont des paramètres. Maintenant, dans notre composant fonctionnel, nous appelons ce hook use params et ce hook renvoie automatiquement l'objet des paramètres de route, et c'est tout Nous n'avons rien d' autre à faire. Stockons-les dans une variable appelée params. Et après cela, enregistrez simplement ces paramètres par point sur la console. Enregistrez les modifications et jetez-y un œil. Ouvrez la console. Et voyez ici que nous obtenons les paramètres de route dans l'objet. N'oubliez pas que le nom de cette propriété est le même que celui décrit dans notre itinéraire ici. Maintenant, dans l'application du monde réel, en utilisant cet identifiant, nous pouvons récupérer des données depuis notre backend et faire bien d'autres choses encore Pour l'instant, affichons simplement cet identifiant ici. Nous déstructurons donc cet objet et obtenons son identifiant. Supprimez maintenant cette console et imprimons cet identifiant après cet en-tête. Enregistrez les modifications et jetez-y un œil. Voyez si nous passons au produit deux, nous obtenons un seul produit deux. Et si nous passons au produit trois, nous obtenons un seul produit trois. Tout dépend donc des paramètres de route. 82. Chaîne de requête: Tapons maintenant le paramètre d'URL, qui est une chaîne carrée Parmi les données, nous voulons transmettre avec notre demande d'URL. Permettez-moi de vous donner un exemple. Voici donc la page. Imaginons que nous ayons une liste d' articles et que nous voulions raccourcir cet article par date et par catégorie à l'électronique. Ce sont les données que nous voulons transmettre dans notre URL. Nous transmettons donc ici l'URL, le interrogation, et ensuite, tout ce que nous transmettons ici est transformé en chaîne de requête, et nous pouvons obtenir ces variables dans notre composant d'article. Un autre exemple le plus courant de chaîne de requête est la recherche. Laissez quelque chose sur YouTube. Notez que l'URL change en résultats, interrogation, et nous obtenons ici une chaîne de requête. Si nous créons une URL et que nous la collons dans un autre onglet, nous obtenons le même résultat de recherche. C'est donc le travail de la chaîne de requête. Revenons donc à notre exemple, nous voulons passer ici à la chaîne de requête. Tout d'abord, nous écrivons le nom de notre variable, abrégé par égal à maintenant sans aucun code, nous passons ici notre valeur. Disons la date. Maintenant, pour passer le deuxième paramètre, nous utilisons une catégorie de personnes égale à l'électronique. Maintenant, voyons comment procéder. Je sais que c'est un peu ennuyeux, mais ces concepts sont très importants lorsque nous travaillons sur gros composant d' article ouvert, et en haut, nous devons importer un hook pour obtenir les paramètres des chaînes de requête. Utilisez la recherche PeramerRouter Room. Ce paramètre de recherche d'utilisation est très similaire à notre hook use state Nous appelons ce crochet ici dans notre fonction. Et priez avec deux objets. Nous le stockons donc dans une variable et en utilisant la déstructuration R, nous adhérons aux paramètres de recherche, recherche par virgules. Vous pouvez voir que c'est très similaire à l'utilisation Maintenant, dans cette première propriété, les paramètres de chaîne. Et en utilisant les paramètres de recherche définis, nous pouvons définir les paramètres de chaîne de requête Voyons d'abord les paramètres de recherche. Ce paramètre de recherche a une méthode appelée GT. Et entre parenthèses, nous devons transmettre le nom de notre variable. Disons brièvement B. Assurez-vous d'écrire le même nom de variable que celui que nous transmettons dans la chaîne de requête, et que nous les stockons dans une variable appelée sort B. Maintenant, dupliquons cette ligne en utilisant saved plus lt plus la flèche vers le bas. Option Plus plus flèche vers le bas et changez cette photo par catégorie. Maintenant, imprimons ceci ici. Donc, les crochets, photographiés par, et ensuite, la catégorie des crochets. Regardez les modifications et jetez-y un coup d'œil. Vous voyez, nous obtenons ici ces deux variables de chaîne de requête. Voyons maintenant comment utiliser perms de recherche définis pour définir les paramètres de chaîne de requête Après cette balise AT, nous créons un bouton appelé shot B views. De plus, nous passons ici par click et à l'intérieur, nous passons function, handle, short, B. Maintenant, définissons cette fonction. Donc const handle shot by. Fonction flèche, et ici nous utilisons perms de recherche définis et ici nous devons transmettre variables de chaîne de requête dans une paire clé-valeur Trier par et attribuer une valeur aux vues. Quel que soit l'objet que nous transmettons ici, il sera défini comme chaîne de requête. Enregistrez les modifications et jetez-y un œil. Cliquez sur ce bouton et voyez dans l'URL, nous obtenons une chaîne de requête dont le court B équivaut à des vues, mais notre catégorie a disparu. Dans cet objet, nous ajoutons une catégorie clé et une valeur supplémentaires à cette variable de catégorie. Et comme nous le savons, si la clé et la valeur sont identiques, nous pouvons la supprimer. Enregistrez les modifications et jetez-y un œil. Retournez sur notre page et cliquez à nouveau sur ce bouton. Vous voyez, nous avons ici notre chaîne de requête. Vous pouvez voir à quel point c'est simple. 83. Routage imbriqué: Imaginons maintenant cette page d'administration en tant que panneau d'administration du site Web. Sur cette page, l'administrateur peut consulter tous les détails des ventes et tous les détails des vendeurs. Donc, composant d'administration, nous voulons ajouter deux composants de lien. Donc, sous-jacents à l'intérieur, nous avons besoin d'Ali et à l'intérieur, nous avons besoin d'un composant de lien avec attributs deux égaux à admin, et nous enveloppons cet Ali et ce composant de lien avec parenthèses. Maintenant, pour le premier lien, nous ajoutons des ventes et Link réduit également Connectez les vendeurs et les vendeurs en second lieu et assurez-vous d' importer le composant de lien depuis React Router Doom Enregistrez les modifications et jetez-y un œil. Si nous cliquons sur le lien de vente, il nous redirigera vers la page Admin Salespage Mais ici, nous obtenons une page introuvable. Ici, nous ne voulons pas ouvrir une nouvelle page. Au lieu de cela, nous voulons afficher la page de vente dans ce panneau d'administration. Quelque chose ressemble à ça. Nous cliquons sur la page de vente, puis la page de vente s'ouvrira sous ce panneau d'administration. Et si nous ouvrons la page du vendeur, cette page s'affiche également ici. Imaginez donc que ces quatre liens sont notre barre horizontale et que ces deux liens sont notre barre latérale. Ce routage est appelé routage imbriqué. Voyons donc comment ajouter un routage imbriqué. Donc, composant de l'application, pour définir le routage imbriqué, nous devons maintenant intégrer nos itinéraires imbriqués dans Donc, à la place de cette balise à fermeture automatique, nous ajoutons une balise de fermeture séparée. Maintenant, entre celles-ci, nous devons définir notre itinéraire imbriqué Nous ajoutons donc un autre chemin de route. Ici, nous suivons notre itinéraire imbriqué. Donc, si vous voulez définir les ventes de slash admin slash, il suffit d'écrire sales car slash admine est déjà là sales car slash admine Désormais, élément du composant commercial. Maintenant, dupliquons ce code, et sur le lieu de vente, nous transmettons l'élément vendeurs aux vendeurs également. Sauvez les inges et jetez-y un coup d'œil. Maintenant, si nous cliquons sur le lien de vente, nous n'obtenons pas de page d'erreur 404, et nous obtenons également ce panneau d'administration sur ces deux pages. Maintenant, pourquoi nous n'avons pas accès à notre composante ventes et vendeurs. Pour cela, nous devons suivre une étape supplémentaire. Donc, composant d'administration dans lequel nous voulons afficher ce NasdaRouting Et ici, nous avons un composant qui spécifie à quel moment nous voulons afficher le routage NASDA Donc, en haut, nous entrons la sortie de React Router Doom. Et où nous voulons afficher notre routage imbriqué juste après ces deux liens Nous ajoutons donc ici notre composant de sortie et c'est tout. Enregistrez les modifications et jetez-y un œil. Tu vois, voici nos pages. Les deux pages fonctionnent bien. Récapitulons donc cette leçon. Donc, pour définir le routage imbriqué, nous allons envelopper nos sous-pages avec le composant de route principal Dans ce cas, il s'agit d'ajouter maintenant, tout ce que nous transmettons dans cet élément s'affichera dans ces deux pages. Si nous ne transmettons pas cet élément ici, nous ne le verrons pas sur ces pages. C'est ce qu'on appelle un routage SAD car nous affichons une page dans une autre. Et pour afficher le routage SAD, nous devons passer la sortie dans ce composant d'administration, c' est aussi simple que cela. De plus, ce routage imbriqué n' est pas très courant pour les applications React Ce n'est que parfois que nous en avons besoin, ne vous inquiétez pas pour ça. Maintenant, ici, notre composant d'application semble un peu moche à cause de tout ce routage. Stockons donc ce routage dans un composant séparé. Nous avons donc supprimé tout ce routage, et dans notre dossier source, nous avons créé un nouveau composant appelé point de routage GSX Nous ajoutons un code standard, et à la place de ce DU, nous collons nos itinéraires Maintenant, coupons également toutes les entrées du composant de l'application à l' exception de ce Nabriput et collons-les dans le composant de routage Nous allons également couper ces routes et ce composant de route à partir d'ici et les coller dans notre composant de routage. Enregistrez ce fichier et revenez à notre composant d'application. Ajoutons ici tous les composants de routage. Enregistrez ceci et voyez maintenant que le composant de notre application semble propre. 84. Navigation par programmation: Voyons une autre caractéristique importante du routage, à savoir la navigation. Imaginez donc que lorsque l'utilisateur visite cette page du panneau d'administration, nous voulons vérifier si le rôle de l'utilisateur est administrateur ou non. Donc, ici, tout d'abord, je ferme tous les autres fichiers, et ici nous définissons un objet appelé user equal to object et passons ici propriété role et la valeur à disons user. C'est juste un exemple de navigation. , nous pouvons transmettre votre condition, par exemple si le rôle de point de l'utilisateur n'est pas égal à celui d'administrateur, Ensuite, nous pouvons transmettre votre condition, par exemple si le rôle de point de l'utilisateur n'est pas égal à celui d'administrateur, nous redirigerons cet utilisateur vers la page d'accueil ou la page de connexion. Pour naviguer, nous avons donc un composant appelé Navigate. Donc, en haut, nous importons Navigate depuis un routeur Doom. Et dans ce blog, nous renvoyons simplement ce composant de navigation. Et dans ce composant, nous ajoutons un attribut à equal home path, et c'est tout. Assurez-vous de renvoyer ce composant de navigation car lorsque j'enregistre cette leçon, j'ai oublié de le renvoyer et j'ai beaucoup de temps à trouver cette erreur. Enregistrez les modifications et jetez-y un œil. Essayez d'ouvrir le panneau d'administration et voyez que nous sommes redirigés directement vers la page d'accueil. Il existe maintenant une autre façon de naviguer. Donc, ici, lorsque nous accédons à la page d' un seul produit, nous voulons ajouter ici le bouton de retour en arrière. Ouvrez un composant de produit unique. Tout d'abord, nous ajoutons ici un bouton appelé retour en arrière et ajoutons ici un événement sur click equal to handleba Définissons maintenant cette fonction. Donc, const, handleba, arrow function. Et à l'intérieur, nous écrivons notre logique de navigation. C'est ce qu'on appelle la navigation programmatique. Pour cela, nous devons utiliser un hook appelé use Navigate. Donc, en haut, nous saisissons le hook use Navigate now, dans ce composant, nous appelons ce hook, et ce hook nous donne la fonction de navigation Nous stockons donc cet invariable généralement appelé Navigate. Et dans cette fonction de sac à main, nous appelons simplement cette fonction de navigation Et à l'intérieur de cela, nous devons suivre notre chemin. Donc ici, on passe juste moins un. Si nous voulons accéder à une page spécifique, nous pouvons écrire quelque chose comme ceci. Slash articles. Maintenant, changeons cela en moins un, enregistrons les modifications et jetons un coup d'œil. voyez, lorsque nous cliquons sur ce bouton, nous revenons à notre page précédente. C'est ainsi que nous pouvons naviguer vers différentes pages dans nos fonctionnalités importantes de React Router Dom. Si vous souhaitez en savoir plus sur cette bibliothèque, vous pouvez consulter sa documentation. Mais pour créer des applications React modernes. Si vous avez des doutes, vous pouvez me le demander dans la section questions-réponses. Désolée pour ces styles de projet de routage, Désolée pour ces styles de projet de routage car je veux que vous compreniez les concepts importants du routage sans vous soucier des styles et de l'apparence de l'application Les développeurs ne le savent pas, alors n'hésitez pas à poser des questions à ce sujet. 85. Exercice pour l'acheminement: Il est maintenant temps de faire un exercice de routage. Donc, dans notre précédent projet de films, nous n'avions aucun routage. Votre première tâche consiste donc à effectuer le routage dans ce projet. L'itinéraire devrait être comme ça. Sur la page d'accueil, nous afficherons par défaut la liste des films populaires. Maintenant, lorsque nous cliquons sur les films les mieux notés, nous sommes redirigés vers Route les mieux notés, et si nous cliquons sur le lien à venir , nous serons redirigés vers la page à venir et les données à venir s'afficheront. Dans la barre de navigation, vous pouvez également voir l'itinéraire actif. Maintenant, après cela, votre deuxième tâche est lorsque nous cliquons sur une carte vidéo, elle sera redirigée vers Movie Slash son identifiant Ne vous inquiétez pas pour cette page. Vous devez afficher l'identifiant du film sur cette page. Aucun style, rien. C'est juste un simple texte. Je pratique juste le routage ici. Si vous souhaitez ajouter ce projet à votre portfolio, assurez-vous de le dupliquer, puis de terminer cet exercice sur le code dupliqué. Consacrez donc 15 à 20 minutes à cet exercice et n'hésitez pas à revoir ces leçons en particulier. C'est tout à fait normal. L'objectif de cet exercice est de passer en revue les concepts de base du routage. Rendez-vous donc après avoir terminé cet exercice. 86. Ajouter un routage au projet 02: J'espère que vous essayerez de résoudre cet exercice, car essayer de le résoudre indique que vous voulez vraiment apprendre à réagir. Donc, si vous essayez, appréciez-vous pour cela. Voyons maintenant la solution de notre exercice de routage. Tout d'abord, je ne vais pas interrompre notre ancien projet. Au lieu de cela, nous allons créer un double projet. Copiez donc tous ces fichiers, sauf les modules de nœud et le fichier GCN du package point log point Et dans notre dossier de projet, nous créons un nouveau dossier appelé routing exercise. Et à l'intérieur, nous y collons nos fichiers. Maintenant, ouvrons-le dans le code VS. Bien. Tout d'abord, installons toutes les dépendances de notre projet. Ouvrez le terminal et écrivez ici, installez NPM et appuyez sur Entrée À quoi servira cette commande ? Écrivez. Il sert à ajouter et à installer le dossier des modules de nœuds. Après cela, nous devons installer une autre bibliothèque pour le routage, qui est React Router dom. Écrivez NPM install, react router dom et appuyez sur Entrée. Cela prendra du temps, c'est bien. Et à la fin, exécutons cette application avec NPM run Dow Et ouvrez ce lien dans notre navigateur. Tu vois, ça marche. Commençons maintenant par ajouter le routage. Tout d'abord, nous devons décider dans quelle partie nous voulons afficher le routage. Nous devons donc ajouter le routage après notre composant NaBR. Mais avant cela, nous devons encapsuler l' ensemble de notre application avec un composant de routeur de navigateur. Ainsi, dans le fichier JSX à points principaux, nous importons le composant du routeur du navigateur depuis Rag Router Doom, et nous allons intégrer le composant de notre application à ce composant du routeur du navigateur Enregistrez ce fichier et définissons nos itinéraires. Dans le composant d'application en haut, nous importons des itinéraires et des itinéraires depuis Rag Router dom Maintenant, après cette composante numérique, il vaut mieux ajouter la balise principale, et dans cette balise, nous ajouterons le routage. Donc, tout d'abord, nous ajoutons le composant routes, et à l'intérieur de celui-ci, nous ajoutons notre composant route. Je vais un peu plus vite car nous les voyons déjà dans cette section. Donc, dans ce composant de route, nous avons un chemin, et nous définissons d'abord le chemin pour qui, auquel nous pouvons ajouter un élément forward las. Ici, nous coupons simplement ce composant de liste de films avec un titre populaire et le passons ici. Maintenant, définissons un autre itinéraire, et nous définissons le deuxième chemin avec le trait de soulignement le plus noté et l'élément de cette liste de films avec le composant le mieux noté Enfin, nous définissons un autre itinéraire avec chemin à venir et un élément vers cette liste de films avec le composant à venir. Physiquement, nous disons sur ce chemin, d'afficher cet élément. React, peu importe que nous restituions le même composant ou non. Enregistrez les modifications et jetez-y un œil. Vous voyez, sur la page d'accueil, nous n'avons que la liste des films populaires. Maintenant, nous changeons notre URL en soulignement mieux noté et voyons que nous obtenons le composant le mieux noté. Cela fonctionne donc Maintenant, mettons en évidence ces liens de la barre de navigation. Ouvrez donc le composant Nu Bar et à la place de cette balise d'ancrage. Quel composant allons-nous ajouter ? vrai, il s'agit d'un composant Nowlin, et vous voyez qu'il est saisi automatiquement en haut Maintenant, remplacez-le également par New Link, et également par ce dernier. Ensuite, à la place de tout ce HRF, nous ajoutons à l'attribut, nous ajoutons à l'attribut, sélectionnons HF et en utilisant l'édition à plusieurs curseurs, nous remplaçons tout ce HRF par deux Maintenant, pour le premier lien, nous passons HomeLink, qui est une barre oblique Ensuite, nous ajoutons slash top underscore rated, et pour le dernier lien, nous ajoutons slash Enregistrez les gènes et jetez-y un coup d'œil. Si nous cliquons sur ce titre populaire, nous obtenons un titre populaire. Et si nous optons pour le titre le mieux noté, nous obtenons ici le titre le mieux noté, mais les films ne changent pas. Alors réglons ce problème très rapidement. Ainsi, dans notre composant de liste de films, nous récupérons des données dans ce hook d'effet d'utilisation Et comme nous le savons, ce hook d'effet d'utilisation ne s'exécutera qu'une seule fois lorsque ce composant sera rendu. Et dans notre cas, ce composant récupère données de l'API lorsque nous sommes sur une page populaire Mais si nous changeons notre page pour qu'elle soit la mieux notée, seuls le titre du type et les propriétés des emoji changeront C'est pourquoi cet effet d'utilisation ne se reproduira plus jamais. Donc, pour résoudre ce problème, nous devons exécuter ce crochet d'effet d'utilisation lorsque ces accessoires de type changent Ici, nous passons simplement un tableau d'indépendance de type. Si vous êtes un peu confus, ne vous inquiétez pas. Dans la section suivante, nous verrons ces concepts en détail. Enregistrez les modifications et jetez-y un œil. Voyez maintenant nos films changent en fonction de leur type. Examinons maintenant ce lien. Et ici, nous pouvons voir la classe active. Il suffit donc d'ajouter du CSS pour cette classe active. Donc, un fichier CSS à points Nabar. Et après cette ancre Naba Links, nous ajoutons le support d'angle Nabarlink, le point d'ancrage Active Et entre crochets Gali, nous ajoutons le poids de police à 700 Regardez les modifications et jetez-y un coup d'œil. Vous voyez, ici, nous avons de l'encre surlignée. Vous pouvez voir à quel point il est simple d'ajouter un routage. De nombreux développeurs ont rendu les choses très difficiles parce qu'ils essaient de tout faire en une seule étape, mais ils essaient toujours de faire toute implémentation étape par étape. 87. Définir les paramètres de route pour un seul film: Maintenant, lorsque nous cliquons sur l'une de ces cartes, nous ne voulons pas ouvrir TMW Link Au lieu de cela, nous voulons ouvrir une autre page sur notre site Web, qui peut afficher les détails de nos films. Nous allons donc d'abord modifier ce lien. Ouvrez le composant de la carte vidéo. Et en haut, nous importons le composant Link depuis le routeur React Dom. Maintenant, à la place de cette balise d'ancrage, nous ajoutons un composant de lien et nous pouvons supprimer cet attribut cible. Nous n'en avons pas besoin à la place de ce HF, nous ajoutons deux attributs. Supprimez également cette URL de base DMD. Nous conservons simplement Slash Movie ID, enregistrons les modifications et jetons un coup d'œil Cliquez sur n'importe quelle carte vidéo et voyez, nous sommes redirigés vers Movie Slash Movie ID Notre demi-tâche est donc terminée. Maintenant, nous voulons simplement afficher cet identifiant de film sur cette page. Mais avant cela, nous devons définir le parcours de cette page. Donc, un composant d'application, et ici en bas, nous ajoutons un autre composant de route. Le chemin est-il égal à savoir ce que nous passons ici ? Rédiger une colonne oblique de film. Et ici, nous ajoutons notre nom de variable, identifiant ou notre identifiant de film. Je pense que c'est plus précis. Maintenant, élément, nous voulons ajouter un nouveau composant. Ainsi, dans notre dossier de composants, dans notre dossier de liste de films, nous créons un nouveau composant appelé single movie point jsx Maintenant, ajoutons ici notre code standard. Sympa. Enregistrez ce fichier dans notre itinéraire. Nous ajoutons un seul composant vidéo et l'importation automatique fonctionne. Vous pouvez voir à quelle vitesse nous pouvons écrire notre code en utilisant l'extension Auto Import. Enregistrez les modifications et voyez ici que nous n'avons qu'un seul composant vidéo, donc cela fonctionne. Maintenant, affichons simplement cet identifiant de film Vous souvenez-vous de ce que nous allons utiliser pour cela ? Hein ? Nous utilisons PeramShok de React Router dom Revenons donc au composant vidéo unique dans le composant fonctionnel, nous ajoutons use perams et sélectionnons cette suggestion pour qu'elle soit saisie automatiquement Ici, nous appelons ce hook, et cela renverra un objet de paramètres de route. Stockons-les donc dans une variable, appelons des paramètres, ou nous pouvons même les déstructurer et ajouter ici un identifiant de film, car dans notre itinéraire, nous définissons le nom de notre variable de route en identifiant de film Maintenant, à la place de ce DU, nous ajoutons au tag et ici, des films individuels entre crochets, identifiant de film, et c'est tout Enregistrez les modifications et jetez-y un œil. Tu vois, ici on a notre carte d'identité. J'espère que tous vos doutes concernant le routage sont maintenant clairs. Il y a toujours des mises à jour ou des syntaxes différentes pour écrire du code, mais les concepts de base ne changeront jamais, et c'est ce que je veux vous apprendre. Une fois que vos concepts de base sont clairs, vous pouvez apprendre rapidement de nouveaux concepts et de nouvelles syntaxes. Si vous regardez continuellement ce cours, accordez-vous une petite pause et prenez l'air. Je vous verrai dans la section suivante. 88. Section 09 Appeler une API: Bienvenue dans la neuvième section du cours Ultimate React. Comme nous le savons, React est utilisé pour créer une partie et une partie de notre application. Dans le monde réel, nous avons également un backend, qui exécute la logique et stocke les données dans la base de données et est également utilisé pour l'authentification Si vous souhaitez travailler uniquement en tant que développeur React, vous n'avez pas besoin d'apprendre un backend tel que No Js, Jango ou asp.net Mais vous devez apprendre comment connecter notre application React au backend C'est ce que nous allons apprendre dans cette section. Alors plongeons-nous dans le vif du sujet. 89. useLe crochet à effet dans le détail: Avant de commencer à appeler un EPI, commençons par bien comprendre ce qu'est Use Effect Hook et comment nous pouvons l'utiliser SiluueEffect est donc utilisé pour provoquer des effets secondaires dans notre composant Les effets secondaires sont des actions effectuées à l'extérieur du monde. Nous produisons un effet secondaire lorsque nous sortons de nos composants de réaction pour agir. Par exemple, l'extraction de données depuis l'API, stockage des données dans le stockage local, comme c'est le cas dans Project One, mettent directement à jour le dôme et la fonction de temporisation, comme le réglage du délai d'expiration ou Ce sont les effets indésirables les plus courants de React. Donc, pour effectuer tout type d'effets secondaires, nous devons utiliser l'effet d'utilisation Hook. Voyons maintenant comment fonctionne cet effet d'utilisation. Dans cette section, nous allons utiliser notre précédent projet de routage car créer un nouveau projet pour chaque section n'est pas fastidieux Donc, ici, dans le composant de ce vendeur, nous importons d'abord l'effet d'utilisation depuis React, puis nous appelons cet effet d'utilisation dans notre composant fonctionnel. Maintenant, comme vous le savez, ce hook d' effet use prend deux arguments. La première est la fonction de Colbek dans laquelle nous produisons nos effets secondaires, puis nous avons un tableau de dépendances Pour l'instant, ne transmettons pas ce tableau de dépendances et dans cette fonction de rappel, nous écrivons simplement le montage du composant console point log Enregistrez ce fichier et jetez-y un œil. Ouvrez la console et accédez à la page d'administration. voyez, nous redirigeons vers la page d'accueil car nous devons définir un rôle d'utilisateur en tant qu'administrateur. Ainsi, dans le composant admin, nous changeons ce rôle en admin. Enregistrez-les et essayez maintenant d'ouvrir la page d'administration et d'accéder à la page du vendeur. Ici, nous pouvons voir que nous obtenons le montage des composants. Nous obtenons cette console deux fois grâce au mode React, dont je vous ai déjà parlé. Mode React Stit, affiche notre composant deux fois au cours du processus de développement. Désormais, cet effet d'utilisation s'exécutera sur chaque montage et sera rendu à nouveau. Mais voyons d'abord quand nos composants sont montés ou rendus. Le montage du composant se produit donc lorsque notre composant s'affiche pour la première fois sur notre navigateur. Maintenant, après le montage de notre composant sur notre navigateur, si quelque chose change ou se met à jour dans ce composant, cela provoquera un nouveau rendu. Donc, si nous ne transmettons aucune dépendance ici, cette fonction Colvec s'exécutera montage et du rendu du composant, ce qui signifie que lorsque quelque chose change dans le composant du vendeur, c'est aussi simple Disons-le en direct. Ici, nous n'avons rien à voir rerendu. Tout d'abord, nous ajoutons ici des fragments de réaction car nous allons ajouter plusieurs éléments. Ajoutons maintenant une zone de saisie pour gérer sa valeur, nous créons un nom d'appel de variable d'état définissons le nom et passons une chaîne vide comme valeur par défaut. Nous l'avons fait de nombreuses fois, n'est-ce pas ? Maintenant, nous passons ici l'événement inchangé, et ici nous obtenons l'objet de l'événement, la fonction flèche et nous définissons le nom à sa valeur actuelle. Alors, comment pouvons-nous obtenir la valeur actuelle ? Hein ? En utilisant la valeur du point cible du point d'événement. C'est simple. Enregistrez les modifications et jetez un œil, actualisez cette page, et ici nous pouvons voir que nous obtenons le montage des composants, maintenant nous écrivons quelque chose dans cette entrée et vous pouvez voir nous obtenons à nouveau le montage des composants. Encore une fois, si nous écrivons quelque chose en C, nous obtenons le montage du composant une fois de plus. Permettez-moi de vous expliquer ce qui se passe ici. Une fois que notre composant est monté, nous écrivons dans cette zone de saisie, qui changera le nom de cet état dans notre composant et provoquera un rendu et , de ce fait, notre effet d'utilisation sera exécuté. Chaque fois que nous voulons exécuter du code sur le montage et rendu, nous utilisons l'effet use sans aucune dépendance. Dans la leçon suivante, nous allons voir deux autres types de crochets à effet d'utilisation. 90. Dépendances d'utilisationEffet: Ainsi, dans la leçon précédente, nous verrons comment exécuter une fonction lors du montage et du rendu à nouveau. Maintenant, nous voulons parfois exécuter notre fonction de rappel une seule fois lorsque notre composant est monté ou affiché sur le navigateur C'est vraiment simple et facile. Il suffit de passer ici tableau de dépendances sous forme de tableau vide, enregistrer les modifications et de voir, nous arrivons ici au premier montage d'un composant. Après cela, si nous changeons quoi que ce soit dans notre composant, cet effet d'utilisation ne sera pas exécuté. En utilisant cette dépendance ETR, nous obtiendrons des données de l'API car nous voulons simplement tester les données une seule fois, ce que nous avons déjà fait dans notre projet, n'est-ce pas ? Autre exemple, supposons que nous appelions une API, qui renverra le numéro de notification, afin que nous puissions modifier le titre de notre page Web fonction de ce numéro. abord, nous enregistrons le numéro de notification de domaine à cinq, puis nous écrivons ici le titre du document à point égal à en CTI, nous ajoutons des crochets C, une notification, puis de nouvelles notifications Enregistrez les modifications et jetez-y un œil. Vous voyez, ici, nous obtenons un titre de notification personnalisé. C'est ainsi que de nombreuses applications React affichent un titre dynamique. Supposons maintenant qu'à l'endroit de cette notification, nous voulions afficher cet état du nom. Ici, nous écrivons le nom et le dollar entre crochets Cali. Ici, nous ajoutons un nom, enregistrons les modifications et jetons un coup d'œil. Actualisez la page et voyez ici que nous n'obtenons que le texte du nom car actuellement notre nom est une chaîne vide. Mais si nous écrivons quelque chose dans cette entrée, nous n'avons pas ce nom sur notre titre car cet effet d'utilisation ne s' exécutera qu'une seule fois à cause de ce tableau vide. Mais ici, nous voulons l'exécuter chaque fois que cette variable de nom change. Ici, nous passons simplement nom de la variable dans ce tableau de dépendances. Vous pouvez également transmettre ici plusieurs variables, enregistrer les modifications et y jeter un œil. Vous pouvez voir que le nom de notre titre a été mis à jour C'est ainsi que les dépendances fonctionnent dans Use Effect. 91. useFonction de nettoyage des effets: Voyons maintenant le dernier et important concept de l'effet d'utilisation Hook. Nous devons donc parfois ajouter une fonction de nettoyage pour éliminer les effets secondaires. Par exemple, ici, nous ne faisons que mettre à jour le titre. Imaginez maintenant que nous sommes abonnés au salon de discussion, et si nous passons à une autre page, nous voulons nous désabonner de ce salon de discussion. Donc, pour désinscrire la salle, nous devons utiliser la fonction de nettoyage Sachez que cet exemple est un peu difficile à comprendre. Laisse-moi te simplifier. Imaginez que c'est notre composant de chat dans lequel des personnes discutent. Lorsque deux personnes discutent, doivent toutes deux s'abonner ou se connecter au même identifiant de chambre. De ce fait, les deux personnes reçoivent le message immédiatement sur leur écran. Mais si une personne quitte le salon de discussion, nous devons nous désinscrire ou nous déconnecter de ce salon afin que cette personne ne reçoive aucun message sur son écran. Dans la plupart des cas, nous n'avons pas besoin d'utiliser une fonction de nettoyage nous devons parfois le faire, et c'est pourquoi je tiens à vous montrer ceci. Supprimons donc ce code indésirable et ajoutons à nouveau le montage du composant console point log. Et à la fin de notre fonction de rappel, nous voulons ajouter une fonction de nettoyage. Nous renvoyons donc ici une fonction. Et dans cette fonction, nous pouvons écrire la logique de notre fonction de nettoyage Cette fonction de nettoyage sera exécutée lorsque notre composant sera démonté ou retiré de Ici, nous écrivons simplement démontage du composant Dot Log de la console Enregistrez les modifications et jetez-y un œil. Actualisez la page, et nous pouvons voir ici d'abord nous obtenons le montage du composant, puis le démontage du composant, et encore une fois le montage du composant Comme je vous l'ai dit, à cause du mode React Street, notre composant est rendu deux fois. Donc, il va d'abord monter, puis réagir en mode urbain, supprimer ce composant, et c'est pourquoi nous arrivons ici au démontage du composant Et après cela, nos composants sont à nouveau montés. Maintenant, si vous allez sur une autre page, nous obtenons à nouveau démontage du composant parce que notre composant été retiré de notre écran est ainsi que fonctionne la fonction de nettoyage . Ne t'inquiète pas pour ça. Nous n'utiliserons la fonction de nettoyage qu'une seule fois dans notre application. Donc, pour récapituler rapidement, usefect est utilisé pour provoquer des effets secondaires dans notre composant L'effet américain a deux paramètres, le premier, fonction de rappel et le second, tableau de dépendances, qui est facultatif Par tableau de dépendances, l' effet d'utilisation comporte trois variantes. Le premier est sans aucune dépendance, qui exécute cette fonction de rappel au montage et à chaque nouveau rendu second est un tableau vide, qui exécute cette fonction Calbeck uniquement lors du montage et le dernier est un tableau de dépendances avec des variables, qui exécute cette fonction Calbeck lors du rendu qui exécute cette fonction Calbeck lors du rendu et également lorsque l'une de ces variables change Encore une chose, lorsque nous ajoutons crochet d'état à usage multiple dans notre composant, nous pouvons également ajouter un crochet d'effet à usage multiple dans notre composant, c' est aussi simple que cela. Non, je répète ce crochet d' effet d'utilisation plusieurs fois, mais je veux juste m' assurer que vous avez les bonnes bases du crochet d'effet d'utilisation. Je voudrais également expliquer le montage, le rendu et le démontage, appelés cycle de vie des composants. Vous apprenez donc les deux concepts en une seule leçon. 92. Les bases des requêtes HTTP: Avant d'appeler l'API, voyons ce qu'est SDDPRQuest Donc, si nous connaissons notre client, ou si nous pouvons dire si notre navigateur a besoin de certaines ressources, il demandera au serveur via Internet. Cette demande est appelée SDDPRQuest. Donc, en termes simples, ce SDDPRQuest fonctionne comme un pont entre les clients et les serveurs Maintenant, lorsque le serveur reçoit SDDPRQuest, il renvoie certaines ressources, demandées client Par exemple, nous avons précédemment défini StdprQuest pour obtenir les données du film serveur TMDB prend donc notre StdprQuest et nous envoie une réponse aussi simple Maintenant, il existe des méthodes qui décrivent le type de tâche que nous voulons effectuer. Nous avons donc d'abord la requête Get, qui est utilisée pour récupérer des données depuis le serveur Nous l'avons déjà bien vu. Ensuite, nous avons une demande de publication, qui est utilisée pour soumettre des données au serveur, comme un formulaire d'inscription ou un formulaire de connexion Ensuite, nous avons envoyé une requête, qui est utilisée pour remplacer les données sur le serveur. Ensuite, nous avons une demande de correctif, qui est utilisée pour mettre à jour des données spécifiques sur le serveur. Maintenant, vous vous demandez peut-être quelle est la différence entre put et patch ? Par exemple, nous avons un serveur qui contient des informations sur dix livres. Maintenant, si nous voulons remplacer ce livre par les informations du nouveau livre, nous utilisons la demande de vente. Mais si nous voulons mettre à jour les informations spécifiques d'un livre, exemple son prix, nous ne remplaçons pas ici les informations complètes du livre, mais nous modifierons simplement la partie spécifique des informations relatives au livre. Dans ce cas d'utilisation, nous utilisons donc la méthode patch. Enfin, nous avons la méthode de suppression, qui est utilisée pour supprimer une donnée spécifique. Nous faisons déjà cette demande lorsque nous utilisons des sites Web, et nous utilisons Get request plusieurs fois par jour. Par exemple, nous ouvrons le site Web udemy.com. Ici, nous envoyons une demande pour obtenir la page Web du serveur, afin que le serveur renvoie cette page Web en réponse. Ici, nous utilisons GetRQuest sans le savoir. Dans la leçon suivante, nous allons envoyer une requête Get pour obtenir des données depuis le serveur. 93. Récupérer les données des vendeurs: Commençons maintenant par obtenir des données à partir de l'API. Je sais que vous le savez déjà, mais je voudrais vous réviser et , sans obtenir de données, comment pouvons-nous effectuer des mises à jour ou supprimer des fonctionnalités ? Récupérons rapidement les données de l'API. Ici, nous utiliserons une fausse API, qui fonctionnera de la même manière que l'API d'origine, vous obtiendrez auprès du développeur Bend. Rendez-vous sur Jason placeholder.typicod.com. Cette API est conçue pour déguster et apprendre à appeler une API. Descendez vers le bas, et vous pouvez voir ici différents types de données, publications, commentaires, photos, tâches, etc. Nous allons utiliser les données de cet utilisateur. Ouvrez-les et nous pouvons voir ici que nous obtenons ces différentes données utilisateur. Nous considérerons ces utilisateurs comme des vendeurs pour notre projet. Copiez cette APIURL et revenez au code VS. Nous n'avons pas besoin de cet effet d'utilisation, et ajoutons un effet d'utilisation à partir de zéro. Utilisez donc l'effet, la fonction de rappel, et voici ce que nous ajoutons un tableau de dépendances avec des variables ou sans dépendance Bien sûr, nous allons ajouter un tableau vide en tant que dépendances car nous ne voulons obtenir des données qu'une seule fois à partir de l'API. Maintenant, dans cette fonction de rappel, nous allons appeler notre API pour obtenir des données Auparavant, nous utilisions méthode fetch pour appeler l'API dans notre deuxième projet Mais maintenant, nous allons utiliser la bibliothèque la plus populaire pour appeler l'API dans React, à savoir xOS Ouvrez donc le terminal et ajoutez un nouveau terminal, et ici, NPM installe AXOS et appuyez sur Entrée Ne vous inquiétez pas pour Axios. Elle est plus facile à utiliser que la méthode fetch. Maintenant, en haut, nous saisissons Axios à partir du package Axios. Maintenant, dans notre hook d'effet d'utilisation, nous écrivons Axios point Maintenant, nous devons ajouter notre méthode SDTP, qui est get pour récupérer les données Maintenant, dans cette fonction, nous devons ajouter notre API dans les codes, comme nous l'avons fait dans la méthode fetch Maintenant, cette expression renvoie une promesse. Donc, pour gérer, promettez, ce que nous pouvons utiliser, écrivez. Nous pouvons utiliser cette méthode pour acing await. Ici, nous écrivons alors et nous obtenons ici la réponse, fonction flèche, et nous consultons simplement le journal à points de cette réponse. Conservez les ginges et jetez-y un coup d'œil. Ouvrez la console. Vous voyez, nous obtenons ici cette réponse de l'API. Voyons cette demande plus en détail. Nous ouvrons donc ici l'onglet Réseau. Pour l'instant, aucune demande ne nous est parvenue. Actualisez cette page, et nous pouvons voir un tas de demandes de documents et de scripts. Mais nous voulons uniquement voir la demande de récupération. Ici, nous sélectionnons Filter, Fetch ou XHR, qui signifie XML SDDPRQuest Ici, nous recevons une demande de deux utilisateurs raison Ici, nous pouvons voir le code de statut 200, ce qui signifie que la taille de notre demande est réussie, et nous avons le temps de la traiter. Voici les détails relatifs à cette demande STTP spécifique. Voyons ce qu'il y a dedans. Ici, nous pouvons voir les en-têtes de cette requête SDTP. Ainsi, chaque demande et réponse SDTP est divisée en sections, en-tête dans lequel nous définissons les métadonnées, et dans le corps, nous définissons ou obtenons les données Nous pouvons donc voir ici quelques détails généraux de l'en-tête de notre SDDPRquest Nous pouvons voir ici l'URL, la méthode, le code d'état, l'adresse distante, qui est l' adresse IP du client. Maintenant, après cela, nous avons des en-têtes de réponse que le serveur envoie avec réponse La plupart du temps, nous n'avons pas à nous inquiéter à ce sujet, et nous avons enfin un en-tête de demande. De plus, cela ne nous inquiète pas. Maintenant, dans l'onglet d'aperçu, nous avons l'aperçu de nos données. Et dans cet onglet de réponse, nous obtenons nos données de manière structurée. Revenons maintenant à la console. Et ici, nous pouvons voir que dans cet objet de réponse, nous obtenons ces données de configuration dans lesquelles nous obtenons nos données, les en-têtes de requête xOS indiquant le statut 200, qui indique le succès, et le texte de statut La plupart du temps, nous ne traitons que ces données. Affichons donc cette liste de données sur la page de notre vendeur. Donc, pour afficher les données, nous devons les stocker dans un seul état. Nous créons donc une variable d'état appelée sellers et définissons les vendeurs et transmettons ici un tableau vide. Maintenant, à la place du journal des points de cette console, nous transmettons la fonction Setsellers, et à l'intérieur de celle-ci, nous transmettons les données des points de réponse Maintenant, affichons simplement ces vendeurs. Donc, entre crochets CI, carte des vendeurs, nous trouvons ici chaque vendeur, nous renvoyons une balise de paragraphe et nous passons ici le nom du point du vendeur. Et comme nous le savons, pour la méthode map, nous devons également ajouter un attribut clé. La clé est donc égale au point ID du vendeur, qui est unique pour chaque vendeur. Regardez les modifications et jetez-y un coup d'œil. Tu vois, c'est ici que nous trouvons le nom de ce vendeur. Vous pouvez voir qu'en utilisant axios, nous n'avons pas besoin de faire une étape supplémentaire, avons fait dans la méthode fetch J'espère que tous vos doutes sur la méthode G sont maintenant clairs. 94. Ajouter un indicateur de charge: Maintenant, lorsque nous envoyons des demandes au serveur, cela prend un certain temps, environ une demi-seconde ou moins. Mais parfois, si nos données sont volumineuses ou si la connexion Internet de l'utilisateur est lente, nous devons afficher un indicateur de chargement sur notre page Web. Donc, en haut, nous créons ici une variable d'état appelée Ioading et définissons Iloading Par défaut, nous passons false. Maintenant, dans notre hook d'effet d'utilisation, avant de commencer à appliquer des correctifs aux données, nous définissons le chargement sur true Et une fois que nous avons obtenu nos données, qui sont dans cette méthode, nous ajoutons ici un bloc de code, et dans une nouvelle ligne, nous définissons le chargement sur false. est aussi simple que ça. Maintenant, avant notre méthode cartographique, nous pouvons ajouter culipracket et ajouter ici une condition si son chargement Ensuite, nous affichons ici la balise ST, et à l'intérieur, nous ajoutons du texte de chargement. Enregistrez les modifications et jetez-y un œil. Actualisez la page et voyez ici que nous obtenons des balises de chargement en quelques millisecondes, car ma connexion Internet est rapide et la taille des données Maintenant, ralentissons notre Internet. Donc, dans l'onglet réseaux, ici, dans ce trotonnage, nous pouvons sélectionner trois G rapides, trois G lents, également hors Sélectionnons donc les trois G lents et réprimons la page. Vous pouvez voir ici que nous obtenons ce texte de chargement, il fonctionne donc bien. Maintenant, nous voulons parfois afficher l' indicateur de chargement pour toute la page. Par exemple, nous affichons ici des données et nous avons également une balise S three en entrée. Nous voulons afficher le chargeur uniquement lorsque les données du vendeur sont de plus en plus rapides. Mais parfois, nous voulons afficher le chargeur pour toute la page. Pour cela, nous ajoutons simplement si la condition antérieure à cet écrit et si la condition est la même Si le chargement est vrai, nous renvoyons cette balise ST avec chargement. Enregistrez les modifications et jetez-y un œil. Actualisez la page et voyez ici que nous obtenons ce texte de chargement pour l' ensemble de cette page des centres d'administration. Pour l'instant, nous n'en avons pas besoin. Supprimons donc cette condition if et enregistrons ce fichier. Ajoutons maintenant rapidement spinner de chargement à la place de ce texte en cours de chargement Passez donc à loading point IO slash CSS. À partir de là, nous avons 12 chargeurs CSS gratuits de base en SDML et CSS purs Supposons que nous voulions afficher ce chargeur. Cliquez dessus, et nous obtenons ici le balisage SDML en bas et les styles CSS en haut Copiez ce balisage STM, et dans le dossier des composants, nous créerons un autre dossier appelé Common dans nous créerons un nouveau composant spécifique La raison pour laquelle nous ajoutons ce chargeur dans ce dossier commun est que ce chargeur n'est pas spécifique à la seule page d'administration. Nous pouvons utiliser le chargeur dans différentes pages. Cela dépend totalement de nous. Tout d'abord, nous ajoutons ici notre balisage SDML et le collons ici Et à la place de cette classe, nous ajouterons le nom de la classe. Maintenant, en haut, importons le chargeur de fichiers CSS point CSS. Et pour cela, nous créons un nouveau fichier dans le dossier commun, loader point Css. Revenons maintenant au navigateur, copiez ces styles à partir d' ici et collez-les dans le fichier css du point de chargement. Nous pouvons maintenant voir que la couleur de notre chargeur est actuellement le blanc. Nous pouvons le modifier d'ici. Passons à un CD CD , de couleur grise. Enregistrez ce fichier et enregistrez également ce composant du chargeur. Et maintenant, affichons ce chargeur. L'endroit où ce texte est chargé. Supprimez-le et ajoutez ici le composant du chargeur. Enregistrez les modifications et jetez un œil et voyez que nous obtenons ce chargeur après cette entrée. Déplaçons-le dans la nouvelle ligne. Ici, nous pouvons simplement emballer ce chargeur avec Du. Enregistrez les modifications et voyez, nous avons ici le chargeur dans une nouvelle ligne. Ça a l'air plutôt sympa. 95. Gestion des erreurs: Lorsque nous travaillons avec une API, il est important de gérer les erreurs, car si connexion Internet des utilisateurs est interrompue ou s' ils essaient d'obtenir des données indésirables, nous devons leur montrer l'erreur. Maintenant, avant cela, je remarque quelque chose. Au lieu d'encapsuler ce composant du chargeur dans Dieu, nous pouvons ajouter l'élément du chargeur JSX Donc, ouvrez le composant du chargeur, et ici nous enveloppons cette matrice avec un autre du. Enregistrez ce fichier et revenez au composant du vendeur. Ici, après cet état de chargement, nous ajoutons une autre variable d'état d' utilisation appelée errors and set errors. Et ici, nous passons une chaîne vide comme valeur par défaut. Maintenant, comme vous le savez peut-être lorsque nous travaillons avec des promesses, nous pouvons utiliser la méthode catch pour gérer les erreurs. Laisse-moi te montrer. Donc, après cette méthode, nous ajoutons une méthode de cache, et nous obtenons ici un objet d'erreur, une fonction d'erreur, et enregistrons simplement cet objet d'erreur par points sur la console. Fondamentalement, lorsque nous avons une erreur dans cette promesse ou dans cette méthode, nous obtenons cette erreur dans cet objet d'erreur. Faisons donc une faute de frappe ici dans l'API, enregistrons les modifications et jetons un coup d'œil Ouvrez la console, et voyez, nous obtenons un objet d'erreur avec un tas de détails. Dans cette propriété de message, nous obtenons le message d'erreur, et dans cette réponse, nous recevons le message d'erreur du serveur. Actuellement, cette API JcnPlaceholder n'envoie aucun message, mais si nous avons notre propre API, elle peut renvoyer notre message d'erreur personnalisé Affichons ce message sur notre écran. Ici, nous ajoutons le blog cod. Tout d'abord, nous voulons définir le chargement chutes, car même si nous recevons une erreur, nous voulons toujours que le chargement soit en cascade, et enfin, nous définissons les erreurs sur un message d'erreur à point. Maintenant, ajoutons une condition après ce chargeur. Si des erreurs sont disponibles, nous renvoyons la balise d'accentuation, et ici nous affichons simplement la variable d'erreurs. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous obtenons ici cette erreur. Supprimons maintenant Tipo de l'URL de l'API, enregistrons ce fichier et voyons où nous obtenons nos données Cela fonctionne donc bien. Vous pouvez voir à quel point il est simple d'afficher chargeur et les erreurs avec un appel d'API. Nous devons juste comprendre les bases. 96. Promesse avec attente asynchrone: Voyons maintenant rapidement comment gérer les promesses et les erreurs avec une attente de synchronisation. Donc pour l'instant, je commente ce code, et après notre effet d'utilisation, nous créons une nouvelle fonction appelée fetch sellers, fonction d'erreur Et à l'intérieur, nous ajoutons cette expression d'ici. Et également en haut, nous ajoutons que set is loading est défini sur true. Maintenant, comme nous le savons, cette expression répond à notre promesse. Nous ajoutons donc ici await et pour utiliser await, nous devons rendre notre fonction asynchrone Maintenant, stockons cette valeur dans une variable appelée response. Et après cela, nous copions simplement notre code à partir de cette méthode et le collons ici. Appelons maintenant cette fonction dans use effect. Enregistrez les modifications et jetez-y un œil. Tu vois, ça marche. Voyons maintenant comment gérer les erreurs. Donc, pour gérer les erreurs en tant qu'attente, nous devons utiliser le bloc try and catch. Nous écrivons donc try catch et sélectionnons cette suggestion et voyons que nous obtenons ce bloc d'essai et de cache. C'est la puissance de l'extension ES Seven. Déplaçons maintenant ce code dans le bloc Try et déplaçons cet ensemble en cours de chargement en dehors de ce bloc. Maintenant, dans le bloc catch, nous copions simplement le code de cette méthode de capture. Nous changeons le nom de cet attribut d'erreur en erreur. Donc, en termes simples, si quelque chose ne va pas dans ce bloc sec, alors ce bloc d'esquisse s'exécutera. Faisons une faute de frappe ici, disons les modifications et supprimons la page Vous voyez, nous avons ici cette erreur. C'est ainsi que nous gérons les erreurs et les promesses dans Awit asynchrone. Mais ici, nous pouvons comparer ces deux codes. Nous pouvons voir que notre code précédent semble plus facile à maintenir et plus organisé que cet Avid asynchrone Dans notre projet Movie Maniac, des erreurs, et c'est pourquoi notre code semble plus simple avec un zincavt Donc, pour le reste de cette section, nous utiliserons cette méthode de bande. Vous pouvez utiliser ce que vous voulez, cela dépend totalement de vous. 97. Ajouter un nouveau vendeur: Voyons maintenant comment ajouter ou créer de nouvelles données sur les vendeurs. Donc, tout d'abord, après cette saisie, nous ajoutons un bouton appelé Ed seller. Nous ajoutons également ici sur Click Event et passons ici le nom de la fonction, ajoutons un vendeur. Définissons maintenant cette fonction d' ajout de vendeur. Donc const, ajoutez le vendeur, la fonction flèche, et dans cette fonction, nous devons d' abord créer un nouvel objet vendeur Donc const, un nouveau vendeur équivaut à un objet. Et tout d'abord, nous devons transmettre nom et passer à cet état de nom. Ici clé et valeur, les deux noms sont identiques, nous pouvons donc les supprimer. Ici, nous devons également ajouter un identifiant car nous ajoutons cet identifiant comme clé dans notre liste. Ici, nous définissons l'identifiant à la longueur du point du tableau des vendeurs plus un. Il existe désormais deux manières de gérer les données sur le site Web lorsque nous envoyons ou mettons à jour des données à l'aide de l'API. Tout d'abord, nous pouvons mettre à jour nos données ou notre interface utilisateur sur le navigateur. Ensuite, nous pouvons appeler l'API pour ajouter ou mettre à jour ces données. Cette méthode est appelée mise à jour optimiste. Maintenant, il existe une deuxième méthode par laquelle nous appelons d'abord l'API pour ajouter ou mettre à jour les données, puis nous mettrons à jour notre interface utilisateur. Cette deuxième méthode est appelée mise à jour pessimiste. Presque tous les sites Web modernes utilisent une approche optimiste car elle est rapide et plus conviviale que l'approche pessimiste Par exemple, pensez au site Web de médias sociaux. Si vous aimez un article, il devrait immédiatement afficher le J'aime. Si nous utilisons une approche pessimiste, navigateur appelle l'API pour ajouter des éléments similaires dans ce message et ensuite , il montrera à l'utilisateur laquelle est la plus rapide Bien sûr, optimiste. Ici, nous utilisons également une approche optimiste. Avant d'appeler l'API, nous configurons les vendeurs pour qu'ils apparaissent ici Nous ajoutons d' abord les données des vendeurs à l'aide de l'opérateur de spread , puis nous ajoutons notre nouvel objet vendeur. Nous pouvons également ajouter ce nouvel objet vendeur dans un premier temps. Je pense que c'est plus avantageux. Enregistrez les modifications et jetez-y un œil. Inscrivez le nom ici et cliquez sur Ajouter un vendeur. Vous voyez, nous avons un nouveau vendeur, donc ça marche. Appelons maintenant l'API pour ajouter ou créer de nouvelles données. Nous utilisons donc ici la méthode axios point post pour créer les nouvelles données Copions maintenant cette API depuis notre fonction de récupération et transmettons cette API ici Maintenant, après cela, au deuxième paramètre, nous devons transmettre notre nouvel objet vendeur car c'est cet objet que nous voulons ajouter. Notez que cette API de publication n'utilisera pas notre identifiant car l'identifiant est toujours généré par le backend. Mais ici, nous utilisons un identifiant dans K, et c'est pourquoi nous ajoutons cet identifiant dans notre objet. Je vais vous le montrer dans une seconde. Comme nous le savons, cette expression renvoie une promesse. Nous ajoutons donc la méthode, et ici nous obtenons une réponse et la réponse contient les nouvelles données utilisateur que nous obtenons du serveur. À l'intérieur de celui-ci, nous ajoutons des vendeurs fixes et ici, nous ajoutons d'abord ces données de points de réponse, puis nous ajouterons ici les anciens vendeurs en utilisant l'opérateur de spread. Enregistrez les modifications et jetez-y un œil. Écrivez ici le nom et cliquez sur Ajouter un vendeur. Dans le panneau Réseau, nous pouvons voir ici une nouvelle demande. Voyons voir ça. Et ici, dans l'en-tête, nous avons l'URL de la demande, la méthode de demande à publier et le code d'état 201, qui est utilisé pour les données créées avec succès. Voyons maintenant la charge utile que nous envoyons avec l'API et dans l'aperçu, nous obtenons l'objet utilisateur, que cette API renvoie N'oubliez pas que cette API d'espace réservé JSON est un faux backend destiné uniquement à l'apprentissage Il renverra toujours un nouvel objet utilisateur avec l'ID 11. Laisse-moi te montrer. Cliquez à nouveau sur le vendeur de l'annonce. Ici, dans la charge utile, nous voyons l'ID 12, que nous envoyons, et dans l'aperçu, nous pouvons voir que nous obtenons l'ID 11 Quel que soit le nombre d' enregistrements que nous envoyons, l'objet sera toujours renvoyé avec l'ID 11, et c'est pourquoi nous recevons une erreur dans la console. Enfants avec la même clé 11. Maintenant, dans cette API, nous devons gérer notre erreur. Donc pour cela, ce que nous utilisons, vrai, nous utilisons la méthode catch. Ici, nous obtenons un objet d'erreur, et d'abord, nous définissons les erreurs sur le point d'erreur Message. Ensuite, nous devons rétablir liste précédente de nos vendeurs. Par exemple, nous ajoutons ici un nouveau vendeur. Maintenant, avant d'appeler cette API, nous allons ajouter ce nouveau vendeur à notre liste. Mais si, pour une raison quelconque, nous recevons une erreur ou si nous nous déconnectons, nous devons restaurer notre liste. Définissez donc les vendeurs et nous vous transmettons directement la liste de nos vendeurs. Enregistrez les modifications et jetez-y un œil. Dans NetworkTab, nous mettons notre site Web hors ligne. Maintenant, ajoutez un nom et cliquez sur Ajouter un vendeur voyez, pendant une seconde, nous voyons notre nom, mais après cela, nous rétablissons notre liste à liste précédente car nous avons une erreur réseau. C'est ainsi que nous faisons une demande de publication. Vous pouvez voir à quel point c'est simple. 98. Supprimer le vendeur: Voyons maintenant comment supprimer vendeur individuel de notre liste. Tout d'abord, nous devons ajouter un bouton de suppression pour chaque nom de vendeur. Mais avant cela, configurons notre application sur No Throttle Link Maintenant, dans notre fonction cartographique, nous enveloppons cette balise de paragraphe avec Du et à la fin, nous ajoutons un bouton appelé Supprimer. Enregistrez ceci et nous obtiendrons un bouton pour chaque vendeur. Mais ça a l'air un peu moche. Au lieu d'afficher en Du, nous pouvons utiliser l'onglet ici. Avant cette liste, nous ajoutons une table et à l'intérieur de celle-ci, nous voulons le corps. Déplaçons maintenant notre liste dans ce corps à thé et à la place de ce duo, nous ajoutons TR pour table Et nous les enveloppons tous les deux dans une étiquette TD. Nous ajoutons donc plusieurs curseurs en utilisant Alter plus click ou Option plus click et ajoutons ici TD et déplaçons cette balise TD de fermeture à la fin. Enfin, nous devons ajouter une clé à notre balise parent, qui se trouve à l'intérieur de cette balise TR. Les modifications et jetez-y un coup d'œil. voyez, ici, nous avons le bouton de suppression sur une ligne et avec le même espace. Mais ici, nous avons ce rembourrage supplémentaire. Ainsi, dans notre balise TD, nous supprimons cette balise de paragraphe. Nous n'en voulons pas. Enregistrez ceci et vous verrez, nous aurons une liste parfaite. Ajoutons maintenant une fonctionnalité différée. Donc, ici, dans ce bouton, nous ajoutons un événement de clic et nous passons ici, nous supprimons la fonction vendeur. Mais ici, nous devons transmettre l' identifiant de vendeur actuel, car en l'utilisant, nous supprimons notre vendeur. Alors, comment pouvons-nous passer cela ? Bien sûr, nous ajoutons ici la fonction flèche, et après cela, nous pouvons transmettre ici le point ID du vendeur. C'est aussi simple que ça. Maintenant, définissons cette fonction, supprimez le vendeur. Ici, nous obtenons l'identifiant et la fonction de flèche. Ici, nous devons d'abord afficher les modifications de l' interface utilisateur, puis nous appellerons l'API pour la suppression. Vous pouvez suspendre cette leçon et commencer à le faire vous-même, ou vous pouvez suivre. Maintenant, comme nous le savons, nous utilisons la méthode de filtrage pour la suppression. Filtre Sellers Dot. À l'intérieur de celui-ci, nous obtenons chaque vendeur et ici nous transmettons la condition comme identifiant, et non comme identifiant. Maintenant, cette méthode de filtrage renverra un nouveau tableau, afin que nous puissions les transmettre directement à la fonction Set Sellers. Nous le mettons entre parenthèses et adressons les vendeurs de sets. Appelons maintenant la tâche de retard de chute de l'API. Notre API devrait ressembler à ceci. Si nous voulons supprimer le vendeur qui possède IDFi, nous ajouterons pi à la fin de cette API Axios point Delight. Ici, nous ajoutons cette API dans vectis et à la fin, nous ajoutons slash Dollar Calipacket et ici nous ajoutons Maintenant, après l'avoir supprimé, nous ne voulons rien faire car nous avons déjà supprimé cet nous ne voulons rien faire objet de notre liste, nous n'avons donc pas besoin de la méthode then, mais nous avons besoin de la méthode de cache pour notre gestion Nous pouvons donc copier cette méthode de capture depuis la fonction de vendeur d' annonces et simplement la coller ici. Donc, si nous avons une erreur, liste de ce vendeur sera rétablie. Enregistrez les modifications et jetez-y un œil. Cliquez sur Supprimer pour le voir supprimé d'ici. De plus, dans l'onglet Réseau, nous avons une demande, et dans son en-tête, nous avons une méthode à supprimer, et nous pouvons voir qu'en réponse, nous n'obtenons rien. Nous allons maintenant vérifier la gestion des erreurs. Nous ajoutons donc ici une faute de frappe, sauvegardons ce fichier et cliquons sur Supprimer , nous obtenons une erreur, et notre liste est également restaurée. Cela fonctionne donc également. Maintenant, avant d'oublier de supprimer cette faute de frappe, corrigeons-la 99. Exercice pour appeler une API: Il est maintenant temps de faire un peu d'exercice. Au fur et à mesure que nous ajoutons la fonctionnalité de suppression, je souhaite que vous ajoutiez une fonctionnalité de mise à jour. Ainsi, pour chaque vendeur, nous avons un modèle de mise à jour, et lorsque nous cliquons dessus, nous changeons le nom du vendeur en nom le mettons à jour à la fin. est aussi simple que ça. Laissez-moi vous donner un petit indice. Notre expression Axios ressemble à ceci. Nous utilisons votre méthode de correction car nous ne modifions qu'un détail. Ce vendeur mis à jour est désormais l'objet du vendeur dans lequel nous mettons à jour le nom du vendeur actuel. Je veux donc que vous essayiez cet exercice car la pratique par vous-même fera de vous un meilleur développeur. Alors essayez-le , puis observez la solution. 100. Solution Mettre à jour le vendeur: Voyons maintenant la solution de cet exercice. Tout d'abord, ajoutons un bouton de mise à jour pour chaque vendeur. Donc, avant ce bouton de suppression, nous avions une balise TD, et à l'intérieur de cette balise, nous ajoutons un bouton appelé Mettre à jour. Maintenant, passons également l' événement OnClick et transmettons ici la fonction appelée Update Seller Et ici, nous voulons passer une pièce d'identité. Donc, fonction flèche et identifiant Passar Seller Dot. Définissons maintenant cette fonction de mise à jour du vendeur. Donc, const update seller équivaut à ici nous obtenons un identifiant, une fonction flèche Maintenant, dans cette fonction, créez d' abord un objet vendeur mis à jour. Donc const, le vendeur mis à jour équivaut à un objet. Maintenant, nous voulons ajouter tous les autres détails sur le vendeur actuel. Donc, à la place de cet identifiant, nous avons besoin des informations complètes sur le vendeur. Nous remplaçons donc ce point d'identification du vendeur par le vendeur, qui correspond à l'objet actuel du vendeur. Maintenant, trouvons l'objet du vendeur ici. Nous pouvons donc maintenant ajouter détails complets du vendeur en utilisant l'opérateur de spread. Et après cela, nous remplacerons le nom. Nommez donc le nom à deux points du vendeur, qui est le nom actuel, plus l'espace des codes doubles mis à jour. Nous avons maintenant mis à jour l'objet vendeur, mais nous devons remplacer nos anciennes informations de vendeur par les nouvelles informations figurant dans notre liste de vendeurs. Ne vous y trompez pas, regardez ceci. Nous ajoutons donc ici la carte des vendeurs à points. Et à l'intérieur de celui-ci, nous obtenons la fonction flèche de chaque vendeur, et ici nous passons la condition si point est égal à l'identifiant du point du vendeur, que nous sommes en train de mettre à jour. Si tel est le cas, nous renvoyons cet objet vendeur mis à jour. Sinon, nous écrivons sur le même objet du vendeur. C'est aussi simple que ça. Maintenant, enregistrons cette gamme en tant que vendeurs. Enveloppez donc ce tableau entre parenthèses et nous ajoutons ici des vendeurs d'ensembles Si vous êtes confus avec cette utilisation directe, vous pouvez stocker ce tableau dans une variable séparée, puis le transmettre à des vendeurs d'ensembles. Cela dépend totalement de vous. Enregistrez les modifications et cliquez sur Mettre à jour pour voir que nous obtenons ce nom mis à jour, ce qui signifie qu'il fonctionne. Notre demi-tâche est donc terminée, et il ne nous reste plus qu' à appeler l'API. Nous ajoutons donc ici Axios et nous utilisons la méthode patch et nous transmettons ici notre API Copions donc ceci depuis la fonction de suppression du vendeur et collons-le ici. Maintenant, à la place de cet identifiant, nous sommes au seller point ID. Et au deuxième paramètre, nous transmettons notre nouveau vendeur. Maintenant, après avoir terminé cet appel d'API, encore une fois, nous ne voulons rien faire, nous n'avons donc pas besoin de la méthode then, mais nous avons besoin de la méthode cache. Copions donc cette méthode de capture. Et collez-le ici. Enregistrez les modifications et jetez-y un œil. Cliquez sur Mettre à jour, et cela fonctionne. Nous pouvons voir qu'en réponse, le nom est mis à jour par le serveur. Maintenant, vérifions s'il y a des erreurs. Nous faisons donc une faute de frappe ici et l'enregistrons. Cliquez sur Mettre à jour et voyez ici que nous obtenons une erreur et que notre liste est restaurée avec d'anciennes données. Cela fonctionne donc également. Nous pouvons maintenant supprimer cette faute de frappe. 101. Créer une variable axios pour les requêtes HTTP: Ici, dans notre application, chaque fois que nous faisons une demande d'API, chaque fois que nous devons écrire notre URL complète, afin de pouvoir définir notre URL de base pour cette application. Et après cela, il ne nous reste plus qu'à écrire aux utilisateurs. Laissez-moi vous montrer ce que je veux dire. Dans ce dossier source, nous créons donc un nouveau dossier appelé Utils. Dans ce dossier, nous créons un nouveau fichier appelé API ds client point js pour créer SDDPRQuest Donc, à l'intérieur de ceux-ci, nous saisissons d'abord Xos à partir de xOS Après cela, nous écrivons Xos point create now dans cette fonction, nous devons transmettre notre objet de configuration Et dans cet objet, nous avons la propriété URL de base. Et ici, nous pouvons transmettre notre URL de base. Revenez donc au composant de notre vendeur et copiez cette URL de base, qui est la même dans toutes les API, et collez-la ici. Si vous travaillez sur un autre projet, vous devez indiquer ici vous êtes de retour et l'URL. Ici, nous pouvons également transmettre nos en-têtes d'API, que nous voulons envoyer avec notre demande d'API Encore une fois, cela dépend de l'API. Maintenant, cela renverra une instance pour appeler l'API. Exportons-le par défaut. Enregistrez ce fichier, et maintenant lorsque nous voulons faire une demande d' API avec xOS, nous saisissons simplement cette instance et faisons la même chose qu' avec xOS original Revenons donc au composant du vendeur, et au lieu d'importer l'Axios original, nous importons le client API. À partir de là, nous ouvrons deux dossiers, Utils et API Maintenant, à la place de l'Axios, nous utilisons un client API Appuyez donc plusieurs fois sur Control plus D ou Command plus D et ajoutez ici le client API. Maintenant, au lieu de l'URL complète, nous ne faisons que transmettre ici les utilisateurs. Utilisez donc cette URL de base et, avec l'édition à plusieurs curseurs, supprimez toute cette URL de base. Sauvegardez-le et voyez qu'il fonctionne comme avant. Ce client d'API fonctionnera donc de la même manière qu'Axios, mais nous n'avons pas besoin de transmettre baseURL pour Et en raison de telles fonctionnalités, la plupart des développeurs préfèrent utiliser Axios plutôt que la méthode des correctifs Ce sont les concepts de base de l'appel d'une API pour gérer les erreurs et afficher le chargeur. À mesure que React se développe, de nombreuses bibliothèques entreront en ligne de compte, mais les concepts de base de l' appel d'une API resteront les mêmes. Le choix d'une bibliothèque dépend donc entièrement de vous. 102. Section 10 - Projet 03 - Application de commerce électronique: Bienvenue dans la section 10 du cours Ultimate React. À partir de cette section, nous allons créer notre troisième projet, qui est une application de commerce électronique. Dans ce projet, j'ai essayé de couvrir tous les concepts importants, utiles et avancés que vous devez appliquer dans le monde réel. Ce sera donc un projet majeur de votre portefeuille. Vous pouvez voir une belle page de destination de ce site Web. Ensuite, nous avons le routage et nous conduisons vers la page des produits. Ici, nous obtenons la liste de tous les produits avec fonction de défilement infini En haut, nous pouvons également trier nos produits par prix et par note. Chez Sideware, nous avons quelques catégories, et nous n'avons ici que des produits de cette catégorie. Maintenant, si nous cliquons sur une fiche produit, nous obtenons une page de produit détaillée, ce sélecteur d'image, et ici nous pouvons également ajouter un article à notre carte avec la quantité que nous voulons Et ce qui est bien, c'est que ce site Web est dynamique, ce qui signifie que toutes ces données proviennent du vrai Ben que j'ai créé pour ce projet. Maintenant, au moment où nous ajoutons un article à la carte au Nebr, nous pouvons voir ici que notre carte contient un certain nombre d' articles Maintenant, dans la page de la carte, nous obtenons les détails de la carte dans ce tableau simple. À partir de là, nous pouvons également modifier la quantité d'articles. Avec ce changement, ce tableau de facturation sera mis à jour et nous indiquerons le coût final en bas de la page. Nous pouvons vérifier notre commande et notre panier sera vide, et nous pouvons voir les détails de notre commande sur la page Ma commande. Il s'agit donc d'un projet majeur, mais pas difficile car nous allons réaliser ce projet étape par étape. De nombreux développeurs ont l' impression que les grands projets difficiles parce qu'ils essaient de tout construire en une seule fois. Et c'est pourquoi ils ont l'impression qu' un projet simple est difficile. Donc, dans ce projet, nous essaierons également de créer d'abord notre interface utilisateur , puis nous connecterons notre application au backend node JS. Je suis donc très enthousiasmé par ce projet et j'espère que vous l'êtes aussi. Alors plongeons-nous dans le vif du sujet. 103. Préparer le style de projet et de mise en page: Commençons par le projet de nouvelle phrase. Ouvrez donc le dossier dans lequel vous souhaitez travailler, ouvrez le terminal ou l' invite de commande dans ce dossier. Et ici, NPM, crée du blanc, au plus tard en rouge, et appuie sur Entrée Maintenant, nous ajoutons ici le nom de notre projet, qui est Card Wish. Tu peux utiliser ce que tu veux. J'aime bien ce nom. Sélectionnez maintenant le framework qui est React, et ici nous devons sélectionner le langage, qui est JavaScript. Passons à ce projet par CD, Cartwis et appuyons sur Écrivez maintenant NPM install pour installer tous les packages. Bien. Ce dossier dans notre code VS. Donc code point. Fermons ce terminal. Nous n'en avons pas besoin et fermons également ce dossier. Maintenant, vérifions que notre projet fonctionne ou non. Ouvrez donc le terminal par Control plus BT ou Command plus BT et écrivez NPM run Down. Appuyez sur Ctrl ou Commande et cliquez sur ce lien, et tout fonctionne correctement. Passons maintenant à quelques styles et mises en page de base pour notre projet. Nous avons donc deux sections dans notre application. La première est, bien sûr, la barre de navigation, et la seconde est la section principale pour le routage Alors ici, ouvrons le composant de l'application, et tout d'abord, supprimons tout le code, et ajoutons simplement ici du code standard. Définissons maintenant la mise en page de notre site Web. Donc, tout d'abord, nous allons ajouter ici le nom de la classe à l'application. Maintenant, à l'intérieur, nous avons pour NaBR, ajouter le tag Nau et passer ici Navar Ensuite, nous ajoutons la balise main et à l'intérieur de celle-ci, nous effectuerons tout le routage. Ajoutons maintenant des styles pour cette mise en page. En haut, nous importons le fichier CSS period slash app point. Enregistrez ce fichier et ouvrez le fichier css de l'application point. Supprimons tous les styles d'ici et ajoutons une application point. Nous voulons définir notre application en ligne. Nous utilisons donc l'affichage ici pour noter et noter les lignes du modèle à un pixel pour la première section et Auto pour notre section principale. Les modifications et C, nous retrouvons notre mise en page au milieu. Supprimons donc les styles par défaut, que nous avons ajoutés à notre projet. Ouvrez donc le fichier CSS à points d'index et supprimons toutes ces tuiles. Nous n'en avons pas besoin. Tout d'abord, nous avions des crochets en forme d' étoile, une marge jusqu'à zéro, un rembourrage à zéro et une taille de boîte par rapport à une zone de bordure Maintenant, dans le corps, nous ajoutons la taille de police à 16 pixels, couleur de fond deux a F six, FFA Enregistrez les modifications et jetez-y un œil. voyez, nous avons ici notre mise en page, mais notre police est un peu moche. Ajoutons rapidement une police, ouvrons le site Web de Google Fonts, et nous avons déjà sélectionné notre police, que nous avons utilisée dans le projet précédent. Accédez à la section Importer, copiez ce CDN d'importation Dans notre fichier CSS d'index en haut, nous collons ce lien CDN. Maintenant, pour appliquer la police, nous copions la famille de polices et la collons dans notre body style. Enregistrez les modifications et jetez-y un œil. Maintenant, notre police semble bonne. 104. Créer un composant de barre de navigation: Je vais maintenant créer notre barre de navigation. Ainsi, au lieu d'écrire tout le code dans le composant de l'application, nous allons créer un composant distinct pour notre barre de navigation Supprimons donc cette barre de navigation à partir d' ici et dans le dossier source, nous créons un nouveau dossier appelé components Dans ce dossier, nous créons un nouveau dossier appelé Navbar. Et à l'intérieur de celui-ci, nous créons un nouveau fichier appelé navbar point JSX, et nous créons également un autre fichier pour navbar Maintenant, dans notre composant, disons code standard. Et en haut, n'oubliez pas d' importer le fichier css des points de la barre de navigation par points Maintenant, commençons par le balisage de notre composant Navbar. Nous pouvons donc diviser notre Nabar en sections. Le premier est la partie gauche de notre Nabar qui contient nom de notre site Web et une zone de saisie avec un bouton de recherche La deuxième partie est que nous avons plusieurs liens. Donc, à la place de cette échéance, nous collons notre balise NOW et lui donnons un nom de classe à Navbar Maintenant, à l'intérieur de cette étiquette, nous avions deux cotisations, l'une pour le côté gauche et l'autre pour le côté droit. Maintenant, dans le premier du, nous ajoutons la balise H one et passons ici le nom de la classe au titre de soulignement NaBR. Et ici, nous ajoutons le nom de notre site Web Cart Wish. Maintenant, après ce formulaire H, nous ajoutons un formulaire avec le nom de classe, le formulaire de soulignement NaBR. Je vous expliquerai plus tard pourquoi nous avons ajouté ce formulaire. Maintenant, dans ce formulaire, nous ajoutons une entrée avec du texte de type, et nous ajoutons également le nom de classe à soulignement de la barre de navigation et un espace réservé aux produits de recherche espace réservé aux Ensuite, nous ajouterons un bouton avec le type submit et lui donnerons un nom de classe, un bouton de soulignement de recherche et, ici, une recherche Et c'est tout ce que nous voulons ajouter dans notre première partie de NaBR. Nous ajouterons une deuxième partie, qui contient des liens dans la prochaine leçon. Enregistrez les modifications et jetez-y un œil. Nous n'obtenons rien car nous avons oublié d'ajouter notre composant Nabar dans notre composant d'application Donc, dans le composant de l'application, nous ajoutons ici une nouvelle barre, et l'importation automatique fonctionne. Enregistrez les modifications et jetez-y un œil. Vous voyez ici que nous obtenons nos éléments. Ajoutons maintenant des styles pour ces éléments. Ainsi, dans le fichier CSS à points de la barre de navigation, nous ajoutons la barre de navigation, et entre crochets Ci, nous allons d'abord régler l'affichage sur un drapeau, aligner les éléments au centre et justifier le contenu par un espace entre les deux Ainsi, nos deux parties sont séparées l'une de l'autre. Maintenant, le remplissage est à zéro et 40 pixels et la couleur d'arrière-plan au blanc Ensuite, nous avons eu un titre de soulignement Nebr à points, crochets colli, une marge à droite de 20 pixels et une taille de police de Sauvegardez ceci et voyez où nous allons prendre la direction. Nous devons maintenant déplacer ce formulaire sur la même ligne. Pour cela, nous devons également utiliser Display Flex et aligner les éléments au centre. Créons donc une classe séparée pour ces deux propriétés car elles seront beaucoup utilisées dans notre application. Coupez donc ces deux lignes, et dans le fichier CSS à points d'index en bas, nous ajoutons une nouvelle classe appelée Align Center et y collons des dtiles Enregistrez ce fichier et ajoutons cette classe avant la nouvelle classe et aussi pour premier nom de classe dû soit aligné au centre. Sauvegardez-les et revenez au fichier CSS de Nabart. Définissons maintenant les styles de notre formulaire. Formulaire Soft NebruerScore. Et entre crochets CL, nous ajoutons la largeur à 450 pixels, hauteur à 40 pixels, Bader à un pixel, Solid a un rayon d'eau du CD CD CD à cinq pixels et le rembourrage à trois Ensuite, nous avons eu une barre de recherche par points, recherche par soulignement, des crochets Cali, et à l'intérieur de celles-ci, nous avons ajouté des drapeaux à l'un d'eux parce que nous voulions que notre saisie couvre tout l'espace disponible dans notre formulaire Pour cela, nous devons également ajouter la classe Align Center à notre formulaire. Sauvegardez-le et revenez à notre fichier CSS. Ici, nous ajoutons une hauteur à 100 %, rembourrage à zéro et sept pixels, une taille à 20 pixels, une épaisseur à 500, bordure à aucune et également un contour à aucun Enregistrez les modifications et jetez-y un œil. Permettez-moi de zoomer à 100 % et de voir si ça a l'air bien. Maintenant, ajoutons du style à ce bouton de recherche. Nous ajoutons donc un bouton de soulignement de recherche, crochets Ci, une hauteur de 200 %, rembourrage à zéro et une taille de police de dix pixels à 20 pixels, poids de police à 500, Wer à aucun, un rayon de bordure à De couleur ronde, il a 64, 57f9. De la couleur au blanc et du curseur au pointeur. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons notre barre de navigation gauche, mais voici une chose. Toutes ces entrées et boutons ont une famille de polices par défaut. Je souhaite également utiliser notre police pour eux. Donc, dans un fichier CSS à points d'index, et déplacez cette famille de polices dans tous ces styles. A Elements, un monstre à la police. Dis-les et tu verras maintenant que ça a l'air bien. 105. Ajouter des liens dans la barre de navigation: Maintenant, disons des liens dans son NaBR. Donc, ici, le deuxième jour, nous ajoutons le nom de classe à Nabrunderscore Maintenant, à l'intérieur de celui-ci, nous voulons créer des liens. Nous ajoutons donc le tag ECA et le HF à has, et à l'intérieur, nous ajoutons home. Et pour Imog, nous ajoutons une balise image et lui donnons un nom de classe pour souligner Imog Nous allons maintenant définir quelques images pour notre projet. Dans le dossier des ressources, nous avons le dossier Projet 3, dans lequel se trouvent des actifs. Sélectionnez simplement toutes ces images et déposez-les dans notre dossier VS code Assets. Maintenant, en haut, nous importons Rocket, à partir de là, nous accédons à deux dossiers, assets slash rocket point PNG Et passons simplement cette fusée ici. Enregistrez les modifications et jetez-y un œil. Ici, nous obtenons ce que nous voulons. Maintenant, ajoutons du style à ce lien. Donc, tout d'abord, nous passons nom de la classe dans cette balise d'ancrage et nous le réglons sur Aligner le centre du soulignement. Nous ajoutons également centre du soulignement avant les liens de soulignement de la barre de navigation pour aligner verticalement Enregistrez-les et dans le fichier css à points de la barre de navigation en bas, nous ajoutons des crochets Navbar underscore Links Cl, une taille unique à 20 pixels Ensuite, nous ajoutons points, des liens NABRunderscore, des crochets Ici, nous ciblons le tag Anger, et à l'intérieur de cette marge jusqu'à 15 pixels. Enfin, nous ajoutons un point Link pour souligner iMogkliBackets, d' largeur de 25 pixels et d'une marge gauche de cinq pixels et d'une marge Dites les modifications et voyez ici que nous obtenons le gentil Link. Définissons maintenant quelques styles de base pour toutes les balises d'ancrage. Ainsi, dans le fichier CSS à points d'index, nous ajoutons des calibackets d'ancrage, taille de police à hériter, poids de police Décoration du texte sur non, couleur, héritage et curseur sur pointeur Observez les fringes et jetez-y un coup d'œil. voyez, nous trouvons ici notre style, mais je pense que notre taille de police n'est pas appliquée. Je les inspecte donc et vois ici que nous n'obtenons pas la propriété de taille de police. J'écris probablement le mauvais nom de classe. Donc, dans le composant Nava, nous pouvons voir ici, que je dois ajouter des liens de soulignement NBR. Désolée pour ça. Enregistrez ceci et vous verrez qu'il est vraiment beau. Maintenant, vous pourriez penser que lorsque nous ajoutons d'autres liens, nous pouvons créer un composant pour ce lien individuel. Donc, coupez ce lien à partir d'ici et dans le dossier Nabar, nous créons un nouveau fichier appelé ink with icon JSX et nous créons également un nouveau fichier pour link with icon Maintenant, vous pouvez parfois vous demander pourquoi nous créons chaque fichier CSS de composant séparément. La raison en est que si nous créons un fichier CSS distinct pour chaque composant , nous pouvons directement utiliser ce composant dans d'autres projets avec son CSS. Ici, nous ajoutons notre code standard par RAFC et en haut, nous importons de l' encre oblique avec un point Bien. Maintenant, à l' endroit de ce dû, nous collons notre lien. Supprimons également ce style d'image de lien de Nabar et collons-le dans notre lien avec le fichier CSS d'icônes Maintenant, rendons ce composant réutilisable. Nous avons donc besoin de trois accessoires, premier titre du lien, qui est cette page d'accueil après cela, le lien, que nous pouvons transmettre dans cette HF, et enfin, nous avons besoin d'Imog que nous utilisons dans cette balise d'image Remplaçons les valeurs statiques par nos accessoires. Titre du lien et Imoge. Enregistrez ce fichier, et maintenant dans le composant Nebar, nous ajoutons ici un lien avec le composant icône, et nous passons ici nos accessoires Donc le titre pour la page d'accueil, le lien pour la barre oblique et Imoge pour la fusée Maintenant, dupliquons ce lien cinq fois de plus. Et pour différents liens, nous avons besoin de différents Imogs. Nous devons donc également le saisir en haut. Dupliquons également cette instruction d'entrée cinq fois de plus et nous changeons ce titre en étoile et l'image en point étoilé brillant PNG Ensuite, nous avons le bouton ID et le bouton ID image. Ensuite, nous avons le mémo et l'image, le point mémo au format PNG. Ensuite, commandez une image à emballer. Et enfin, nous avons une image du journal au format PNG. Maintenant, en bas, nous changeons le titre de notre deuxième lien en produits, lien pour les produits en barres obliques et l'image en étoile Ensuite, le titre de connexion, Links Login et le bouton Imog to ID. Ensuite, nous avons le titre pour vous inscrire, lien pour l'inscription et Imoge Ensuite, nous avons le titre de M Orders, le lien pour slash My Orders et Imoge pour commander Enfin, nous avons le titre pour vous déconnecter, le lien pour la barre oblique, la déconnexion et Imoge Enregistrez les modifications et jetez-y un œil. Tu vois, nous avons ces magnifiques liens. Il ne nous reste plus qu' à ajouter le lien du panier, ce qui est un peu différent de ces liens car nous devons ajouter le nombre de nos cartes. Nous ajoutons donc ici une autre étiquette de voiture, HRF à slash cart et ici nous passons le nom de la classe au centre de la ligne Maintenant, à l'intérieur de ceux-ci, nous passons le nom de notre lien, qui est cart. Pour le décompte, nous ajoutons un paragraphe et le nom de la classe au centre de la ligne et au nombre de traits de soulignement du panier Et à l'intérieur de celui-ci, nous passons notre numéro de comptage, qui est zéro. Enregistrez ceci, et ajoutons du style à cela. Ainsi, dans le fichier CSS à points Navbar en bas, nous ajoutons le nombre de traits de soulignement des cartes, entre crochets Cl, et à l'intérieur, nous ajoutons du contenu de justification au centre C'est pourquoi nous ajoutons la classe centrale d' alignement avant le nombre de cartes Ensuite, largeur de 20 pixels, hauteur de 20 pixels, rayon de commande de 200 % pour un cercle complet Couleur de fond à 64, 57f9, couleur à blanc Taille unique jusqu'à 15 pixels et marge gauche jusqu'à 5 pixels. Saisissez les modifications et jetez-y un coup d'œil. Tu vois, ici nous avons nos comptes. Vous pouvez donc voir à quel point cette barre de navigation est belle. Je sais que la partie stylistique est un peu ennuyeuse, mais elle fait également partie intégrante de tout projet. Nous devons donc le faire. Et pendant que nous le faisons, faisons-le simplement avec joie 106. Créer une section de héros: Maintenant, créons notre section héros pour la page de destination. Cette section dédiée aux héros est la première chose que l'utilisateur verra sur notre site Web. Nous devons donc faire en sorte que ce soit vraiment agréable. Donc, tout d'abord, nous créons ici un nouveau dossier appelé home dans lequel nous allons stocker tous nos composants liés à la page d'accueil. Créez donc un nouveau fichier appelé point d'accueil JSX. Et ici, nous ajoutons du code standard en utilisant RAFC. Avez-vous remarqué à quel point cette réaction devient rapide et simple lorsque nous créons simplement deux applications ? Imaginez que vous travaillez sur chaque projet avec cette intensité, jusqu'où vous pouvez aller dans une carrière de développeur Web. Ce n'est qu'une question de temps. Donc, sur notre page d'accueil, nous voulons afficher d' abord la section des héros, puis nous avons les produits phares et ensuite la section des héros. La raison pour laquelle nous ne créons pas fichier CSS à points de page d'accueil est que nous ne voulons pas ajouter de style à notre page d'accueil. Vous ne faites partie que de composants séparés. Dans le dossier d'accueil, nous créons un nouveau fichier appelé herosection point CSS Nous créons également un autre fichier, Herosection point JSX. Ajoutez du code standard ici, et en haut, nous importons la section héros, ce fichier CSS Bien. Maintenant, à la place de ce de, nous ajoutons une section et lui donnons un nom de classe, section hero underscore Nous avons besoin de deux parties. D'abord pour les détails et ensuite pour l'image uniquement. Créez donc D avec la classe Align underscore center fois deux. Bien. Maintenant, dans la première partie, nous en ajoutons deux avec le nom de la classe, titre du héros, et à l'intérieur, nous écrivons par iPhone 14 P. Ensuite, nous ajoutons un paragraphe et lui donnons nom de classe, un sous-titre de soulignement du héros Et on passe ici dummiteg pour les sous-titres, alors écris Lorem, 15 ans, Ensuite, nous ajoutons une balise d'ancrage pour le bouton By now et lui donnons un nom de classe, Hero Underscore Ink Maintenant, dans la deuxième partie, nous devons ajouter une balise d'image, source à l'iPhone et lui donner un nom de classe à l'image de soulignement du héros Importons maintenant cette image en haut de la page. J'importe donc un iPhone. À partir de là, nous allons accéder à deux dossiers actifs iPhone 14 probablement P. Enregistrez ceci, et ajoutons un composant de section héros dans notre composant de page d'accueil Enregistrez ceci et nous devons également ajouter notre composant d'accueil dans notre composant d'application. Vous pouvez voir comment Autoiport accélère notre processus. Dites les modifications, et nous obtenons une erreur. Désolé, par erreur, j'ai ajouté le fichier css à points de la section d' accueil. Donc, dans notre composant de section héros, nous le changeons en fichier css point de section héros. Dites les modifications et jetez-y un coup d'œil. Nous ne pouvons rien voir à cause de notre grande image. Ajoutons donc du style à notre section consacrée aux héros. Dans le fichier CSS à points de la section hero, nous ajoutons d' abord la section Hero underscore, crochets Gully et à l'intérieur, nous définissons l'affichage sur GED, colonnes de tempt GED un FR et un FR pour les mêmes Hauteur jusqu'à 550 pixels, rembourrage à zéro et 60 pixels pour la gauche et la droite Couleur d'arrière-plan au noir et couleur du texte au blanc. Ensuite, nous ajoutons section de soulignement du héros, le crochet angulaire. Ici, nous ciblons Du Culiacket et nous ajoutons du contenu de justification au centre, direction de flexion vers la colonne et une ligne de texte au Ici, nous pouvons utiliser la propriété flexbox car nous avons déjà défini la classe centrale Align pour ces plongées Ensuite, nous ajoutons un style par titre de héros, sorte que le point Hero souligne le titre, taille de la police à 45 pixels, poids de la police à 700 et la marge inférieure à 15 pixels Ensuite, nous avons obtenu le sous-titre Hero Underscore. Et à l'intérieur, nous ajoutons la taille de police à 24 pixels, marge inférieure à 232 pixels et la largeur à 70 %. Maintenant, après ce sous-titre, nous avons notre lien, donc point Hero souligne le lien. Et à l'intérieur, nous ajoutons un rembourrage de 16 pixels et 32 pixels. Transformation du texte en majuscules , épaisseur de police de 1,5 pixel, épaisseur de police de 700, bordure de 2 pixels, solide sous forme de FFF, rayon de bordure de 32 pixels, couleur d' arrière-plan en blanc et couleur Je vais un peu vite pour la section sur le style parce que je ne veux pas vous ennuyer en expliquant chaque style. De plus, je ne veux pas utiliser style simple, car si notre application possède de bonnes fonctionnalités, mais que le style n'est pas bon, votre projet risque de paraître un peu ennuyeux. Ajoutons maintenant l' effet O à ce lien. S point Hero souligne Link, colonne O. Et à l'intérieur de ce fond, couleur à transparent et couleur à blanc Nous pouvons également ajouter ici une transition vers toutes les 0,3 secondes écoulées pour un effet de surestimation fluide. Définissons maintenant le style de l'image de notre héros. Donc, point Hero souligne l'image, et entre crochets, ajoute de la hauteur à 500 pixels et nous voulons également ajouter un effet de survol pour cette La transition vers la totalité des 0,3 secondes est terminée. Ensuite, nous ajoutons cette image de soulignement du héros, colonne O à l'intérieur de celle-ci, nous la transformons simplement à l'échelle 1,05, enregistrons les modifications et jetons un coup d'œil Regarde comme c'est beau. J'aime beaucoup ce style. Faisons en sorte que ce composant de la section héros soit réutilisable. Donc, dans le composant de la section héros, quels accessoires voulons-nous ? Tout d'abord, nous voulons un titre, puis un sous-titre, encre pour B maintenant et une image pour afficher l'image du héros Maintenant, remplaçons ces chaînes par nos accessoires. Donc, titre avec titre Dmitex pour sous-titrer. Et ici on passe de l'encre en HRF, et enfin on a une image, on remplace cet iPhone par une image Commençons par le début, prenons cette importation d'ici. Nous n'en avons pas besoin dans ce composant. Enregistrez ceci et dans le composant d'accueil, nous ajoutons cette importation en haut. Nous importons également une autre image Mac à partir de deux dossiers vers Assets, et voyons ici le nom de notre image. Sélectionnez ce système Mac, appuyez sur F deux et copiez ce nom à partir d'ici. J'utilise cette astuce parce que je ne veux pas me tromper en important des images. Nous pouvons donc simplement le coller ici. Passons maintenant à nos accessoires dans ce composant de la section des héros. Tout d'abord, le titre est équivalent à « iPhone 14 P. Sous-titre pour profiter de la puissance du dernier iPhone 14 avec notre appareil photo le plus professionnel jamais conçu Pour l'instant, il suffit de transférer la barre oblique et l'image vers l'iPhone. Dites les modifications, et cela fonctionne de la même manière. Dupliquons maintenant ce composant de la section héros et déplaçons-le en bas. Maintenant, à la place de ce titre, nous avions construit la configuration ultime. Pour les sous-titres, nous ajoutons que vous pouvez ajouter un écran de studio et accessoires magiques aux couleurs assorties à votre sac après avoir configuré votre Mac Mini Encore une fois, lien vers une barre oblique, nous le changerons plus tard et l'image en Mac Ici, je remarque que je me suis trompé dans le titre de l'iPhone 14. Je m'assure d'utiliser de longues balises de sous-titres lors de cet enregistrement, mais je me suis trompée au début besoin de travailler sur ma saisie, sauvegarder les inges et d'y jeter un œil Tu vois, nous avons nos deux sections sur les héros. Ça a l'air vraiment sympa. Dans la leçon suivante, nous allons créer une section de produits phares, que nous ajouterons entre ces deux sections de héros. Je sais que c'est une leçon un peu longue. Vous pouvez faire une pause de cinq à dix minutes pour prendre l'air, et je vous verrai à la prochaine leçon. 107. Ajouter une section de produits en vedette: Maintenant, ajoutons une section de produits en vedette à notre page d'accueil. Ici, dans le dossier d'accueil, nous créons un nouveau fichier appelé featured products point CSS, et nous créons également un nouveau composant appelé featured products point JSX Maintenant, vous pourriez vous demander pourquoi je crée d' abord un fichier CSS , puis un fichier JSX C'est simplement parce que si nous créons enfin un fichier CSS, nous devons passer à nouveau au fichier JSX Donc, dans ce fichier JSX, ajoutez notre code B Blet, et en haut, nous importons nos produits phares dans un fichier CSS Bien. Maintenant, à la place de ce de, nous ajoutons section avec le nom de la classe, les produits de soulignement en vedette Maintenant, dans cette section, ce que nous voulons. Tout d'abord, nous voulons un titre, donc deux et ajouter ici les produits phares. Ensuite, nous voulons ajouter trois cartes de produits Nous devons donc les emballer dans un autre De et lui donner nom de classe, une liste de produits en vedette. Et nous savons que c'est une liste, nous pouvons donc utiliser ici Flexbox. Donc, avant le nom de cette classe, nous ajoutons le centre de soulignement Aline Maintenant, à l'intérieur de celui-ci, nous créons un article et lui donnons un nom de classe, une carte de soulignement du produit Et pour l'instant, il suffit de passer ici le produit. Enregistrez les modifications et jetez-y un œil. Désolé, nous avons encore une fois oublié d'ajouter notre composant produits en vedette sur notre page d'accueil. Ainsi, entre ces deux sections phares, nous ajoutons notre composant de produits phares. Enregistrez les modifications et jetez-y un œil. Vous voyez, c'est ici que nous trouvons nos produits phares. Définissons-leur maintenant des styles. Dans le fichier CSS à points sur les produits en vedette, nous ajoutons d'abord des produits soulignés, des crochets, une marge de 65 pixels Ensuite, nous ajoutons des produits de soulignement en vedette, supports angulaires, et nous ciblons ici deux balises, à savoir notre titre Et ici, taille unique à 48 pixels, texte aligné au centre et marge inférieure à 65 pixels. Enfin, définissons le style de notre liste de produits. Donc, mettez en vedette les produits de soulignement, la liste de soulignements, crochets, et ajoutez ici, justifiez le contenu par un espace entre les deux C'est pourquoi nous avons ajouté la classe Align Center à cette liste. Et après cela, nous ajoutons Margin, du bas à nouveau à 65 pixels. Je vous dis encore une fois que je peux écrire ce CSS car je m' entraîne beaucoup pour ce projet. Si je crée ce projet pour la première fois, je dois également faire essais et des erreurs pour ces tuiles. Je le pratique parce que je ne veux pas vous faire perdre votre temps précieux à essayer et à faire des erreurs en matière de style simple. Regardez les modifications et jetez-y un coup d'œil. Vous voyez, nous avons notre section sur les produits phares. Dans la leçon suivante, nous allons créer une fiche produit pour ce projet. 108. Créer une carte de produit: Créons maintenant un composant de fiche produit afin de pouvoir l'utiliser plusieurs fois. Donc, ici, coupons cette balise d'article , nous créons un nouveau fichier appelé product card dot CSS. Ensuite, nous créons un nouveau composant appelé product card point JSX Ajoutons ici un modèle standard, et en haut, nous importons le fichier CSS de la fiche produit Bien. Maintenant, à l' endroit de ce de, nous collons notre étiquette d'article que nous venons de couper. Dans la fiche produit, que voulons-nous ? Nous voulons des UDS. Un pour l'affichage, l'affiche ou l'image du produit, et le second, pour les détails du produit. Nous ajoutons donc ici Du et lui donnons un nom de classe, une image de soulignement du produit Et à l'intérieur de ce Du, nous ajoutons notre étiquette d'image et lui donnons une source, disons, un iPhone et une œuvre d'art à l'image du produit. Importons cette image en haut de la page. Donc EmbodiPOnef, nous avons deux dossiers vers le haut, les ressources slash Maintenant, voici une chose. Je souhaite rediriger l'utilisateur vers la page du produit sélectionné dans laquelle l'utilisateur peut voir d'autres détails sur ce produit. Nous pouvons donc envelopper cette image avec une étiquette d'ancrage. Si vous voulez savoir comment je m'y prends, laissez-moi vous montrer que c'est très simple. Sélectionnez d'abord le tag que vous souhaitez encapsuler et appuyez sur Ctrl plus Sift plus P ou Command plus Sift plus P W ici, enroulez avec une abréviation, sélectionnez-le et cliquez ici sur le nom du tag et appuyez sur Tu vois, on a compris. Maintenant, en HRF, nous pouvons passer comme si ce produit était un. Il s'agit de l'identifiant du produit. Maintenant, après ce DU, nous en ajoutons un autre avec nom de la classe et les détails soulignés du produit À l'intérieur de ceux-ci, nous ajoutons d'abord l'étiquette H three et lui donnons un nom de classe, le prix de soulignement du produit Et ici, nous écrivons 999 dollars. Ensuite, nous créons un paragraphe supplémentaire et lui donnons un nom de classe, un titre de soulignement du produit Et ici, l'iPhone 14 Pro. Maintenant, nous avons enfin une ligne, qui comporte deux sections. Le premier contient les notes et le nombre de notes, et l'autre contient le bouton « Ajouter au panier ». Nous créons donc une étiquette Potter et lui donnons un nom de classe, un centre de ligne et un pied de page contenant des informations sur le produit Maintenant, à l'intérieur de celui-ci, nous ajoutons un DU et lui donnons un nom de classe, un centre de ligne. Maintenant, dans ce d, nous avons besoin de deux paragraphes, un pour l'évaluation et un pour le nombre de notes. Ajoutez le premier paragraphe et le nom de la classe pour aligner le centre et l'évaluation du produit. Vous pouvez voir en quoi la classe centrale Align est plus utile en termes de centrage des éléments Maintenant, à l'intérieur de celui-ci, nous ajoutons une image et dans la source une étoile et de l'art à l'étoile également. Ici, nous écrivons notre note, 5.0. Maintenant, après ce paragraphe , donnez-lui un nom de classe, un produit, un avis de soulignement, un nombre de traits de soulignement Et ici, 120. Enfin, après cette plongée, nous ajoutons le bouton ici et lui donnons un nom de classe, ajoutons au panier. Et à l'intérieur, nous ajoutons une image, et dans la source, nous passons panier et RT au panier. Maintenant, saisissons ces deux images en haut de la page. Dupliquez donc cette entrée deux fois de plus, et ici nous écrivons l'étoile et nom de l'image au format white dstar point png Et pour finir, nous le changeons en panier et image en panier point PNG. Enregistrez les modifications. Et dans le composant des fonctionnalités des produits, nous ajoutons le composant de la fiche produit. Sympa. Et maintenant, dupliquons-les trois fois de plus. Enregistrez ceci et vous verrez, nous avons foiré notre page de destination Définissons le style pour cela. Ainsi, dans la pile CSS à points de la carte de produit, nous ajoutons tout d' abord une carte de soulignement du produit à points Entre crochets et à l'intérieur de cette largeur jusqu'à 275 pixels, hauteur à 330 pixels, marge jusqu'à 20 pixels, rayon d'usure jusqu'à 12 pixels, boîte SDO vers RGBA, zéro, zéro, zéro, 0,24 Ensuite, zéro pixel pour XX, trois pixels pour l'axe Y et huit pixels pour l'effet de flou Si vous souhaitez explorer d'autres zones ombrées, j'ai un site Web que j'ai beaucoup utilisé lorsque je voulais ajouter des zones ombrées. Donc, dans le nouvel onglet, recherchez, obtenez un scan CSS. Et nous avons ici 93 magnifiques ombres en forme de boîte. Et nous pouvons le copier en CSS directement en cliquant sur cette case. Vous pouvez donc ajouter ce site Web à vos favoris. Revenons à notre fichier CSS. Ici, nous ajoutons de la couleur de fond au blanc. Maintenant, après cela, nous ajoutons une image de soulignement par points, et à l'intérieur des crochets Cali, nous ajoutons la hauteur à 200 pixels, le texte aligné au centre et la bordure inférieure à un pixel, solide a si I Ii Ensuite, nous ciblons produit à points, l'image soulignée et le tag image Et à 100 % à l'intérieur de cette hauteur. Enregistrez les modifications et jetez-y un œil. Vous voyez, notre section d'images est prête. Définissons maintenant le style de cette section détaillée. Nous ajoutons donc ici un point sur le produit, soulignons les détails. Et à l'intérieur, nous ajoutons un rembourrage de dix pixels pour le haut en bas et de 20 pixels pour la gauche et la droite Ensuite, nous ciblons le produit à points, le prix du soulignement, le Calibacket et, dans ce cadre, nous ajoutons la taille de police à 21 pixels et le poids de la police au gras Ajoutons maintenant du style pour le produit à points, soulignons le titre. Et ici, nous ajoutons une taille à 18 pixels et une marge supérieure à quatre pixels. Enregistrez ceci, et notre carte aura toujours l'air massive à cause de cette image. Alors réglons ce problème. Nous ajoutons donc ici un produit à points, des informations de soulignement, un pied de page de soulignement Ali entre crochets, et nous ajoutons ici le contenu de justification à l'espace entre les deux et à une marge dix pixels pour le haut, le bas et de zéro pour la gauche et la droite. Ensuite, nous ciblons indice de soulignement des points, les crochets Cali, hauteur jusqu'à 30 pixels, rembourrage à quatre pixels et le poids de police de huit pixels Rayon de bordure jusqu'à cinq pixels, couleur d'arrière-plan, pour un FC a 311, et couleur sur blanc. Ensuite, nous ciblons produit à points, le trait de soulignement , l'image, les crochets, et à l'intérieur de ceux-ci, jusqu'à 20 pixels et une marge de 5 pixels à Ensuite, nous ajoutons le produit à points, révision des traits de soulignement, le nombre de traits de soulignement, les crochets Cali, et à l'intérieur de cette taille de police à 16 pixels, marge gauche à dix pixels, la couleur au gris, rembourrage à zéro et dix pixels, et l'eau laissée à deux pixels, solide contient Enregistrez ceci et jetez-y un coup d'œil. Ici, nous pouvons voir notre style grâce à cette image de panier. Donc du code cts, et ici nous ciblons point sur deux crochets CAT Coli, et à l'intérieur de celui-ci avec 40 pixels, hauteur de 40 pixels, bordure à nonne, un rayon de bordure à 100 %, couleur de fond à transparent Et du curseur au pointeur. Enfin, nous ciblons le point A sur les crochets Cully de la carte et de l' étiquette d'image , avec une largeur de 100 % et une hauteur de 100 % Dites les modifications et jetez-y un coup d'œil. Tu vois, maintenant notre carte est vraiment belle. Pour le moment, nous ne rendons pas ce composant de fiche produit dynamique car nous allons obtenir ces données de notre back-end dans la section à venir. Notre page de prêt est donc prête. 109. Créer une page produit: Ainsi, dans la leçon précédente, nous complétons notre page d'accueil. Commençons maintenant notre deuxième page, qui est la page du produit. Nous pouvons donc diviser cette page produit en sections. La première section est la barre latérale dans laquelle nous affichons toutes nos catégories, et sur le côté droit, nous avons la liste des produits Je ferme donc tous les fichiers d'ici. Et maintenant, dans notre dossier de composants, nous créons un nouveau dossier appelé products. Et à l'intérieur de celui-ci, nous créons un nouveau fichier appelé Productspage point css Ensuite, créez un nouveau composant appelé products page point JSX Passons maintenant au code standard à l' aide de la RFC et en haut, nous saisissons le CSS à points de page des produits d'époque Maintenant, à la place de cette rosée, nous ajoutons une section et lui donnons un nom de classe, des produits, une page de soulignement Et dans cette section, nous avons deux éléments dans la barre latérale et la liste des produits Ajoutons donc ici une balise latérale et donnons-lui un nom de classe, des produits, une barre latérale soulignée Et à l'intérieur, nous écrivons la barre latérale. Après cette barre latérale, nous créons une autre section et nommons deux produits, une liste de soulignements, une section de soulignement Et ici, la liste des produits. Voyons ce que nous allons obtenir. Enregistrez ce fichier, et dans le composant de l'application, nous commentons cette page d'accueil et ajoutons ici la page des produits. Et ici, nous pouvons voir que j'ajoute page de produit différente du fichier CSS. Nous changeons donc le nom de ce fichier en product page point Jx. De plus, dans ce composant, nous changeons le nom de notre fonction en page de produits et mettons également à jour cette exportation. Et en haut, nous ajoutons la page de produits point css. Enregistrez ce fichier, et dans notre composant d'application, nous ajoutons ici le composant de page des produits. Ne t'inquiète pas. Nous ajouterons le routage une fois nos styles terminés. Pour l'instant, nous ne voulons aucune complexité. Enregistrez les modifications et jetez-y un œil. Ici, nous obtenons la barre latérale et la liste des produits. Définissons le style de mise en page de nos produits. Dans le fichier CSS à points de page de produits, nous ajoutons des produits à points, une page de soulignement, des calibrackets, affichage au GED parce que nous voulons diviser notre application en sections, colonnes de modèles GED un cadre et quatre cadres et un rembourrage Enregistrez les modifications et jetez-y un œil. Tu vois, nous avons des sections séparées. Maintenant, ajoutons notre barre latérale. Ainsi, au lieu d'écrire toute la section de la barre latérale ici, nous pouvons créer un nouveau composant distinct pour la barre latérale Supprimez donc cette balise, et dans le dossier des produits, nous créons un nouveau fichier, products, point CSS de la barre latérale, et créons un autre fichier Products, point de barre latérale JSX Ici, nous ajoutons un modèle standard et importons la barre latérale des produits Bien. Maintenant, à la place de ce DU, nous collons notre tag AI. Supprimons maintenant le texte de la barre latérale, et à l'intérieur de celui-ci, nous ajoutons d'abord le tag Astro et passons ici Ensuite, pour afficher les liens, nous créons un DU avec liens de soulignement des catégories de nom de classe Et à l'intérieur de ceux-ci, nous ajouterons nos liens par catégorie. Ajoutons donc des styles pour cette partie. Ainsi, dans notre fichier CSS, nous ajoutons des produits à points, barre latérale soulignée, des crochets Hi À l'intérieur de ceux-ci, nous ajoutons un rembourrage dix pixels pour le haut en bas et de 20 pixels pour la gauche et la droite, un rayon de bordure de cinq pixels et une couleur d'arrière-plan de blanc Ensuite, nous ajouterons un style pour le titre de catégorie. Les produits à points soulignent donc la barre latérale, et nous ciblons deux crochets Cali, taille de police de 26 pixels et une marge inférieure de dix Sauvegardez ceci. Et dans le composant de la page des produits, ajoutons notre composant de barre latérale des produits. Enregistrez ce fichier et voyez, nous avons ici une belle barre latérale. Définissons maintenant les liens entre les catégories. Les liens de catégories ressemblent donc à ceci. Sur le côté gauche, nous avons Imog ou icône, puis sur le côté droit, nous avons le titre du lien, où nous voyons ce type de structure, à droite, il est lié à un composant d'icône La différence, c'est juste ça. Nous devons modifier leurs positions, ce que nous pouvons facilement faire avec le CSS. Laisse-moi te montrer. Nous ajoutons donc ici un lien avec un composant icône, C, la saisie automatique fonctionne, et à Props, nous passons le titre à, disons électronique, après ce lien vers les produits, catégorie point d' interrogation étant égale à électronique Nous passons donc ici notre chaîne de demande de catégorie, et en l'utilisant, nous pouvons récupérer les données de cette catégorie. Après cette image, disons Rocket. Importons maintenant cette image. Importez Rocket À partir de là, nous allons accéder deux dossiers vers Assets Rocket Dot PNG. Enregistrez les modifications et jetez-y un œil. Nous obtenons le même lien que dans notre barre de navigation. Maintenant, comme le sait ce lien avec le composant icône, nous voulons ajouter ce lien à la barre latérale ou à la barre Na. Pour cela, nous allons passer un autre accessoire à ce lien avec composant d'icônes La barre latérale est égale à true. Ou nous pouvons également le supprimer. Les deux fonctionnent de la même manière. Mais pour mieux comprendre, nous ne le supprimons pas. Enregistrez ceci et rendez-vous sur le lien avec le composant d'icône. Ici, après cette image, nous déstructurons un autre accessoire, qui est la barre latérale. Maintenant, nous pouvons ajouter une condition, et en fonction de cette condition, nous ajouterons des styles. Donc, à la place de cette classe centrale Align, nous ajoutons des crochets cli parce que nous ajoutons une expression JavaScript et ajoutons ici la condition I La barre latérale est vraie, puis nous renvoyons Align center et le lien de soulignement de la barre latérale car nous renvoyons uniquement Définissons maintenant le style de ce lien de soulignement dans la barre latérale. Donc, sur le lien avec le fichier CSS à point d' icône, et en bas, nous ajoutons de l' encre de soulignement dans la barre latérale, Calibraket et à l'intérieur de celui-ci, nous devons d' abord changer la position de notre image et de notre texte sens de flexion trop inversé justifie donc la teneur en lin et en utilisant ces deux propriétés, nous pouvons inverser la position de nos éléments. Ensuite, une taille à 21 pixels, rembourrage à dix pixels et 15 pixels, rayon de bordure à cinq pixels et transition de 0,15 seconde au total sont des entrées et des sorties Vous savez déjà pourquoi nous ajoutons cette transition, l'effet du pH. Barre latérale Le clan Link survole et à l'intérieur de celui-ci, nous changeons simplement la couleur d'arrière-plan en F six, F six, F Enregistrez ceci et jetez-y un œil. Vous voyez, nous avons obtenu notre style de lien. Maintenant, agrandissons un peu notre icône et ajoutons une marge à droite. Nous ajoutons donc ici un point de soulignement sur la barre latérale Link, et nous ciblons l'élément d'image À l'intérieur, nous changeons la largeur à 30 pixels, marge gauche à zéro et la marge droite à huit pixels. La raison pour laquelle nous faisons une marge de gauche à zéro est que dans ce lien, soulignons Imoge, il nous reste une marge de cinq pixels Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons ici notre style de lien. C'est ainsi que nous pouvons utiliser le même composant et l'utiliser pour un autre style. 110. Créer une section de liste de produits: Maintenant, créons une section de liste de produits pour notre page de produits. Donc A pour cette section, nous créons un composant distinct. Donc, dans cette section à partir d'ici, et dans notre dossier de produits, nous créons un nouveau fichier, liste des produits point CSS, et nous créons également une nouvelle liste de produits de composants point JSX, ajoutons un modèle standard, et en haut, nous importons un fichier CSS à points de liste de produits Maintenant, à la place de ce dû, ce que nous allons faire, c'est coller notre section. Désormais, cette section de liste de produits comporte deux sections. premier est l'en-tête, dans lequel nous ajouterons le titre du produit, et sur le côté droit, nous ajouterons menu déroulant pour raccourcir nos produits Dans la deuxième section, nous avons une liste de produits. Ajoutons ici un en-tête avec le nom de la classe, le centre d' alignement et les produits, liste de soulignements, un en-tête de soulignement Dans cet en-tête, nous ajoutons d'abord à étiquette et à l'intérieur de ces produits. Ensuite, nous ajoutons le nom de balise select abrégé et lui attribuons nom de classe, un produit, un tri de soulignement Maintenant, à l'intérieur de celui-ci, nous ajoutons nos options. Donc option, valeur nulle et transmettez ici la pertinence. Il s'agit de la valeur par défaut, et c'est pourquoi nous ne transmettons aucune valeur. Ajoutons la valeur de la deuxième option au prix, DSE pour quoi, à droite, par ordre décroissant, et passons ici, prix du plus haut au plus bas Dupliquez cette ligne, et nous changeons notre valeur en prix, ASC et changeons ici, prix, du plus bas au plus élevé Maintenant, dupliquons ces deux options et au lieu du prix, nous passons au tarif et ici aussi au tarif. Maintenant, après cet en-tête, nous ajoutons un jour avec la liste de soulignement des produits des noms de classe Et à l'intérieur, nous avons une liste de produits que nous allons afficher dans la fiche produit. Ainsi, au lieu de définir composants de la fiche produit dans le dossier d'accueil, nous pouvons les déplacer ici dans le dossier des produits. Alors voyez comme ça, archivez-le et déposez-le dans le dossier des produits. Vous pouvez voir à quel point il est facile de déplacer des composants dans notre projet, ou nous pouvons même l'utiliser dans différents projets avec son fichier CSS. Mais voici une chose. Nous devons modifier l'instruction d'entrée dans le composant Feature Products. Nous allons donc un dossier sur les produits, barre oblique sur la fiche produit. Sauvegardez ceci. Et dans le composant de liste des produits, nous ajoutons ici la fiche produit. Et dupliquez-le plusieurs fois. Enregistrez ce fichier. Et dans notre page de produits, nous ajoutons ce composant de liste de produits. N'oubliez pas de le faire. Enregistrez les modifications et jetez-y un œil. Tu vois, nous obtenons ces éléments. Ajoutons maintenant du style à cette section. Donc, dans un fichier CSS à points de liste de produits, nous ajoutons des produits à points, une liste de soulignements, section de soulignement, des crochets Cali, rembourrage à dix pixels et un rembourrage à gauche à 30 pixels Ensuite, nous ajoutons des produits à points, soulignement en dernier, un en-tête de soulignement Et à l'intérieur de ceux-ci, nous ajoutons du contenu de justification à l'espace entre les deux, car nous avions déjà aligné la classe centrale pour cet en-tête. Ensuite, nous ciblons nos deux produits Sudar, en en-tête de liste, deux crochets Cali Et ici, nous écrivons une taille de police de 26 pixels. Ensuite, nous ciblons sur nos produits le shorting, les calibackets, et à l'intérieur de cette taille de police de 18 pixels, le poids de police à 500, famille de polices héritant d'une hauteur de 35 pixels, le rembourrage à zéro et à cinq pixels pour la gauche et Bordure vers nonne, contour vers nonne et rayon de bordure jusqu'à cinq pixels Enregistrez les modifications et voyez que notre section d'en-tête est prête. Il ne nous reste plus qu'à ajouter du style à cette liste de produits. Donc, en bas, nous ajoutons à la liste des produits soulignés Et à l'intérieur des supports Scully, nous ajoutons des drapeaux en lin pour emballer et justifier le contenu de manière à ce qu' il soit espacé Enregistrez les modifications et jetez-y un œil. Vous voyez, notre liste de produits est prête. Alors félicitations. Nous avons terminé nos deux pages importantes. Ça a l'air vraiment bien. Qu'est-ce que tu en penses ? Faites-le moi savoir dans la section Q&S. 111. Créer un seul composant de produit: Je vais maintenant créer une page de produit unique pour notre projet. Dans cette leçon, nous créons uniquement la partie de sélection d'image. Nous avons donc ici un tableau d'images, et lorsque nous sélectionnons une image cette image s'affichera ici. C'est vraiment simple. Laisse-moi te montrer. Donc, tout d'abord, dans le prochain article 0R dans le dossier des ressources, ouvrez le dossier projectory. Et dans ce fichier, nous avons des produits à points de fichier JS. Et à l'intérieur de celui-ci, vous obtenez cet objet produit. Cet objet contient tous les détails que nous obtiendrons du backend. Pour l'instant, nous avons juste besoin de ces données Dummi. Ainsi, pour une section de produit unique, nous créons un nouveau dossier dans le dossier des composants appelé produit unique. À l'intérieur de celui-ci, nous créons un nouveau fichier appelé single product page point CSS. Nous créons également un nouveau composant appelé single product page point Jx Ici, nous ajoutons du code standard, et en haut, nous importons un fichier CSS à points de page de produit unique Bien. Ajoutons notre objet produit ici parce que nous en avons besoin. Maintenant, à la place de ce DU, nous ajoutons une section et lui donnons un nom de classe, une ligne, un centre et un produit unique. À l'intérieur, nous avons deux sections, l'une pour la sélection d'images et la seconde pour l'affichage des détails du produit. Nous ajoutons ici Du avec le nom de la classe, align, center, et deuxièmement, Du avec le nom de la classe, align, center, les détails du produit unique. Maintenant, dans ces images du, nous ajoutons un autre du avec le nom de la classe, vignettes de soulignement simples Et à l'intérieur, nous allons afficher toutes les images en miniature, c' est-à-dire les petites Quelles sont les images que nous voulons afficher. Bien, nous voulons afficher ces tableaux d'images. Ajoutez donc des crochets Coli, des photos produits et des points À l'intérieur, nous obtenons chaque image et également un index ici. C'est très basique, non ? Nous l'avons fait tellement de fois, et nous renvoyons ici le tag image. Et dans la source, nous passons notre image Alt au titre du point du produit. Maintenant, après cette échéance, nous ajoutons une source d'image à l'image à points du produit. Et à l'intérieur de tout ça, nous devons passer à zéro pour le moment. Alternez au produit, le titre du point et le nom de la classe pour souligner un seul produit, affichage du trait de soulignement Enregistrez les modifications et nous devons ajouter cette page dans notre composant d'application. Faites le tour de notre page produit et ajoutez simplement ici une page de produit unique Enregistrez les gènes et jetez-y un coup d'œil. Nous obtenons nos éléments. Définissons maintenant le style de cette section. Ainsi, dans un fichier CSS à points de page de produit unique, nous ajoutons d' abord un seul trait de soulignement, calibrage, puis nous ajoutons le contenu de justification au centre et rembourrage de 32 pixels pour le haut et le bas et de 48 pixels pour la gauche et Ensuite, nous ciblons un seul produit de soulignement, des vignettes soulignées, des crochets en colimaçon et, à l'intérieur de cet écran, nous indiquons la direction du lin par rapport à la colonne, lin par rapport à l'enveloppe, écart de 14 pixels, rembourrage de 8 pixels et la marge de 16 pixels Ensuite, ciblons les petites images que nous pouvons sélectionner. Ainsi, un seul produit de soulignement, des vignettes de soulignement, largeur de calibrage de l'image à 80 comprimés, une hauteur à 80 comprimés, un objet ajusté pour couvrir un rayon d' eau de cinq pixels et du curseur au pointeur Ensuite, ajoutons le produit de soulignement à point unique, affichage du trait de soulignement, les calibrackets, et l'intérieur, la largeur à 600 pixels, la hauteur à 600 pixels, le combat de l' objet pour le couvrir et le rayon d'eau à dix pixels combat de l' objet pour le couvrir et le rayon d'eau à dix Ce sont tous des CSS de base. C'est pourquoi je n' explique pas son style. Enregistrez les modifications et jetez-y un œil. Tu vois, on obtient ce que l'on veut. Lorsque nous cliquons sur ces images, rien ne se passe. Définissons donc cette fonctionnalité. Pour cela, nous devons créer une variable d'état appelée ensemble d'images sélectionnées image sélectionnée, et cette variable d'état stockera la valeur d'index d'image sélectionnée. Par défaut, nous sélectionnerons la première image. Importons également l' état depuis React. Bien. Maintenant, en bas à la place du zéro, nous ajoutons l'image sélectionnée. Maintenant, lorsque nous cliquons sur l'une de ces images, il nous suffit de définir la valeur de l'image sélectionnée sur cette valeur d' il nous suffit de définir la valeur de l'image sélectionnée indice. Laisse-moi te montrer. Ici, nous ajoutons un événement de clic dans cette fonction de flèche thmalimage et définissons l'image à indexer Enregistrez les modifications et jetez-y un œil. Changez l'image et voyez, nous obtenons cette image ici. Il ne nous reste plus qu'à afficher l'image actuellement sélectionnée. Donc, dans notre balise d'image, nous ajoutons ici le nom de la classe égal à ici nous passons la condition. Si l'image sélectionnée est égale à l'index, nous ajoutons la classe d'image de soulignement sélectionnée, sinon nous n'ajoutons rien Ceci et ajoutons du style à cette classe. Ainsi, dans le fichier CSS, après notre style d'image, nous ajoutons des crochets Coli sélectionnés par des points, transformons à l'échelle 1,12 Enregistrez les modifications et voyez, nous obtenons ici cette image sélectionnée. Maintenant, cet effet est très soudain. Faisons donc en sorte que cela se passe bien. Dans ce style d'image, nous avons dû passer à tout 0,2 seconde, enregistrer les modifications et y jeter un œil. Vous voyez, nous obtenons cet effet de transition en douceur. Vous pouvez voir à quel point le sélecteur d'image est très simple. Il suffit de penser de manière simple. Dans la leçon suivante, nous allons ajouter une section détaillée du produit à cette page. 112. Ajouter une section de détails pour la page produit: Maintenant, ajoutons une section de détails pour une page de produit unique. Dans ces détails, nous ajoutons une balise H avec le nom de la classe, produit unique, le titre, et à l'intérieur de celle-ci, nous allons afficher le titre du produit à point. Ensuite, nous ajoutons un paragraphe avec nom de la classe et une description unique du produit. Et à l'intérieur de celui-ci, nous ajoutons une description du produit par points. C'est l'avantage de l'objet produit. Ensuite, nous ajoutons une autre balise de paragraphe et nous lui donnons un nom de classe, le prix d'un produit unique, et nous ajoutons ici entre crochets le dollar, prix par point du produit, le point deux fixe, et à l'intérieur de celui-ci, nous en passons deux Cela arrondira notre prix à deux chiffres. Maintenant, après cela, nous ajoutons deux balises avec nom de la classe, la quantité, le titre et nous passons ici la quantité. Ensuite, nous ajoutons un dé avec le nom de la classe, alignement, le centre et la quantité saisis. Et dans ce du, nous ajoutons un bouton dont le nom de classe est égal à la quantité saisie, au bouton, et nous passons ici moins, et par défaut, nous ajoutons disable à true pour le bouton moins. Dupliquez ce bouton, supprimez cette désactivation. Et il suffit de passer ici en plus. Et entre ces deux boutons, nous ajoutons un paragraphe avec le nom de la classe, la saisie de la quantité, le nombre. Bien. Enfin, nous avons le bouton « aller au panier ». Nous ajoutons donc un bouton avec le nom de la classe, Serge, un bouton, et ajoutons un panier. Et ici, nous passons tête à charrette. Enregistrez les modifications et jetez-y un œil. Tu vois, c'est ici que nous trouvons tous nos éléments. Maintenant, définissons-leur des styles. Ainsi, dans notre fichier CSS en bas, nous ajoutons les détails d'un seul produit, crochets Cali à 35 % et un rembourrage à 16 pixels et 24 Ensuite, nous avons un seul titre de produit. Et ici, nous écrivons la marge inférieure à 16 pixels et la taille de police à 32 pixels. Après le titre, nous avons une description. Donc, cette description unique du produit, entre crochets, et ici nous ajoutons le bas de la marge, 16 pixels et la hauteur de ligne à 1,4. Après cela, nous avons le prix, donc le prix d'un seul produit. Et à l'intérieur de ces crochets écailleux, nous ajoutons la marge inférieure à 16 pixels, la taille de police à 24 pixels et le poids de police à 600 Après cela, nous avons le titre de la quantité. Donc, titre de la quantité. Taille de police jusqu'à 20 pixels et poids de police jusqu'à 700. Enregistrez les modifications et jetez-y un œil. Tout d'abord, nous devons indiquer nos coordonnées dans la colonne. Ainsi, notre composant unique de produit, ici dans nos coordonnées, nous ajoutons un centre de ligne de manière bimestrielle. Ce n'est pas ce que nous voulons. Enregistrez les modifications et voyez, nous avons maintenant une petite structure satisfaisante. Ajoutons le reste des styles. Revenons à notre fichier CSS. Ensuite, nous avons saisi le nombre de points, du et à l'intérieur, nous définissons la taille de police à 20 pixels, poids de la police à 700 et la marge à cinq pixels pour le haut, zéro pour la gauche et la droite et 16 pixels pour le bas. Ensuite, nous ciblons le bouton de saisie de la quantité de points, Calibrackets, et à l'intérieur de celui-ci, nous ajoutons de la largeur à 35 pixels, hauteur à 35 pixels, pour une taille de 25 pixels, de la couleur de fond à FF 8848, de la couleur à blanc, de la bordure, du nonne, du rayon d'usure à 100 %, pour le cercle et du curseur au pointeur pour le cercle et du curseur Définissons maintenant le style du bouton désactivé. Bouton de saisie de la quantité, Callan désactivé, et à l'intérieur de celui-ci, nous ajoutons l'opacité à 0,3 et le curseur Enregistrez ceci et nous verrons que nous aurons nos styles de boutons. ne nous reste plus qu'à ajouter du style à ce nombre et à ajouter au bouton de la carte. Nous ajoutons donc ici la quantité saisie, le nombre, les crochets Cali, marge jusqu'à zéro, 40 pixels pour la gauche et la droite, et une ligne de texte au centre Enfin, nous ciblons le point huit, le bouton de la carte, entre crochets Cali, et à l'intérieur de celui-ci, pour adapter le contenu et rembourrage à huit pixels pour le haut et le bas et à 18 pixels pour la gauche et Dites les modifications et jetez-y un coup d'œil. Les autres styles sont corrects, mais ici, nous devons faire un petit changement. Nous ajoutons ici la marge inférieure, et voyons également pourquoi nous n' obtenons pas de marge pour ce dé de saisie de quantité. Ainsi, dans notre style de titre de quantité, nous ajoutons le bas de la marge à trois pixels, puis nous retirons ce dé. Nous voulons appliquer ce style pour la saisie des quantités. Enregistrez les modifications et jetez-y un œil. Découvrez à quel point notre page produit unique est belle. La raison pour laquelle je recommande d'écrire votre propre style est qu'après avoir terminé ce projet, vous direz fièrement que j'ai créé ce projet à partir de zéro. Encore une chose, si nous supprimons partie CSS du développement frontal, React perdra énormément de sa valeur Sans le bon CSS, notre site Web est très moche. Accordez-vous le mérite d' avoir créé ce projet à partir de zéro. 113. Créer un composant de page de panier: Maintenant, créons une page de panier pour ce projet. Dans cette leçon, nous allons donc créer toutes choses sans ce tableau. Nous allons créer un tableau dans la prochaine leçon. Ainsi, dans le dossier des composants, nous créons un nouveau dossier appelé CAT et à l'intérieur de celui-ci, nous créons un nouveau fichier appelé Cardpage point CSS Ensuite, nous créerons un autre composant appelé Cardpaget Ici, nous importons un fichier CSS à points de page de carte, et en haut, nous importons le fichier CSS à points de page de carte Maintenant, à la place de ce DU nous ajoutons une section et lui donnons un nom de classe, ligne, un centre et une page de panier. Dans cette section, nous voulons d'abord créer des informations utilisateur. Nous pouvons donc créer cet élément ici ou séparer ce composant. Nous pouvons faire ce que nous voulons. Cela dépend totalement de nous. Ici, nous n'allons pas réutiliser ces informations utilisateur, donc je ne crée pas de composant pour cela. Centre d'alignement par points pour ajouter une autre classe en T, nous pouvons ajouter un autre point d'information utilisateur. Tu vois, on a droit à ce cours pour les deux. Maintenant, à l'intérieur de celui-ci, nous voulons d'abord ajouter une image de profil utilisateur. Tag d'image et source pour l'utilisateur Alt pour le profil utilisateur. Maintenant, après cette image, nous voulons un Du et à l'intérieur de ce Du, nous ajoutons un paragraphe avec le nom de la classe, le nom d'utilisateur. Et nous pouvons transmettre votre nom à Halley. Ensuite, nous créons un autre paragraphe avec le nom de la classe, l'adresse e-mail de l'utilisateur, et nous transmettons votre e-mail à Halley sur dire gmail.com Enregistrez ceci et dans le composant de l'application, nous devons ajouter cette page de carte. Commentez la page produit unique, puis nous ajoutons un composant de page de carte. Enregistrez les modifications, et nous n'obtiendrons rien. Ouvrez donc la console et enfin, nous pouvons voir une erreur de référence détectée, l'utilisateur n'est pas défini, et nous obtenons également un nom de fichier, page de carte et également un numéro de ligne. Revenons donc au code VS, et importons cet utilisateur. Importez donc l'utilisateur depuis nous allons dans les dossiers up assets, user point web P. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous obtenons des informations sur les utilisateurs. Ajoutons maintenant d'autres éléments. Nous donnons donc ici de la place pour la table à cartes. Ensuite, nous ajoutons un tableau pour la facture du panier. Tapez et donnez-lui un nom de classe, le panier soulignera la facture. Ici, nous ajoutons Tbody et à l'intérieur, nous ajoutons des lignes de table et des données de table Ici, nous passons un sous-total et un autre dollar de données à neuf. Dupliquons cette ligne du tableau deux fois de plus, et à la place de ce sous-total, nous ajoutons les frais d'expédition, et ici cinq dollars Ensuite, pour la dernière rangée, nous ajoutons le total final et au moins 1004 dollars Maintenant, après ce tableau, nous ajoutons un bouton avec le nom de la classe, bouton de recherche, que nous définissons dans la barre de navigation, et nous ajoutons également une autre classe, le bouton Checkout Et voilà, on passe le paiement. Enregistrez les modifications et jetez-y un œil. C'est ici que nous trouvons nos éléments. Définissons-leur maintenant des styles. Ainsi, dans le fichier CSS à points de page de panier, nous ajoutons d'abord des crochets Cali de la page de panier à points et à l'intérieur de celui-ci, nous ajoutons la direction de flexion à la colonne, justifions le contenu par rapport à la largeur centrale à 60 % de marge par rapport à zéro et automatiquement et badding à 32 pixels et 48 Ensuite, nous ajoutons les informations relatives à l'utilisateur des données et, entre crochets Gali, écart de 16 pixels et une marge inférieure de 32 pixels Ensuite, nous ciblons les données, les informations soulignées par l' utilisateur, image, et à l'intérieur de celles-ci, nous ajoutons de la largeur de 80 pilules à 80 pic L, pieds de l'objet à couvrir et rayon de bordure à 100 % pour un cercle Ensuite, nous ciblons le nom de soulignement de l'utilisateur point. Et dans les paquets Cully, nous ajoutons la taille de police à 21 pixels, le poids de police à 600, enregistrons les anges et nous y jetons un coup d'œil Vous voyez, nous avons de bonnes informations sur les utilisateurs. Définissons maintenant les styles de ce tableau et de ce bouton. Donc, en bas, nous ajoutons les premiers crochets du tableau à points, et à l'intérieur de l'alignement automatique pour fléchir et jusqu'à 400 pixels, l'eau s'effondre pour s'effondrer, une taille à 16 pixels, marge supérieure à 16 pixels et la couleur de fond au blanc. Ensuite, nous ajoutons des crochets dot cart, Bill, TD, Ci. Et à l'intérieur, nous passons le rembourrage à 12 pixels et 20 pixels et la bordure à trois pixels, solide a EI EI, ei Ensuite, nous ajoutons un tableau à points, Bill, TD, Call on last child, crochets Cali, et à l'intérieur, une ligne de texte et une largeur de 120 pixels Ensuite, nous ciblons point Cart, Bill, final, et à l'intérieur de cette police, la taille de police à 20 pixels et le poids de police à 700. Enfin, nous ciblons le bouton Checkout, entre crochets Ci. Nous ajoutons d'abord align self à flex car nous voulons afficher ce bouton sur le côté droit. Et aussi, nous l'ajoutons pour Cart Bill. S ? Ensuite, une hauteur 38 pixels, une marge importante 16 pixels pour le haut, le bas et zéro pour la gauche et la droite, et un rembourrage à zéro et à 16 pixels pour la gauche et la droite Ajoutez également ce qui est important ici. Sauvegarde et jetez un œil. Cela semble sympa, mais nos styles finaux ne sont pas appliqués. Revenons donc au composant de la page panier. Ici, nous ajoutons le nom de la classe à la facture finale de la carte. Sauvegardez et jetez un coup d'œil. Tu vois, ces styles sont vraiment beaux. Dans la leçon suivante, nous allons créer une table à cartes. 114. Créer un élément de table commun: Créons un composant de table commun. Vous vous demandez peut-être pourquoi nous en avons besoin. Laisse-moi te montrer. Ici, dans le tableau à cartes, nous avons un style de table particulier et le même style que celui de la page Ma commande. La seule différence réside dans les données. Ici, nous avons différentes données avec un titre différent. Vous pouvez créer un composant de table commun et l'utiliser dans les deux pages. À la place de cette table à cartes, nous appelons table component comme ceci. Et pour le titre, nous passons ici des accessoires, des en-têtes égaux à entre crochets, un tableau, et à l'intérieur de celui-ci, nous passons tous les titres que nous voulons afficher Donc, d'abord, nous répercutons le prix de l'article, la quantité, le total, puis nous le supprimons. Définissons maintenant ce composant de table. Je sais que c'est un peu confus pour le moment, mais regardez ceci et vous le comprendrez. Ainsi, dans le dossier des composants, nous créons un nouveau dossier appelé common et à l'intérieur de ce dossier, nous ajouterons tous nos composants communs. Créons maintenant un nouveau fichier appelé table point css. Ensuite, nous créons un nouveau composant appelé tablette JSX Ajoutons du code standard et en haut, nous importons le fichier CSS à points de table Maintenant, à la place de ce de, nous ajoutons une balise table et lui donnons un nom de classe common table. Maintenant, à l'intérieur de celui-ci, nous ajoutons THAD et à l'intérieur, nous ajoutons tableow pour Maintenant, comme nous le savons, nous allons utiliser des accessoires de titre, qui sont des tableaux Nous déstructurons donc les accessoires et obtenons en-têtes. Dans ce TAD, nous pouvons afficher nos Donc, les en-têtes pointent sur la carte à l'intérieur, nous obtenons chaque élément et aussi la fonction de flèche d' index, et ici nous renvoyons le tag Ts, touche à l'index, et nous passons simplement ici l'élément Pour l'instant, voyons ce que nous allons obtenir. Sauvegardez ceci. Dans la page du panier, nous devons importer ce composant de table depuis le dossier de composants commun. Enregistrez ceci et vous verrez, nous obtenons ce tableau avec des en-têtes. Maintenant, pour l'affichage des données, nous pouvons passer ici d'autres accessoires, mais nous allons utiliser une autre méthode Parfois, nous devons utiliser JSX comme accessoires. Par exemple, ici, nous voulons transmettre balise T body avec la liste des éléments, qui est notre JSX Nous voulons donc transmettre ce JSX dans ce composant stable. Comment pouvons-nous le faire ? C'est vraiment simple. Au lieu de transmettre JSX aux accessoires, nous pouvons l'ajouter aux enfants Laissez-moi vous montrer ce que je veux dire. Donc ici, au lieu de fermer automatiquement ce composant stable, nous pouvons utiliser ce composant comme balise STML Et entre le composant d'ouverture et le composant de fermeture, nous ajoutons notre JS. Ici, nous sommes au corps T et à l'intérieur de celui-ci, nous avons des données de table à l'intérieur de celui-ci, nous avons des données de table. iPhone 6, dupliquez-le quatre fois de plus car nous avons cinq titres. Ici, nous indiquons le prix, 999 dollars, la quantité à un, le total à 999 dollars, et à la fin, nous ajoutons supprimer. Enregistrez ceci et jetez-y un œil. Nous n'obtenons pas nos données parce que nous ne définissons pas où nous voulons montrer à ces enfants JSX Donc, un composant de table, et dans les accessoires, nous avons une propriété appelée children Cet enfant possède tous les JSX, que nous transmettons entre notre composant d'ouverture et de fermeture Ajoutons maintenant ce composant simplement ici. Sauvez les anneaux et jetez-y un coup d'œil. Tu vois, c'est ici que nous obtenons nos données. Notre composant fonctionne donc. Définissons les styles de ce tableau commun. Donc, dans le fichier CSS à points, tout d' abord, nous ajoutons un tableau de soulignement commun, entre crochets, et à l'intérieur de celui-ci, nous ajoutons de la largeur à 100 % de marge du bas à 16 pixels, la bordure à la réduction, de la couleur de fond au blanc Et l'ombre de la boîte à zéro pixel, trois pixels, huit pixels, RGBA, zéro, zéro, et l'opacité à Ensuite, nous ajoutons un tableau à points communs, tête en T et des crochets TR C, et à l'intérieur de ceux-ci, nous passons la hauteur à 50 pixels, couleur d' arrière-plan, deux à 36, 34 A, la couleur en blanc et le texte est transformé en c supérieur. Ensuite, nous ciblons le tableau .com, le corps en T, TR, les crochets Cali, la hauteur à 50 xl et Textaine et Textaine Et pour une ligne de tableau uniforme, nous voulons changer la couleur d'arrière-plan, sorte que notre tableau ressemble à ceci. Donc, point : table commune, corps en T, TR, colonne, nième enfant Et nous croisons Evan. Crochets C, couleur de fond, deux comme FI, FI FI. Dites les modifications et jetez-y un coup d'œil. Pourquoi n'avons-nous pas de style pour cette tête en T ? Examinons cela, et nous pouvons voir ici que nous ne trouvons pas de style pour cette tête en T. Retour au code VS. Et dans la table commune Thad. Laissez-moi vérifier l'orthographe. Oui, c'est vrai. Oh, ici, nous devons cibler TH, enregistrer les inges et y jeter un œil Tu vois, notre table est très jolie. 115. Modifier le composant de la page de panier: Maintenant, avant de commencer à créer notre dernière page, appliquons quelques modifications à la page de notre panier. Ici, à l'endroit de cette quantité, nous voulons afficher la quantité avec les boutons plus et moins. Nous l'avons déjà créé sur notre page produit unique. Nous pouvons simplement l'utiliser ici. Dans le composant unique du produit, nous en avons besoin. Au lieu de copier-coller ces éléments, créons un composant utilisable pour cela Coupez le et dans le dossier unique du produit, nous créons un nouveau fichier appelé quantity input point CSS. Nous créons également un nouveau composant, point d'entrée de quantité JSX Ajoutons du code standard, et en haut, nous importons un fichier CSS à points de saisie de quantité Maintenant, à l'endroit de cette échéance, nous renvoyons simplement nos éléments. Vous pouvez voir que cela nous donne une erreur de compilation. Nous enveloppons donc ces éléments avec les fragments de réaction. Bien. Enregistrez ceci, et séparons également le CSS de ces éléments. Avant cela, dans le composant de produit unique, nous ajoutons notre composant de saisie de quantité, nous l'enregistrons, et dans le fichier CSS du produit unique, en bas, nous coupons ces trois styles, enregistrons, et dans le fichier CSS de saisie de quantité , nous les collons. Maintenant, dans la page de la carte à la place de celle-ci, nous ajoutons un composant de saisie de quantité. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous contrôlons les quantités sans écrire de code CSS ou STML C'est la beauté de la création de composants. Réglons maintenant ce problème de style. Nous ajoutons donc ici le nom de la classe, centre d' alignement et la saisie de la quantité. Enregistrez les modifications, et dans fichier CSS à points de page en bas, nous ajoutons la quantité de table, les crochets CL, et à l'intérieur cette hauteur jusqu'à 50 pixels et justifions le contenu au centre. Nous suivons les changements et jetez-y un coup d'œil. Tu vois, nous avons nos styles. Maintenant, encore une modification à la place de ce texte de suppression, nous voulons afficher, supprimer l'icône. Accédez donc au composant de page CAT, et à la place de ce texte de suppression, nous ajoutons une image et une source à supprimer, une illustration pour supprimer l' icône et nous associons le nom de la classe à l'icône de suppression CAT. Importons cette icône de suppression en haut. Donc, importez, supprimez d'ici, nous allons dans les dossiers, les actifs et nous supprimons les points PNG. Enregistrez ceci et ajoutons du style à cette icône. Dans le fichier CSS à points de page de panier, nous ajoutons une icône de suppression de panier à points qui calibre la largeur à 35 pixels, hauteur à 35 pixels et le curseur au pointeur Sauvez les ginges et jetez-y un œil. Tu vois ? Notre pâte a l'air vraiment bonne. 116. Section 11 Formulaire anticipé: Bienvenue dans la 11e section du cours Ultimate React. Dans cette section, nous allons apprendre tout ce qui concerne le formulaire, comme la création du formulaire, gestion du formulaire sans aucune bibliothèque, ainsi qu'avec la bibliothèque de formulaires React Hook. Nous verrons dans les deux sens. Ensuite, nous verrons comment valider les formulaires à l'aide de l'une des bibliothèques les plus populaires, ZOD , et comment nous pouvons gérer la saisie de fichiers ou d' images dans React Alors plongeons-nous dans le vif du sujet. 117. Créer un formulaire de connexion: Tout d'abord, créons l'interface utilisateur de notre formulaire de connexion. Ainsi, après cela, nous pouvons apprendre sans nous soucier de sa conception. Nous créons donc ici un autre dossier appelé authentification. Et dans ce dossier, nous allons créer notre page de formulaire de connexion. Nous créons donc un nouveau fichier appelé Login page point CSS. Nous créons également un nouveau composant appelé Login page point JSX Ici, nous ajoutons du code standard, et en haut, nous importons le fichier CSS à points de la page de connexion Bien. Maintenant, au lieu de cette journée, nous ajoutons une section avec le nom de la classe, centre d' alignement et la page de formulaire. Maintenant, dans cette section, nous ajoutons une balise Form et lui donnons un nom de classe, un formulaire d'authentification. Maintenant, ajoutons ici notre rubrique vers le formulaire de connexion. Et après cela, nous avons Du qui contient tous les remplissages d'entrée et lui donne un nom de classe, des entrées de formulaire. Pour l'instant, nous ajoutons un nom et un numéro de téléphone, mais ne vous inquiétez pas, nous le changerons bientôt. Donc, pour la saisie individuelle, nous ajoutons une DU et à l'intérieur de celle-ci, nous passons l'étiquette et transmettons votre nom. Ne transmettez rien dans ce DML à une révision. Je vais vous expliquer dans une minute. Ensuite, nous ajoutons simplement zone de saisie avec du texte de type et lui donnons un nom de classe, formulaire, une saisie de texte et un espace réservé pour saisir votre nom Maintenant, dupliquez ce point et à la place de ce nom, nous écrivons le numéro de téléphone, et ici, entrez le type dans le numéro de téléphone, et un espace réservé pour saisir votre numéro de téléphone Enfin, nous ajoutons un bouton avec le type submit et lui donnons un nom de classe, bouton de recherche et un formulaire d'envoi, et nous passons ici, soumettre. Enregistrez ceci, et nous devons maintenant ajouter ce formulaire dans notre composant d'application. Alors commentez cette page de commande M et ajoutez ici la page de connexion. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons ici des éléments de formulaire. Il ne nous reste plus qu'à leur ajouter des styles. Donc, dans le fichier CSS à points de la page de connexion, tout d' abord, nous allons centrer notre section, donc point FOM Page Cali Brackets, justifier le contenu à centrer Ensuite, nous ajoutons au formulaire d'authentification entre crochets Coli, et ici la largeur à 30 %, rembourrage à 32 pixels pour haut en bas et 48 pixels pour la gauche et la droite, marge en haut à 32 pixels et la couleur de fond au blanc Ensuite, nous ciblons le titre de notre formulaire. Pour que l'authentification, de la forme H deux, entre crochets, nous ajoutons la taille de police à 40 pixels, marge inférieure à 30 pixels et le texte aligné au centre Enregistrez ceci et vous verrez que le titre de notre page est beau. Il ne nous reste plus qu'à ajouter du style à cette étiquette, à saisir les remplissages et à envoyer le bouton. Mais avant cela, définissons cette étiquette et les entrées dans la colonne. Nous ajoutons donc ici des entrées sous forme de points, D, et à l'intérieur de cet affichage deux lignes, la direction du lin vers la colonne et la marge inférieure de 220 pixels. Ensuite, nous ajoutons les entrées de soulignement .com , l' étiquette, les crochets Cali, et ici nous ajoutons la taille de police à 18 pixels, poids de police à 600 et la marge inférieure à trois Ciblons maintenant nos remplissages d'entrée, c'est-à-dire la forme de points, la saisie de texte, les crochets Cali, et à l'intérieur de cette hauteur jusqu'à 35 pixels, rembourrage à zéro et à huit pixels pour la gauche et Taille de police jusqu'à 17 pixels, épaisseur de police jusqu'à 500 et contour nul. Enfin, nous ajoutons .com, soumettons la hauteur du Calibraket à une largeur de 40 pixels à 100 %, et une marge de 25 pixels pour le haut, zéro pour la gauche et la droite et dix pixels Enregistrez les modifications et jetez-y un œil. Notre formulaire est prêt. Vous vous demandez peut-être pourquoi j'ai laissé cette étiquette vide. De nombreux développeurs ne savent pas vraiment à quoi sert cet attribut estim four Je viens même de l'apprendre dans mon quatrième ou cinquième projet lorsque j'ai commencé. Ces quatre attributs indiquent à quel élément de formulaire cette étiquette est liée. Laissez-moi vous expliquer cela de façon pratique. Pour l'instant, si nous cliquons sur ce nom, nous ne voyons aucun effet. Maintenant, dans notre champ de saisie, nous ajoutons un attribut ID et passons ici le nom. Maintenant, dans ces étiquettes estim for attribute, nous devons ajouter le même identifiant que celui que nous ajoutons dans notre entrée Nous écrivons donc ici le nom. Nous faisons de même avec ce numéro de téléphone, identifiant de téléphone et tM pour attribut de téléphone. Enregistrez les ficelles et jetez-y un coup d'œil. Voyez si nous cliquons sur cette étiquette, nous plaçons notre curseur dans ce champ de saisie. C'est ainsi que nous utilisons label pour attribut, qui spécifie à quel élément de formulaire notre étiquette est liée. 118. Comprendre l'utilisation du crochet: Voyons maintenant un autre point important dans React, l'utilisation de RF Fok Alors tout d'abord, qu'est-ce que l'utilisation crochet RF et pourquoi est-ce important ? Use Rf est un hook permettant d'accéder aux éléments du dom et également de créer plusieurs variables, qui ne restitueront pas le composant. Ce sont les deux cas d'utilisation les plus courants de Rf Fok. Pour l'instant, ne nous soucions pas de créer une variable mutable Tout d'abord, voyons comment accéder aux éléments du dom. Ici, dans notre formulaire de connexion, nous avons temporairement défini le type de saisie des numéros de téléphone sur mot de passe. Maintenant, comme nous le savons, de nombreux sites Web disposent cette fonctionnalité dans laquelle nous pouvons masquer et afficher le mot de passe saisi. Après cette saisie, nous ajoutons un bouton, nous tapons button car si nous ne spécifiez pas l'attribut type, alors par défaut, il est configuré pour soumettre et nous avons déjà le bouton de soumission. Ici, nous passons le mot de passe de hauteur dupliquons ce bouton et le modifions pour afficher le mot de passe. Dites les modifications et jetez-y un coup d'œil. voyez, ici, nous pouvons taper notre mot de passe qui n' est pas visible actuellement. Maintenant, ce que nous voulons faire, c'est lorsque nous cliquons sur ce bouton de mot de passe, nous voulons définir notre type de saisie sur du texte simple. Et lorsque nous cliquons sur le bouton Hauteur, nous définirons à nouveau le type de mot de passe. Pour cela, nous devons accéder à ce champ de saisie. Voyons maintenant comment nous pouvons le faire en utilisant le crochet RF. Donc, tout d'abord, dans notre composant, nous écrivons ref Hook et sélectionnons cette suggestion automatique. Maintenant, nous devons transmettre la valeur par défaut, comme nous le faisons dans use date hook. Généralement, nous ajoutons toujours null ici. Maintenant, ce hook use ref renvoie un objet avec une seule propriété appelée current. Faisons-le dans une variable appelée password ref. Maintenant, à quel élément voulons-nous accéder ? C'est vrai, c'est notre mot de passe que nous avons saisi. Donc, dans cet élément, nous devons ajouter un attribut appelé Rf. Et ici, nous passons notre nom de référence, qui est le mot de passe Rf. Voyons maintenant ce que nous obtenons dans ce mot de passe Rf. Donc, pour l'instant, dans ce bouton Masquer, nous ajoutons un événement de clic, et ici nous ajoutons la fonction flèche et le journal des points de la console, le point de référence du mot de passe actuel. Enregistrez les modifications et jetez-y un œil. Ouvrez la console et cliquez sur le bouton Masquer. Vous voyez, ici, nous obtenons cette entrée avec ID Phone. Maintenant, avec cet élément, nous pouvons faire tout ce que nous faisons avec les éléments Dom dans Vanilla JavaScript. Maintenant, vous vous demandez peut-être comment pouvons-nous savoir quelles méthodes nous pouvons utiliser avec les éléments et comment nous pouvons nous en souvenir. La réponse est donc que vous n' avez besoin de vous souvenir d'aucune méthode. Laissez-moi vous montrer mon astuce pour voir toutes les méthodes que nous pouvons utiliser avec les éléments. Donc ici, il suffit de supprimer cette propriété actuelle. Et sauvegardez-le. Maintenant, dans la console, vous pouvez voir cet objet de référence de mot de passe avec la propriété actuelle. Cliquez maintenant sur cette petite flèche et encore une fois, cliquez sur cette flèche. Nous pouvons donc voir ici toutes les méthodes que nous pouvons appliquer à cet élément. Par exemple, nous voulons appliquer du style. Faites défiler l'écran vers le bas et cliquez sur cette icône pour voir plus correctement. Et ici vous pouvez voir la propriété du style. Cliquez dessus, et vous pouvez voir les propriétés de tous les styles. C'est aussi simple que ça. Ainsi, dans notre exemple, nous voulons ici modifier l'attribut type pour cette entrée. Donc, à la place du journal des points de cette console, nous écrivons le mot de passe ref point actuel, le type de point actuel égal à et code le mot de passe. Nous copions simplement cet événement onclick et le collons pour ce bouton so. Et ici, nous changeons simplement le type en texte. Enregistrez les modifications et jetez un œil, tapez quelque chose dans cette entrée. Par défaut, il est activé sur Masquer. Cliquez maintenant sur Afficher et ici nous pouvons voir notre mot de passe. Encore une fois, cliquez sur Masquer et c'est Masquer. Et voyez avec quelle facilité nous pouvons accéder aux éléments du dom en utilisant Rf Hook. Juste pour un plafond, nous devons d' abord déclarer une variable avec use Rf Hook et transmettre ici notre valeur par défaut, qui est nulle. Ensuite, il suffit de transmettre l'attribut RF à n'importe quel élément auquel nous voulons accéder et de transmettre le nom de notre variable Use Rf. C'est aussi simple que cela, si nous utilisons du JavaScript Vanilla, nous devons écrire ici le point de document Get element by ID or name. Mais pour réagir, nous n'avons pas besoin de le faire. Nous avons utilisé Rf ok pour accéder à l'élément. 119. Manipuler le formulaire en utilisant le crochet de référence: Donc, dans le premier projet, nous voyons comment nous pouvons gérer le formulaire en utilisant Use Date Hook. Voyons maintenant comment nous pouvons gérer le formulaire en utilisant le crochet Rf. C'est vraiment simple. Laisse-moi te montrer. Supprimons donc ces deux boutons. Nous n'en avons pas besoin et nous supprimons également cet attribut f. Je les ajoute juste pour expliquer l'utilisation du crochet RF. Remplacez ce type par un nombre et supprimez également cet attribut p. Maintenant, ici, nous appelons use Rf et passons ici null pour la valeur par défaut et lui donnons un nom, appelons name ref. Maintenant, dans cette référence de nom, nous voulons obtenir la référence de cette entrée de nom. Donc, dans l'entrée, nous ajoutons l'attribut ref, et ici nous passons le nom ref. Passons maintenant à l' envoi de ce formulaire. Nous ajoutons donc ici notre événement on submit et nous passons ici, gérons la fonction de soumission. Définissons maintenant cette fonction. Nous l'avons fait précédemment, maintenant dans cette fonction, pour le moment, nous enregistrons simplement ce point NameRV sur console enregistrons simplement ce point NameRV cela, nous devons accéder à cette valeur d'entrée, enregistrer les modifications, y jeter un œil, entrer le nom ici et cliquer sur consubmit Tu vois, notre page se rafraîchit. Pourquoi cela arrive-t-il ? Le sais-tu ? C'est vrai. C'est parce que nous n'ajoutons pas de fonction de prévention par défaut. Vous pouvez voir maintenant que vous connaissez de nombreux petits détails sur React. Tu t'en sors vraiment très bien. Nous ajoutons donc ici un objet d'événement, et à l'intérieur de celui-ci, nous ajoutons la fonction par défaut e dot prevent. Enregistrez les modifications et jetez-y un œil. Ouvrez la console, écrivez ici le nom, et vous voyez, nous obtenons ce nom ici. Maintenant, faisons de même pour ce numéro de téléphone renseigné. Nous créons donc ici une nouvelle constante de référence, passons ici null et lui donnons un nom, phone ref. Tu peux utiliser ce que tu veux. Cela dépend entièrement de vous. Maintenant, dans cette entrée de numéro de téléphone, nous ajoutons l'attribut f et passons ici notre référence de téléphone. Et dans notre fonction de validation, enregistrons les points de la console de ce téléphone, point actuel, point VLU Dites les tenants et jetez-y un coup d'œil. Remplissez ces champs et soumettez-les. Vous voyez ici que nous obtenons ces valeurs. Maintenant, dans le monde réel, nous allons envoyer l'objet de nos données au serveur. Nous créons donc ici un objet appelé user, et à l'intérieur de celui-ci, nous ajoutons propriété name et la donnons à une chaîne vide. Et ici nous avons le téléphone et comme valeur par défaut, nous ajoutons zéro. Maintenant, à la place de cette console, nous définissons le nom du point utilisateur égal à la valeur actuelle du point de référence du point de référence. Et après cela, le point de téléphone de l'utilisateur est égal à la valeur du point de référence actuel du point de référence du téléphone. Maintenant, consultez le journal à points de cet objet utilisateur. Enregistrez les modifications et jetez-y un œil, remplissez le formulaire, et voici notre objet utilisateur, que nous pouvons envoyer au serveur. Un petit changement, nous devons convertir cette chaîne numérique en un seul nombre. Nous plaçons donc ici cette valeur entre parenthèses et ajoutons ici parse int. Enregistrez les modifications, soumettez un formulaire. Vous voyez ici, nous obtenons le numéro. C'est ainsi que nous pouvons gérer les valeurs des formulaires en utilisant Use Rf. Maintenant, vous vous demandez peut-être quelle est la meilleure façon de gérer le formulaire ? Utilisez Rf ou utilisez l'état. La réponse est use state. Mais utiliser Rf est également utile si nous avons jusqu'à dix remplissages d'entrée, car lorsque nous utilisons sref, cela ne provoquera pas le rendu du composant Si nous remplissons cinq à six formulaires, nous pouvons simplement utiliser uTateHok Utilisez uniquement le crochet sref pour gérer le formulaire. Si l'état cause un problème de performance, utilisez UseRefHuk pour Dans la prochaine leçon, nous allons gérer notre formulaire avec nous State Hook. 120. Manipuler le formulaire en utilisant le crochet d'état: Donc, tout d'abord, supprimons ces constantes, supprimons ces lignes de handle submit et supprimons également ces attributs f des deux entrées. Maintenant, tout d'abord, nous créons une variable d'état à l'aide SNIPID et nous lui donnons un nom d'utilisateur, un utilisateur défini et une valeur par défaut, nous passons l'objet avec le nom de la propriété à une chaîne vide, et le téléphone également à une chaîne vide Maintenant, en haut, au lieu d'importer UF, nous importons Tate Hook. Maintenant, dans notre entrée de nom remplie, nous ajoutons un événement de changement, et à l'intérieur de celui-ci, nous obtenons ici l'objet de l'événement, la fonction flèche et nous définissons l'utilisateur sur l'objet. Tout d'abord, nous obtenons toutes les valeurs de l'objet utilisateur précédent et remplaçons simplement le nom par la valeur du point cible. Maintenant, pour la saisie Fon, nous faisons de même. Copiez donc cette modification et collez-la dans cette entrée. Et changez simplement ce nom en téléphone. Auparavant, nous créions une fonction distincte pour le changement de poignée, mais nous pouvons également procéder de cette façon. Tu peux utiliser ce que tu veux. Cela dépend entièrement de vous. Maintenant, enfin, dans la fonction handle submit, nous enregistrons cet objet utilisateur sur console point. Enregistrez les modifications et jetez-y un œil, remplissez le formulaire et soumettez-le. Vous voyez, nous avons ici notre objet utilisateur. Nous devons également convertir ce numéro de téléphone en entier. Enveloppez donc cette valeur entre parenthèses et ce que nous utilisons, c'est vrai, parse int. Maintenant, nous avons également un petit problème. Nous savons que tous les champs de saisie SDML possèdent une propriété de valeur qui leur permet de conserver leur propre état Mais avec cette implémentation, nous avons également une variable d' état utilisateur. Il est donc possible que la propriété et les entrées soient désynchronisées. Cela ne se produira pas plusieurs fois, mais il vaut mieux prévenir que guérir. Donc, pour résoudre ce problème, ajoutez la propriété value et définissez le nom du point utilisateur, et également ici la valeur du numéro de point de l'utilisateur Nous pouvons donc appeler ce champ de saisie un composant de contrôle car son état est entièrement contrôlé par React. Cela signifie simplement que la valeur de cette entrée n'est pas gérée par le dôme, mais qu'elle est contrôlée par l'état du composant. 121. Gérer les formulaires avec React Hook Form: Maintenant, nous n'avons ici que deux remplissages d'entrée. Demain, si notre formulaire devient plus complexe, la gestion du formulaire avec used deviendra plus difficile et prendra plus de temps car pour chaque champ de saisie, nous devrons définir des propriétés telles que value et onchange event Dans ce cas, nous pouvons utiliser l'une des bibliothèques les plus populaires , React Hook Form. Cette bibliothèque nous aidera à créer des formulaires rapides, et nous n'avons pas à nous soucier de la gestion de l'état des formulaires. Cette bibliothèque le fait automatiquement dans le tout dernier code. Ouvrez donc le terminal et dans le nouveau terminal, écrivez NPM, I react, hook form à 7.43 0.9 et appuyez sur Entrée Maintenant, réduisez ce terminal. Maintenant, en haut de notre composant, nous devons importer un hook appelé use form depuis la bibliothèque de formulaires React Hook. Maintenant, dans notre composant fonctionnel, nous appelons cela use form hook. Ce formulaire d'utilisation renvoie un objet de formulaire. Nous le stockons donc dans une variable appelée form, puis nous consolons ou enregistrons simplement ce formulaire pour voir ce que nous obtenons dans cet objet de formulaire Enregistrez les modifications et jetez-y un œil. voyez, nous avons ici de nombreuses propriétés et méthodes telles que gérer la soumission, enregistrement, la réinitialisation, la réinitialisation des remplissages, etc. Nous pouvons donc ici déstructurer notre formulaire. Et tout d'abord, nous avons besoin d'une méthode d'enregistrement. Cette méthode de registre prend le nom de remplissage comme argument et renvoie quelques propriétés. Laissez-moi vous montrer ce que je veux dire. Donc, ici à la place de ce formulaire, nous ajoutons une fonction d'enregistrement et passons ici le nom de remplissage. Disons le nom. Enregistrez les modifications et jetez-y un œil. Ici, nous obtenons cet objet avec deux remplissages, comme le nom sur le flou lors de la modification et l'attribut F. Donc, essentiellement, cette forme de crochet de réaction utilisera le crochet f pour gérer le formulaire. Donc, comme je vous l'ai dit, nous devons utiliser cette forme de crochet de réaction pour les formes complexes. Et lorsque nous avons une forme complexe, nous utilisons un crochet. Donc, à la place de cela sur les attributs de changement et de valeur, nous pouvons ajouter des calibracets, et ici nous appelons cette fonction de registre Et transmettez ici notre nom de remplissage d'entrée, qui est le nom. Maintenant, comme nous venons de le voir, cette fonction renvoie quelques propriétés. Donc, pour ajouter cela ici, nous pouvons utiliser l'opérateur de propagation. Nous faisons de même dans ce remplissage de saisie, supprimons ces propriétés et ajoutons ici fonction d' enregistrement et passons ici notre nom de remplissage, qui est téléphone, et il suffit de le diffuser. Maintenant, nous n'avons plus besoin cette variable d'état et supprimons également cette fonction de validation de poignée. Maintenant, dans notre hook use Form, nous avons une autre méthode appelée handle submit. Cette fonction handle submit est utilisée pour gérer la soumission de formulaires. Nous appelons donc ici cette fonction handle submit dans l'événement on submit. Et comme argument, nous devons passer une fonction de rappel Et dans le cadre de cette fonction, nous recevons les données de notre formulaire. Nous obtenons donc ici les données du formulaire et nous enregistrons simplement ces données de formulaire par des points Ainsi, lorsque nous soumettrons le formulaire, cette fonction de flèche fonctionnera aussi simplement que cela. Enregistrez les modifications et jetez-y un œil. Remplissez le formulaire. Et cliquez sur Soumettre pour voir ici que nous obtenons nos données, et nous n'avons pas besoin d'écrire beaucoup de code. Maintenant, nous obtenons ce numéro de téléphone sous forme de chaîne. Pour cela, nous devons passer le deuxième argument dans cette fonction de registre. Donc, objectez et nous définissons la valeur en tant que nombre sur true, enregistrons les modifications et actualisons la page, remplissons le formulaire, et voici notre numéro. Donc ça marche. Dans le monde réel, nous ne voulons pas simplement consulter ou enregistrer ces données lors de leur soumission, mais nous appellerons API ou bien d'autres choses encore. Ainsi, au lieu de définir cette logique ici, nous pouvons définir cette fonction séparément. Supprimez donc cette fonction de flèche, et nous créons ici une nouvelle fonction appelée submit Il suffit de coller notre fonction de flèche ici et de la transmettre à submit ici. Vous pouvez voir maintenant que notre formulaire semble propre et plus facile à gérer. C'est la puissance de la bibliothèque de formulaires React Hook. 122. Validation de formes: Ainsi, dans le monde réel d' une application avec formulaire de construction, nous devons également appliquer la validation du formulaire à notre formulaire. Commençons donc par comprendre ce qu'est la validation de formulaires. La validation des formulaires est une technique qui permet de s' assurer que l'utilisateur saisit les données correctement ou non. Par exemple, ici , notre nom rempli et l'utilisateur ne saisit que deux caractères, puis nous devons afficher l'erreur à l'utilisateur, comme le nom doit comporter trois caractères ou plus. Nous sommes souvent confrontés à ce type d' erreur. C'est ce que l'on appelle la validation du formulaire. Appliquer la validation à l'aide du formulaire React Hook est très simple. Définissez le deuxième paramètre, nous passons ici notre objet de validation et à l'intérieur de celui-ci, nous ajoutons la propriété de validation requise à deux et la longueur minimale à trois. Enregistrez les modifications et jetez un œil. Sans rien écrire, cliquez sur Soumettre et vous verrez que nous n'obtenons rien car le formulaire React Hook ne sera soumis au formulaire que si tous les champs sont validés. Si nous écrivons trois caractères ou plus, qu'alors que notre fonction de soumission s'exécute. Voyons maintenant comment nous pouvons obtenir des erreurs dans notre formulaire. Pour cela, nous avons une propriété appelée form state dans ce hook de formulaire d'utilisation. Ajoutez-le ici et Consol enregistre simplement l'état de ce formulaire. Enregistrez ceci et jetez un œil, actualisez la page et voyez ici que vous obtenez un objet. À l'intérieur, nous avons quelques propriétés telles que des erreurs de chargement, de soumission, de validité, etc. Imprimons simplement les erreurs de point de formstate. Enregistrez ceci, actualisez la page. Et voyez, actuellement, nous avons un objet vide. Et au moment où nous soumettons au formulaire, nous obtenons une erreur avec la propriété du nom. Et à l'intérieur de ceux-ci, nous obtenons type de cette erreur qui est requise. Si nous écrivons ici une lettre, nous obtenons une autre erreur avec le type mean length. Ainsi, en utilisant cet objet d'erreurs, nous pouvons afficher les erreurs. Ainsi, après notre zone de saisie, nous ajoutons une balise d'emphase et lui donnons un nom de classe, un formulaire, une erreur de soulignement Et à l'intérieur de celui-ci, nous ajoutons, s'il vous plaît, entrez votre nom. Maintenant, nous voulons afficher cette erreur uniquement si nous avons une erreur de nom. Enveloppez donc cette emphase avec des crochets Cl et ajoutez ici les erreurs de point de forme de condition Maintenant, au lieu d'écrire des erreurs par points Fmst, nous pouvons déstructurer la propriété errors à partir de l'état Form Donc, en haut, nous ajoutons deux points et ici nous obtenons des erreurs. Supprimez ce journal de points de la console. Nous n'en avons pas besoin. Maintenant, en bas, nous pouvons utiliser le nom du point d'erreur, type de point d' interrogation étant égal à obligatoire. Si c'est vrai, alors nous sommes les seuls à afficher cette erreur. Vous vous demandez peut-être pourquoi j'ai ajouté ici un point d'interrogation. Ce point d'interrogation et ce point sont appelés chaînage facultatif Nous en avons besoin car le sujet des erreurs peut être vide, ce qui signifie que si nous n'avons aucune erreur dans ce champ de nom, nous n'obtenons pas la propriété du nom du point d' erreur, et si nous n'avons pas cette propriété du nom du point d'erreur, nous voulons accéder à ce type de propriété, cela nous donnera une erreur. Ce point d'interrogation indiquera navigateur si le nom du point d'erreur est disponible. Ensuite, vérifiez cette condition, sinon ignorez-la. Maintenant, ajoutons une erreur pour la longueur moyenne. Dupliquez cette ligne et nous ajoutons ici la longueur moyenne. Et remplacez également ce message d'erreur par un nom de trois caractères ou plus. Enregistrez les modifications et jetez-y un œil. Soumettez un formulaire et vous verrez que nous recevons ce message d'erreur. Veuillez saisir votre nom. Et si nous écrivons quelque chose, message d'erreur changera en nom de trois caractères ou plus. Et si nous écrivons trois ou plus de trois caractères, erreurs disparaissent, et c'est plutôt cool, non ? Changeons la couleur de cette erreur. Ainsi, dans le fichier CSS à points de la page de connexion en bas, nous ajoutons une erreur de soulignement FM point Et entre parenthèses Cali, nous ajoutons de la couleur au rouge. Dites les modifications et voyez, nous avons ici une erreur de couleur rouge. 123. Validation de formulaire basée sur un schéma: Ainsi, dans la leçon précédente, validation du formulaire était intercalée entre nos balises. Maintenant, si à l'avenir, nous avons une forme complexe, alors notre balisage devient vraiment complexe et notre code ne sera plus maintenable Dans cette situation, nous pouvons donc utiliser une autre technique appelée validation basée sur le schéma. Ainsi, dans le cadre de la validation basée sur un schéma, nous pouvons conserver toutes nos règles de validation au même endroit. Il existe quelques bibliothèques comme Yup et Zod. Actuellement, Zod est très célèbre, nous allons donc l'utiliser. Ouvrez le terminal et dans le nouveau terminal, droite NPM, I Zod Ou si vous souhaitez installer la même version que celle que j'utilise, vous pouvez l'ajouter ici à 3.21 0.4 et appuyer sur Entrée Super, minimisez ce terminal. Maintenant, en haut de notre composant, nous importons une méthode appelée Z depuis Zod En utilisant ce Z, nous pouvons définir le schéma de notre formulaire. En termes simples, le schéma est un ensemble de règles pour les champs. Maintenant, je souhaite remplacer les champs de notre formulaire par e-mail et mot de passe. J'utilise simplement les champs de nom et de police pour vous expliquer le formulaire. Donc, dans notre formulaire, nous changeons cette étiquette en e-mail, également ici en e-mail et nous changeons également cet identifiant en e-mail. Et dans cette fonction d'enregistrement, nous changeons également cela en e-mail. Et ici, nous pouvons également changer le type de saisie en e-mail. Modifiez cet espace réservé pour saisir votre adresse e-mail. Maintenant, après cela, nous changeons ce téléphone en mot de passe. Et voici également le mot de passe, type de mot de passe, l' identifiant le mot de passe et l'espace réservé pour saisir votre mot de passe Et dans cette fonction enregistrée, nous transmettons également le mot de passe. Définissons maintenant le schéma de ces deux remplissages. Donc, en haut, on trouve un point Object. Maintenant, dans cette fonction, nous devons transmettre un objet, qui contient tous les champs et aussi des règles pour ce remplissage. Notre formulaire de connexion contient donc le premier e-mail, qui est une chaîne de caractères, donc un e-mail à points Z. Cette méthode permettra de vérifier que notre e-mail est valide ou non. De plus, nous allons définir un minimum de trois caractères. Nous définissons donc ici trois règles pour notre champ d'e-mail, chaîne, e-mail et un minimum de trois caractères. Maintenant, nous faisons la même chose pour le champ du mot de passe. Une chaîne de points, dont la moyenne est égale à huit. Si vous souhaitez appliquer davantage de règles de validation, vous pouvez consulter la documentation de Zo . C'est vraiment simple. Ici, notre schéma est prêt à effectuer des remplissages, afin que nous puissions le stocker dans une variable appelée schéma. Maintenant, vous vous demandez peut-être comment appliquer ce schéma à notre formulaire ? Pour cela, nous avons besoin d' une autre bibliothèque appelée Hook Form resolvers. Ouvrez donc le terminal et écrivez NPM, I sur Hook Form slash À 3.0 0.1, et appuyez sur Entrée. En utilisant ces résolveurs, nous pouvons facilement ajouter notre schéma or dans notre formulaire React Hook Maintenant, en haut, nous importons le résolveur ZR depuis Hook Form, les résolveurs Slash SOD. Bien. Maintenant, dans notre crochet d'utilisation du formulaire, nous passons ici un objet, et à l'intérieur de celui-ci, nous avons une propriété appelée résolveur, et ici nous ajoutons le résolveur ZR, et à l'intérieur, nous passons notre schéma. Maintenant récapitulons rapidement ce que nous avons fait Donc, tout d'abord, en utilisant la méthode Z, nous créons notre schéma de validation, qui est un ensemble de règles pour le remplissage des formulaires. Ensuite, à l'aide du dissolveur Zod, nous appliquons ce schéma à notre formulaire React Hook Ainsi, lorsque nous avons des erreurs, cela s'ajoutera directement à React Hook Form Error. est aussi simple que ça. Voyons maintenant comment afficher ces erreurs. Donc, tout d'abord, dans la fonction de registre, nous pouvons supprimer cet objet de validation. Nous n'en avons pas besoin. Nous pouvons également supprimer cette condition, et ici nous n'avons pas besoin de vérifier ce type d'erreur. Au lieu de cela, nous pouvons faire quelque chose comme ça. Si nous avons des erreurs point par e-mail, ce n'est qu'alors que nous affichons l'erreur. Également à la place de ce message d'erreur codé en dur, nous pouvons utiliser des messages d'erreur point email point. Ce message est le message par défaut ajouté par Zod, mais nous pouvons également le personnaliser . Copions ce morceau de code à partir d' ici et le coller pour que le mot de passe soit rempli Maintenant, à la place de cet e-mail, nous ajoutons des erreurs point mot de passe et également des erreurs point mot de passe point message. Enregistrez les modifications et jetez-y un œil. Rafraîchissez la page, n' écrivez rien et soumettez-la. Ici, nous recevons un message d'erreur tel e-mail non valide et une chaîne doit contenir au moins huit caractères. L'e-mail et le mot de passe sont remplis et envoyés. Vous voyez, ici nous obtenons nos données, donc ça marche. Personnalisons maintenant ce message d'erreur. Donc, pour ajouter notre message personnalisé, nous pouvons transmettre ici un objet avec la propriété du message. Et passez ici le message, veuillez saisir une adresse e-mail valide. De plus, pour ce mot de passe, nous passons l'objet et le message au mot de passe doit comporter au moins huit caractères. Enregistrez les modifications et jetez-y un œil, actualisez la page et soumettez le formulaire. voyez, nous recevons notre message de validation personnalisé, afin que vous puissiez voir à quel point le formulaire et la validation sont simples et faciles à gérer à l'aide du formulaire React Hook et de la bibliothèque SOT. 124. Exercice pour les formulaires: Il est maintenant temps de faire un peu d'exercice. Je veux que vous gériez ce formulaire d'inscription avec React Hook depuis bibliothèque et que vous ajoutiez également une validation pour ces remplissages d'entrée. Ne vous inquiétez pas de la gestion de la saisie des images, de la gestion des remplissages et de leur ajout de validation. C'est très simple, et je sais que tu peux le faire. Voici les détails du message personnalisé de validation, et en les utilisant, vous devez ajouter des règles de validation. Maintenant, avant de commencer cet exercice, je voudrais vous donner la page d'inscription car dans cette section, nous nous concentrons principalement sur le formulaire Ouvrez donc le dossier de ressources, que vous avez téléchargé au début de ce cours, ouvrez Project Three et accédez au dossier d'exercices Form. Ici, j'ai ajouté le composant de page d'inscription ainsi que le fichier CSS Nous aimons donc ces deux fichiers et les déposons dans le dossier d'authentification. Ajoutons maintenant cette page dans le composant de notre application. Alors commentez cette page de connexion et ajoutez ici la page d'inscription, et nous sommes prêts à partir. En bas, j' ajoute également un message de validation pour ce formulaire. Consacrez donc un peu de temps à cet exercice, puis revenez voir cette solution. 125. Solution de cet exercice: Voyons maintenant la solution de cet exercice. Je sais que vous résolvez cet exercice, et si vous vous accrochez à quelque chose, ne vous inquiétez pas, vous pouvez apprendre maintenant, mais au moins vous essayez et c'est plus important encore. Je ne vais donc pas prendre beaucoup de temps pour vous montrer directement la solution. Donc, tout d'abord, en haut, nous saisissons use form hook depuis la bibliothèque de formulaires React Hook. Et dans notre composant, nous l'appelons use form hook. Et stockez-le en constante et déstructurez directement la méthode d'enregistrement et gérez également la méthode d'envoi Maintenant, dans le champ de saisie du nom, nous ajoutons la fonction d'enregistrement et passons ici notre nom complet, qui est le nom. Comme nous le savons, cette méthode d'enregistrement renvoie quelques attributs et événements. Pour ajouter cela, il faut le diffuser. Copions-le et collez-le dans tous les autres remplissages d'entrée. Appuyez sur Alt ou sur Option, et par clic, nous créons plusieurs curseurs et nous les collons simplement. Maintenant pour le courrier électronique, nous ajoutons ici le courrier électronique ici nous ajoutons le mot de passe. Ensuite, confirmez le mot de passe et enfin l'adresse de livraison. Maintenant, gérons la soumission. Dans notre formulaire, nous ajoutons un événement de soumission, et à l'intérieur de celui-ci, nous appelons cette fonction handle submit. Et à l'intérieur de celui-ci, nous transmettons notre fonction, call on submit. Définissons maintenant cette fonction. Donc, lors de la soumission, nous obtenons ici les données du formulaire, la fonction de flèche, et nous allons simplement consulter ou enregistrer les données de ce formulaire. Enregistrez les modifications et jetez-y un œil, remplissez ce formulaire. Et cliquez sur Con Submit. C, ici nous obtenons nos données. Nous avons donc géré notre formulaire avec succès. Ajoutons maintenant la validation à l'aide de Zod. Donc, en haut, nous importons Z depuis Zod et importons également le hook du résolveur ZR depuis le résolveur Zod. Pourquoi avons-nous besoin de ce résolveur ZR pour appliquer un schéma avec React Hook Form Créons maintenant le schéma de notre formulaire d'inscription. Nous écrivons donc un objet point, et à l'intérieur de celui-ci, nous ajouterons notre objet de validation. premier champ est le nom, qui est une chaîne de points Z point Min 23. Et ici, nous transmettons notre message d'erreur personnalisé. message de l'objet doit donc nom du message de l'objet doit donc comporter au moins trois caractères. Ensuite, nous avons le courrier électronique, qui est une chaîne de points, donc le courrier électronique à points. Et à l'intérieur, nous transmettons un message. Veuillez saisir une adresse e-mail valide. Ensuite, nous ajoutons le mot de passe, qui est une chaîne de points. Comptez également huit caractères et passez ici message personnalisé au mot de passe doit comporter au moins huit caractères. Maintenant, pour confirmer le mot de passe, il suffit d'ajouter une chaîne de points. Je vais vous expliquer pourquoi dans une minute. Enfin, nous avons l'adresse de livraison, qui est également une chaîne de 15 caractères. Et passez ici, notre message personnalisé à adresser doit comporter au moins 15 caractères. Nous devons comparer notre mot de passe avec notre mot de passe de confirmation rempli. Donc pour cela, après cet objet, nous ajoutons une méthode raffinée. À l'intérieur de cela, nous pouvons ajouter une fonction de rappel, qui a un paramètre de données Il suffit de voir ça et vos lots disparaîtront. Maintenant, nous passons ici la condition, les données, qui sont l' objet actuel de notre formulaire à remplir, le mot de passe à points est égal à la valeur donnée par point de confirmation du mot de passe. Maintenant, pour cela, nous pouvons également transmettre un message personnalisé au deuxième paramètre. Le message de confirmation du mot de passe ne correspond pas au mot de passe, et nous devons ajouter une autre propriété appelée path. Et ici, entre crochets, nous ajoutons le nom de notre champ qui est le mot de passe confirmé. Donc, en gros, cela signifie que si passe à points de données et le mot de passe de confirmation à points de données ne sont pas identiques, nous recevons ce message d'erreur pour notre champ de confirmation du mot de passe, c'est aussi simple que cela. Nous avons donc le schéma prêt. Stockons donc cela dans une variable appelée schéma. Bien. Maintenant, nous devons simplement ajouter ce schéma dans notre formulaire React Hook. Donc, lors de l'utilisation du hook de formulaire, nous ajoutons un objet, et à l'intérieur de celui-ci, nous avons un résolveur, et ici nous appelons ZorrSolver et Maintenant, affichons simplement ces erreurs de validation. Donc, dans ce formulaire d'utilisation, nous obtenons l'état du formulaire, et ici nous pouvons déstructurer les erreurs Maintenant, en dessous de cette entrée de nom, nous ajoutons des paquets Cali, et ici nous ajoutons si le nom du point d' erreur est vrai, puis nous affichons une balise de mise en évidence avec le nom de classe, sous forme d'erreur de soulignement avec le nom de classe, sous forme d'erreur de soulignement Et à l'intérieur de celui-ci, nous ajoutons des erreurs, un point, un nom, un point, un message. Copiez cette condition et collez-la sous tous les autres remplissages d'entrée. Maintenant, pour le courrier électronique, qui dans celui-ci pour les erreurs point e-mail pour mot de passe, qui dans ce pour les erreurs point mot de passe. Pour confirmer le mot de passe, nous le remplaçons des erreurs et des points de confirmation du mot de passe. Enfin, pour l'adresse de livraison, nous la remplaçons par une adresse de livraison à points erronés. Enregistrez les modifications et jetez-y un œil, soumettez un formulaire et vous verrez ici que nous recevons tous les messages de validation. Remplissez maintenant le formulaire complet et cliquez sur Soumettre. Vous voyez, nous obtenons nos données d'entrée. Vous pouvez voir avec quelle rapidité et facilité nous pouvons gérer formulaire et la validation à l'aide du formulaire React et de la bibliothèque ZO. 126. Gérer le téléchargement d'images: Voyons maintenant comment nous pouvons gérer un formulaire avec une image de chargement ou un téléchargement de fichier. Il existe donc plusieurs façons de gérer l'image de la charge. Je veux vous montrer ma méthode préférée et la plus simple. Ici, tout d'abord, nous allons créer une variable d' état en utilisant extraits de code et lui donner un nom, un profil et définir un pic de profil Et comme valeur par défaut, nous passons ici null. En haut, nous devons également importer l'état depuis React. Bien. Maintenant, lorsque nous ajouterons notre image, nous la définirons dans l'état de pointe du profil, comme nous le faisons pour les remplissages d'entrée. Ainsi, dans cette entrée de fichier, nous ajoutons un événement inchangé, et nous obtenons ici l'objet de l'événement, la fonction flèche et définissons le pic du profil. Définissez des fichiers à points cibles. Dans ces fichiers, il se peut que nous ayons une liste de. Ici, nous avons juste besoin de la première image, donc d'un index à zéro. Voyons maintenant ce que nous obtenons dans ce pic de profil. Il suffit d'enregistrer les points de la console, ce profil, d'enregistrer les modifications et d'y jeter un œil Actualisez la page, et d'abord , nous obtenons null, qui est la valeur par défaut. Maintenant, téléchargeons l'image et voyons ici que nous obtenons notre objet fichier, qui possède quelques propriétés telles que le nom, la taille, le type, etc. Ainsi, lorsque nous devons télécharger une image sur le serveur, nous devons envoyer cet objet de fichier à notre backend. Ne vous inquiétez pas, nous verrons cela dans la section suivante. Pour l'instant, concentrons-nous sur la gestion du téléchargement des images. Nous avons réussi à obtenir cet objet image. nous reste plus qu'à afficher l'image que nous avons sélectionnée dans cet aperçu d'image. C'est vraiment simple. Laisse-moi te montrer. Ici, dans la source d'image à la place de cet utilisateur, nous ajoutons ici une condition. Si le pic de profil n'est pas nul, nous allons afficher notre pic de profil, sinon nous nous en tenons à notre image par défaut qui est user. Définissez les modifications, jetez un œil, réprimez la page et téléchargez une image Vous voyez ici que notre image par défaut a disparu, mais nous n'obtenons pas l'image sélectionnée. La raison en est que nous renvoyons simplement notre objet de sélection de profil, qui n'est pas l'image. Nous devons convertir cet objet en image, et comment pouvons-nous le faire simplement en utilisant la méthode creat Object URL Ainsi, aral dot create Object URL est une méthode en JavaScript qui nous permet de créer une URL unique pour un fichier donné Cette URL est utilisée pour afficher une image dans une balise d'image ou pour lire un fichier audio ou vidéo dans Media Player. Notez qu'il ne s'agit que d'une URL temporaire, ce qui signifie que si nous fermons notre page, elle disparaîtra. Donc, à l'endroit de ce pic de profil, nous passons l point create Object URL et à l'intérieur de celui-ci, nous allons transmettre notre objet image, qui est profile Peak, enregistrer les modifications et y jeter un œil. Vous voyez, nous obtenons ici l'image que nous avons sélectionnée. Vous pouvez voir à quel point il est simple et facile de gérer le téléchargement d'images dans React. Maintenant, nous complétons notre section de formulaire avancé. Dans la section suivante, nous allons connecter notre application React au backend que j'ai créé pour ce projet. S dans la section suivante. 127. Section 12 Connexion au backend: Bienvenue dans la douzième section du cours Ultimate React. Dans cette section, nous allons connecter notre application React au backend. J'ai créé ce backend, en particulier pour cette application utilisant nodejs, express Js et MongoDB car avec la plupart des applications React, les développeurs aiment utiliser Ici, je tiens à préciser une chose : nous ne créons pas Bend, car ce n'est pas le but de ce cours et notre objectif principal est d'apprendre à réagir. Dans la leçon suivante, nous allons installer Mongo DB dans notre système, qui est la base de données Si vous avez déjà Mongo Di B dans votre machine, alors, selon ma suggestion, essayez d'installer la dernière version de Mongo Di B. Commençons cette section 128. Installer MongoDB et Compass dans Windows: Installons donc Mongo Di B sous Windows. Si vous avez un Mac, vous pouvez ignorer cette leçon. Alors, tout d'abord, rendez-vous sur mongodib.com et passez en revue ces produits Ensuite, dans Community Edition, sélectionnez Community server. Faites défiler vers le bas. Et ici, nous pouvons sélectionner la version de MongoDB. Dans ma recommandation, veuillez ne pas le modifier. Ensuite, nous pouvons sélectionner notre plate-forme, puis nous pouvons sélectionner le package. Ne t'inquiète pas pour ça. Cliquez simplement sur Télécharger. Découvrez comment le téléchargement démarre. Maintenant, une fois le téléchargement terminé, ouvrez cette configuration et il vous demandera l' autorisation d'installation. Permets-le. Cliquez sur Suivant, acceptez le contrat, cliquez sur Suivant, cliquez sur Terminer. Ensuite, à partir de là, vous pouvez modifier votre chemin d'installation. Mais si vous n'avez aucune raison, ne la changez pas. Cliquez simplement sur Suivant. Assurez-vous de sélectionner cette boussole d' installation MongoDB, qui est l'application pour Mongo DB dans laquelle nous pouvons afficher toutes les tables de base de données et modifier ou supprimer DM Cliquez sur Suivant et installez. Cela prendra environ cinq à dix minutes car nous installons également la boussole Mongo DB Une fois l' installation terminée, vérifions-le. Donc, à l'invite de commande, écrivez Mongo et appuyez sur Entrée. Nous avons cette erreur. Mongo n'est pas reconnu comme une commande interne ou externe Donc, pour résoudre cette erreur, nous devons à nouveau nous rendre site Web de Mongo DB et ici, en haut de la page, produits et outils, SeaCLNW cliquez sur « Et téléchargez-le simplement. Ouvrez maintenant le dossier de téléchargement et le zip à points supplémentaires, que nous avons téléchargés. Ouvrez ce dossier, et dans le dossier Bin, nous obtenons le fichier X de Mongo Copiez donc ceci et ouvrez le lecteur C. Fichiers du programme, serveur MongoDB, bean 6.0, collez-le ici Ces Mongos sont notre cellule MongoDB. nous reste plus qu'à faire une dernière étape, qui consiste à définir le chemin d'accès à la variable d'environnement. Copiez ce chemin dans start, recherchez la variable d'environnement et ouvrez Modifier les variables d'environnement système. Cliquez maintenant sur ces variables d' environnement et dans les variables système, sélectionnez le chemin, puis cliquez sur Modifier. Nous devons maintenant ajouter ce chemin de liaison ici, cliquer sur Nouveau et suivre ce chemin. Cliquez sur OK. OK, et OK. Redémarrez votre invite de commande et ouvrez-la à nouveau. Juste ici, Mongos et appuyez sur Entrée. Nous allons obtenir la cellule Mongo Di B, nous avons donc installé avec succès Mongo Di B dans notre système Maintenant, permettez-moi de vous donner un bref aperçu de la boussole Mongo DiMe Ainsi, lorsque nous ouvrons cette application pour la première fois, nous devons entrer notre chaîne de connexion, qui est Local host. Écrivez donc cette chaîne de connexion, que j'écris, puis cliquez sur Se connecter Vous voyez, ici, nous obtenons toutes nos bases de données et nos tables. 129. Configurer le backend: Après avoir installé MongoDB et Mongo DB compass dans notre système, il est temps de configurer notre backend et de remplir les données dans la base de données Maintenant, vous vous demandez peut-être quel est le besoin de ce backend et pourquoi nous ajoutons des données dans notre base de données Nous avons donc vu précédemment comment appeler une API publique dans React. Mais lorsque nous créons un site Web pour une entreprise, de nombreuses entreprises ont leur propre backend J'ai donc créé ce backend pour notre application, et seul le backend n' est pas nécessaire Nous devons stocker les données de nos produits et les données des utilisateurs dans notre base de données. Nous pouvons donc obtenir ces données et les afficher sur notre application. Actuellement, dans notre boussole Mongo Di B, nous pouvons voir que nous n'avons qu'une base de données générée par le système Nous devons ajouter les nôtres. Ouvrez le dossier des ressources et dans le dossier Project Three, nous avons le backend de Cartwis Ouvrez-le et ouvrez-le dans le code VS. Désormais, vous n'avez plus à vous soucier de quoi que ce soit à l'intérieur de ce backend. Fais comme moi et tu es prête à partir. Donc, tout d'abord, nous devons installer tous les packages. Ouvrez donc le terminal et écrivez NPM install et appuyez sur Entrée. Maintenant, dans ce point de données JSNFle, j'ajoute des données pour les produits et Donc, pour remplir ces données dans notre base de données, il suffit d'écrire ici les produits du nœud, le fichier point js, et d'appuyer sur Entrée. Et voyez ici, la base de données est remplie ou restaurée avec succès. Vérifions-le. Passez à Mongodi, nous faisons une boussole et actualisons la base de données Et ici, nous pouvons voir la base de données Catews. Ouvrez-le et dans cette base de données, nous n'avons actuellement que deux tables, catégories et produits. Ouvrez le, et nous obtenons ici les données de ces catégories. Et si nous ouvrons des produits, nous obtenons des données sur les produits. À partir de là, nous pouvons consulter, mettre à jour et supprimer ces enregistrements. Nous pouvons maintenant minimiser cette boussole Mongo D B et dans notre code Ben VS, nous exécutons node index point js et appuyons C, nous obtenons que le serveur fonctionne sur le port 5 000 et qu' il est également connecté à la base de données. Vérifions que cette API fonctionne ou non. Ouvrez un nouvel onglet dans le navigateur et dans l'URL, écrivez la colonne 5 000 de l'hôte local car notre backend fonctionne sur la catégorie d' API de l'hôte local 5 000 , puis appuyez sur Entrée voyez, nous avons ici ce tableau de toutes les catégories, donc ça marche. Ne fermez pas ce terminal. Sans que ce terminal ne fonctionne. Nous ne pouvons pas connecter notre application React à Ben. Assurez-vous donc qu'il fonctionne pendant que nous effectuons des appels d'API. 130. Implémenter le routage dans notre application: Maintenant, avant de commencer à appliquer des correctifs aux données, implémentons le routage dans notre application, car nous devons actuellement ajouter manuellement composants dans notre composant d'application Ouvrez donc le terminal et dans le nouveau terminal, nous écrivons NPM, installons, réagissons le routeur Dom à 6.11 0.2 et appuyons sur Bien, réduisez ce terminal. Maintenant, quelle est la première étape pour appliquer le routage ? Bien, nous devons encapsuler notre application avec un composant de routeur de navigateur. Ouvrez donc le composant principal, et en haut, nous importons le routeur du navigateur depuis React Router Doom et enveloppons notre composant d'application avec le composant du routeur du navigateur Enregistrez les modifications et ouvrez maintenant le composant de l'application. Nous avons ici toutes les pages que nous avons créées, et c'est pourquoi je vous ai demandé de commenter ces pages ici, afin de ne pas oublier d' ajouter un composant de page. Définissons également tous les itinéraires dans un composant distinct. Sinon, notre code deviendra moche. Dans le dossier des composants, nous ajoutons un autre dossier appelé routage, et à l'intérieur de ce routage, nous créons un nouveau composant appelé point de routage JSX Ajoutons ici un modèle standard, et en haut, nous importons, tout d'abord, nous importons, tout d'abord, itinéraires et les itinéraires depuis React Supprimons maintenant cela et ajoutons ici le composant routes. Et à l'intérieur de ces itinéraires, nous pouvons ajouter notre composant d' itinéraire unique. Mais avant cela, ajoutons toutes les importations depuis le composant de l'application. Ici, nous coupons toutes ces importations et les collons dans notre composant de routage. Bien. Définissons maintenant l'itinéraire. Donc, tout d'abord, acheminez le chemin vers la barre oblique, qui est la page d'accueil et l'élément vers la page d'accueil Ensuite, nous ajoutons un autre chemin de route pour produits et un élément vers la page des produits Maintenant, dupliquez cet itinéraire cinq fois de plus. Et ici, nous ajoutons un chemin pour couper les produits et un élément vers une page de produit unique Ensuite, nous avons le chemin pour vous inscrire et l'élément pour accéder à la page d'inscription. Ensuite, nous avons le chemin vers la connexion et l'élément vers la page de connexion. Ensuite, nous ajoutons un chemin vers le panier, un élément vers la page du panier. Enfin, nous avions un chemin vers mes commandes et un élément vers ma page de commande. Enregistrez les modifications et définissons ce composant de routage dans notre composant d'application. Supprimez donc toutes ces pages et ajoutez simplement ici un composant de routage. En tant que développeur, à mon humble avis, vous devriez toujours essayer d' adopter une approche étape par étape. N'essayez pas d'implémenter toutes les fonctionnalités ou tâches en une seule fois. En faisant cela, vous êtes moins bloqué et vous pouvez penser plus clairement. Enregistrez les modifications et voyons comment le routage fonctionne ou non. Vous voyez, nous recevons une erreur. C'est parce que nous empruntons le mauvais chemin. Ainsi, dans le composant de routage à la place des composants de cette tranche de période, nous devons ajouter un double point. Sélectionnez cette option et appuyez sur Ctrl plus D ou Commande plus D pour modifier plusieurs curseurs et ajoutez ici un point. Dites les modifications et jetez-y un coup d'œil. Vous voyez, nous avons ici notre page d'accueil. Maintenant, cliquez sur la page Produits et voyez, nous obtenons la page des produits, donc ça marche. Mais nous devons remplacer ces liens par le composant NewLink Donc p Jamais de composant, nous avons tous ces liens en lien avec composant icône et celui-ci dans la balise d'ancrage ici. Remplaçons donc cet ancrage au composant Newlin et remplaçons HRF Enregistrez ceci et à l'encre avec le composant icône, nous remplaçons l'ancre par le composant Newlin et le HRF 22 Vous pouvez voir avec quelle facilité nous pouvons modifier notre code. C'est pourquoi nous stockons ce lien dans un composant séparé. Enregistrez ceci, et ajoutons du CSS pour le lien actif. Donc, dans le fichier CSS à points Navbar, ici, nous ajoutons des encres NabarUnderscoe à points, un crochet angulaire, une ancre, des crochets Active Coli à points, et nous fixons Dites les modifications et jetez-y un coup d'œil. Changez de page et voyez ici notre routage. 131. Récupérer des produits: Maintenant, appelons notre première API pour obtenir la liste de tous les produits. Et pour appeler l'API, nous utiliserons Axos, ouvrirons le terminal, écrirons NPM install xOS et NPM install xOS et Minimisez ce terminal et définissons d'abord l' URL de base de notre API pour chaque requête. Ainsi, dans le dossier source, nous créons un nouveau dossier appelé Utils et à l'intérieur de ce dossier, nous créons un nouveau fichier appelé api Client Js C'est pour créer StdprQuest en utilisant Xos. N'oubliez pas que nous l'avons déjà créé. Dans ce fichier, nous saisissons Xos depuis xOS, puis nous écrivons Xos point RET pour passer ici notre Dans cet objet, nous avons une propriété URL de base. Et ici, nous pouvons transmettre notre URL de base. Ici, notre URL de base est la colonne SDDP, l'hôte local à double barre oblique, l'API de la colonne 5 000 barres colonne 5 000 Maintenant, nous pouvons également transmettre nos en-têtes d'API que vous souhaitez envoyer avec notre demande d'API Encore une fois, cela dépend de l'API. Si vous êtes développeur front-end, tous les détails de l'API sont fournis par les développeurs backend Tu n'as pas à t'inquiéter à ce sujet. Je vais lier notre documentation API dans le dossier des ressources, ou vous pouvez la télécharger à partir de pièces jointes. Exportons-le maintenant par défaut. Sauvegardez ceci. Et maintenant, lorsque nous voulons faire une demande d' API avec AXIOS, nous saisissons simplement ce client d'API et faisons la même chose qu' avec le xOS original Ainsi, lorsqu'il s'agit d'une page produit, nous devons décider ici où nous devons appeler l'API pour les produits. Ainsi, dans notre composant de liste de produits, nous affichons tous nos produits. Nous pouvons donc appeler notre API ici. Donc, tout d'abord, dans ce composant, nous devons créer une variable d'état pour stocker la liste des produits. Donc, écrivez use et appuyez sur tab pour importer ust et écrivez-nous des extraits et donnez-lui un nom, des produits, des produits définis, et comme valeur par défaut, nous passons ici un tableau vide Maintenant, créez également une autre variable d'état appelée erreur et définissez les erreurs. Et comme valeur par défaut, nous passons une chaîne vide. Maintenant, dans quel hook nous appelons l'API de nos produits, nous appelons notre API in use effect hook parce que nous avons besoin d'obtenir des données lorsque le composant est abandonné. Donc, utilisez l'effet et à l'intérieur, fonction de rappel et le deuxième paramètre concernent le tableau de dépendances Appelons maintenant notre API. En haut, nous importons le client API, qui est simplement défini à partir du client API Utils Maintenant, ajoutons ici le point du client API. Maintenant, à l'intérieur de ce point, nous passons notre URL, qui est Slash Products Cette expression renvoie une promesse. Alors, réponse, fonction flèche, produits définis. Maintenant, nous devons transmettre notre gamme de produits. Donc, pour vérifier cette réponse, ouvrez un nouvel onglet dans le navigateur et écrivez notre méthode GAT. Hôte local, colonne 5 000 API, barre oblique les produits et appuyez sur Entrée Et voyez ici, nous obtenons cet objet de réponse avec un tas de propriétés. Pour l'instant, ne nous en inquiétons pas. Nous n'effectuons qu'une seule tâche à la fois. Revenons donc au code VS, et ici nous transmettons les données des points de réponse, qui sont notre objet, et nous obtenons ici des produits à points. Maintenant, pour gérer les erreurs, nous ajoutons la méthode de capture, et ici nous obtenons une erreur, une fonction d'erreur, et nous définissons l'erreur sur le message d'erreur. Voyons maintenant si nous obtenons les données de nos produits ou non. Enregistrez les modifications et revenez à notre application. Ouvrez les outils de développement et ouvrez l'étape des composants ici. Recherchez la liste des produits, et nous obtenons ici notre liste de produits. Sélectionnez le et voyez dans cet état, nous obtenons notre gamme de produits qui compte huit produits, donc elle fonctionne. Maintenant, affichons ces produits sur une carte. Ainsi, à la place des multiples fiches produits, nous, chez products point MAP, nous obtenons un produit unique, une fonction d'erreur, et nous renvoyons simplement le composant du produit, oublier d'ajouter un attribut clé à l'identifiant du point de soulignement du produit, qui est l' identifiant unique pour tous les produits Enregistrez les NG et jetez-y un coup d'œil. Vous voyez, nous avons ici une carte de huit produits. Gérons l'erreur pour cette demande d'API. Avant cette liste de produits, nous ajoutons donc une condition. Si une erreur est disponible, nous l'imprimons ici. Mettez donc l'accent sur le tag et donnez-lui un nom de classe en cas d'erreur. Et nous ajoutons ici cette erreur. Maintenant, générons une erreur. Donc, à la place de cette URL d' API, nous faisons une faute de frappe, enregistrons les modifications, jetons un coup d'œil, supprimons la page et voyons ici que nous obtenons cette erreur Parfait Supprimons cette faute de frappe Dans la leçon suivante, nous allons dynamiser le composant de notre fiche produit. 132. Rendre une carte de produit dynamique: Maintenant, rendons notre composant de fiche produit dynamique, ouvrons un seul objet de produit, juste pour voir ce qu'il contient. Ici, nous avons des critiques, que nous affichons ici, identifiant du trait de soulignement, l'image du titre est un tableau Nous n'avons pas besoin d'un tableau, nous n'avons besoin que de la première image pour l'affiche. Maintenant, après cela, nous avons le prix et le stock. Donc, un composant de carte produit, et ici, nous ajoutons d' abord tous les accessoires dont nous avons besoin dans ce composant Fixez les accessoires de la structure. Nous obtenons d'abord un identifiant, puis des images. Ensuite, il nous faut un prix. Ensuite, le titre, la note, les notes comptent, et enfin, nous avons besoin de stock. Remplaçons maintenant les valeurs statiques par ces accessoires. À la place de cet iPhone, nous ajoutons une image. Après cela, nous ajoutons ici le prix. Ensuite, nous ajoutons ici le titre. Après cela, l'évaluation et ici, la note compte. Nous n'allons maintenant afficher ce bouton tête vers la carte que si le stock est supérieur à zéro. Regardez donc comme ce bouton et appuyez sur le crochet bouclé gauche. Cela placera notre code entre crochets CLI. Si vous appuyez sur les culi droits, ce code sera remplacé par les culi droits Ici, nous passons la condition. Si le stock est supérieur à zéro, n' affichez que ce bouton tête vers la carte. Maintenant, en haut de la page, désolé, nous avons oublié d'ajouter l' identifiant du produit dans ce lien. Nous supprimons donc cette balise d'ancrage et ajoutons ici un nouveau lien ou un nouveau composant de lien et un attribut aux crochets bouclés, Batak, slash product, slash Nous en avons donc terminé avec le composant de la fiche produit. Il ne nous reste plus qu'à passer ces accessoires à la fiche produit. Donc, en haut, nous supprimons cette importation d'image, enregistrons ce fichier, ouvrons le composant de liste de produits. Ici, après cette clé, nous passons l'ID au point de soulignement du produit, l'image à l'image du point du produit et nous obtenons ici la première image Prix par produit, prix par point, titre par produit, titre, note par produit par point par rapport au taux de rotation par points Nombre de points notés par rapport au produit par rapport au nombre de points. Et du stock au produit, point Stock. Enregistrez les modifications et jetez-y un œil. Vous voyez ici, nous obtenons tous les détails, mais nous n'obtenons pas d'image. Voyons pourquoi nous n'obtenons pas cette image. Cliquez avec le bouton droit sur l'image, sélectionnez l'image, ouvrez ce DU et dans la balise Anchor, nous avons notre image. Ici, nous pouvons voir que nous ne transmettons que le nom de l'image dans la source. Nous devons transmettre l'URL de l'image ici. J'avais déjà des détails à ce sujet dans la documentation de l'API. Ainsi, dans notre composant de fiche produit, à la place de cette image, Bates, nous ajoutons ici HTTP, colonne double pour notre barre oblique, Local host, colonne Slash products slash Ici, nous ajoutons le nom de l'image de notre produit. Donc, image du dollar, définissez les modifications et jetez-y un coup d'œil. Vous voyez ici que nous obtenons notre image. 133. Récupérer des catégories: Récupérons maintenant toutes les catégories et affichons-les dans cette barre latérale. Donc, sur le composant de la barre latérale des produits, et ici nous faisons également de même pour récupérer les données Tout d'abord, nous créons une variable State en utilisant ust Hook et lui donnons un nom, catégories et définissons des catégories. Et par défaut, nous passons un tableau vide. Ensuite, nous créons une autre variable d'état appelée errors et set errors, et nous passons une chaîne vide comme valeur par défaut. Appelons maintenant notre API in use effect hook. Donc, utilisez l'effet, et à l'intérieur de celui-ci, nous ajoutons une fonction de rappel, et ici nous ajoutons simplement un tableau vide comme dépendance Maintenant, en haut, importons le client API pour appeler l'API. Nous passons ici à Fullers Up, Utils et client API. Bien. Nous appelons maintenant ici la méthode point Get du client API. Nous transmettons ici l'URL de notre API, qui est la catégorie slash et nous savons que cette expression renvoie une promesse Nous gérons les promesses avec cette méthode. Ici, nous obtenons une réponse, une fonction de flèche et définissons des catégories pour répondre aux données par points. Maintenant, pour gérer les erreurs, nous ajoutons une méthode de cache. Ici, nous obtenons une erreur, une fonction d'erreur, et nous définissons erreur sur message d'erreur. Conservez les charnières et jetez-y un coup d'œil. Ouvrez les outils de développement et ouvrez l'onglet des composants. Recherchez ici la barre latérale des produits et voyez ici nos catégories. Maintenant, affichons-les sur notre page. Revenons donc au code VS. Et ici nous ajoutons les catégories point MAP. À l'intérieur de ceux-ci, nous obtenons une fonction d'erreur à catégorie unique, et nous coupons simplement ce lien avec composant icône et le renvoyons ici. Et avant d'oublier, ajoutons Key equals à l'ID de soulignement de la catégorie Nous changeons maintenant notre titre en nom de point de catégorie. Et nous enroulons notre lien avec des crochets Cali et nous le changeons en Batis et à la place de cet électronique, nous ajoutons simplement des crochets Cali en dollars, le nom du point de la catégorie Maintenant, à la place de cette image E, nous passons l'URL de notre image. Donc, dans les taxes, STDP, colonne double quatre, barre oblique, hôte local, colonne 5 000, catégorie, barre oblique et nous ajoutons ici notre Donc, catégorie : image à points. Enregistrez les modifications et jetez-y un œil. Vous voyez, voici nos catégories. Maintenant, affichons l'erreur. Avant notre liste de catégories, nous ajoutons une condition. Si une erreur est disponible, imprimez l'erreur dans balise d' emphase et le nom de la classe pour former une erreur, et nous ajoutons simplement ici une erreur. Maintenant, faisons une faute de frappe, enregistrons les modifications, jetons un coup d'œil, actualisons la page et voyons où se trouve notre erreur Supprimez cette faute de frappe et voyez que nous obtenons nos catégories. 134. Créer un crochet personnalisé: Maintenant, comme nous pouvons le constater, la récupération des produits et la récupération des catégories sont presque les mêmes La seule différence, c'est qu'il s'agit d'une PIURL. Nous pouvons donc créer notre propre crochet personnalisé, que nous pouvons utiliser pour presque tous les détails de récupération Certains développeurs pensent que les hooks personnalisés sont un concept effrayant, mais c'est vraiment simple. Les crochets personnalisés sont donc essentiellement une fonction réutilisable. En termes simples, les hooks personnalisés sont nos propres crochets que nous créons pour notre propre usage, et nous pouvons les utiliser plusieurs fois dans notre projet. Permettez-moi de vous montrer qu'ici, dans le dossier source, nous créons un autre dossier appelé Hooks. Maintenant, dans ce dossier, nous créons un nouveau fichier appelé sedata point js Maintenant, vous pourriez vous demander pourquoi j'utilise ici l' extension point js au lieu de point JSX Donc, la raison pour laquelle j'utilise l'extension hear point js est que dans ce hook personnalisé, nous n'allons utiliser aucun JSX Nous allons écrire notre logique en JavaScript brut. Définissons un code standard et supprimons cette Nous ne voulons pas renvoyer JSX ici. Maintenant, pour ce qui est de notre produit , nous coupons les variables de date, utilisons le crochet d'effet à partir d' ici et le collons dans notre composant de crochet personnalisé. Maintenant, en haut, nous importons l'effet d'utilisation et l'avons utilisé comme crochet. Et également le client d'API d'entrée à partir du client d'API Utils. Maintenant que nous utilisons ce hook personnalisé pour obtenir des données depuis l'API, il est préférable de renommer le nom de cette variable de données en data Alors regardez comme ces catégories et appuyez sur F deux, ici, sur les données. Et renommez également ces catégories définies pour définir des données. Et ici, nous passons null comme valeur par défaut car nous n'utilisons pas ces données pour stocker uniquement un tableau. Nous pouvons également stocker un objet dans ces données. Il ne nous reste plus qu'à modifier cette URL d'API. Nous remplaçons donc cette URL par une variable d'URL, et nous obtenons également cette variable d'URL en tant que paramètre. Bien. Maintenant, à partir de cette fonction de crochet personnalisée, nous renvoyons simplement des données et des variables d'erreur. Enregistrez ce fichier et dans le composant de la barre latérale du produit, ici, nous appelons simplement notre hook personnalisé, utilisons les données et transmettons notre point de terminaison, qui est la catégorie Slash Maintenant, ce hook renvoie un objet avec des données et une erreur. Nous pouvons donc déstructurer cet objet et obtenir ici des données et des erreurs Nous pouvons également renommer ces données en catégories. Et ici, avant notre fonction cartographique, nous ajoutons une condition si les catégories ne sont pas nulles, puis nous exécutons cette fonction cartographique car la valeur par défaut de ces données est nulle, et nous ne voulons pas exécuter la méthode map pour null. Cela peut nous donner une erreur. Supprimons maintenant ces importations indésirables, sélectionnons l'importation que vous souhaitez supprimer et appuyez sur Ctrl plus période ou Commande plus période et sélectionnez Supprimer toutes les importations inutilisées. Tu vois, toutes les importations indésirables ont disparu. Supprimons également ceci. Enregistrez les gènes et jetez-y un coup d'œil. Vous voyez, nous obtenons le même résultat qu'avant. Utilisons maintenant notre crochet personnalisé pour obtenir les données des produits. Donc, un composant de liste de produits supprimez ces variables et utilisez Effect Hook. Et ici, nous appelons use data hook et pass and point to slice products. renverra des données et une erreur, et nous pourrons renommer ces données en produits Et nous pouvons également ajouter ici une condition si les produits ne sont pas nuls, puis exécuter cette méthode cartographique. Enfin, nous supprimons toutes ces importations indésirables et supprimons également ces crochets Enregistrez les modifications et nous obtenons une erreur. Ouvrons la console et voyons ici que nous obtenons des produits. La carte des points ne fonctionne pas car dans notre crochet d'utilisation, nous stockons nos données de points de réponse dans cette fonction de données définie. Mais à partir de l'API des produits, nous obtenons un objet de réponse avec quelques propriétés. Tu te souviens, laisse-moi te montrer. Il suffit donc de consulter le journal à points de ces produits ici. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous obtenons ici cet objet de données. Et dans cet objet, nous avons un tableau de produits. Nous pouvons donc utiliser les produits here data point, ou nous pouvons restructurer cet objet de données et obtenir des produits Je pense que la restructuration est un peu confuse pour nous. Supprimons cela maintenant en haut, nous transformons ces produits en produits à points de données et également ici en produits à points de données. Et en haut, nous nous contentons données du journal par points à partir de ces données. Enregistrez les modifications et jetez-y un œil. Actuellement, nous recevons nos produits. Actualisons maintenant la page et voyons que nous recevons une erreur. les outils de développement W et dans la console, nous recevons l'erreur, impossible de lire la propriété de null. Voyons ce qui se passe ici. Tout d'abord, dans notre use data hook, nous passons null comme valeur par défaut. Maintenant, au moment où nos données sont nulles, dans cette condition, nous essayons d'accéder aux produits data point, et c'est la raison pour laquelle nous recevons cette erreur. Ensuite, en récupérant les données depuis le back-end, nous les obtenons dans notre console Pour cela, nous pouvons mettre chaînage optionnel dans cette condition. Donc, si les produits Data Question Point Point sont disponibles, exécutez cette boucle uniquement. Les modifications et jetez-y un coup d'œil. Vous voyez, maintenant notre code fonctionne bien. Vous pouvez donc voir comment nous pouvons résoudre une erreur en la divisant simplement en une petite partie. Tout d'abord, nous devons savoir pourquoi nous obtenons cette erreur, puis nous devons trouver la meilleure solution pour cela. Ne paniquez pas en voyant des erreurs. Des erreurs se produiront toujours. Tout dépend de vous, de la façon dont vous le gérez. 135. Ajouter un squelette de chargement: Maintenant, notre page produit fonctionne correctement. Nous avons une bonne connexion Internet et nous obtenons également des données du serveur local. Nous obtenons donc des données très rapidement. Mais imaginez si la connexion utilisateur est lente ou si notre serveur prend du temps, alors cette page produit n'est pas belle. Laisse-moi te montrer. Ouvrez la console et nous arrivons à un avertissement. Voyons voir si la clé est manquante. Donc, côté produit mais composant dans ce lien avec le composant icône en haut, nous ajoutons un attribut clé et passons ici l'ID de soulignement par point de catégorie Enregistrez ceci et voyez ici que l'avertissement a disparu. Ouvrez maintenant l'onglet Réseau, et ici nous sélectionnons la troisième étape G. Actualisez la page. Et ici, nous pouvons voir qu'il ne faut pas bien paraître sans montrer le squelette de chargement pendant le chargement On dirait. Vous pouvez voir presque tous les sites Web modernes ont ces squelettes de chargement Créons donc d'abord ce squelette de chargement. Dans notre dossier de produits, nous créons donc un nouveau composant appelé product card skeleton point JSX Définissons le code de mise à jour. Maintenant, pour créer un squelette, nous pouvons utiliser le CSS ou la bibliothèque. Le choix vous appartient. Que souhaitez-vous utiliser ? J'aime utiliser la bibliothèque parce qu'elle est facile à utiliser. Si vous souhaitez créer un squelette à partir de zéro, vous pouvez regarder ces didacticiels. Je vais déposer le lien dans le dossier Ressources. Et dans le nouveau terminal, cliquez avec le bouton droit sur le squelette de chargement de NPM et appuyez sur Entrée Bien. Maintenant, en haut, nous importons le squelette depuis la bibliothèque de squelettes de chargement de React. Et ensuite, ce dossier. Il ajoutera donc des tuiles CSS pour ce composant squelette. Importez donc le squelette de chargement de la lecture, distez le squelette, le point du squelette, le CSS Maintenant, à partir de ce composant, nous renvoyons simplement ce composant squelette, et voyons ce que nous obtenons. Sauvegardez ceci. Et dans notre liste de produits, dans cette matrice de liste de produits, nous ajoutons notre nouveau squelette de carte de produits. Enregistrez les modifications et jetez-y un œil. voyez, ici, nous avons une petite zone de squelette de chargement, mais nous ne pouvons pas la voir. Donc, pour l'agrandir, nous devons ajouter des styles pour ce composant squelette. Pour en revenir à notre composant squelette, nous pouvons ajouter ici des styles, et nous pouvons également ajouter une classe afin d'ajouter nom de la classe à la carte de soulignement du produit Et pour ce squelette, nous devons ajouter de la largeur en externe car par défaut, c'est squelette, ajoutez de la largeur à 200 % Laisse-moi te montrer. Enregistrez ceci et voyez ici que nous obtenons toutes les autres propriétés, mais pas la largeur. Vous pouvez le vérifier en inspectant. Revenons donc à notre composant et ajoutez-le ici avec 275 pixels. Enregistrez les modifications et jetez-y un œil. voyez, nous avons ici ce squelette, identique à une carte de produit. Ajoutons maintenant plusieurs squelettes de chargement. Dans le composant de liste de produits, nous pouvons dupliquer ce squelette plusieurs fois, mais c'est une mauvaise pratique. Donc, en haut, supprimez ce journal, et ici nous créons un tableau appelé squelettes et nous en passons un, deux, trois, quatre, cinq, six, sept et huit Maintenant, dans notre JSX, nous ajoutons des squelettes Ici, nous obtenons chaque numéro et renvoyons simplement le squelette de cette fiche produit. Et passe ici, la clé est égale à un chiffre. Enregistrez les modifications et jetez-y un œil. Vous voyez, ici, nous avons huit cartes de chargement. Vendons maintenant la logique de chargement. Ainsi, dans notre hook d'utilisation des données, nous créons une nouvelle variable d'état call is loading et set is loading. Et comme valeur par défaut, nous l'avons définie sur false. Maintenant, avant d' appeler notre API, nous définissons simplement E loading sur true. Et une fois que nous avons obtenu nos données ici dans la méthode, nous ajoutons le bloc Cd, et nous définissons ici le chargement sur false. De plus, nous définissons le chargement de Es sur false si nous obtenons une erreur. Ajoutez donc ici un bloc de code et définissez le chargement E sur false. Bien. Maintenant, nous pouvons simplement renvoyer chargement d' Es à partir d'ici afin que nous puissions y accéder dans nos composants. Enregistrez les modifications, et dans le composant de liste de produits en haut, nous déstructurons la propriété de chargement Et ici, nous passons simplement la condition si le chargement est vrai, qu'alors que nous montrons ces squelettes Enregistrez les modifications et jetez-y un œil, actualisez la page et voyez quel point elle est belle avec ce chargement en squelette. C'est ainsi que les petites fonctionnalités ajoutent plus d'impact sur l'expérience utilisateur. 136. Trouver des produits par catégorie: Maintenant, nous avons actuellement données de nos produits ainsi que les catégories. Maintenant, lorsque nous cliquons sur une catégorie, nous voulons récupérer les produits correspondant à cette catégorie. Je pense que nous nous sommes trompés dans ce lien. Revenons donc au code VS et dans le composant de la barre latérale du produit ici sur ce lien, nous devons ajouter des produits slash Si nous n'ajoutons que des produits, ce lien sera ajouté dans l'URL actuelle de cette manière. N'oubliez donc pas d'ajouter cette barre oblique. Enregistrez ceci et revenez à notre page, cliquez sur la catégorie. Vous voyez qu'il ajoute une chaîne de requête. Nous voulons maintenant récupérer les produits de cette catégorie. Revenons donc au composant de la liste des produits, et en haut de notre demande d'API, nous devons simplement transmettre la catégorie comme paramètre de requête. Vous pouvez maintenant vous demander comment nous pouvons transmettre le paramètre de requête. Il y a donc deux manières de le faire. Nous pouvons simplement transmettre notre catégorie dans notre point de terminaison comme ceci. Ou nous pouvons transmettre l'objet Configure dans ce crochet de données d'utilisation. Le choix vous appartient entièrement. Personnellement, j'aime transmettre un objet de configuration car pour l'instant, nous devons uniquement transmettre le paramètre de requête. Mais si à l'avenir, nous voulons transmettre quelque chose de plus, alors nous devons certainement utiliser un objet de configuration, et à ce moment-là, notre code est foiré Il est donc préférable d'utiliser un objet de configuration. Ainsi, dans ce hook use data, nous passons l'objet au deuxième argument, et à l'intérieur de celui-ci, nous passons params, qui est l'objet, et ici nous pouvons transmettre tous les paramètres de notre requête Donc, pour le moment, catégorie deux, passons aux ordinateurs portables. Nous devons maintenant ajouter cet objet dans notre hook d'utilisation des données. Enregistrez ce fichier et ouvrez-nous le fichier data point js. Et ici, nous obtenons l'objet Configure, que nous appelons une configuration personnalisée. Ici aussi, nous changeons le nom de ce paramètre d'URL en endpoint. Je pense que cela pourrait être plus précis. Maintenant, nous changeons cette URL en point de terminaison et passons simplement notre objet de configuration personnalisé ici. C'est aussi simple que ça. Dites les modifications et jetez-y un coup d'œil. Vous voyez, ici, nous n'avons que les détails de l'ordinateur portable. Maintenant, dans notre composant de liste de produits, si nous passons ici les smartphones, nous n'obtenons que les données des smartphones. Nous avons donc réussi à transmettre la chaîne de requête de catégorie dans notre appel d'API. Maintenant, à la place de cette valeur codée en dur, nous devons passer la catégorie de l'URL. Vous souvenez-vous comment nous obtenons la chaîne de requête ? Hein ? Nous utilisons des paramètres de recherche Nous les avons vus dans la section de routage. Nous ajoutons donc ici les paramètres de recherche d'utilisation, ce qui renverra tous les paramètres de requête Donc, les inconvénients du tableau, et ici nous obtenons la recherche et définissons la recherche. Récupérons la chaîne de requête de catégorie à partir de cette recherche. La catégorie Const est donc égale au point de recherche gt. Et ici, nous passons le nom de notre chaîne de requête , qui est la catégorie. Maintenant, à la place de ces smartphones, nous ajoutons une variable de catégorie. Nous pouvons également supprimer cette catégorie. Pourquoi ? Parce que le nom et la valeur sont identiques. Enregistrez les modifications et jetez-y un œil. Actualisez la page et voyez, nous avons ici nos consoles de jeu. Si vous optez pour un casque, actualisez la page. Vous voyez, nous avons ici tous les casques audio. Cela fonctionne donc, mais nous devons actualiser chaque fois que nous changeons de catégorie, et ce n'est pas une bonne chose. Alors réglons ce problème. Donc, ici, nous devons passer cette catégorie en tant que dépendance dans nôtre. Dans ce hook de données d'utilisation, nous passons le tableau de dépendances au troisième paramètre et ajoutons ici la catégorie parce que nous voulons rappeler l'effet d'utilisation lorsque la catégorie changera. Dites ceci et lors de l'utilisation du data hook, nous obtenons d'abord le tableau de dépendances sous forme de deps et à la place de ce tableau vide, nous passons des deps Maintenant, si nous n'adhérons qu'aux deps, alors dans toutes les fonctions de données utilisateur, nous devons transmettre un tableau de dépendances, ce que nous ne voulons pas, n'est-ce Donc, ici, nous avons simplement posé une condition. Si deps est disponible, alors seulement ajoutez des deps, sinon, nous ajoutons un tableau vide, c'est aussi simple que Enregistrez les modifications et jetez-y un œil. Vous voyez, maintenant nous n'avons pas besoin de rafraîchir notre page. Nous pouvons naviguer de catégorie en catégorie. 137. Pagination: Actuellement, nous ne recevons que huit produits, mais dans la base de données, nous avons 24 détails sur les produits. Pourquoi je ne renvoie que huit données du serveur ? C'est parce qu'il s'agit d'une technique qui permet de réduire la charge de données dans l'API. Laissez-moi vous expliquer pourquoi. Actuellement, notre application est très petite. 24 données, ce n'est pas grave. Mais imaginez qu'au fur et à mesure que notre application se développe, nous puissions avoir 1 000 ou 10 000 produits comme Amazon. Donc, à ce moment-là, si nous obtenons tous les détails du produit en un seul appel d'API, cela prendra plus de temps, et cela n'offrira pas une meilleure expérience utilisateur. Ainsi, au lieu d'obtenir toutes les données en une seule demande, nous, les développeurs, les divisons en pages, comme si nous n'obtenions que huit ou dix données en une seule demande. Si l'utilisateur a besoin de plus de données, nous récupérons les dix données suivantes Voici donc la page d'initiation que nous allons créer. Sur la première page, nous n'avons que huit enregistrements. Ensuite, lorsque nous cliquons sur la deuxième page, nous obtiendrons les huit données suivantes, c'est aussi simple que cela. Jusqu'à présent, pour récupérer d'autres données de page, nous devons transmettre uniquement la chaîne de demande de paramètres de page et définir ce numéro de page. Laisse-moi te montrer. Rendez-vous donc sur la page des produits. Vous pouvez noter ces produits. Et maintenant, dans notre sujet Param, nous ajoutons une page, disons deux Enregistrez les modifications et jetez-y un œil. Vous pouvez voir ici que nous obtenons huit autres données sur les produits. Si nous passons de la page à trois, nous obtenons d'autres données sur les produits. Maintenant, au moment de configurer cette page codée en dur, nous pouvons également les obtenir dans notre chaîne de requête. Nous écrivons donc ici Cs page equals to search dot get. Et ici, nous passons le nom de notre paramètre, qui est page. Nous pouvons donc maintenant définir la page sur cette page. Et pour simplifier, nous pouvons supprimer cette page. N'oubliez pas de transmettre la page dans ce tableau de dépendances. Sinon, lorsque nous modifierons le numéro de page, l'effet d'utilisation ne sera pas exécuté. Sauvegardez ceci. Voyons maintenant comment définir le numéro de page dans notre chaîne de requête. Donc pour cela, nous avons défini ici la fonction de recherche. Donc, pour Démonstration temporaire, nous créons un bouton sous cette liste de produits appelé page deux. Et lors d'un clic sur un bouton, nous passons la fonction flèche, et ici nous appelons gérer le changement de page. Et transmettez ici notre numéro de page, qui est deux. Maintenant, dans cette fonction, nous allons écrire notre logique de page et définir le paramètre de page à ce numéro de page. Définissons cette fonction en haut. Alors const, gère le changement de page. Ici, nous obtenons notre page en tant que paramètre, fonction flèche, et à l'intérieur de celle-ci, nous définissons simplement la recherche sur l'objet, la page sur cette page. Voyons voir si cela fonctionne ou non. Retournez à la page des produits et cliquez sur cette page pour cliquer sur le bouton. voyez, nous obtenons les données de la deuxième page, et dans notre URL, nous pouvons également voir la page deux. Maintenant, voici un petit bug, sélectionnez n'importe quelle catégorie puis cliquez sur cette page pour cliquer sur le bouton. Et voilà, nous sommes de nouveau sur notre page de produits simples avec la page deux. Vous pouvez le vérifier en consultant cette URL. voyez, lorsque nous cliquons sur n'importe quelle catégorie, nous avons une catégorie dans notre URL, et lorsque nous cliquons sur le bouton Page, notre catégorie disparaît et nous n'obtenons que la page deux. Pourquoi cela se produit, vérifions-le. Ainsi, dans notre fonction de changement de page d'accueil, nous avons défini Surge sur cette page uniquement. Cela remplacera tous les autres paramètres de requête de l'URL et définira la page deux. Donc, pour résoudre ce problème, nous devons ajouter toutes les valeurs précédentes à cette fonction de recherche définie. Ensuite, nous devons ajouter la page deux. Donc, avant cela, nous créons une nouvelle variable const, current params, égale à object point from entras Et à l'intérieur de celui-ci, nous passons un tableau, et à l'intérieur de celui-ci, nous allons restructurer la recherche Voyons ce que nous obtenons dans les paramètres actuels. La console n'enregistre donc pas les paramètres actuels. Enregistrez les modifications, ouvrez la console et sélectionnez la catégorie, puis cliquez sur le bouton de la page deux. C dans Console, nous obtenons ici cette catégorie. Cette expression renvoie un objet de chaîne de requête, qui est disponible dans cette chaîne de recherche. Nous pouvons donc simplement ajouter cet objet en utilisant la structuration d'objets avant cette page Enregistrez les modifications, et ici nous pouvons voir que nous changeons de catégorie et cliquez sur la page deux, puis notre URL contient toute la chaîne de requête. Vous vous demandez peut-être pourquoi nous ne recevons pas de données ici. C'est parce que dans cette catégorie, nous n'avons pas de page deux, ce qui signifie que les produits sont inférieurs à huit dans cette catégorie. Mais dans l'URL, nous pouvons voir que notre catégorie est toujours là. Nous avons donc défini notre logique de pagination. Maintenant, nous n'avons besoin que de l' interface utilisateur pour la pagination , que nous créerons dans la leçon suivante 138. Créer une interface utilisateur de pagination: Créons maintenant un composant de pagination pour ajouter l'interface utilisateur de pagination Ainsi, dans le dossier commun, nous créons un nouveau fichier appelé pagination point css et créons également un nouveau composant appelé pagination point La raison pour laquelle nous ajoutons ce composant de pigeonnage dans un dossier commun est que nous pouvons l'utiliser dans n'importe quel autre Ici, nous ajoutons du code standard, et en haut, nous importons le code CSS de pigmentation des périodes Bien. Maintenant, ce que nous voulons de ce composant. Nous voulons uniquement les numéros de page de ce composant, et c'est ce composant qui décide du nombre de pages à afficher. Par exemple, si nous avons 100 produits et que nous voulons afficher huit produits par page, nous avons besoin de 100 divisés par huit, soit 12 en huit, soit 96, et nous avons besoin une page supplémentaire pour les quatre autres articles. Donc, dans l'ensemble, nous avons besoin de 13 pages. Autre exemple, si nous n' avons que sept produits, nous n'avons pas besoin d' afficher la pagination Nous devons donc gérer ces logiques. Et pour cela, nous devons transmettre trois variables. abord, nous avons besoin ici du nombre total de publications, de publications par page et de la fonction de clic, que nous pouvons exécuter en cliquant sur un bouton. Nous créons donc ici une variable pour stocker les numéros de page. La page est égale à un tableau vide. Ensuite, nous ajoutons quatre boucles pour remplir ce tableau avec des numéros de page. Ici, disons que j'équivaut à un. Ensuite, nous écrivons I ser égal au total des publications, en divisant par publication par page et I plus plus. Maintenant, nous mettons ce I dans ce tableau, donc nous écrivons pages point push et nous passons ici I. Si notre total de publications est de 80 et que le nombre de publications par page est de dix, alors nous obtenons dix pages. Mais si nous avons un total de 25 publications et que le nombre de publications par page est de huit, alors 25 divisez par huit, soit 3,125 Nous n'avons que trois pages et ce n'est pas ce que nous voulons. Pour résoudre ce problème, nous avons une méthode en JavaScript appelée point mathématique Cal, qui arrondira notre nombre à l'entier le plus proche, ce qui signifie que si nous passons ici 2,05, elle renvoie trois Nous encapsulons donc cette équation avec cette méthode mathématique de scellement par points. Il suffit de renvoyer ce bouton de numéro de page. Ici, nous créons une liste non ordonnée et lui attribuons une nation de page de nom de classe Dans cette liste, nous affichons notre bouton dans les éléments de la liste. Carte à points de pages. Ici, nous obtenons chaque fonction de flèche de page, et ici nous renvoyons un élément de liste, passant la clé à la page. À l'intérieur, nous ajoutons un bouton avec le nom de la classe, une pagination, un bouton de soulignement Et la fonction OnClick Event to Arrow. Et ici, nous appelons la fonction onclick et passons ici notre numéro de page Et à l'intérieur de ce bouton, nous affichons simplement le numéro de page. Enregistrez-les et ajoutons ce composant dans le composant de la liste des produits. Ouvrez donc le composant de la liste de produits en bas, nous supprimons cette page sur le bouton, et après cela, nous ajoutons simplement notre page dans un composant N'oubliez pas que nous devons réussir trois accessoires. Le premier, le total des publications, c' est-à-dire le total des produits par point. Publiez par page jusqu'à huit et un clic pour gérer le changement de page. Notez qu'il ne s'agit ici que d'une référence passagère. Nous l'appelons dans le bouton « Nation » de notre page. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons ici les boutons de notre page Nation. Cliquez sur le bouton 2, et vous verrez, nous arrivons à la deuxième page. Cliquez sur la page trois, et nous arrivons à la troisième page, elle fonctionne. Maintenant, nous avons un petit bug. Si nous définissons notre catégorie, alors pour trois articles seulement, nous n'aurons qu'un seul bouton sur cette page, ce qui est bien, mais je n'aime pas ça. Dans notre composant de pagination, nous passons ici une condition. Si la longueur des points des pages est supérieure à un, nous retournerons cette liste de pagination uniquement Ici, nous obtenons une erreur de compilation car si la longueur des points des pages n' est pas supérieure à un, ce composant ne renverra rien. Nous pouvons encapsuler ce code avec des fragments de réaction. Et R n'est plus là. Charmant. Vous pouvez maintenant vous demander pourquoi nous n'ajoutons pas de condition dans notre composant de liste de produits. La raison en est donc que si demain nous utilisons ce composant de pagination dans un autre composant, nous devons également y transmettre une condition, ce que nous ne voulons pas C'est pourquoi j'ajoute une condition dans ce composant de pagination Enregistrez les modifications et jetez-y un œil. Tu vois, c'est fini pour moins de huit produits. Si nous redirigeons vers les produits, nous pouvons voir la pagination Maintenant, définissons le style de ces boutons. Ainsi, dans le fichier CSS à points de pagination, nous ajoutons tout d' abord de la pagination, et dans les paquets bouclés, nous ajoutons moins de style à aucun, nous affichons deux feuilles de lin, nous justifions le contenu au centre, nous enveloppons de lin à envelopper Et marge jusqu'à 16 pixels. Ensuite, nous sommes le style pour la pagination par points, le bouton de soulignement, crochets, et à l'intérieur de ceux-ci, nous définissons la largeur à 40 pixels , marge à zéro et taille de police de dix pixels à 16 pixels, le poids de police à six pixels et le rouge, bordure à un pixel, solide a Ii ei, ei, rayon de bordure à six pixels, couleur d' arrière-plan au blanc, la couleur au Et du curseur au pointeur. Enregistrez les modifications et jetez-y un œil. Tu vois, on a un joli bouton. Maintenant, nous ne savons pas quelle page est sélectionnée. Ainsi, dans notre composant de pagination, dans le nom de notre classe de bouton, nous ajoutons une condition, la page actuelle est égale à cette page Ensuite, nous revenons aux classes, pagination, au bouton de soulignement et à l'actif Sinon, nous renvoyons uniquement la pagination, la classe du bouton de soulignement. Maintenant, nous devons également accéder à la page sélectionnée actuelle. Nous ajoutons donc cette variable de page actuelle dans props. Enregistrez ceci et dans notre composant de liste de produits, en bas, nous passons un autre accessoire, page actuelle à cette page, que nous obtenons en utilisant les PAM de recherche Enregistrez les modifications, et passons au CSS pour le bouton actif. Donc pagination par points, bouton de soulignement, calibracket actif par points, arrière-plan vers le noir et couleur vers blanc Et dans ce bouton de pagination, nous passons à 0,2 seconde d'entrée et de sortie. Enregistrez les modifications et jetez-y un œil. Pourtant, nous n'obtenons pas de classe active car cette page en cours est une chaîne et cette page est un numéro. Ici, nous enveloppons cette page en cours avec une méthode appelée parse Int Les modifications et jetez-y un coup d'œil. Actualisez la page et voyez ici que nous avons une erreur. Ouvrons la console. Ici, cela nous indique que les propriétés nulles ne peuvent pas être lues. Ainsi, lorsque nos données sont nulles, nous ne pouvons pas accéder à la propriété Data point Total products. Nous enveloppons donc notre composant de pagination avec des crochets Cali et passons ici Si des données sont disponibles, seul le composant de pagination de rendu Enregistrez les modifications et jetez-y un œil. Vous voyez, c'est ici que nous obtenons notre numéro de pagination. Maintenant, nous avons presque terminé. Nous avons un dernier bug. Donc ici, lorsque nous changeons notre numéro de page, il se passe quelque chose. Laisse-moi te montrer. Donc, un onglet réseau et mettez la connexion à trois G. Maintenant, changez le numéro de page et voyez ici, nous pouvons voir notre squelette de chargement, et nous pouvons également voir notre ancien message. Alors réglons ce problème. Ouvrez le composant de la liste des produits, et ici, à la place de cette extrémité, nous passons un opérateur ternaire Alors, point d'interrogation et retirez également ce support bouclé. Et nous passons devant Colon. Donc, si le chargement est vrai, nous affichons le squelette, sinon nous affichons les produits. Enregistrez les modifications et jetez-y un œil. Voyez à quel point notre page est propre et jolie. Je sais que cette leçon est un peu longue, mais vous pouvez voir à quel point il est simple et facile d'ajouter de la pagination dans notre application Nous avons juste besoin de définir la page dans la chaîne de requête de l'API. Beaucoup de développeurs sont confus par le concept de pagination, mais vous pouvez voir à quel point c'est facile et simple 139. Défilement infini: Maintenant, comme nous l'avons vu, la pagination est un concept très important, mais il est principalement utilisé dans applications de base de données comme les sites Web de blog, sites Web éducatifs auxquels les gens sont prêts à accorder toute leur attention Mais si vous créez des applications telles que applications de réseaux sociaux ou quelque chose comme Instagram ou YouTube dans ces applications, nous ne pouvons pas ajouter de pagination ces applications, nous devons ajouter une fonctionnalité de défilement infini comme celle-ci Si nous faisons défiler l'écran vers le bas, nous obtenons les données de la page suivante et nous pouvons également voir nos données précédentes. Ainsi, si nous utilisons fonction de défilement infini dans notre application, nous pouvons facilement attirer l'attention de l'utilisateur même s'il n'est pas disposé à accorder toute son C'est pourquoi les utilisateurs passent plus de temps sur réseaux sociaux, car ils n' ont qu'à faire défiler la page. Comprenons donc la logique du défilement infini. La logique est très simple. Lorsque nous arriverons au bas de notre page, nous augmenterons notre nombre de pages d'un simple. Implémentons donc cette fonctionnalité de défilement infini dans notre Je ne supprime pas ce code de pagination. Je commente simplement cette fonction et je commente également le composant de pagination, afin que vous puissiez l'utiliser comme référence lorsque vous en avez besoin Commençons maintenant par l' étape numéro un, qui consiste à ajouter un événement de défilement, qui nous donnera des informations lorsque nous atteindrons le bas Nous créons donc un hook Use Effect pour ajouter un écouteur d'événements. Ici, nous ajoutons une fonction de rappel et passons un tableau vide pour la dépendance car nous ne voulons le déclarer qu'une seule fois Maintenant, à l'intérieur de celui-ci, nous écrivons window point add event listener. Passez maintenant le premier paramètre, scroll, et le second paramètre est la fonction que nous voulons appeler lors d'un événement de défilement, handle scroll. Déclarons maintenant cette fonction, gérons le défilement dans use effect hook. Et à l'intérieur, nous écrivons notre logique. Donc, en JavaScript, nous avons quelques éléments pour obtenir les données de Dom dans l'élément Document point. Ici, nous le déstructurons et arrivons ici, en faisant défiler la page vers le haut. Ensuite, nous obtenons la hauteur du client, et enfin, la hauteur du défilement. Maintenant, enregistrons simplement ces trois variables par points sur console. Donc, journal des points de la console, faites défiler la page vers le haut. Ensuite, enregistrez les points de la console, hauteur du client à la hauteur du client. Et enfin, le journal des points de la console, défilement en hauteur de défilement. Ne vous inquiétez pas pour ces propriétés. Voyez ceci et vous comprendrez tout cela. Regardez les modifications et jetez-y un coup d'œil. Actuellement, nous n' avons pas de barre de défilement. Ouvrons donc les outils de développement, et dans la console, nous avons ici une barre de défilement pour notre page. Et lorsque nous faisons défiler la page, nous obtenons ces valeurs. Maintenant, faites défiler vers le bas, et pour cela, nous voulons mettre une condition. Ici, le défilement vers le haut indique jusqu'où vous avez fait défiler une page Web vers le En gros, il nous indique la distance entre le haut de la page et l' endroit où nous sommes en train de visionner. Maintenant, la hauteur du client est la hauteur de la fenêtre de notre navigateur Web. Il représente la zone visible de la page Web que vous pouvez voir sans faire défiler hauteur de défilement est la hauteur totale de l'ensemble de la page Web, y compris les parties actuellement invisibles dans votre fenêtre. Donc, en termes simples, le haut de défilement vous indique jusqu'où vous avez fait défiler vers le bas, le client vous indique la hauteur de ce que vous pouvez voir, et la hauteur du défilement vous indique la hauteur totale de la page entière Ainsi, lorsque nous atteignons le bas de notre page, ce défilement en haut plus la hauteur du client seront toujours égaux à la hauteur de défilement. Ici, dans notre fonction de défilement, nous ajoutons la condition I scroll top plus la hauteur du client supérieure ou égale à la hauteur de défilement. Ici, je ne sais pas pourquoi, mais parfois cette condition ne fonctionne pas. Pour les résoudre, il suffit d'ajouter ici moins un. Avant de sélectionner L depuis le bas, cette logique s'exécutera. Vous pouvez modifier cette valeur en fonction de vos besoins. Dans cette fonction, pour l'instant, ajoutons le journal à points de la console, en allant jusqu'en bas. Et si vous n'avez pas de barre de défilement, vous pouvez passer ici à dix dans l'objet Perms par page J'ai spécialement conçu cette API que nous puissions également obtenir ce que nous voulons. Par défaut, je fixe la valeur par page à huit, mais nous pouvons transmettre ce que nous voulons. Enregistrez les modifications et jetez un œil et voyez ici que nous avons dix produits. En bas, on peut atteindre le bas. Donc ça marche. Maintenant, deuxième étape, qui consiste à augmenter le nombre de pages. Utilisons donc la même logique que notre fonction de changement de page de gestion. Supprimez donc ce commentaire, et ici, à la place de cette page, nous ajoutons le point pH des PAM actuels plus un Maintenant, appelez cette fonction dans notre fonction handle scroll, ou nous pouvons appeler directement cette fonction sans rien changer, et après cela, nous pouvons passer page à points des paramètres actuels plus un ici Mais ne t'inquiète pas pour ça. Enregistrez les modifications et jetez-y un œil, faites défiler l'écran vers le bas, et nous n'obtenons rien car nous obtenons ici les données de la page 11. Pour résoudre ce problème, nous devons récupérer la valeur actuelle de la page à points des paramètres, qui est une chaîne dans un entier d'analyse. Enregistrez les modifications, revenez à la première page et faites défiler l'écran vers le bas Nous obtenons les données de la deuxième page, mais nos données précédentes ont disparu. Pour cela, nous pouvons faire une petite astuce, ouvrir un fichier de données d'utilisation, et dans notre appel d'API, dans la méthode then, nous pouvons voir que nous définissons directement ces données dans la fonction set data. Au lieu de cela, nous pouvons mettre ici la condition I, le point final est égal à slash products, et nous vérifierons si les données ne sont pas nulles et si les produits data point sont disponibles Maintenant, si ces conditions sont vraies, alors dans les données définies, nous obtenons ici les données précédentes, fonction d'erreur, et ici nous voulons renvoyer uniquement l'objet. Donc, entre parenthèses, nous passons l'objet. Ici, nous ajoutons d'abord toute la valeur de l'objet précédente et remplaçons nos produits dans un tableau. D'abord, nous obtenons les données des produits précédents, savoir l'opérateur de spread, les produits points précédents. Ensuite, nous ajoutons spread operator, les nouveaux produits, à savoir les produits Response point data point. Et si nous avons d'autres points finaux, nous définissons simplement les données en fonction de ces données. Si vous êtes un peu perplexe, laissez-moi vous expliquer pourquoi nous faisons cela. Ainsi, pour la seule demande de produits, et si nous avons déjà des produits dans notre état de données, nous obtenons un objet de quatre propriétés dans lequel nous avons un tableau de produits, mais la plupart des autres demandes GAD renvoient directement un tableau Donc, si nous utilisons le même ensemble de données pour toutes les demandes, nous obtenons toujours nos données dans l'objet et nous obtenons une erreur. C'est pourquoi nous devons définir ces conditions, enregistrer les modifications et y jeter un œil. Retour à la première page. Et faites défiler l'écran vers le bas. voyez, nous recevons ici nouveaux produits avec des produits précédents. Maintenant, il se passe une petite chose étrange ici. Lorsque nous appelons notre API, nous ne voyons pas nos anciens produits. Pour cela, dans notre composant de liste de produits, en bas, nous supprimons cet opérateur ternaire et nous utilisons et ici des crochets. Nous supprimons également cette colonne et ajoutons ici des crochets bouclés Déplacez maintenant cette gamme de produits avant ce squelette. Lorsque nous récupérons de nouvelles données, le squelette s'affiche en bas de cette liste Enregistrez les modifications et jetez-y un œil. Et ici, nous changeons notre page en page 1. Faites défiler l'écran vers le bas et vous verrez un squelette en bas. Nous avons maintenant un autre petit problème dans cette implémentation. En défilement infini, il n'est pas nécessaire d' afficher ce numéro de page dans Donc, pour la page en haut, nous créons une nouvelle variable d'état appelée page et définissons la page. Et comme valeur initiale, nous en passons ici une. Nous pouvons maintenant supprimer cette page d'ici. Nous n'en avons pas besoin. En gros, cette valeur de page sera remplacée par notre variable d'état de page, nous n'avons donc rien à changer. Il suffit de changer ici cette logique. Donc, à la place de cette fonction de changement de page de poignée, ajoutez une page définie pour obtenir la page précédente, fonction flèche, la page précédente plus une. Enregistrez les modifications et jetez-y un œil. voyez, maintenant nous n'avons pas de page dans notre URL. Charmant. Nous en avons presque fini avec In fine au scrolling. Nous devons juste ajouter une fonction de nettoyage dans ce crochet d'effet d'utilisation car nous sommes actuellement sur la page de liste des produits. Si nous redirigeons vers une autre page, l'événement de défilement s'exécutera également , ce qui affectera les performances de notre application. Donc, lors de notre utilisation de Effect took en bas, nous avions écrit la fonction flèche et nous avions simplement copié cette expression et la changeons simplement point de fenêtre pour supprimer Event Listener Enregistrez les modifications, et cela fonctionne. Revoyons maintenant notre page de produits. Rafraîchissez donc la page. Nous achetons des produits. Maintenant, faites défiler. Super, ça marche. Maintenant, en haut, sélectionnez n'importe quelle catégorie, et nous obtenons les produits en bas Au lieu de cela, nous voulons remplacer tous ces produits par nos catégories de produits. Voici donc le petit Burg. Trouvons ça. Ouvrez et utilisez un crochet de données. Et ici, dans ces conditions, notre point de terminaison est que les produits et les produits data point sont disponibles. Ensuite, nous ajoutons de nouvelles données de points de réponse dans le tableau précédent. Mais lorsque nous changeons de catégorie, cette condition est également vraie, et c'est pourquoi nous obtenons des données en bas de page. Nous devons ajouter une condition supplémentaire, les paramètres de configuration personnalisés, paramètres de configuration personnalisés page à points n'est pas égale à un Ensuite seulement, exécutez cette logique. Enregistrez les modifications, revenez à la page des produits et supprimez-la. Faites défiler la page vers le bas, et nous passons à la page suivante. Maintenant, si nous cliquons sur l'une de ces catégories, nous n' obtiendrons pas ces produits car nous en sommes actuellement à la deuxième page, et dans le domaine des consoles de jeu, nous n'avons que trois produits. Donc, pour la deuxième page, nous n'avons aucun produit. Corrigeons-les donc rapidement. Je liste donc le composant de la liste des produits en haut, après notre crochet de données d'utilisation, ici nous ajoutons un effet d'utilisation et passons ici, fonction de rappel, et dans le tableau de dépendances, nous passons simplement la catégorie Et à l'intérieur de celui-ci, nous mettons simplement une page à une. Ainsi, lorsque la catégorie change ou est supprimée de la chaîne de requête, notre page est définie sur un. Et c'est ce que nous voulons, non ? Conservez les charnières et jetez-y un coup d'œil. Retournez à la page des produits, puis consultez la catégorie et voyez où nous obtenons nos produits par catégorie. Maintenant, je vais te montrer quelque chose. Je ne sais pas si tu le remarques ou non. Lorsque nous arrivons en bas de page, il est parfois chargé sur deux pages en même temps, ou parfois il continue de demander même notre base de données de correctifs pour tous les produits. Nous devons donc régler ce problème. Donc, dans notre fonction de défilement des poignées, nous ajoutons ici quelques conditions. Tout d'abord, si ce chargement n'est pas vrai, une autre donnée est disponible et la dernière page est inférieure au point de données Nombre total de pages. Ce nombre total de pages que nous recevons du serveur. Et comme nous utilisons ici nos données et que nous chargeons des variables, nous devons les modifier dans notre tableau de dépendances, enregistrer les modifications, actualiser la page et faire défiler la page vers le bas, et tous nos problèmes sont résolus C'est ainsi que nous pouvons implémenter fonction de défilement infini pour rendre notre application moderne et très Vous pouvez donc voir que la pagination et la fonction de défilement infini ne sont pas si compliquées Nous devons simplement comprendre la logique de base de ces deux fonctionnalités. 140. Exercice sur une page de produit unique: Il est maintenant temps de faire un peu d'exercice. Ne t'inquiète pas. Cela ne prendra que cinq à dix minutes. Ainsi, lorsque nous cliquons sur un produit, nous sommes redirigés vers une page de produits unique. Et ici, nous voulons afficher les détails de ce produit unique. De plus, nous obtenons cet identifiant de produit dans notre URL. Vous devez donc appeler cette API avec produits pour terminaux et l'identifiant du produit à la fin Cela renverra les données de ce produit ici. Et pendant que nous obtenons ces données, vous pouvez également afficher ici le texte de chargement, ou vous pouvez afficher ici le spinner, que vous pouvez utiliser directement à partir de notre précédent projet de routage Ensuite, ne vous inquiétez pas pour les deux boutons du panier. Nous devons simplement gérer cette augmentation et cette diminution de la quantité. Le conseil est que vous devez créer une nouvelle variable d'état pour gérer la quantité, consacrer un peu de temps à cet exercice, puis observer la solution. Je sais que tu peux terminer cet exercice. 141. Solution de cet exercice: J'espère donc que vous résoudrez cet exercice ou que vous essaierez de le résoudre. Le plus important, c'est d'essayer. Il est très courant de se coincer à un endroit. Parfois, je suis également bloqué à un moment donné, alors ne vous inquiétez pas pour ça. Ainsi, dans notre composant de produit unique, nous devons d'abord obtenir l'identifiant actuel à partir de notre URL. N'oubliez pas qu'il s'agit d'un paramètre et non d'une chaîne de requête. Pour obtenir les paramètres à partir de l'URL, nous devons utiliser use Perms SperamShok de React Router dom, et cela renverra l'objet avec tous les paramètres, afin que nous puissions le déstructurer et La raison pour laquelle nous obtenons cet identifiant ici est que dans notre routage, nous définissons le produit, l'identifiant de colonne. Désolé, nous ajoutons automatiquement cet identifiant dans ce chemin. Nous pouvons changer cela pour appeler un identifiant. Et si vous passez ici, appelez l'identifiant du produit, puis vous devez déstructurer l'identifiant du produit Enregistrez ceci et revenez au composant unique du produit. Appelons maintenant notre API en utilisant use data hook pour le point de terminaison, nous transmettons des backticks, des produits , des dollars Ci Brackets ID Maintenant, cela renverra quelques propriétés. Déstructurez-le et là, nous obtenons nos données et nous le renommons en produit De plus, nous obtenons des erreurs et facilitons le chargement. Déplaçons maintenant ces paramètres d'utilisation en dessous de notre état d'utilisation. Bien. Et supprimons cet objet de produit que nous avons créé, mais juste du temo. Maintenant, dans notre JSX, nous devons ajouter une condition. Donc, voyez comme si tout était dû et ajoutez ici la condition que le produit n'est pas nul, puis affichez-les car nous obtenons une erreur de compilation car nous renvoyons plusieurs éléments. Nous enveloppons donc ce dû avec des fragments de réaction. Enregistrez les modifications et jetez-y un œil, sélectionnez n'importe quel produit et voyez que nous obtenons ces données, mais pas des images. Affichons donc nos images. Nous l'avons déjà fait dans la fiche des produits. Ainsi, dans la source, nous passons les liens, et avant cette image, nous ajoutons une colonne STTP, une double barre oblique, un hôte local, une colonne 5 000, des produits, une barre oblique de l'image avec un dollar Maintenant, nous faisons la même chose ici. Baptis et avant cela, nous ajoutons la colonne STDP, la double barre oblique, l'hôte local, la colonne 5 000, produits, l'image sélectionnée avec un dollar avec Enregistrez les modifications et jetez-y un œil. Tu vois, nous sommes en train de récupérer nos images. Parfait. Maintenant, gérons les erreurs et le chargement. Donc, en cas d'erreur, nous respectons la condition. Si une erreur est disponible, nous affichons la balise d'emphase et lui donnons un nom de classe en cas d'erreur, et nous passons simplement ici l'erreur. Maintenant, pour le chargement, nous affichons Loading Spinner. J'ouvre donc notre précédent projet de routage. Dans le dossier source, nous avons des composants, et dans celui-ci, nous avons un dossier commun. Et ici, nous avons un composant chargeur. Sélectionnez les piles JSX et CSS et frottez-les dans notre dossier commun Maintenant, dans notre composant, nous ajoutons ici une condition. Si ce chargement est vrai, nous ajoutons un composant chargeur. Enregistrez les modifications et jetez-y un œil, actualisez la page et voyez que nous obtenons notre chargeur. Dernière tâche, lorsque nous cliquons sur ce bouton plus, nous devons augmenter cette quantité. Pour cela, en haut, nous créons une nouvelle variable d'état appelée quantité et définissons la quantité, et par défaut, nous en transmettons une. Nous devons maintenant transmettre cette variable d'état à notre composant de saisie de quantité, car dans ce composant, nous avons le bouton plus moins et le nombre de quantités. Ici, nous passons la quantité à la quantité, la quantité à la quantité définie et le stock au produit point SOC. Conservez les charnières, et nous nous en occuperons. Ainsi, dans notre composante de saisie de la quantité dans les accessoires, nous obtenons la quantité, la quantité définie et le stock Maintenant, ici, sur notre bouton, nous ajoutons simplement un événement de clic, fonction flèche, et ici nous définissons la quantité sur la quantité moins un. Pareil, on passe pour le bouton Plus. Copiez cet événement de clic et collez-le pour le bouton plus à la place de moins un, nous ajoutons plus un, et enfin, nous changeons celui-ci en cet état de quantité. Enregistrez les modifications et prenez un. C, la quantité augmente, mais nous devons ajouter une condition pour cet attribut de désactivation. Désactivez donc la valeur égale à la quantité, inférieure ou égale à un. Et également dans le bouton Plus, nous passons l'attribut Disable égal à une quantité supérieure ou égale au stock. Enregistrez les modifications et jetez-y un œil. voyez, lorsque nous avons plus d'une quantité, le bouton moins n' est pas désactivé. Et si nous augmentons la quantité en stock, notre bouton plus est désactivé. Parfait. Ici, notre douzième section est terminée. J'espère que vous en apprendrez beaucoup. Si vous avez des doutes, vous pouvez me le demander dans la section Q&R Dans la section suivante, vous verrez l'élément le plus important de tout grand projet, l'authentification et l'autorisation des utilisateurs. Si vous regardez ces cours en continu, je vous recommande vivement de faire pause de 20 à 30 minutes loin de l'écran et prendre l'air, car il est également important de prendre soin de notre santé. Je vous verrai dans la section suivante. 142. Section 13 Authentification et autorisation: Dans cette section, nous allons apprendre l' authentification et les applications React, comme la gestion de l'inscription, de la connexion et de la déconnexion Ensuite, nous verrons comment gérer les autorisations, par exemple, seul l'utilisateur connecté peut ajouter des éléments à la carte, carte de visiteur, etc. Authentification et autorisation sont deux sujets très importants pour toute application de grande envergure. Donc, pour l'authentification, nous allons utiliser un jeton Web JSON Je suis très enthousiasmé par cette section et j'espère que vous l'êtes aussi. Alors plongeons-nous dans le vif du sujet. 143. Enregistrer une nouvelle API utilisateur: Tout d'abord, voyons l'API d'enregistrement pour notre utilisateur. Donc, pour l'API de dégustation, nous avons deux options. Nous pouvons utiliser Postman, qui est l' application externe, spécialement conçue pour tester tout type d'API, ou nous pouvons utiliser l'extension de code VS appelée client Thunder, qui possède presque les mêmes fonctionnalités Donc, pour des raisons de simplicité, je vais utiliser l'extension VSCode, mais vous pouvez également utiliser Postman Cela dépend entièrement de vous. Ouvrez le panneau d'extension à partir d' ici et recherchez le client Thunder. Et installez cette extension. Bien. Ouvrons maintenant cette extension client d'appel d'offres. Et ici, nous pouvons voir ce type d'interface. Ne vous inquiétez pas, cliquez sur Nouvelle demande. Et sur le côté droit, nous pouvons voir que nous avons une zone de saisie par URL d' API et également une liste déroulante pour sélectionner les méthodes STTP Sélectionnez donc la méthode de publication et l'URL de l'API, écrivez la colonne STTP, double barre oblique, hôte local, colonne 5 000, barre oblique , l'API, l'inscription de l' utilisateur Maintenant, comme nous le savons pour Register, un nouvel utilisateur, nous devons envoyer des données utilisateur dans le corps de notre demande d'API. Pour cela, il suffit de sélectionner ici le corps, et dans celui-ci, nous pouvons transmettre nos données au format JCN Donc, d'abord, nous passons le nom au code. Ensuite, envoyez un e-mail au code one@gmail.com. Ensuite, mot de passe pour, disons, un, deux, trois, 45678 et adresse de livraison, c'est mon adresse de livraison Pour l'instant, nous n'envoyons pas notre image de profil car si nous ne sélectionnons pas notre image de profil, elle sera définie par défaut sur le format JPG à points par défaut. Maintenant, consentez simplement. Et voyez ici, nous obtenons le code d'état 201, qui correspond à une création réussie. Et aussi dans la réponse, nous obtenons un objet avec un jeton long. Il s'agit du jeton Web JSON ou JWT, que presque toutes les applications modernes utilisent pour authentifier l'utilisateur. Ne t'inquiète pas pour ça. Je vais vous expliquer JCN WebTken en détail dans la prochaine leçon Pour l'instant, nous sommes enregistrés avec succès. Nous pouvons vérifier que Mongo DBCompass ouvre la collection de l'utilisateur et voir ici nous obtenons notre Voyons maintenant comment envoyer une image avec notre demande d'API. Donc, pour envoyer des fichiers tels que des images, audio, de la vidéo, etc., nous devons utiliser les données du formulaire, ce qui est une autre façon d' envoyer des données avec notre demande d'API, car au format JSON, nous ne pouvons pas envoyer notre fichier. Ainsi, au lieu de sélectionner JSON à partir d'ici, nous pouvons sélectionner Form. Maintenant, ici, nous pouvons voir les entrées de remplissage du formulaire, et sur le côté droit, nous pouvons activer les fichiers et voir ici nous obtenons l'option des fichiers. Maintenant, dans les champs du formulaire, nous ajoutons le nom et la valeur à code plus. Envoyez un e-mail au code two@gmail.com. Ensuite, mot de passe au 12345678 et adresse de livraison, c'est une nouvelle adresse c'est une nouvelle Maintenant, sélectionnons l'image de profil. Donc, pour le nom complet, nous passons le profil P avec un P majuscule, et ici nous pouvons choisir le fichier. Donc, ici, je sélectionne le logo de ma chaîne. Maintenant, envoyons des données. voyez, ici, nous obtenons un nouveau jeton, ce qui signifie que notre utilisateur est enregistré avec succès Ouvrez Mongoibcmpass et actualisez les documents. Et ici, nous pouvons voir que nous obtenons un nouvel utilisateur avec un e-mail code@gmail.com. Et du profil au nom d'un pic de profil. Cela fonctionne. Maintenant, à partir d' ici en bas, nous pouvons renommer le nom de notre API Disons l'API d'inscription. Bien. Dans la leçon suivante, nous allons connecter notre formulaire d'inscription à notre API d'inscription. 144. Connexion de la page d'inscription à l'API: Maintenant, sur notre page d'inscription dans la fonction d'envoi, ne faisons actuellement que consigner ces valeurs de formulaire par points sur la console Connectons maintenant notre page d'inscription à notre API d'inscription. Donc, au lieu d'écrire toute la logique ici, je préférerais écrire la logique dans un fichier JavaScript différent. Ainsi, dans notre dossier source, nous créons un autre dossier appelé services. Et à l'intérieur, nous créons un nouveau fichier appelé user services point js. Pouvez-vous me dire pourquoi j'utilise l'extension point js ? vrai, car nous ne renvoyons aucun élément JSX à partir d'ici Maintenant, à l'intérieur de celui-ci, tout d'abord, nous saisissons le client API à partir de là nous accédons à un dossier, utils, client API Maintenant, nous créons ici une fonction appelée inscription ou enregistrement, quel que soit le nom que vous souhaitez. Et ici, nous obtenons le premier objet utilisateur, qui est les champs de formulaire de notre formulaire d'inscription, et après cela, nous transmettrons notre profil, qui est une image de profil Maintenant, comme nous le savons, pour envoyer un fichier, nous devons envoyer nos données au format de données de formulaire. Pour cela, nous créons ici une variable appelée body égale aux nouvelles données du formulaire. Maintenant, nous devons simplement ajouter toutes les données dans ces données de forme corporelle. Donc, le corps du point vers le haut et à l'intérieur de cette fonction, au premier paramètre, nous définirons le nom de notre propriété, qui est name. Et au deuxième paramètre, nous définirons la valeur, qui est le nom du point utilisateur. Maintenant, dupliquons cette ligne quatre fois de plus, et ici nous changeons notre nom en email et aussi en usager point email. Ensuite, nous avons le mot de passe et le mot de passe utilisateur point. Ensuite, nous avons l'adresse de livraison et l'adresse de livraison par point utilisateur. Enfin, nous avons le profil P avec P, et nous passons ici notre profil. Notez que le nom de tous les remplissages dépend de votre API. Dans votre application, il se peut qu'il s' agisse du nom d'utilisateur figurant à l' endroit où cet e-mail a été envoyé. Vous devez passer ici le nom d'utilisateur. Ne t'inquiète pas pour ça. Le développeur de Bend vous donnera ces informations sur l'appel de l'API, car grâce à ces noms dans le backend, nous pouvons accéder à ces valeurs Ces noms dépendent entièrement de votre backend. Maintenant, à la fin, nous allons appeler notre API, donc api client point post, et nous passons ici notre API, qui est sssers signup Ensuite, nous transmettrons simplement nos données corporelles. Lorsque nous appelons cette fonction d' inscription, données de ce formulaire les génèrent en premier et nous les envoyons à notre back-end Cette expression renvoie une promesse. Nous pouvons simplement vous rendre notre promesse à partir d'ici. Maintenant, pour utiliser cette fonction d'inscription dans notre formulaire, nous devons exporter cette fonction à partir d'ici Enregistrez ce fichier, et dans notre composant de page d'inscription, ici, dans la méthode on submit, au lieu du journal des points de la console, nous appelons simplement la fonction d'inscription et vous pouvez voir que la saisie automatique Maintenant, au premier paramètre, nous devons transmettre nos champs de formulaire, qui sont ces données de formulaire. Et après cela, au deuxième paramètre, nous passerons au profil Peak. Enveloppons maintenant cette fonction dans un bloc de code. Bien. Maintenant, cette expression renvoie une promesse. Nous allons donc utiliser ici Await. Et pour utiliser Await, nous devons ajouter ici async, c'est aussi simple que cela Supprimons maintenant cette console d'ici. n'est pas ce que nous voulons. Enregistrez les modifications et jetez-y un œil. Ouvrez les outils de développement pour les utilisateurs de Windows, appuyez sur Ftwel ou sur Option plus Command plus I sur Mac Open Network Stab remplissez le formulaire avec le nom, l' e-mail, le mot de passe, le mot de passe de confirmation et l'adresse de livraison Et cliquez sur Soumettre. Rien ne se passe, mais dans notre onglet Réseaux, nous pouvons voir ici que nous recevons une demande d'API, qui est l'inscription, et dans la réponse, nous recevons un jeton. Maintenant, sélectionnez AGPfile Image, et nous allons remplacer cet e-mail par Sinon, nous obtenons une erreur. De plus, nous changeons ce nom en code quatre et en adresse, nous changeons la quatrième adresse de livraison. Cliquez sur Soumettre et verrez ici que nous recevons à nouveau un jeton en réponse. Avec ou sans image, les deux scénarios fonctionnent. Vous pouvez voir à quel point il est simple d' envoyer une image au serveur dans React. Il suffit de créer un objet de données de formulaire et d'y ajouter nos données Maintenant, si nous cliquons à nouveau sur Soumettre , nous recevons un message d'erreur en réponse. Dans la leçon suivante, nous verrons comment gérer les erreurs renvoyées par l'API d'inscription 145. Gérer les erreurs lors de l'inscription: Maintenant, pour gérer les erreurs, nous pouvons utiliser le bloc try and catch. Donc, ici, nous écrivons uniquement TryCatch et nous sélectionnons cette suggestion et nous voyons, nous obtenons try and catch Block. Maintenant, plaçons la fonction sino dans le bloc Tri, et dans le bloc de cache, nous obtenons ici l'objet d'erreur n' affichons donc ici que l'erreur, que nous renvoyons depuis notre backend. Et pour cela, nous devons mettre ici une condition si nous avons réponse par point d'erreur et statut du point de réponse par point d'erreur est égal à 400, ce qui signifie qu'en tant que client, nous avons fait quelque chose de mal. Ici, nous nous contentons simplement de Consol dot log point response object. De plus, la raison pour laquelle j'utilise tricach et acad est juste pour vous montrer une démo Vous pouvez également utiliser le point Dan et la méthode de cache , comme nous l'avons vu en appelant une section API. Enregistrez les modifications et jetez-y un œil, remplissez le formulaire, et pour l'adresse e-mail, nous transmettons l'ancien e-mail et soumettons le formulaire. Et dans la console, nous pouvons voir l'objet de réponse. Et à l'intérieur de celui-ci, nous obtenons le statut à 400, et dans les données, nous avons un message à e-mail qui est déjà enregistré. Maintenant, affichons cette erreur sur notre formulaire. Donc, pour afficher cette erreur, nous devons d'abord la stocker dans une variable d'état. Donc, en haut, nous créons une variable d'état appelée erreur de formulaire et définissons l'erreur de formulaire. Comme valeur par défaut, nous définissons une chaîne vide. Bien. Maintenant, nous définissons l'erreur de formulaire sur error point response point data point message. Cet objet de réponse dépend entièrement de votre backend. Dans votre cas, vous avez une erreur de point de données, vous devez donc définir cette erreur d'information. Maintenant, en bas, avant notre bouton d'envoi, nous ajoutons ici la condition. Si une erreur de formulaire est disponible, nous renvoyons une balise d'emphase avec une erreur de formulaire de nom de classe et ajoutons ici une erreur de formulaire. Dites les modifications et jetez-y un œil, remplissez le formulaire et soumettez-le et vous verrez que nous recevons notre message d'erreur. Actuellement, lorsque nous soumettons le formulaire, nous n'appelons que l'API d'inscription Mais dans le monde réel, nous devons nous connecter en tant qu'utilisateur. Pour l'instant, ne t'inquiète pas pour ça. C'est ce que nous ferons à l'avenir. 146. Connexion à une API utilisateur: Voyons maintenant l'API de connexion. Ainsi, dans notre extension client d'appel d'offres, nous ajoutons une nouvelle demande d'API. Pour la connexion également, nous passons ici URL, STDP, Colm double forward slash Local host, Column 5,000 slash API slash user slash Login, et Maintenant, pour cette API, nous allons envoyer des données au format JSON car nous n'envoyons ici aucune image ou fichier. Dans le cas contraire, nous devons envoyer les données du formulaire. Maintenant, dans le corps, utilisez JSON, et ici nous passons deux propriétés. Le premier est le courrier électronique, qui est le code one@gmail.com. Ensuite, nous transmettrons notre mot de passe au 12345678 et enverrons voyez, ici, nous obtenons jeton Web JCN dans notre objet de réponse, et par ce jeton, nous obtiendrons un utilisateur de connexion Pour l'instant, ne t'inquiète pas pour ça. Nous allons d'abord connecter notre formulaire de connexion à cette API de connexion. Voici donc un petit exercice pour vous. Je souhaite que vous connectiez notre formulaire de connexion à cette API de connexion et que vous essayiez également de gérer les erreurs. Et s'il s'agit d'une erreur du serveur, affichez-la avant le bouton de connexion. Comme nous l'avons fait pour le formulaire d'inscription. Cela ne prendra que deux à cinq minutes, essayez-le et la solution sera trouvée. 147. Connexion de la page de connexion à l'API: J'espère donc que vous allez résoudre cet exercice. Voyons maintenant la solution. Ainsi, lorsque nous créons notre fonction d' inscription dans le fichier des services aux utilisateurs, nous ajouterons une nouvelle fonction de connexion Donc, fonctionnez, connectez-vous, et nous obtenons ici les données utilisateur, que nous envoyons à partir du formulaire de connexion. Et ici, nous renvoyons simplement ce point post sur le client API. Ici, nous passons notre chemin slash user slash Login. Et au deuxième paramètre, nous passons simplement cet objet utilisateur. Maintenant, pour appeler cette fonction dans notre formulaire de connexion, nous devons exporter cette fonction. Enregistrez ce fichier et ouvrez le composant de la page de connexion, et dans la fonction de soumission à la place du journal à points de cette console, nous transmettons la fonction de connexion des services utilisateurs et transmettons simplement ici les données de notre formulaire. Maintenant, cette expression renvoie une promesse, nous l'attendons donc et pour utiliser await, nous devons ajouter ici async Enregistrez les modifications et jetez-y un œil, ouvrez la page de connexion et entrez notre e-mail et notre mot de passe. 8 Entrez et rien ne se passe. Mais dans Network Sab, nous pouvons voir l'appel d'API, qui renvoie le jeton JWT dans la réponse Notre demi-tâche est donc terminée. Il ne nous reste plus qu'à gérer les erreurs de formulaire. Revenons donc au code VS, et nous ajoutons ici un bloc try and catch pour gérer les erreurs. Déplacez cette ligne dans le bloc try et également dans la méthode catch, qui dans cette erreur se transforme en objet d'erreur. Maintenant, dans ce bloc de capture, nous ajoutons la même condition que celle que nous avons ajoutée pour le formulaire d'inscription Donc, sur le formulaire d'inscription, copiez cette condition I et collez-la simplement dans notre formulaire de connexion Pour utiliser une erreur de formulaire définie, nous devons créer cette variable d'état. En haut, nous créons une variable d'état appelée erreur de formulaire, définissons une erreur de formulaire, et comme valeur par défaut, nous passons ici une chaîne vide. Enfin, nous avons simplement vu cette erreur sur notre formulaire. Avant notre bouton d'envoi, nous ajoutons une condition. Si une erreur de formulaire est disponible, cousez la balise d'emphase avec le nom de la classe, l'erreur de formulaire et transmettez simplement ici l'erreur de formulaire. Enregistrez les modifications et jetez-y un œil, remplissez le formulaire avec des informations erronées et soumettez-le. Vous voyez ici que nous recevons cette erreur. 148. Qu'est-ce que JWT et comment cela fonctionne: Maintenant, avant d' approfondir l'authentification des utilisateurs, nous utilisons le jeton Web JCN ou JWT Comprenons d'abord ce qu'est JWT. JWT est donc l'abréviation de JCN Web token, qui est utilisé pour transférer des informations en toute sécurité entre deux parties, comme Bend et Front End Comprenons cela à l' aide de l'exemple. Voici donc une Harley. Il se connecte avec les informations de son compte, e-mail et son mot de passe. Notre serveur vérifie d'abord les informations et si elles sont vraies, le serveur renvoie son ID utilisateur en réponse et le stocke dans une session ou un cookie. Maintenant, chaque fois qu'il demande des informations sécurisées, disons toutes ses informations bancaires. serveur demande d'abord l' ID utilisateur et s'il a un ID utilisateur, puis le serveur envoie les informations sécurisées. Mais voici un gros problème. Cette session ou ce cookie dans lequel nous stockons notre identifiant d'utilisateur peut être facilement modifié dans le navigateur. Supposons que je change ce nom d' utilisateur pour un autre nom d'utilisateur. Ensuite, nous obtenons les informations sur l'utilisateur des données. Cette approche n'est donc pas sécurisée. Maintenant, pour résoudre ce problème, nous introduisons le jeton Web JSON. Alors maintenant, Halley se connecte à nouveau avec son e-mail et son mot de passe. Maintenant, notre serveur vérifie d'abord les informations, et si elles sont vraies, serveur renvoie le jeton unique crypté depuis longtemps en réponse et le stocke dans le stockage local. Maintenant, l'avantage de ce jeton est qu'il est créé avec les informations de l'utilisateur et une clé secrète, que nous définissons sur le serveur. Ainsi, chaque fois que Harley envoie une demande d'informations sécurisées, serveur demande d'abord le jeton JWT et le vérifie à l' aide de notre clé secrète C'est vérifié, puis serveur enverra ces informations sécurisées. Si nous changeons quoi que ce soit dans les informations utilisateur, notre jeton changera. Je sais que c'est un peu confus. Laissez-moi vous montrer de façon pratique. Dans notre API de test, nous copions ce jeton Web JSON. Dans notre navigateur, ouvrez un nouvel onglet et recherchez « jwt DotIO ». Il s'agit de la documentation officielle de JWT. Ici, dans les bibliothèques, vous pouvez voir l' implémentation de JWT pour différentes bibliothèques Faites maintenant défiler la page vers le bas jusqu'à la section Debugger. Ici, nous pouvons décoder notre jeton. Voyons donc ce que contient le jeton. Alors collez notre jeton ici. Maintenant, tous les jetons GWT sont divisés en trois parties. La première partie concerne l'en-tête, qui est de couleur rouge. La deuxième partie concerne la charge utile, qui est en violet, et la dernière et la plus importante partie est la signature, qui est en bleu Cet en-tête contient maintenant l' algorithme et le type de jeton, ce qui est très courant. Ne vous concentrez pas là-dessus. Maintenant, cette charge utile contient les données que le serveur envoie avec notre jeton Dans ce cas, je transmets les données de cet utilisateur. Nous pouvons définir au niveau du back-end les données que nous voulons envoyer dans cette charge utile Nous pouvons donc afficher ces données sur notre interface sans appeler une API séparée, et nous avons plus de données I At, qui signifie émis à, et la valeur est l'heure à laquelle notre jeton a été généré, et EXP est notre date d'expiration Maintenant, la dernière partie en bleu est la signature, qui est générée sur la base de cet en-tête, données de charge utile et de la clé secrète, qui n'est disponible que sur le serveur Cela empêchera donc les utilisateurs d'obtenir leur propre jeton , puis de le modifier avec un identifiant pour se faire passer pour quelqu'un d'autre. Parce que si vous modifiez quoi que ce soit dans cette charge utile ou cet en-tête, cette signature sera régénérée n'y a donc aucune chance pour l'utilisateur de faire quelque chose de contraire à l'éthique C'est pourquoi JWT est si populaire. Maintenant, laissez-moi vous montrer ce qu'est une clé secrète. Cette clé secrète est une chaîne que nous définissons dans le backend. Donc, dans notre backend, nous avons ce fichier ENV à points, et nous définissons ici le secret JWT Je sais que c'est un mot de passe facile, mais je l'ai juste configuré pour vous le montrer. Donc, uniquement avec cette clé secrète, notre jeton sera validé. Sinon, cela nous donnera une erreur. En résumé, lorsque les utilisateurs se connectent ou s'enregistrent avec succès, nous obtenons un jeton Web JSON qui fonctionne simplement comme une carte de sécurité. Demande de données par l'utilisateur, qui ne sont accessibles que par les utilisateurs connectés, puis le serveur vérifie d'abord la carte de sécurité, qui est notre jeton Web JSON, et valide avec la clé secrète JWT Et si ce jeton est vérifié, n'est qu'alors que le serveur renvoie ces données à notre utilisateur. C'est aussi simple que ça. 149. Stockage du JWT après la connexion et l'inscription: Maintenant, comme nous le savons, s'il s'agit d'un compte ou d'une connexion avec un e-mail et un mot de passe valides, nous obtenons un jeton Web JSON dans notre réponse. Nous devons donc stocker ce jeton sur le site du client. Vous vous demandez peut-être où nous stockons ce jeton. N'oubliez pas que nous l'avons fait dans le cadre de notre projet Task Wreck. Nous stockons notre tâche dans le stockage local, qui est le petit espace de stockage du navigateur. Nous attendons ici notre API de connexion, qui renverra l'objet de réponse. Stockons donc cela dans une variable appelée response et enregistrons simplement cette réponse par points sur la console. Enregistrez les modifications et jetez-y un œil. Entrez un e-mail et un mot de passe valides. Et soumettez le formulaire. voyez, ici nous obtenons l'objet de réponse, et ici dans les données, nous obtenons notre jeton. Maintenant, stockons ceci dans notre espace de stockage local. Donc, à la place de cette réponse, nous pouvons la déstructurer et obtenir ici des données Supprimez maintenant cette console et nous écrivons un élément d'ensemble de points de stockage local. Cette méthode utilise deux paramètres. Tout d'abord, le nom de notre variable, qui est jeton, et deuxièmement, la valeur de la variable, qui est jeton à points de données. Enregistrez les modifications, puis reconnectez-vous avec une adresse e-mail et un mot de passe valides. Et voyons voir si nous obtenons un jeton dans le stockage local ou non. Ouvrez donc l' onglet de l'application à partir d'ici, et dans notre port, qui est l'hôte local 5173 Ici, nous obtenons notre jeton. Maintenant, la dernière chose à faire est de rediriger l'utilisateur vers la page d'accueil après la connexion. Nous appelons donc ici use Navigate Hook à partir d'un Crouterdm et le stockons dans Navigate constant Maintenant, nous utilisons simplement here, Navigate et passons ici à la page d'accueil. Enregistrez les modifications et jetez-y un œil. Remplissez le formulaire avec des informations valides et soumettez-le. Voir, rediriger vers la page d'accueil. Un formulaire de connexion fonctionne correctement. Nous allons maintenant faire de même lorsque l'utilisateur s'inscrit sur notre site Web, car je ne veux pas que l'utilisateur doive se reconnecter avec e-mail et son mot de passe après son inscription. À partir de là, nous copions ces deux lignes et dans notre composant de page d' inscription, après l'attente, nous les mettons en page Stockons maintenant cette réponse de l'API dans une constante, déstructurons-la et obtenons les données ici Enfin, nous devons définir cette navigation. Ainsi, après notre état d'utilisation, nous appelons use Navigate Hook et stockons en constante, appelons Navigate. Enregistrez les modifications et jetez-y un œil. Accédez à la page d'inscription, remplissez le formulaire avec le nom, l'identifiant e-mail, le mot de passe, passe de confirmation et l'adresse de livraison Et nous cliquons sur consubmit. Vous voyez, nous redirigeons à nouveau vers la page d'accueil. Cela fonctionne donc également. 150. Obtenir des utilisateurs à partir de jetons: Ainsi, dans la leçon précédente, nous avons réussi à stocker notre jeton Web JSON dans le stockage local. Maintenant, vous souvenez-vous que lorsque nous décodons notre jeton sur le site Web de JWT, nous obtenons les données utilisateur actuelles dans la charge utile Nous devons donc décoder ces données utilisateur à partir du jeton et les stocker dans l'état Mais la principale question est où nous allons définir cet état utilisateur, où nous avons besoin de cet objet utilisateur. Nous avons simplement besoin d'un objet utilisateur dans toutes nos applications. Dans le composant d'application, nous définirons notre état d'utilisateur car composant d' application est notre composant racine, et à partir de là, nous pouvons transmettre l'objet utilisateur dans tous nos composants en tant qu'accessoires Au sommet, nous l'avions utilisé avec un crochet. abord, nous l'importons, puis nous ajoutons extraits usagés et nous transmettons ici user et set Comme valeur par défaut, nous passons null. Lorsque notre composant est rendu, nous devons décoder notre jeton Web JSON et stocker ces données dans cet état utilisateur Et pour cela, ce que nous allons utiliser, vrai, nous utilisons l'effet d'utilisation Hook, donc appelé effet d'utilisation. À la première position, nous passons la fonction de rappel, et à la seconde, nous passons un tableau vide car nous n'avons besoin de décoder notre jeton qu'une seule Maintenant, dans cette fonction de rappel, nous allons d'abord obtenir un jeton à partir du stockage local Si le point de stockage local a obtenu m, nous passons ici le nom de notre variable, qui est token. Stockons maintenant cet invariable, appelé jeton ou JWT, comme vous voulez Maintenant, pour décoder ce WebTken ZSN, nous avons une bibliothèque Ouvrez donc le terminal, nous écrivons le décodage NPM install JWT et Dieu. Minimisons ce terminal, et en haut, nous importons le décodage JWT à partir du décodage JWT Et dans notre effet d'utilisation, nous appelons cette fonction de décodage JWT et passons ici notre Maintenant, cela renverra l'objet utilisateur. Stockez-le dans la variable JWT user car nous utilisons déjà user ici, et nous consultons simplement point log cet utilisateur JWT Enregistrez les modifications et jetez-y un œil. Actualisez la page, et dans la console, voyez, nous obtenons ici notre objet utilisateur. Stockons simplement cela dans notre variable d'état utilisateur. Donc, à la place du journal des points de la console, nous ajoutons set user. Nous pouvons maintenant transmettre cet objet utilisateur au composant Nabar en tant qu'accessoire Mais avant cela, vérifions une condition. Et si nous n'avons pas de token dans notre espace de stockage local ? Donc, dans l'onglet de l'application de notre navigateur, sélectionnez ce jeton et supprimez-le d'ici. Actualisez maintenant la page et dans Console, C, nous obtenons une erreur, qui est un jeton non valide spécifié. Ainsi, lorsque nous n'avons pas de jeton dans le stockage local, nous n'obtenons rien dans cette variable JWT , puis cette valeur nulle est transmise au code JWT D, ce qui nous donne une erreur Pour résoudre ce problème, nous adhérons au bloc try and catch et déplaçons simplement ce code dans le bloc Try. Donc, si nous avons une erreur dans ce code, nous ne faisons simplement rien. Si votre application ne fonctionne que pour un utilisateur connecté, alors dans cette méthode d'esquisse, nous pouvons rediriger l'utilisateur vers la page de connexion ou d'enregistrement. Mais pour notre application, ce n'est pas le cas. Enregistrez les modifications et jetez-y un œil. Actualisez la page et voyez, même si nous n'avons pas de jeton, aucune erreur ne s'affiche. Maintenant, voici une dernière chose. Presque à chaque fois, les développeurs du backend fixent une date d'expiration pour notre jeton Web JSN pour des raisons de sécurité et pour le temps que nous obtenons notre valeur décodée Dans ce Bend, j'ai fixé le délai d'expiration à 1 heure, ce qui signifie qu'après 1 heure, le jeton n'est pas valide et cela nous donnera également une erreur. Dans notre effet d'utilisation, après avoir stocké cette valeur décodée dans JWT user, nous passons ici une condition si la date ne correspond pas à présent. Est supérieur ou égal au point JWTUser EXP, multiplié Si cette condition est vraie, notre jeton n'est pas valide. Ici, nous pouvons simplement supprimer le jeton de notre stockage local. Donc, stockage local, ne supprimez pas l'article et passez ici Tton Ensuite, nous rechargeons simplement notre page. Ajoutez donc le point de rechargement. Maintenant, nous réussissons, ce qui signifie que notre jeton est valide. Ce n'est qu'alors que nous définissons l'utilisateur sur JWT. est aussi simple que ça. Vous vous demandez peut-être pourquoi nous multiplions ici par 1 000. Donc, cette fonction date point now renvoie l' heure actuelle en millisecondes Donc, pour convertir ce délai d'expiration en millisecondes, il faut le multiplier Regardez les changements, et cela fonctionnera pour nous. 151. Composant de masquer le affichage en fonction de l'utilisateur: Nous avons maintenant l'objet utilisateur, qui indique que l'utilisateur est authentifié. Ainsi, grâce à cet objet, nous pouvons afficher ou masquer des composants. Ici, dans la barre de navigation, nous voulons afficher les liens de déconnexion et de chat de ces moders uniquement si l'utilisateur est Donc ici, dans le composant NaBR, nous transmettons cet utilisateur comme accessoire Enregistrez ceci et dans le composant Nabar, nous obtenons un accessoire utilisateur ici. Maintenant, en bas, nous enroulons ces trois liens avec les crochets, et ici nous ajoutons simplement une condition Si l'utilisateur est disponible, alors seulement affichez ces liens, mais cela nous donnera une erreur de compilation. Nous devons donc envelopper ces liens avec des fragments de réaction. va de même pour ces liens de connexion et d' inscription , car si l'utilisateur est déjà connecté, nous n' avons pas besoin de page de connexion ou d'inscription Enveloppez-les donc avec des crochets Cy, et nous ajoutons ici si l'utilisateur n' est pas disponible, puis affichez ces deux liens. Et encore une fois, nous devons maintenant ajouter ici des fragments de réaction si nous voulons afficher le nom d'utilisateur ici, nous pouvons également le faire en utilisant cet objet utilisateur, enregistrant les modifications et en jetant un œil. voyez, actuellement, nous n' avons pas d'objet utilisateur, et c'est pourquoi nous avons ici des liens de connexion et d'inscription. Vérifions-le. Dans les outils de développement, ouvrez l'onglet de l'application et voyez ici que nous n'avons pas de jeton. Maintenant, ouvrons la page de connexion et connectons-nous avec une adresse e-mail et un mot de passe valides. Et cliquez sur Soumettre pour voir ici que nous obtenons notre jeton. Mais nous obtenons quand même des liens de connexion et d'inscription, même si nous avons l'état de l'utilisateur. Pourquoi cela se produit-il ? Tout simplement parce que dans le composant d'application, cet effet d'utilisation ne s'exécutera qu' une seule fois lorsque notre composant d'application sera rendu. Ainsi, lorsque nous nous connectons à notre formulaire, composant de notre application est déjà affiché et l'utilisateur est déjà enregistré sur null. Laisse-moi te montrer quelque chose de cool. Au moment où nous actualisons cette page, nous pouvons voir ici que nous obtenons nos liens de connexion. Pour résoudre ce problème, il suffit de rafraîchir notre page lors de la connexion. Ouvrez le composant de la page de connexion et à l'endroit de cette navigation, nous écrivons simplement l'emplacement des points de la fenêtre égal à en double code, nous passons à notre page d'accueil. Supprimons maintenant cette variable de navigation et, en haut, supprimons également cette entrée d'utilisation de navigation. Enregistrez les modifications et jetez-y un œil. Supprimez ce jeton du stockage local, actualisez la page, puis sur la page de connexion, connectez-vous avec votre e-mail et votre mot de passe, puis soumettez-le. voyez, notre page actualisée et nous recevons également des liens de connexion Faisons de même avec la page d'inscription. Ouvrez donc le composant de la page d'inscription, et à l'endroit de cette navigation, nous écrivons que l'emplacement des points de fenêtre est égal à la page d'accueil Supprimez maintenant cette variable de navigation, et en haut, nous supprimons Use Navigate Import, et nous en avons terminé avec cela. Dans la leçon suivante, nous allons implémenter la fonctionnalité de déconnexion. 152. Implémenter la fonctionnalité de déconnexion: Actuellement, pour la déconnexion, nous supprimons manuellement le jeton de notre stockage local. Mais dans notre application, nous avons notre lien de déconnexion, nous pouvons utiliser pour implémenter la fonctionnalité de déconnexion. Ainsi, lorsque notre composant de déconnexion sera affiché, nous supprimerons ce jeton du stockage local Pour cela, dans le composant de routage en bas, nous ajoutons une autre route et nous définissons chemin pour découper la déconnexion et l'élément Ici, nous devons créer un nouveau composant pour la déconnexion. Dans le dossier des composants, nous avons le dossier d'authentification, et dans ce dossier, nous créons un composant appelé logout. Ajoutons maintenant du code standard. De plus, nous supprimons ce dû et nous renverrons null car nous ne voulons rien afficher. Maintenant, pour exécuter du code lors du rendu du composant, nous devons utiliser use effect Hook. Nous ajoutons donc ici un effet d'utilisation, fonction de rappel, et en tant que dépendance, nous passons un tableau vide Écrivons maintenant notre logique dans cette fonction de rappel. point de stockage local supprime m, et nous passons ici le nom de notre variable, qui est jeton. Enregistrez les modifications. Et dans notre composant de routage, nous ajoutons ici un composant de déconnexion dans les accessoires de l'élément Enregistrez les modifications et jetez-y un œil. Cliquez sur le lien de déconnexion et nous n'arriverons à rien. Mais si nous vérifions notre stockage local, nous pouvons voir que le jeton est supprimé d'ici. Nous devons maintenant rediriger l'utilisateur vers notre page d'accueil. Donc, pour cela, ce que nous utilisons, c'est l'emplacement des points de fenêtre. Ainsi, dans le composant de déconnexion, nous ajoutons ici l' emplacement des points de fenêtre égal à la page d'accueil Enregistrez les modifications et jetez-y un œil. Connectez-vous à notre application avec votre e-mail et votre mot de passe. Et vous voyez, nous nous sommes connectés. Maintenant, cliquez sur Déconnexion et voyez que cela fonctionne. Alors maintenant, notre application dispose des deux fonctionnalités de connexion et de déconnexion C'est ainsi que nous allons implémenter fonctionnalités de connexion et de déconnexion Vous pouvez voir à quel point c'est simple. Lorsque les développeurs ne comprennent pas uniquement JWT, ils trouvent cela compliqué 153. Simplifier le code: Maintenant, dans notre implémentation actuelle, il n'y a aucun problème. Donc, ici, après la connexion, nous travaillons avec le stockage local et y installons ce jeton. Nous avons fait la même chose sur la page d'inscription. C. Toujours dans le composant d'application, nous obtenons ce jeton depuis le stockage local, et dans le composant de verrouillage, nous le supprimons Demain, si nous décidons remplacer ce nom de jeton par un autre nom, nous devrons mettre à jour ce nom dans les multiples composants. Il vaut donc mieux mettre toute cette logique en un seul endroit. Ainsi, dans notre fichier de services aux utilisateurs, dans la fonction de connexion, nous ne renvoyons que la promesse de notre API. Au lieu de cela, nous pouvons également enregistrer notre jeton dans cette fonction. Laisse-moi te montrer. Donc, au lieu de retour, nous ajoutons await et pour ajouter await, nous devons rendre cette fonction asynchrone Nous pouvons maintenant enregistrer cette réponse dans données constantes et déstructurées ici Enfin, nous ajoutons ensemble de points de stockage local à un jeton et nous transmettons ici un jeton de points de données. Donc, cette fonction de connexion prend entièrement en charge notre logique de connexion. Enregistrez ceci et dans notre composant de connexion, nous supprimerons cette constante, et nous ne voulons pas non plus cet élément défini de points de stockage local. Vous vous demandez peut-être pourquoi nous ne déplaçons pas cette redirection dans notre fonction de connexion. Ainsi, après une connexion réussie, endroit où les utilisateurs doivent rediriger n' est pas la portée de cette fonction de connexion. Cela dépend entièrement de cette fonction de connexion. Demain, nous décidons de rediriger l'utilisateur vers un autre emplacement, alors nous n'avons pas besoin de modifier cette fonction de connexion. Sauvegardez ceci. Fermons maintenant ce composant de page de connexion, et faisons de même pour notre logique d'inscription. Supprimons donc cet élément d'ensemble de points de stockage local et supprimons également cette constante. Enregistrez les modifications, et dans le fichier des services utilisateurs à l'endroit de ce retour, nous ajoutons wait et les stockons dans des données constantes et restructurées Ensuite, nous collons simplement cette ligne de stockage locale, et à la fin de wait, nous rendons cette fonction asynchrone Bien. Simplifions maintenant la fonctionnalité de déconnexion Sc à ce point de stockage local, supprimez la fonction de messagerie instantanée. Et dans nos services aux utilisateurs en bas, nous créons une autre fonction appelée Logout, et il suffit de la coller ici, et il suffit de la coller ici, supprimer la ligne d'élément et d'exporter cette fonction à partir de ce fichier Enregistrez ceci et dans notre composant de déconnexion, nous appelons simplement cette fonction de déconnexion. Enregistrez ce fichier. Nous devons maintenant mettre à jour le dernier morceau de code, qui se trouve dans le composant de l'application. Ainsi, dans notre fichier de services utilisateurs, nous créons une autre fonction appelée Guser et dans cette fonction, nous obtenons d' abord un jeton provenant du stockage local Const JWT est donc égal au stockage local dot get item. Et ici, on passe un jeton. Ensuite, nous décodons notre jeton JWT. En haut, nous importons le décodage JWT à partir du décodage JWT. Ensuite, dans notre fonction, nous appelons ici le décodage JWT et passons ici ce Maintenant, cela renvoie notre objet utilisateur. Nous renvoyons donc cet objet à partir d'ici. Mais que se passe-t-il si nous ne trouvons pas ce jeton dans le stockage local ? Pour cela, nous avons essayé et catch block dans notre composant d' application. Mais ailleurs, si nous appelons cette fonction Get user, nous aurons une erreur. Nous ajoutons donc ici, try and catch block. Et déplacez ces lignes dans le blog Tri. Et si nous obtenons une erreur, nous renvoyons simplement ici null, c'est aussi simple que cela. Maintenant, exportons cette fonction get user, enregistrons-la, et dans notre composant d'application, supprimons cette première ligne, supprimons cette première ligne, et à la place de ce décodage JWT, nous appelons la fonction Gatuser Et en haut, supprimons cette entrée JWT. Enregistrez les modifications et revenez à notre fichier de services aux utilisateurs. Maintenant, si nous voulons changer le nom de notre variable de jeton , nous n'avons qu'à le changer dans ce fichier. Maintenant, nous pouvons même stocker le nom de cette variable dans une variable. En haut, nous créons une variable appelée nom du jeton, et nous l'avons définie dans un jeton à double code. Maintenant, dans le signe de fonction, sélectionnez cette chaîne de jetons et appuyez sur Ctrl plus D ou Commande plus D pour un curseur multiple et remplacez-la par une variable de nom de jeton. Maintenant, il ne nous reste plus qu'à changer ce nom à un seul endroit et voir notre code paraître plus propre et plus facile à maintenir Dans la section suivante, nous verrons comment nous pouvons appeler des API protégées, et ainsi, nous achèverons nous verrons comment nous pouvons appeler des API protégées, presque ce projet. S dans la section suivante. 154. Section 14 : appeler des API et des routes protégées: Bienvenue dans la section 14 du cours Ultimate React. Dans cette section, nous allons voir comment nous pouvons appeler des API protégées, ce qui signifie simplement que certaines de nos API sont réservées aux utilisateurs adaptés. Comme sur notre page Ma commande, nous devons obtenir tous les détails de la commande de l'utilisateur connecté actuel. Nous verrons donc comment nous pouvons appeler des API protégées, et si l'utilisateur n'est pas connecté, nous le redirigerons simplement vers la page de connexion. Nous verrons également comment nous pouvons gérer les itinéraires protégés. Je suis vraiment enthousiasmé par cette section et j'espère que vous l'êtes aussi. Commençons donc. 155. Comprendre la fonctionnalité d'ajout au panier: Maintenant, avant d'implémenter la fonctionnalité Head to Cart dans notre application, comprenons cette fonctionnalité en profondeur. Donc, tout d'abord, nous avons le bouton «  aller au panier » pour accéder aux composants. premier se trouve sur la fiche produit et second sur la page du produit unique. Donc, pour le panier, nous créons une variable State, qui stockera les produits, que nous avons ajoutés à notre carte avec la quantité. Par exemple, si nous avons un iPhone 14, nous pouvons sélectionner la quantité de ce produit, puis nous cliquons sur le bouton « Aller au panier », et notre iPhone 14 sera ajouté à notre panier avec cette quantité. Ainsi, pour chaque produit, nous avons un nouvel objet avec deux propriétés, produit, qui est l'objet du produit, et nous avons la quantité, qui est la quantité actuellement sélectionnée. Dans cette gamme de paniers, nous pouvons avoir plusieurs produits, et nous indiquons la taille du panier dans notre barre de navigation. C' est la première partie. La deuxième partie est que notre carte est une variable locale, ce qui signifie que si nous actualisons la page, cette carte sera à nouveau vide. Nous n'en voulons pas, n'est-ce pas ? Quelle est donc la solution ici ? Ainsi, après avoir ajouté ces informations de carte dans l'état, nous pouvons stocker les informations de la carte utilisateur dans le backend. Et lors de l'actualisation, nous obtiendrons détails de cette carte dans le back-end. Si nous rencontrons une erreur lors de l' ajout de produits à la carte, nous restaurerons notre carte dans son état précédent. C'est aussi simple que ça. Nous l'avons déjà fait dans notre section Calling a PI. Tout d'abord, nous verrons comment nous pouvons stocker les informations de notre carte dans l'État local. 156. Ajouter au panier localement: Commençons par notre première étape, qui consiste à ajouter des produits dans l'État local. Donc, la première étape pour ajouter une variable d'état est de décider où créer notre variable d'état. Voici donc un composant de notre application. Nous avons le composant d'application comme composant racine. À l'intérieur, nous avons deux composants : Nabar et le routage. Et dans ce routage, nous avons un seul composant de page produit, et à l'intérieur de celui-ci, nous avons notre bouton « tête à carte ». Nous avons besoin d'un tableau en deux composants, une barre Na et une page de produit unique. Maintenant, laissez-moi vous donner un raccourci pour décider où définir notre variable d'état. Si notre variable d'état est nécessaire pour accéder à deux composants différents, nous devons définir cette variable d'état dans le composant parent le plus proche. En termes simples, il suffit de voir quel composant parent est le plus proche à la fois du NaBr et du composant du produit unique Ici, le composant parent le plus proche est notre composant d'application. Et si nous définissons le chariot dans un composant, n'est qu'alors que nous pouvons transmettre cet état de chariot en tant qu'accessoires dans ces deux composants Ainsi, dans notre composant d'application, après cet état utilisateur, nous ajoutons une autre variable d'état appelée cart et set cart. Et comme valeur par défaut, ce que nous allons transmettre à droite, un tableau vide. Maintenant, tout d'abord, ce dont nous avons besoin dans le composant NBR. Il suffit d'afficher le nombre de produits figurant sur notre carte actuelle. Donc, en tant qu'accessoires, le nombre de cartes est égal à la longueur des points du panier Enregistrez ceci, et dans le composant NBA, nous obtenons le nombre de cartes dans les accessoires et en bas, à la place de ce zéro, nous affichons simplement ce nombre de cartes Dites ceci et maintenant nous n'avons plus à nous inquiéter pour ce Navar. Revenons maintenant à un composant situé à la place de la carte et de la carte latérale dans le composant unique du produit, nous pouvons créer une fonction ici, tête au panier, la fonction flèche, et à l'intérieur de celle-ci, nous écrivons notre logique pour ajouter un article dans la gamme de paniers Ici, dans le paramètre de fonction, nous obtenons le produit sélectionné, et nous obtenons également la quantité de ce produit, qui est le nombre de produits que nous devons ajouter. Ici, nous mettons simplement la carte sur la matrice. abord, nous ajoutons toutes les valeurs des cartes précédentes, puis nous ajoutons un nouvel objet. Ici, nous définissons le produit ce produit et la quantité par cette quantité. Ou nous pouvons simplifier ce code en supprimant les deux. Si cette syntaxe vous laisse perplexe par la suite, ne vous inquiétez pas, vous pouvez utiliser cette ancienne syntaxe. Cela dépend totalement de vous. Passons maintenant cette fonction tête à carte par le biais d'accessoires. Ainsi, dans le composant de routage, nous passons d'une carte à l'autre. Enregistrez ce fichier, et dans le composant de routage, nous arrivons à la fonction de la carte dans les accessoires Et encore une fois, transmettez-le dans le composant de la page produit unique. Donc, se diriger vers le panier équivaut à se diriger vers le chariot. Enregistrez ce fichier, et dans notre composant de page produit unique, nous arriverons enfin à la tête du panier avec les accessoires Et en bas, sur notre bouton tête vers le panier, nous passons l'événement de clic, et nous y ajoutons la fonction flèche, et ici nous appelons la fonction tête vers le panier. Et comme premier argument, nous transmettons l'objet de notre produit, que nous obtenons depuis le back-end. Écoutez, et comme deuxième argument, nous passons la quantité. Observez les modifications et jetez-y un coup d'œil. Tout d'abord, ouvrez les outils de développement, ouvrez n'importe quelle page de produit. Et à partir de là, nous pouvons modifier la quantité et cliquer sur le bouton Ajouter au panier. Et voyez, en haut de la page, nous avons le contraire. Maintenant, ouvrons une autre page de produit et cliquez sur le bouton Ajouter au panier. Et ici, nous pouvons voir les comptes mis à jour. Voyons maintenant notre gamme de chariots. À partir de là, nous ouvrons l'onglet Composants et sélectionnons notre composant d' application. Ici, nous pouvons voir le tableau des chariots. Modifiez maintenant la même quantité de produit et cliquez sur deux cartes. Vous voyez, nous avons ici trois produits, et c'est le bogue. Nous devons donc régler ce problème. Ainsi, dans notre composant d'application, nous supprimons cette fonction de set card et nous allons écrire la logique à partir de zéro. Donc, tout d'abord, nous créons une nouvelle variable appelée carte mise à jour et ajoutons toutes les valeurs précédentes en utilisant l'opérateur de spread. Nous trouvons maintenant un index de produits sélectif dans ce tableau. Donc, Card Dot Find Index mis à jour. Ici, nous récupérons chaque article et vérifions ici la condition selon laquelle l'identifiant du point de soulignement du produit est égal au produit, l'identifiant du point de soulignement du point Et nous stockons cet indice dans la variable call product index. Maintenant, cette méthode de recherche index renvoie la valeur d'indice du produit. Et si le produit que nous avons sélectionné n' est pas disponible dans cette gamme, il en retournera moins un. Ici, nous devons passer la condition si cet indice de produit est égal à moins un, ce qui signifie que le produit n' est pas dans notre panier. Ensuite, nous appelons la méthode cart point push mise à jour. Et ici, nous poussons un objet avec un produit vers l'objet du produit. Quantité pour cette quantité. Sinon, nous ne mettrons à jour que la quantité du produit ajouté, le panier mis à jour. Ici, nous indiquons la quantité par points de l' indice du produit plus égale à cette quantité. Si le produit n'est pas disponible, nous ajoutons un nouvel objet avec les propriétés du produit et de la quantité. Sinon, nous ajoutons la quantité à l'ancienne quantité de leur produit. Maintenant, à la fin, nous configurons simplement le panier sur notre carte mise à jour. Enregistrez les modifications et jetez-y un œil, actualisez la page, ajoutez un article et cliquez sur « Ajouter au panier ». Voyez si c'est ajouté. Modifiez maintenant la quantité, puis cliquez à nouveau sur « Ajouter au panier ». Voir ici, uniquement les mises à jour des quantités. 157. Appeler une API protégée: Ainsi, dans la leçon précédente, nous stockons nos produits dans l'état de la carte locale. Nous allons maintenant voir comment nous appelons cette API « head to card ». Maintenant, vous vous demandez peut-être pourquoi j'attache autant d'importance à l' appel de cette API ? S'agit-il de la même API que récupérer des produits ou obtenir des catégories ? Et la réponse est non, il ne s'agit pas de la même API que celle que nous avons appelée précédemment. Il s'agit de l'API à laquelle seuls les utilisateurs connectés peuvent accéder. Laisse-moi te montrer. Donc, le panneau client Tender et ici nous ajoutons une nouvelle demande, sélectionnons ici la demande de publication et écrivons l'API dans la colonne SDTP, double barre oblique, hôte local, API de colonne 5 000 barres obliques, barre oblique CAT ici nous passons notre identifiant Pour l'instant, il suffit de passer ici un identifiant aléatoire, et nous devons transmettre le nombre de quantités dans le corps de cette demande. Sélectionnez donc le corps, et ici dans le JSON, nous passons simplement la quantité à cinq. Et envoyez la demande. Ici, nous pouvons voir que nous avons une erreur, un accès refusé, aucun jeton fourni. Maintenant, laissez-moi vous montrer comment nous obtenons cette erreur depuis le backend Dans le projet Bend, nous avons ce dossier de routes, dans lequel nous avons un fichier CAT dans lequel je définis toutes les API CAT. Maintenant, dans la ligne 27, nous devons couper un itinéraire, et ici j'ajoute les deux articles en métal. Ne t'inquiète pas. Si vous ne connaissez pas node jazz, je vous explique simplement comment nous obtenons cette erreur. Vous n'avez pas besoin de coder une seule ligne dans le backend. Ce serment est donc un intergiciel qui s'exécute d'abord avant l'exécution de notre code API principal Voyons maintenant ce qu'il y a à l'intérieur de ce bot. Donc, dans le dossier middleware, nous avons les deux intergiciels, et ici nous avons cette fonction Tout d'abord, cette fonction obtiendra notre jeton Web JSON à partir de notre en-tête de requête nommé X a token. Et puis si nous ne transmettons pas notre jeton Web JSON dans cet en-tête, cela nous donnera cette erreur d'accès refusé avec le code d' état 401. Et si nous avons un jeton et que ce jeton est vérifié par la clé secrète JWT, il exécutera notre logique moyenne d'API, telle que la présentation de ce double intergiciel Bref, pour accéder aux API protégées, nous devons transmettre notre jeton Web JSN dans notre en-tête XTken Ce n'est qu'alors que nous pourrons accéder aux API protégées. Presque toutes les applications transmettent d'une manière ou d'une autre un jeton au backend et le moyen le plus courant et le plus sûr est par en-tête. Dans notre application, nous devons également définir notre jeton Web JSN dans le X ou le jeton Donc, pour transmettre le jeton dans l' en-tête de notre dossier Utils, nous créons un autre fichier appelé set autocom point js Maintenant, dans ce fichier en haut, nous importons le client API à partir de ce fichier client API, qui est notre variable axios prête à Ensuite, nous définissons la fonction const set token. Et dans le paramètre, nous obtenons notre fonction de flèche symbolique, et à l'intérieur de cette fonction, nous ajoutons une condition. Si un jeton est disponible, nous définirons des points par défaut pour le client API, des points communs pour les en-têtes, des crochets, et nous transmettrons ici le nom de notre en-tête, qui est X ou Nous définissons le même nom d'en-tête dans le backend. Dans votre application, il se peut que ce soit différent. Vous devez donc passer ce nom ici égal à, nous passons un jeton. Maintenant, en L, nous allons supprimer cet en-tête, supprimer, copier cette expression et la coller ici. Et à la fin, nous exportons simplement par défaut cet ensemble ou cette fonction de jeton. Enregistrez ce fichier, et maintenant, dans notre composant d'application, en dehors de cette fonction, nous appelons la fonction set ou token. Et ici, nous devons transmettre notre jeton Web JSON, qui peut être stocké dans le stockage local. Nous pouvons donc écrire ici : stockage local , point, get, item, et token. Maintenant, comme nous le savons, nous définissons tous nos jetons de stockage locaux dans le fichier des services aux utilisateurs. Ainsi, au lieu d'écrire ce stockage local ici, nous pouvons le couper et dans le fichier de services utilisateurs en bas, nous exportons une nouvelle fonction appelée Get JWT Et à l'intérieur de celui-ci, nous renvoyons simplement le point de stockage local et nous transmettons ici le nom du jeton. Enregistrez ce fichier, et dans notre composant d'application, nous pouvons appeler ici la fonction Gt JWT est aussi simple que ça. Maintenant, pour notre application, nous n'avons pas besoin d'envoyer notre en-tête de jeton à chaque demande. Nous l'avons défini pour tous nos appels d'API. 158. Appeler l'API Ajouter au panier: Appelons maintenant notre API Head to Card. Dans le dossier des services, nous créons un nouveau fichier, les services de carte d' appel, dans lequel nous définirons toutes les API de notre carte. Comme nous l'avons fait pour les services aux utilisateurs. En utilisant cette méthode, nous pouvons facilement gérer nos appels d' API et nous n'avons pas besoin d'écrire le même appel d'API plusieurs fois dans notre application. Donc, en haut, nous importons le client API depuis le client API Utils slash Créez maintenant une nouvelle fonction appelée Add to Cart API. Et dans cette fonction, nous appellerons notre API. Donc, le client API point post. Ici, dans les backticks, nous ajoutons maintenant des CRT obliques, nous devons ajouter l'identifiant de produit que nous avons sélectionné, afin que nous puissions obtenir cet identifiant de produit comme paramètre de cette fonction, et nous avons besoin de la quantité de Maintenant, dans notre API, nous transmettons l'identifiant Dollar calibracets. Et au deuxième paramètre, nous passerons notre objet corporel. Et dans ce cas, nous définissons quantité par quantité ou nous pouvons supprimer cela. Cette expression renvoie la promesse. Nous pouvons donc simplement retourner cette promesse à partir d'ici. R, exportons cette fonction à partir d'ici, enregistrons les modifications, et dans notre composant d'application situé dans la fonction head to cut, après avoir mis à jour notre état local, nous appelons la fonction API head to cut des services de carte. Et ici, nous devons faire valoir deux arguments. premier est l'identifiant du produit actuel, qui est l'identifiant du produit souligné par un point, et le second est la quantité de ce produit Maintenant, comme nous le savons, cette fonction renverra une promesse. Nous pouvons gérer cela en utilisant la méthode then and cache, ou nous pouvons également utiliser try and catch. Mais personnellement, j'aime utiliser la méthode then and catch. Je ne sais pas ce que nous ferons si nous avons ajouté avec succès le produit au CAT. Ici, nous pouvons simplement afficher une alerte ou une notification de toast. Donc, pour l'instant, nous nous contentons de const dot log, ces données de points de réponse Et dans la méthode du cache, nous devons gérer les erreurs. Pour l'instant, nous enregistrons simplement cette réponse par points sur console . De plus, si le produit ne s'ajoute pas à notre carte , nous rétablirons l'état précédent de notre carte. Il suffit de régler carte par carte. Enregistrez les modifications et jetez-y un œil. Ouvrez la console, modifiez la quantité, et Glicon dans le panier et voyez que nous avons reçu le message, l'article a été ajouté au panier Vérifions-le maintenant dans notre base de données. Donc, dans le Mongo D, devenez un pass, ouvrez une collection de cartes. voyez, nous avons ici un document dans lequel se trouve notre produit. Parfait. Maintenant, affichons simplement la notification Toast en cas de succès ou d'erreur. Maintenant, vous vous demandez peut-être ce qu' est la notification Toast ? Laissez-moi vous montrer dans une minute. Tout d'abord, ouvrez le terminal, et dans le nouveau terminal, nous écrivons NPM, I, react, dessify et En utilisant React to Stify Library, nous pouvons afficher nos notifications manière très simple et moderne Réduisez maintenant ce terminal, et en haut, nous allons importer le conteneur Toast et méthode Toast de React vers Stifi Library Et aussi, nous devons importer son fichier CSS pour ajouter des styles. Donc, importez, réagissez, tostify dis react, le fichier CSS Tostifyt Nous devons maintenant ajouter ce composant de récipient à pain grillé dans notre application, afin de pouvoir l'ajouter n' importe où dans ce tube. Nous ajoutons donc ici le composant du récipient à pain grillé. Il ne nous reste plus qu'à ajouter notre message dans cette fonction de toast. Donc, dans notre méthode d'alors, à la place de cette console, nous ajoutons du pain grillé. Ici, nous pouvons sélectionner plusieurs méthodes. Par exemple, nous avons réussi afficher la notification en texte vert. Et ici, nous transmettons notre message au produit, ajouté avec succès. Maintenant, permettez-moi de vous montrer également d'autres méthodes. Dupliquez donc cette ligne quatre fois de plus et remplacez cette méthode par erreur pour la couleur rouge, avertissement pour la couleur jaune, information pour la couleur bleue, et nous avons également la valeur par défaut. Pour cela, nous n' adopterons rien. De plus, dans la méthode catch, nous ajoutons une erreur Toast Point et un message indiquant que l'ajout du produit a échoué . Conservez les ginges et jetez-y un coup d'œil. Cliquez sur Ajouter au panier et voyez ici, en haut à droite, que nous recevons nos notifications de toast. Si nous plaçons le curseur sur la notification, elle s'arrêtera là. Voici donc les notifications Toast. Vous pouvez voir à quel point nous pouvons ajouter des notifications simplement et facilement. Maintenant, au lieu d'afficher les notifications de toast dans le coin supérieur droit, je veux les afficher dans le coin inférieur droit. Dans le composant du récipient à pain grillé, nous avons une sonde appelée position. Si vous n'obtenez pas Autoizon, appuyez sur Ctrl plus espace ou Commande plus espace et voyez ici quelques propriétés Ici, nous sélectionnons en bas à droite. Nous pouvons également personnaliser davantage cette notification de toast. Pour cela, vous pouvez vous référer à sa documentation officielle. Ils l'expliquent dans un langage très simple et facile. À partir de là, nous supprimons également ces notifications de toast indésirables. 159. Récupérer le panier d'utilisateur depuis le backend: Ainsi, actuellement, lorsque nous ajoutons des produits à notre carte, ceux-ci sont ajoutés avec succès dans notre base de données. Maintenant, sur la page de notre carte, nous devons uniquement afficher les détails de la carte dans notre tableau. Ainsi, lorsqu'une carte gère un fichier, nous définissons ici une nouvelle fonction appelée Get card API. Et dans cette fonction, nous appelons simplement le client api point GAT. Et pour obtenir la carte d'utilisateur, on passe le SCAT. Vous pouvez utiliser notre documentation d'API à titre de référence. Maintenant, cette expression renvoie une promesse. Nous renvoyons donc ceci et exportons cette fonction. Enregistrez ce fichier, et dans notre composant d'application, après cette fonction tête à carte, nous créons une nouvelle fonction appelée Get card. Et dans cette fonction, nous appelons simplement notre API Get card. Maintenant, qu'est-ce que cette fonction va écrire ? Bien, nous arrivons ici, promis. Point alors, ici nous obtenons une réponse et nous mettons simplement le panier en fonction des données du point de réponse. Dans la méthode catch, nous ajoutons Toast Dot ». Une erreur s'est produite. Maintenant, sur quelle page nous voulons récupérer l'API de la carte. Vous pourriez le dire sur la page de la carte, mais ce n'est pas la bonne réponse. Laissez-moi vous montrer ce qui se passera si nous appelons notre fonction Gecard dans la page du panier Dans le composant de routage, nous transmettons les accessoires Get card à G cart. Enregistrez ceci et dans le composant de routage, tout d'abord, nous obtenons les accessoires et les passons directement dans le composant de la page de carte Passez d'une carte à une carte G. Enregistrez ceci et dans le composant de page du panier, nous obtenons notre fonction Gcard dans les accessoires, et dans l'effet d'utilisation, nous appellerons cette Utilisez donc l'effet et passez la fonction Callback et le tableau vide comme dépendance Et dans la fonction de rappel, nous appelons simplement la fonction Get card Dites les modifications et jetez-y un coup d'œil. Ici, nous avons une erreur. Voyons donc cela dans la console. Ici, nous obtenons getcardpi point n n'est pas la fonction. Dans notre composant d'application, ici, j'ai oublié d'appeler cette fonction, enregistrer les modifications et d'y jeter un œil. voyez, notre erreur a disparu, et dans notre onglet composant, sélectionnez le composant de l'application, et nous obtenons ici un tableau de cartes. Maintenant, si nous actualisons la page , nous obtenons également les détails de la carte. Maintenant, permettez-moi de vous montrer le bogue principal. Accédez à la page des produits et actualisez-la. Actuellement, nous n'avons aucun article dans notre panier, mais dans le backend, nous en avons deux. Si nous avions le même article, alors dans l'état local du panier, nous avons un nouveau produit avec une nouvelle quantité. Mais en fin de compte, nous avons une autre quantité. En gros, si nous appelons Get card uniquement sur la page du panier , les données de notre carte principale et l'état local du panier auront des données différentes, ce que nous ne voulons pas. Nous pouvons donc appeler cette fonction Get card dans le composant de l'application. Ainsi, dans notre composant d'application, nous ajoutons un autre effet d'utilisation, et ici, dans le rappel, nous appelons notre fonction Get card Mais ici, il faut transmettre la condition. Si l'utilisateur est disponible, n'est qu'alors que nous appellerons cette fonction Get card car cette API n'est accessible qu'aux utilisateurs connectés. Et dans le tableau des dépendances, nous pouvons ajouter ici un utilisateur. Lorsque l'utilisateur change, cette API Get card s'exécute. Enregistrez les modifications et jetez-y un œil, actualisez la page et voyez sur la carte que nous obtenons les détails de notre carte. Maintenant, vous pourriez vous demander pourquoi nous ne supprimons pas la fonction Getcard du composant de page de carte Nous pouvons donc l'utiliser pour vérifier les détails de notre carte. Si vous souhaitez supprimer cet effet d'utilisation, vous pouvez également le faire. C'est tout à fait bon. Permettez-moi également de le supprimer. Il ne nous reste plus qu'à afficher les détails de notre carte dans ce tableau. Donc, pour afficher les détails de la carte, nous avons besoin de l'état de la carte dans ce composant. Revenons donc à notre composant d'application. À la place de ces accessoires de cartes pour chats, nous ajoutons carte par carte Et dans le composant de routage, nous changeons également ce panier et passons ici panier par panier. Enfin, dans notre page CAT, nous avons ici notre matrice CAT. Maintenant, pour vérifier, nous enregistrons ce tableau CAT par points sur la console, enregistrons les modifications et, dans la page CAT, ouvrons la console, actualisons la page et voyons que nous obtenons ici un tableau CAT, qui est le tableau d'objets avec des propriétés de produit et de quantité. Ainsi, dans le composant de notre panier en bas, dans le corps du Te, nous ajoutons une carte à points du panier. Ici, nous obtenons un seul élément, fonction flèche, et ici nous renvoyons simplement cette ligne du tableau. Maintenant, cet article est un objet, nous pouvons donc le déstructurer et obtenir ici propriétés du produit et de la quantité Je vais un peu plus vite car nous travaillons sur React depuis de nombreuses années, et vous saviez déjà ces choses. Si je vous explique chaque étape, vous allez certainement vous ennuyer. Donc, tout d'abord, dans la ligne du tableau, nous ajoutons un attribut clé à l'identifiant du point de soulignement du produit Ensuite, nous remplaçons ce nom par le titre à points du produit. Ensuite, nous ajoutons le prix au point du produit. Ensuite, nous avons la saisie de la quantité. Nous passons donc ici la quantité à cette quantité et le stock au produit point par stock. Pour l'instant, nous utilisons la fonction de quantité définie. Et au total, nous répercutons la quantité dans le prix du produit. Enregistrez les modifications et jetez-y un œil. Vous voyez, dans le tableau, nous recevons nos articles. Magnifique. Calculons maintenant ce sous-total. Pour cela, en haut, nous créons une nouvelle variable d'état. Sélectionnez donc uste et sélectionnez les extraits, donnez-lui un nom, un sous-total, et définissez le sous-total et la valeur par défaut à zéro Maintenant, pour compter le sous-total, nous utilisons use effect, pass here, callback function, et dans le tableau des dépendances, nous ajoutons un tableau cart Pouvez-vous me dire pourquoi nous utilisons ici l'effet d'utilisation ? C'est vrai. Parce que lorsque nous modifions les données de notre panier, nous voulons également voir le sous-total mis à jour Ainsi, dans la fonction de rappel, nous définissons d' abord un total égal à zéro Ensuite, nous utilisons cart point pour la boucle H. Et ici, nous obtenons la fonction de flèche de chaque élément. Et ici, nous faisons le total plus égal à l'article point par produit, le prix point par point par rapport à la quantité de l'article. Enfin, nous avons simplement fixé un sous-total à ce total. Maintenant, en bas, nous passons ici le sous-total et dans le total final, nous écrivons le sous-total plus les frais de compression, qui Enregistrez les modifications et jetez-y un œil. voyez, ici, nous obtenons notre sous-total et notre total en fonction des données de notre carte 160. useCrochet de contexte: Donc, actuellement, dans notre application, nous avons l'état de l'utilisateur et l' état de la carte dans notre composant d'application. Maintenant, comme dans notre composant de carte, nous devons afficher les détails et le profil de l'utilisateur en haut. Une solution consiste à faire passer notre objet utilisateur à l'aide accessoires via le composant de routage , puis dans le composant de la carte Nous l'avons fait de nombreuses fois avec cet état de carte, mais c'est vraiment une perte de temps . C'est ce que l'on appelle également le perçage des hélices, ce qui signifie que nous perçons tous les composants pour ne transmettre qu'un seul accessoire au composant enfant Une autre façon de transmettre des données consiste à utiliser use Context hook. L'utilisation de Contact Hook est donc utilisée pour gérer les données globales dans l'application React, telles que le thème, l'utilisateur, les détails de la carte, etc. En termes simples, en utilisant use Context hook, nous pouvons rendre nos données accessibles globalement par n'importe quel composant. Ainsi, si nous globalisons nos données utilisateur, elles peuvent être accessibles dans n'importe quel composant notre choix sans passer manuellement par les accessoires Voyons comment créer des contextes. Donc, pour créer un contexte dans React, nous devons suivre trois étapes simples. La première consiste à créer le contexte, la deuxième à fournir le contexte et la troisième à consommer les contextes. Ne t'inquiète pour aucun d'entre eux. Regardez ceci et à la fin, vous verrez la magie des contextes. Commençons donc par l'étape numéro un, la création du contexte. Nous créons donc ici l'état global de notre utilisateur. Ainsi, dans le dossier source, nous créons un autre dossier appelé Context. Et dans ce dossier, nous allons définir tous nos contacts. Nous créons donc ici un nouveau fichier appelé user Contacts point JS. Maintenant, pour créer un contexte, nous importons d'abord la fonction de création de contexte depuis la bibliothèque React. Cette fonction est utilisée pour créer un contexte. Maintenant, nous appelons cette fonction de création de contexte, et ici nous passons null pour la valeur par défaut et nous la stockons dans une variable appelée contexte utilisateur. Vous pouvez donner ce que vous voulez, mais il vaut mieux appeler le même nom. Et à la fin, exportons le contexte utilisateur par défaut. Notre première étape est donc terminée. Passons maintenant à l'étape numéro deux, qui fournit le contexte. Ainsi, lorsque nous définissons notre état utilisateur, nous devons saisir les contextes de ce composant. Ainsi, dans le composant d'application en haut, nous importons des contextes utilisateur depuis Context, nous coupons les contextes utilisateur. Ici, nous devons définir quels composants doivent accéder à ce contexte utilisateur. Encore une fois, dans cette hiérarchie, si vous souhaitez transmettre les données utilisateur au composant de la carte, nous voulons également que nos données utilisateur figurent dans le composant Navbar Ici, il suffit de fournir les données à la barre de navigation et aux composants de routage, et ces données peuvent être accessibles dans tous leurs composants enfants Enveloppez donc ces deux composants avec le fournisseur de points de contexte utilisateur. Ainsi, quel que soit le composant que vous transmettez entre ce fournisseur, celui-ci et ses composants enfants peuvent accéder à cette valeur de contexte. Nous pouvons maintenant transmettre la valeur en utilisant l' attribut value dans ce fournisseur de contexte. Donc, écrivez une valeur égale à, nous ajoutons simplement ici cet utilisateur. Dans cet attribut de valeur, nous pouvons également transmettre des fonctions, des objets, n'importe quoi. Voyons maintenant comment accéder à cette variable dans notre composant de page panier. Ouvrez le composant de page de notre carte dans lequel nous voulons utiliser cette valeur. Mais comment accéder à cette valeur ? Donc, en haut, nous importons use Context hook depuis la bibliothèque React. Et dans ce composant fonctionnel, nous écrivons des contextes d'utilisation, l'exception d'un argument, qui est notre contexte utilisateur. Nous devons donc importer ce contexte utilisateur à partir de nos contextes slash Passez maintenant ce contexte utilisateur dans ce hook de contexte d'utilisation et nous stockons cette valeur dans une variable appelée objet utilisateur car nous avons déjà défini l'utilisateur ici pour notre image. Consolons maintenant Enregistrez les modifications et jetez-y un coup d'œil. Ici, dans l'application, mon jeton a expiré. Je dois donc me reconnecter, et nous voilà à la page des cartes. Ici, dans la console, nous obtenons notre objet utilisateur. Ainsi, quelle que soit la valeur que vous transmettez dans ce fournisseur de contexte, nous pouvons accéder à cette valeur en utilisant use Context hook. Si vous comprenez ces trois étapes, alors félicitations. Vous comprenez le hook d'utilisation du contexte. Ici, à la place de cette image utilisateur, nous ajoutons des backticks, et dans ce double SDDB cool pour notre barre oblique , hôte local, colonne 5 000, profil oblique, barre oblique, barre oblique et ici nous ajoutons le nom de notre photo de profil oblique et ici nous Donc dollar, crochets Cully, objet utilisateur, point d' interrogation, choix de profil, car si notre utilisateur est nul, nous obtenons une erreur ici Ensuite, à la place de ce nom, nous ajoutons le nom à l'objet utilisateur, le point d' interrogation, le nom du point d'interrogation. Et ensuite, à la place de cet e-mail, nous transmettons ici un e-mail à l'utilisateur Object, mark point email. Enregistrez les modifications et jetez-y un œil. voyez, ici, nous obtenons nos données utilisateur sans passer par des accessoires. Maintenant, nous n'avons pas besoin de cette image utilisateur, alors supprimez-la, et maintenant nous pouvons renommer cet objet utilisateur en utilisateur Revenons maintenant à notre composant d'application. Ici, nous faisons passer l'utilisateur comme accessoire. Nous n'avons plus besoin de le faire. Supprimez ces accessoires utilisateur d'ici et dans le nouveau composant à l'endroit où cet utilisateur a été extrait des accessoires Ici, nous appelons use Context hook et à l'intérieur de celui-ci, nous transmettons notre contexte utilisateur et nous stockons cette valeur dans une variable utilisateur. Sauvegardez-les et voyez que cela fonctionne de la même manière. 161. Exercice de création de contexte pour un panier: Il est maintenant temps de faire un peu d'exercice. Lorsque nous définissons notre contexte utilisateur, nous pouvons également définir le contexte du panier car nous l'utilisons dans la page des composants de la carte. Et dans ce contexte, transmettez des valeurs telles que cart array et head to cart function. Je veux que vous définissiez le contexte du panier et que vous obteniez la valeur de cette fonction panier et de cette fonction Ed to cart, que vous obteniez ces valeurs dans le composant de page du panier et que vous mettiez à jour tous les composants qui utilisent fonction chariot ou tête à carte à partir d'accessoires Sachez que c'est un exercice facile et que vous pouvez le faire en seulement deux à trois minutes. Terminez l'exercice , puis observez la solution. J'espère que tu auras résolu cet exercice. Voyons maintenant rapidement cette solution. Dans le dossier Context, nous créons un nouveau fichier appelé card context point gs. La première étape pour définir les contextes est d'utiliser la fonction Create Context Ajoutez ici create context et voyez, à l' aide de la saisie automatique, nous obtenons cela comme valeur par défaut Nous passons ici null. Nous stockons maintenant cette fonction dans une variable appelée contexte de carte, et à la fin, nous exportons simplement ce contexte de carte par défaut Enregistrez ce fichier et dans le composant de l'application où nous définissons le tarif de notre carte, nous devons donc ajouter notre fournisseur dans ce composant. Ici, après le contexte utilisateur, nous ajoutons le contexte de la carte, sélectionnons l'importation automatique, fournisseur de points, et encapsulons nos composants avec le fournisseur de points du contexte de la carte. Et dans ce fournisseur, nous avons des accessoires de valeur égaux à maintenant, ici, au lieu de transmettre une seule variable, nous pouvons transmettre un objet de variables et de méthodes Donc, d'abord, passez le tableau du panier et ensuite de la fonction « at to cart ». Ici, cela signifie à la fois aller au panier pour ajouter au panier. J'écris directement du code SOT. Enregistrez ceci, et maintenant, dans notre composant de page de panier à l'endroit où vous pouvez obtenir un tableau de cartes à partir d'accessoires, nous pouvons simplement ajouter, utiliser le contexte, et à l'intérieur de celui-ci, nous transmettons le contexte de la carte Et nous obtenons ces valeurs ici dans la variable appelée contexte de carte. Ou nous pouvons déstructurer cet objet, et ici nous obtenons la fonction panier et ajout à la carte Regardez les modifications et jetez-y un coup d'œil. Tu vois, ça marche comme avant. Remplaçons maintenant toutes les cartes que nous recevons des accessoires. Commencez donc toujours par l'application du composant racine, et nous pouvons voir dans la barre de proximité que nous passons le nombre de cartes, qui correspond à la longueur des points du panier. Nous pouvons donc supprimer le et dans le composant nebar à la place de ces accessoires, nous appelons here, utilisons Context et pass here, le contexte de la carte, et nous stockons cette valeur dans une variable restructurons cet objet et obtenons Maintenant, en bas, à la place du décompte de ce panier, nous ajoutons la longueur des points du panier. Enregistrez les modifications et jetez-y un œil. Tu vois, ça marche aussi. Voyons maintenant les autres composants. Revenons donc au composant de l'application. Ici, nous pouvons voir le chariot et la chaleur du chariot passer tous deux à travers des accessoires. Retirez donc ces deux accessoires. Et dans le composant de routage, nous supprimons également ces accessoires. Et supprimez également cette fonction d' achat au panier d'un composant de produit unique, et supprimez également les accessoires de carte du composant de page de carte Nous avons déjà mis à jour ce composant de page de carte, alors ne vous inquiétez pas à ce sujet. Nous avons juste besoin de mettre à jour ce composant de page produit unique. Ouvrez donc ce composant et supprimez les accessoires. Nous appelons ici, utilisons Context Hook et passons simplement ici, le contexte de la carte Cela renverra nos valeurs, nous les déstructurons donc ici et passerons à la fonction panier Enregistrez les modifications et vous verrez comment, simplement et sans perçage d'hélices, nous pouvons transmettre notre variable dans l'arbre des composants 162. Supprimer des articles du panier: Implémentons maintenant une fonctionnalité de suppression d'éléments. Tout d'abord, nous retirerons le produit de notre État local. Ensuite, nous appellerons également l'API pour supprimer l'élément de notre backend. Alors d'abord, laissez-moi fermer tous ces fichiers. Et dans le composant de l'application, après la fonction at to cart, nous créons une nouvelle fonction appelée supprimer de la carte. Et dans le paramètre, nous obtenons l'identifiant du produit que nous voulons supprimer. Ainsi, dans cette fonction, nous allons d'abord stocker notre tableau CAT actuel dans une variable appelée ancienne carte, égale à tableau et répartir notre tableau de chariots. Maintenant, nous écrivons Old card dot filter. Ici, nous obtenons chaque article, qui est l'objet avec la propriété du produit et de la quantité. Et ici, nous passons la condition, le point du produit, point de soulignement, l'identifiant n'est pas égal à cet identifiant Cela renverra donc un nouveau tableau contenant tous les produits dont l'identifiant ne correspond pas à cet identifiant. Nous allons donc stocker cela dans une nouvelle variable appelée nouvelle carte, puis nous allons simplement attribuer cette nouvelle carte à cette nouvelle carte. Maintenant, vérifions ce code. Ici, dans la valeur contextuelle de notre carte, nous transmettons notre fonction de suppression de la carte. Regardez les modifications, et maintenant, dans notre composant de page panier, nous allons accéder à cette fonction. Après cette matrice de cartes, nous retirons cette carte à partir d'ici. Nous n'en avons pas besoin et arrivons ici, retirez-les du panier. Maintenant, en bas, nous avons notre icône de suppression. Dans cette image, nous transmettons l'événement de clic, la fonction flèche, et ici nous appelons la fonction Supprimer du panier. Et il vous suffit de transmettre ici l'identifiant du point de soulignement du produit. Observez les modifications et jetez-y un œil, la page et supprimons un élément d'ici Vérifiez que l'article est retiré de notre panier et que sous-total et notre total final sont également mis à jour en fonction de notre nouvelle carte Maintenant, si nous actualisons la page, nous récupérons notre produit car nous récupérons notre carte de la base de données. Pour retirer le produit, nous devons également le retirer de notre back-end. Ouvrez le fichier des services de carte, et en bas, nous définissons une nouvelle fonction appelée supprimer de l'API de la carte. Dans le paramètre, nous obtenons l'identifiant du produit. Maintenant, dans cette fonction, nous appelons la méthode point patch du client API car nous ne mettons à jour qu'une partie de nos données. Maintenant, pour le backend de l'API, nous utilisons ici les backticks, cart, slash remove, slash. Maintenant nous devons ajouter notre identifiant de produit que nous voulons supprimer Nous renvoyons maintenant cette expression et, à la fin, le dysfonctionnement des exportations. Enregistrez ce fichier et dans notre fonction de suppression de la carte, à la fin, nous appelons notre API de suppression de la carte et transmettons ici notre identifiant de produit. Maintenant, cette expression renverra une promesse. Ici, nous utilisons cette méthode. Mais si nous réussissons à retirer le produit de notre carte, nous ne voulons rien faire. Supprimez-le ensuite et nous ajoutons la méthode de capture. Si nous avons une erreur, nous l'afficherons sous forme de point grillé et transmettrons ici un problème. Et après cela, nous passerons du chariot à l'ancien chariot. est aussi simple que ça. Enregistrez les modifications et jetez-y un œil. Supprimer un article, l'article a été retiré d'ici. Actualisez également la page et vérifiez qu'elle est également supprimée du backend En utilisant les contacts et les services, vous pouvez voir à quel point il est facile et simple d'appeler un IP. 163. Augmenter et diminuer la quantité de produit: Implémentons maintenant la fonctionnalité d'augmentation et de diminution pour CAT. Dans notre composant d'application, fois cette fonction supprimée du panier, nous définissons une nouvelle fonction appelée mettre à jour le panier dans le paramètre, nous obtenons l'identifiant du produit, que nous voulons mettre à jour. Dans cette fonction, nous déclarons d'abord une variable appelée carte mise à jour et stockons toutes les valeurs précédentes de notre carte. Notez qu'il s'agit d'une carte mise à jour et non d'une carte de mise à jour. Après cela, nous écrivons une carte mise à jour, point de recherche d'index. Ici, nous obtenons un seul article, et ici nous passons notre condition, l' identifiant du point de soulignement du produit est égal à cet identifiant Cela renverra l'index du produit que nous avons sélectionné. Stockez-le dans la variable call product index. Maintenant, nous faisons quelque chose comme ça, à jour AT et lui passons la quantité de points de l'index des produits plus un. Ensuite, nous avons simplement mis le panier sur le CAT mis à jour. Maintenant, voici une chose. Nous allons utiliser cette fonction pour les deux cas d'utilisation, en augmentant et en diminuant. Mais ici, nous n'exécutons qu'une logique accrue. Dans le paramètre de notre fonction, nous ajoutons d' abord un autre paramètre appelé type, qui peut être augmenté ou diminué. Après avoir trouvé l'index, nous ajoutons la condition I type égal à augmenter et à l'intérieur de ce bloc I, nous passons simplement en revue cette logique. Maintenant, dupliquons ce bloc I et changeons ce type pour le diminuer et le changeons en moins égal à un. Maintenant, en bas, passons cette fonction dans notre valeur de contexte. Enregistrez les modifications et la question est de savoir où nous allons importer cette fonction. Devrions-nous saisir cela dans le composant d'entrée de la quantité ? La réponse est non. Parce que dans notre page produit unique, nous utilisons le même composant de saisie de quantité uniquement pour modifier la quantité du produit. À cet endroit, nous ne voulons pas appeler l'API. Voici la solution. Dans le composant de page panier, nous obtenons notre fonction de carte de mise à jour. Et dans la saisie de la quantité, nous avons défini les accessoires de quantité , fonction que nous actionnerons en cas de clic sur le bouton plus moins Je sais que c'est un peu confus. Regardez-le une seule fois et vous comprendrez tout cela. Donc, dans cette quantité définie, nous passons notre fonction de mise à jour de la carte, et nous lui transmettons également ses nouveaux accessoires, page de la carte à true et l'identifiant du produit à l'identifiant de soulignement par point du produit Sauvegardez-les et dans le composant de saisie de la quantité dans les accessoires, nous obtenons ici la page de la carte et l'identifiant du produit Maintenant, dans cette fonction de clic, nous respectons les conditions. Si la page du panier est vraie, nous appellerons une fonction de quantité définie. Dans ce cas, il s'agit de notre fonction de carte de mise à jour. Nous devons donc passer ici deux arguments type et identifiant du produit. Donc, tapez le premier pour diminuer et le second pour l'identifiant du produit. Maintenant, si notre page de panier n'est pas vraie, nous définissons simplement la quantité sur la quantité moins un. Vous comprenez maintenant pourquoi nous ajoutons cette page de carte et l' identifiant du produit dans ces accessoires. Maintenant, il suffit de copier cet événement onclick et de le coller à la place de cet événement onclick Et d'abord, nous changeons ce type pour augmenter et dans L, nous le changeons en quantité plus un. Enregistrez les modifications et jetez-y un œil. Sur la page de la carte, cliquez sur le bouton plus moins et voyez que notre quantité change en conséquence. Le prix est également mis à jour. Notre demi-tâche est accomplie ici. Il ne nous reste plus qu'à appeler l'API pour augmenter et diminuer. Où nous définissons ces API dans le fichier des services de cartes. Bien. Tu apprends très vite. J'adore ça. Maintenant, ici, nous dupliquons simplement cette fonction supprimée de l'API CAT deux fois de plus car ces trois API sont presque identiques. Maintenant, changeons le nom de cette fonction pour augmenter l'API du produit, et dans le point de terminaison de l'API à l'endroit de cette suppression, nous devons ajouter une augmentation, et c'est tout ce que nous avons à changer. Faisons maintenant de même pour diminuer l'API. Modifiez donc le nom de la fonction pour diminuer l'API du produit. Et dans le point final, nous changeons cela en cart slash decrease Enregistrez les modifications et, dans le composant de l'application de notre blog sur les types accrus, nous appelons l'API du produit et transmettons simplement ici l'identifiant. Maintenant, nous n'avons plus besoin de cette méthode. Nous ajoutons directement la méthode de cache. Et dans cette méthode de cache, nous ajoutons d' abord l'erreur Toast Point et nous passons ici, quelque chose s'est mal passé. Ensuite, nous avons replacé le panier sur le panier précédent. Mais ici, dans cette fonction, nous n'avons pas de panier précédent car nous changeons cette matrice de cartes mise à jour. Donc, en haut, nous définissons const old cart comme étant égal à array et spread cart array et transmettons simplement cet ancien chariot dans notre fonction de chariot SAT Maintenant, dans le type de blog de diminution, nous appelons l'API du produit et passons également ici un ID, et nous pouvons simplement copier cette méthode de capture et la coller ici. Enregistrez les modifications et jetez-y un œil. Modifiez la quantité du produit, et nous pourrons vérifier les modifications sur Repress. Vous voyez, nous obtenons une quantité mise à jour. Ici, nous avons terminé avec succès notre fonction « at to card », «   retrait de la carte », « augmentation » et « diminution ». 164. Ajouter au panier dans la fiche produit: Appelons l'API Head to Cart pour voir l' icône de notre panier de produits. Dans le composant de la fiche produit, nous pouvons utiliser ici la fonction « tête au panier » dans le contexte de notre carte. Nous utilisons use Context Hook, et à l'intérieur de celui-ci, nous transmettons le contexte de la carte. Maintenant, cela renverra l'objet, afin que nous puissions le déstructurer et obtenir ici la fonction « tête au panier Maintenant, faites défiler l'écran vers le bas, et dans notre bouton « tête vers la carte », nous ajoutons un événement de clic, fonction flèche, et ici nous appelons simplement notre fonction «   tête vers le panier ». Ici, nous devons passer deux arguments. Le premier est l'objet du produit, et le second est la quantité. Malheureusement, nous n'avons pas les deux ici. Pour la quantité, nous pouvons simplement en passer une car ici nous n' avons pas de saisie de quantité. Mais pour l'objet du produit, nous devons faire quelque chose. En haut de la liste des accessoires, nous pouvons voir que nous obtenons toutes les variables de notre produit Ouvrez donc le composant de liste de produits. Ici, au lieu de transmettre toutes ces informations dans des accessoires individuels, nous pouvons directement transmettre l'objet du produit ici Supprimez tout cela et nous transmettrons simplement ici le produit à cet objet de produit. Enregistrez ce fichier, puis revenez à notre composant de fiche produit. Au lieu d'obtenir tout cela, nous obtenons ici un seul produit. Remplaçons maintenant toutes ces valeurs. Ainsi, à l'endroit de l'identification, nous ajoutons le produit, le point d' interrogation, le point de soulignement Ici, nous utilisons un point d' interrogation car si identifiant du point de soulignement du produit n'est pas disponible, nous obtenons une erreur Maintenant, à la place de l' image, nous avons le produit, interrogation dotimag qui est le tableau, et nous obtenons ici notre première Ensuite, prix par produit, point d'interrogation, prix par point, titre par produit, interrogation, titre par point. Évaluation par produit, point Qimark par point par point T. Ensuite, les notes comptent par produit, notes comptent par produit, Qimark point examine le nombre de points et le stock par produit, Qimark point STAC maintenant, Qimark point STAC maintenant nous pouvons simplement transmettre cet objet de produit dans cette Qimark point examine le nombre de points et le stock par produit, Qimark point STAC maintenant, nous pouvons simplement transmettre cet objet de produit dans cette fonction d'ajout au panier. Enregistrez les modifications et jetez-y un œil. Ouvrez la page du produit et cliquez sur Ajouter au panier. Vérifiez que le produit est ajouté à notre carte. Maintenant, voici une chose. Comme nous le savons, notre API d'ajout au panier est protégée, ce qui signifie que seuls les utilisateurs connectés peuvent ajouter un produit au panier. Donc, en haut, nous appelons à nouveau Use Contacts et transmettons ici User Contacts. Maintenant, cela renverra notre objet utilisateur et en bas, dans l' état de notre bouton, nous ajouterons une autre condition. Si l'utilisateur n'est pas nul, nous allons afficher ce bouton d'accès au panier. Enregistrez les modifications, et si nous nous déconnectons et que nous accédons à notre page de produits, l'icône du panier ne s'affichera pas. Passez maintenant à la page du produit unique. Et ici, nous avons également le bouton « aller au panier ». Nous appelons maintenant use Context Hook et passer user contacts ici. Cela renverra l'objet utilisateur, nous allons donc le stocker dans une variable appelée user. Et en bas, nous emballons la tête du panier et aussi cette entrée de quantité et nous lui transmettons son état. Si l'utilisateur est disponible, n'affichez que ces éléments. Maintenant, cela nous donnera une erreur de compilation car nous renvoyons plus d'un élément. Alors, comment pouvons-nous résoudre ce problème en utilisant at fragments ? Alors on les emballe et on voit qu'il n'y en a plus. Enregistrez les modifications et jetez-y un œil. Ici, nous obtenons les informations sur nos produits sans boutons. Vous pouvez voir à quel point cela devient facile avec Context Sook. 165. Appeler l'API pour le paiement: Maintenant, avant de faire quoi que ce soit, reconnectez-vous car nous nous sommes déconnectés lors de la leçon précédente. Accédez maintenant à la page du panier. Et ici, appelons notre dernière API, l' API de paiement. Dans notre application, nous n'ajoutons pas fonctionnalités de paiement, car dans l' ajout d'une sortie de paiement, front-end joue très peu de rôle. Par exemple, dans Stripe Payment, qui est la bibliothèque de passerelles de paiement la plus populaire pour implémenter le paiement, il suffit d'appeler une API depuis le front-end. La majeure partie du code de paiement est envoyée au backend. Il n'est donc pas très avantageux d'ajouter du ruban à ce cours, car notre objectif principal est d'apprendre à réagir, et c'est ce que nous faisons plutôt bien. Mais si vous voulez le savoir, dites-le-moi dans la section questions-réponses, je mettrai à jour cette section en conséquence Mais selon ma suggestion, vous n'en avez pas encore besoin. Concentrez-vous simplement sur la création d'applications agréables et réactives. Pour l'API de paiement des commandes dans le dossier des services, nous créons un nouveau fichier appelé order services point js. Maintenant, dans ce fichier, tout d'abord, nous importons le client API depuis le client API Utils slash et nous créons ici une fonction appelée checkout API dans cette fonction, nous appelons simplement ici api client point post, nous appelons simplement ici api client point post, et dans les points de terminaison Order slash Désormais, nous n'avons pas besoin de transmettre de données, car carte seront automatiquement récupérées depuis le back-end Maintenant, cette expression nous le promet, nous renvoyons simplement ce fichier Enregistrer ce fichier, et dans le composant de la page de la carte en bas du bouton de paiement, nous ajoutons ici un événement de clic égal à ici nous passons la fonction de paiement. Définissons maintenant cette fonction de paiement. Deuxièmement, fonction d'erreur de paiement. Et ici, nous appelons l'API de paiement des services de commande. Maintenant, après ce paiement, nous devons vider notre carte. Nous ajoutons donc ici la méthode, la fonction flèche. Et entre parenthèses Cali, nous ajoutons d'abord Toast from react à la bibliothèque S DiPi, puis nous ajoutons le succès et ici nous transmettons notre message, la commande passée Ensuite, nous devons vider l'état de notre carte. Et pour cela, nous avons besoin de la fonction set card. Nous passons donc au composant de l'application et passons la fonction set card dans le contexte de notre carte. Enregistrez ce fichier et revenez à la page de la carte. Ici, dans ce contexte d'utilisation, nous obtenons une carte définie, et dans notre fonction, nous définissons une carte sur une carte vide. Ou nous pouvons déplacer cette carte définie avant cet appel d'API. Et si nous avions une erreur pour cette API ? Nous avons donc ajouté ici la méthode de capture, et entre crochets, nous avons eu une erreur de point grillé, et dans le message, quelque chose s'est mal passé Et après cela, nous remettrons le panier à l'état précédent. Donc, en haut, nous définissons une nouvelle variable appelée old cart égale à array, et ici nous répartissons le tableau cart. Maintenant, dans la méthode catch, nous passons simplement le set cart à l'ancien chariot. Utilisez les modifications et jetez-y un coup d'œil. Cliquez sur le bouton Commander, et notre chat est vide. Maintenant, vérifions-le. Ainsi, dans notre Mongo, nous faisons une boussole, ouvrons notre base de données CAT Wi Ici, nous avons la collecte des commandes, et à l'intérieur de celle-ci, nous avons notre commande confirmée et le statut réglé sur payé. 166. Exercice pour obtenir des commandes: Il est maintenant temps de faire encore un petit exercice. Ici, sur notre page Ma commande, nous devons afficher tous les détails de la commande concernant l'utilisateur actuel, et vous pouvez obtenir ces informations de commande de l'utilisateur actuel à partir de cette API GAT. Accordez deux à trois minutes à cet exercice, et je sais que vous pourrez le terminer. 167. Solution pour cet exercice: Voyons maintenant la solution de notre exercice. Notez que cet exercice propose deux solutions. Tout d'abord, nous créons une autre fonction dans le fichier des services de commande pour My Orders EPI, mais c'est la solution la plus longue La solution de Sten Street est donc que nous pouvons utiliser notre crochet personnalisé , que nous pouvons utiliser pour récupérer tout type de données Ici, dans notre composant, nous appelons use data hook au premier paramètre, nous passons notre point de terminaison, qui est order. Maintenant, cela renverra un objet avec des données, que nous pouvons renommer en commandes De plus, ici, nous pouvons obtenir une erreur et charger une variable. Ici, nous pouvons définir la condition pour ce composant de table, savoir si l'ordre n'est pas nul, alors seulement afficher ce composant de table. Il ne nous reste plus qu'à afficher ces commandes dans notre tableau. Dans le corps en T, en haut, nous avions des crochets, carte à points de commande, et ici nous obtenons une commande unique, et nous obtenons également un index Nous allons maintenant renvoyer simplement cette ligne du tableau. Et passez la clé pour commander le point de soulignement ID. Et à l'intérieur de cette ligne, nous ajoutons les données de la table, et d'abord, nous affichons l' index plus un. Après cela, pour le nom des produits, nous le laissons pareil pour le moment. Ensuite, nous avons le total, donc le total des points de commande, et enfin, nous ajoutons le statut des points de commande. Enregistrez les modifications et jetez-y un œil. Vous trouverez ici les détails de notre commande. Il ne nous reste plus qu'à afficher les noms des produits. Pour cela, nous créons une nouvelle fonction. Appelez Get product string. Et comme paramètre, nous obtenons ici une commande unique, une fonction d'erreur. Et tout d'abord, nous commandons des produits point, point MAP. Je nomme entre crochets, nous appelons cette fonction get product string et nous passons simplement ici cette commande Enregistrez les modifications et jetez-y un œil. Vous voyez, ici, nous obtenons notre chaîne de produits avec la quantité. Cela fonctionne donc plutôt bien. Maintenant, ajoutons ici le chargeur. Avant notre composant de table, ajoutez I I si le chargement est vrai, puis nous affichons le composant du chargeur. Et aussi par erreur, nous passons ici de nouveaux crochets Cully Une erreur est disponible, puis nous renvoyons une balise d'emphase avec le nom de la classe, une erreur de formulaire, et ici à l'intérieur , nous affichons une erreur. Enregistrez les modifications et jetez-y un œil. Tu vois, ça marche pour nous. Parfait. 168. Créer des itinéraires protégés: Maintenant, dans notre implémentation actuelle, nous avons un petit bogue ici. Ainsi, lorsque l'utilisateur est connecté, n'est qu'alors que nous affichons ces liens Moder, déconnexion et panier Maintenant, si nous nous déconnectons, nous ne voyons pas ces liens, mais voici une chose. Si dans notre URL, nous définissons le chemin pour couper CAT et appuyer sur Entrée, accédons également à ces routes protégées, et ce n'est pas ce que nous voulons, n'est-ce Donc, si l'utilisateur n'est pas connecté et qu' il essaie d' accéder à des itinéraires protégés tels que Moders ou la page CAT, nous le redirigerons directement vers la page de connexion Donc, pour implémenter cela, nous allons ouvrir notre composant de routage. Ici, nous savons que pour définir un itinéraire, nous utilisons un composant de route, et ici nous passons des accessoires de chemin et d'élément Nous allons donc définir ici un nouveau composant de route. C'est ce que nous appellerons « route protégée ». Ce composant ne sera qu'un wrapper de ce composant de route, qui vérifie simplement si l'utilisateur n'est pas disponible, puis il le redirigera automatiquement vers la page de connexion Dans le cas contraire, il sera redirigé vers cette page protégée. Ne vous inquiétez pas, regardez ceci et tous les doutes seront dissipés. Dans notre dossier de routage, nous créons un nouveau composant appelé point de route protégé JSX Ajoutez ici le code standard pour ce composant. Maintenant, tout d'abord, dans ce composant en retour, nous appelons la fonction Get user from user services, qui renverra l'objet utilisateur ou si le jeton n'est pas disponible, il nous donnera une valeur nulle. Donc, si l'utilisateur est disponible, nous renvoyons le composant Outlet. Sinon, nous redirigeons vers la page de connexion. Nous utilisons donc ici le composant Navigate du routeur React Dom et passons à l'attribut to slice login. Si vous oubliez la prise, juste pour une répression rapide, à la place de cette prise, nos composants de routage imbriqués apparaîtront Ne vous inquiétez pas, enregistrez ce fichier et, dans le composant de routage , les routes que nous voulons protéger. Bien, il s'agit des trois derniers itinéraires, cart, Moder et Logout Donc, en haut, nous ajoutons itinéraire et enroulons ces trois itinéraires que nous voulons protéger. Maintenant, dans l'élément, nous passons notre composant de route protégée et c'est tout. Enregistrez les modifications et jetez-y un œil. Ici, nous ne sommes pas connectés, nous essayons d'accéder à la page de la carte et voyons, nous redirigeons vers la page de connexion. Maintenant, connectons-nous avec e-mail et mot de passe et essayons d' accéder à la page de la carte. Maintenant, nous pouvons accéder à cette page. Cela fonctionne donc dans les deux sens. Je vais maintenant vous expliquer ce qui se passe ici. Nous utilisons ici le routage naturel. Ainsi, lorsque notre application souhaite naviguer à partir de ces trois routes, ce composant de route protégé s'exécute d'abord, et à l'intérieur de ce composant, et à l'intérieur de ce composant, nous avons une condition pour Outlet et nous accédons à la page de connexion. Donc, si l'utilisateur est connecté, cet élément s'affiche sur le lieu de prise, aussi simple que cela. C'est ainsi que nous créons un itinéraire protégé pour notre application. 169. Rediriger vers la page protégée précédente: Maintenant, lors de la session précédente, nous avons vu que nous n'étions pas connectés et que nous essayions d'accéder à itinéraires protégés comme la page du panier, puis nous accédons à la page de connexion Et si nous nous connectons avec notre e-mail et notre mot de passe, nous sommes redirigés vers la page d'accueil. Idéalement, nous devrions à nouveau rediriger vers cette route protégée laquelle nous voulons accéder. Ce n'est pas un gros problème, mais cela améliorera un peu notre expérience utilisateur. Alors réglons ce problème. Donc, pour cela, notre composant d'itinéraire protégé, nous devons passer l'emplacement précédent avec ce composant de navigation. Ne vous inquiétez pas pour cela, regardez ceci, et à la fin, vous comprendrez tout cela. Donc, avant le retour, nous appelons use location hook depuis Rea Router Doom. Stockons-le dans une localisation d' appel variable Cet emplacement contient maintenant toutes les informations sur l'emplacement actuel de la page. Donc, enregistrons simplement cet emplacement par points sur la console. Notez que seules les pages protégées accèderont à ce composant de route protégé. Et pour l'instant, commentons cette déclaration de retour. Enregistrez les modifications et jetez-y un œil. Ouvrez la console, je crée simplement un logo à partir d'ici et j'essaie d' accéder à ma page de commandes. Vous voyez ici que nous obtenons notre objet de localisation, et dans cet objet, nous avons le nom du chemin auquel nous voulons accéder. Revenez au code VS, supprimez ce journal à points de console et supprimez également cette commande. Maintenant, nous devons d'une manière ou d'une autre transmettre nom du chemin à points de localisation à notre page de connexion. Dans ce composant de navigation, nous pouvons transmettre des données supplémentaires dans les accessoires d'état L'état est égal à des crochets C pour ajouter du code JavaScript, et ici nous ajoutons un objet avec la propriété from, et nous passons simplement ici le nom de chemin du point de localisation Enregistrez les modifications, et maintenant sur notre page de connexion, il ne nous reste plus qu'à y accéder depuis l'état. Dans notre composant de connexion en haut, nous l'utilisons à nouveau ici, utilisons le crochet de localisation de Rea Router Doom et stockons dans une variable appelée location Maintenant, consultons ce journal, connectons-nous à l'emplacement, et nous indiquons ici l'emplacement. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous obtenons ici un objet de localisation de connexion. Ouvrez-le et vous verrez, ici nous avons l'état, et là nous sommes passés de propriété à notre chemin précédent, qui est CAT. Ici, dans la fonction onsubmit, avant l'emplacement des points de fenêtre, nous avons l'emplacement et nous récupérons propriété de l'état en utilisant la déstructuration d' objets Maintenant, à l'emplacement des points de la fenêtre, nous ajoutons simplement une condition. Si State est défini, redirigerons vers stat point , sinon nous redirigerons simplement vers la page d'accueil. Enregistrez les modifications et jetez-y un œil. Connectez-vous via ce formulaire et nous verrons que nous serons redirigés vers la page de la carte. Donc ça marche. Maintenant, nous en avons presque terminé. Mais actuellement, nous sommes connectés à notre application, et si nous essayons d'accéder à la page de connexion ou à la page d'inscription, nous obtenons également ces pages Nous devons donc rediriger l'utilisateur vers la page d'accueil si l'utilisateur est déjà connecté. Ce sont des scénarios très rares, mais il vaut mieux en prendre soin. Alors réglons ce problème. Donc, dans notre composant de page de connexion, ici avant notre retour JSX, nous ajoutons une condition Nous faisons ici appel à la fonction utilisateur des services aux utilisateurs. Et s'il renvoie un utilisateur, nous reviendrons ici, naviguerons dans le composant depuis React Router Doom et accèderons à la page d'accueil Enregistrez les modifications et jetez-y un œil. Maintenant, si nous essayons d' accéder à la page de connexion, voyez, nous redirigeons vers la page d'accueil. Faisons de même pour la page d'inscription. Copiez cette condition I, et dans le composant de notre page d'inscription avant que notre JSX ne transmette ce code Nous importons simplement Get user depuis les services utilisateur et importons également le composant de navigation depuis React Router Doom, et nous avons terminé ici C'est ainsi que nous gérons les API protégées et les routes protégées dans les applications React. Vous pouvez voir qu'il est très simple et facile à utiliser. 170. Section 15 Résoudre certains problèmes: Dans notre application, nous avons donc deux ou trois choses à faire. Tout d'abord, sur la page d'accueil, nous devons récupérer les produits phares depuis le backend et les afficher dans cette section Ensuite, nous avons des liens pour B maintenant ici. Donc, sur ce bouton, nous ajouterons le lien de cette page de produits, et c'est tout pour la page d'accueil. Passons maintenant à la page des produits. Ici, nous avons une option courte, mais nous n'avons pas ajouté cette fonctionnalité. Nous devons donc le faire. Ensuite, nous avons une autre fonctionnalité importante qui consiste à rechercher notre produit. Nous allons donc compléter la fonction de recherche avec des suggestions automatiques. Vous pouvez créer une liste pour cette tâche, et au fur et à mesure que vous terminez chaque tâche, vous pouvez vérifier qu'elle est terminée. Cela vous donnera plus de clarté et vous pourrez réussir à effectuer une tâche à la fois. Vous pouvez voir que ce sont mes notes lorsque j'aurai terminé ce projet. Vous pouvez également prendre toutes ces tâches comme exercice et essayer de les résoudre avant de regarder la solution. Dans quelques leçons, nous allons donc terminer ce projet. 171. Trouver les produits en vedette: Commençons maintenant par récupérer les produits phares, le savon et le composant des produits phares Et ici, dans ce composant, nous l'appelons « used data hook ». Maintenant, au premier paramètre, nous passons notre point final, qui est slash products, slash featured Maintenant, comme nous le savons, ces données utilisées renvoient un objet, déstructurons, ce qui nous permet d'obtenir une erreur de données et de faciliter le chargement des propriétés Maintenant, enregistrons simplement ces données par points sur la console. Regardez les modifications et jetez-y un coup d'œil. Ouvrez la console et voyez, nous avons ici une gamme de trois produits. Il ne nous reste plus qu'à les afficher ici. Ouvrez donc le composant de la liste des produits et dans la liste des produits, copiez ces données, points de produits et squelette à la fois. Et dans notre composant de produits caractéristiques à la place de la fiche des trois produits, nous le collons. Maintenant, d'abord, nous changeons ces produits de points de données en données uniquement, et également ici, une carte à points de données parce que nous obtenons un tableau dans nos données. Ensuite, nous devons importer le composant squelette. Ici, nous importons le squelette de la fiche produit. Comme nous devons définir le tableau des squelettes. En haut, les squelettes sont égaux à un tableau. Maintenant, combien de squelettes voulons-nous afficher ? Nous voulons trois squelettes. Ici, nous ajoutons un, deux et trois. Affichons notre erreur. Encore une fois, revenez au composant de la liste des produits et copiez simplement cette erreur. Et collez-le dans notre liste de produits fonctionnels. Enregistrez les modifications et jetez-y un œil. Vous voyez, c'est ici que nous trouvons nos produits fonctionnels. Nous terminons notre première tâche. Nous pouvons vérifier que cette tâche est terminée. Maintenant, corrigeons également ce lien. Tout d'abord, en ce qui concerne les produits, voici notre produit iPhone 14, cliquez avec le bouton droit de la souris sur cette image et copiez l'adresse du lien. Revenons maintenant au code VS et ouvrez le composant de page d'accueil. Et ici, dans le premier lien de la section héros, nous collons l'adresse du lien. Et au début, nous supprimons notre URL de base. Nous n'en avons pas besoin. Maintenant, nous faisons la même chose pour la deuxième section consacrée aux héros. Nous avons donc ici aussi un MacBook. Je sais que ce n'est pas un produit, mais nous n'avons pas Mac Studio et c'est pourquoi nous pouvons rediriger l'utilisateur vers MacBook Copiez donc cette adresse de lien, et dans notre composant, nous la collons ici. Supprimez également l'URL de base, enregistrez les modifications et jetez-y un œil. Cliquez sur le bouton By Now, et nous sommes redirigés vers la page iPhone 14. Mais cela rafraîchit notre page. Arrêtons ça. Revenons donc au code VS et ouvrez le composant de la section héros. Et ici, à la place de la balise Anchor, nous ajoutons le composant Link de React Router Doom et renommons ce HF en deux attributs Enregistrez les modifications et revenez à page d'accueil, cliquez sur le bouton Bynw pour voir, nous sommes redirigés vers cette page Nous terminons donc ici également notre deuxième tâche. Dans la leçon suivante, nous allons travailler sur notre barre de recherche. 172. Trouver des produits par requête de recherche: Ajoutons maintenant la fonctionnalité de recherche de produits. En voici donc la démonstration. Lorsque nous effectuons une recherche dans notre barre de recherche et que nous appuyons sur Entrée ou que nous cliquons sur la barre de recherche, nous récupérons ces données uniquement à partir de l'API de nos produits Et vous pouvez voir que lorsque nous appuyons sur Rechercher cette chaîne de recherche s' ajoute à la chaîne de requête. Et aussi, ici, nous obtenons une suggestion automatique pour les requêtes de recherche, et nous pouvons également naviguer avec les touches fléchées C'est très simple. Voyons voir ça. Dans notre implémentation actuelle, nous devons uniquement définir notre entrée de recherche dans notre chaîne de requête URL. Et à partir de cette chaîne de requête, nous transmettrons ce texte de recherche dans notre appel d'API. Comme nous le faisons dans notre catégorie. Ainsi, dans notre composant NBR, nous avons notre entrée de recherche Donc, tout d'abord, nous devons obtenir du texte à partir de l'entrée de recherche. Donc, en haut, nous l'ajoutons ici utilisé et ajoutons des extraits et lui donnons un nom, et définissons la recherche et passons une chaîne vide comme valeur par défaut Maintenant, dans notre zone de saisie de recherche, nous passons d' abord une valeur à la variable de recherche, puis passons l'événement onchange et à l'intérieur de celui-ci, nous obtenons l'objet de l'événement, fonction d'erreur, et nous définissons simplement recherche sur une valeur de point cible Nous obtenons donc ici notre valeur dans l'état de recherche. Il ne nous reste plus qu'à le définir dans la chaîne de requête URL. Donc, tout d'abord, dans notre balise de formulaire, nous ajoutons un événement de soumission et passons la fonction ER, gérer l'envoi. Définissons maintenant cette fonction, handle, submit. Ici, nous obtenons l'objet de l'événement, et d'abord, nous définissons E point prevent default. Et qu'est-ce que cela marquera ? Cela empêchera un comportement ou un formulaire par défaut. Maintenant, après cela, nous passons ici une condition si la recherche n'est pas égale à la chaîne T. Ensuite, nous allons définir cette chaîne de recherche dans la chaîne de requête. Nous avons donc ici deux moyens. Nous pouvons utiliser les paramètres de recherche ou utiliser le crochet Navigate C'est à toi de choisir. Nous avons vu les deux se connecter dans React Router DOM. Personnellement, j'aime utiliser ici Navigate car c'est plus simple que d'utiliser des paramètres de recherche Après avoir utilisé State, nous appelons use Navigate hook depuis React Router Doom et cela nous donnera la variable Navigate Ajoutons maintenant la fonction Navigate dans notre handle submit. Et ici, nous transmettons notre URL. Donc, dans Betts, nous passons Slash Products, point d' interrogation, Sarge est égal à dollar colli Enregistrez les modifications et jetez-y un œil, écrivez quelque chose et appuyez sur Entrée. Accédez à la page des produits avec la chaîne de requête de recherche. Supprimez maintenant ce texte et appuyez simplement sur Entrée. voyez, nous obtenons de l'espace dans la chaîne de requête, et ce n'est pas ce que nous voulons. Dans notre fonction handle submit, dans Navigate, nous passons la recherche DottremFunction Cela supprimera tous les espaces indésirables. Et ici aussi, nous ajoutons la crème Search Dot Cream. Enregistrez les modifications et revenez à notre page d'accueil. Et lorsque nous ajoutons des espaces et que nous appuyons sur Entrée, cela ne redirige pas vers la page des produits. Notre demi-tâche est donc terminée. Il ne nous reste plus qu'à transmettre cette requête de recherche dans notre appel d'API. Ainsi, sur un composant de liste de produits, nous obtenons d'abord notre chaîne de recherche à partir de la chaîne de requête. Donc, query, nous définissons const, requête de recherche est égale au point de recherche GT et passons ici nom de la variable de chaîne de requête, qui est search Maintenant, il suffit de passer cette requête de recherche dans nos paramètres. Avant notre catégorie, nous ajoutons une recherche à une requête de recherche. Et lorsque nous modifions notre requête de recherche, nous devons l'appeler PI, nous devons donc ajouter une requête de recherche dans ce tableau de dépendances. Enregistrez les modifications et jetez-y un œil. Recherchez quelque chose ici et appuyez sur Entrée. Vous voyez, nous n'avons que deux produits. Notre requête de recherche fonctionne donc. Essayons encore une fois, écrivons quelque chose et appuyons sur Entrée. Tu vois, ça marche. Maintenant, permettez-moi de vous montrer un bogue. Accédez à la page des produits et faites défiler la page vers le bas. Notre page est donc réglée sur trois. Maintenant, recherchez quelque chose et vous verrez que nous n'obtenons pas ces données. Pourquoi cela se produit-il ? C'est vrai, parce que nous n'avons pas la troisième page pour cette chaîne de requête. Quelle est donc la solution à ce problème ? C'est vrai, nous l'avons déjà vu. Nous devons donc définir la page sur un. Donc, dans notre effet d'utilisation, nous l'avons fait pour notre catégorie. Maintenant, nous ajoutons simplement ici une requête de recherche. Les changements, et maintenant notre bogue a disparu. Vous pouvez voir à quel point il est simple d'ajouter une fonctionnalité de recherche dans React. Et voilà, notre troisième tâche est terminée. Ainsi, dans les applications de commerce électronique ou les sites Web comme YouTube, cette fonctionnalité de recherche est une fonctionnalité très utile et importante. Souvenez-vous donc toujours de la logique de la barre de recherche. Tout d'abord, vous devez définir une chaîne de requête dans l'URL, puis transmettre cette chaîne de requête dans l'API, c'est aussi simple que cela. 173. Suggestion automatique dans la barre de recherche: Actuellement, si nous écrivons quelque chose dans la barre de recherche, nous ne recevons aucune suggestion de nom de produit. Dans cette leçon, nous allons donc montrer automatisation de notre barre de recherche. Ainsi, dans notre composant N Bar, après notre fonction handle submit, nous ajoutons use effect hook et à l'intérieur, nous ajoutons une fonction de rappel et un tableau de dépendances avec l'état Search Ainsi, lorsque notre recherche changera, cette fonction de rappel et à l'intérieur de cette fonction de rappel, nous appellerons notre API de suggestion Donc, pour l'API, dans notre dossier de services, nous créons un nouveau fichier appelé product services point js. Maintenant, dans ce fichier, nous saisissons tout d'abord le client API à partir du module client API Utils Ensuite, nous créons une nouvelle fonction appelée Get suggestions API. Et ici, nous avons la recherche en tant que paramètre, et dans cette fonction, nous renvoyons simplement le client api point GT now pour le point de terminaison, nous ajoutons des backticks, des produits, des suggestions de barres obliques, des points d' interrogation, une recherche égale à un dollar entre crochets, une recherche Nous l'avons fait tant de fois. Maintenant, exportons simplement cette fonction. Enregistrez les modifications et revenez à notre composant Navbar. Ici, nous ajoutons d'abord une condition si point de recherche n'est pas égal à une chaîne vide, alors nous sommes les seuls à appeler notre API. Ici, nous appelons get suggestions, fonction API et passons ici notre recherche. Maintenant, cette fonction renverra une promesse. Nous utilisons donc ici la méthode, et à l'intérieur de celle-ci, nous obtenons une réponse. Et pour stocker les suggestions, nous devons créer une nouvelle variable d'état. Ainsi, après notre état de recherche, nous ajoutons un autre hook d'état d'utilisation appelé suggestions et définissons les suggestions. Et comme valeur par défaut, nous passons un tableau vide. Maintenant, dans notre méthode d'alors, nous définissons simplement des suggestions pour répondre aux données par points. Après cela, nous ajoutons la méthode catch, et ici nous obtenons un objet d'erreur et enregistrons simplement cette erreur par points sur la console. Nous ajoutons donc ici notre condition I la recherche n'est pas vide et sinon si la recherche est vide, nous définissons simplement les suggestions sur un tableau vide. Maintenant, enregistrons le tableau des suggestions par points sur la console , enregistrons les modifications, jetons un coup d'œil, écrivons quelque chose dans la barre de recherche, et dans la console, nous pouvons voir que nous obtenons ces suggestions. Ces suggestions sont un tableau d'objets, et chaque objet ne possède que deux propriétés, ID de soulignement et le titre Nous avons donc ici nos suggestions. Il ne nous reste plus qu'à les afficher sous notre barre de recherche. Nous devons donc d'abord ajouter nos éléments, puis nous ajouterons un style à la liste de suggestions. Après notre bouton de recherche dans la balise de formulaire, nous ajoutons une nouvelle liste de sous-liste avec le nom de la classe, le résultat de soulignement de recherche, et à l'intérieur de celle-ci, nous ajoutons une balise d'élément de liste avec le nom de la classe, une suggestion de soulignement de recherche, un lien de soulignement Maintenant, à l'intérieur de celui-ci, nous ajoutons simplement un composant de lien provenant de Rea Router Doom Passez à l'accessoire pour trancher les produits pour le moment. À l'intérieur, nous écrivons iPhone 14 Pro. Maintenant, la raison pour laquelle nous ajoutons ici le composant Link, c'est pourquoi lorsque nous cliquons sur cette ligne de suggestion, nous redirigerons l'utilisateur vers sa page produit. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons ici notre lien de suggestion. Ajoutons maintenant du style à cela. Arrêtez le fichier Nabar point css. Après notre bouton de recherche, nous ajoutons le résultat de la recherche par points, les crochets, et à l'intérieur de ceux-ci, nous définissons d'abord la position en haut absolu à 100 %, et à gauche à zéro Maintenant, pour utiliser la position absolue, nous devons définir la position de notre formulaire sur relative, faire défiler la page vers le haut, et dans le formulaire Navbar, nous ajoutons la position sur relative Revenons maintenant aux résultats de notre recherche. Et ici, nous ajoutons avec une marge de 200 % de haut à dix pixels, l'eau à un pixel, solide avec un CD CD, rayon de bordure de cinq pixels, de la couleur d'arrière-plan blanc, et à la fin, un indice Z de 9999 Ensuite, nous ajoutons un style pour lien de suggestion de recherche, donc la recherche par points, suggestion, le lien, et à l'intérieur des crochets, nous réglons l'affichage sur flex Maintenant, après cela, nous ajoutons un style pour la balise d'ancrage, qui est disponible dans le composant lien. Dart surge, suggestion, link, et ici nous ciblons la balise d'ancrage, les crochets bouclés, et ici nous ajoutons simplement de la largeur à 100 %, en ajoutant 10 pixels et 20 pixels, une taille unique à 18 pixels et du curseur au pointeur Et à la fin, nous ajoutons un effet RH à notre lien. Alerte de fléchettes, suggestion, lien, survol de Callan. Et entre crochets, nous avons défini la couleur de fond sur E trois, E trois, E trois. Enregistrez les modifications et jetez-y un œil. Tu vois, notre lien semble bon. Maintenant, montrons simplement notre tableau de suggestions. Revenons à notre composant Neva, et dans notre liste non ordonnée, nous ajoutons des crochets CL, des suggestions et des points MAP Ici, nous obtenons une suggestion unique, fonction de flèche et renvoyons simplement cet élément de liste. Maintenant, tout d'abord, nous ajoutons un attribut clé à l'ID de soulignement du point de suggestion Et dans le composant lien, nous ajoutons des crochets Ci, des cases arrières, et à l'intérieur de ceux-ci, nous ajoutons des barres obliques, un point d' interrogation, une recherche égale à un dollar Ci entre crochets, un point de suggestion, un titre Et à la place de ce titre codé en dur, nous ajoutons également un titre à points de suggestion Enregistrez les modifications et jetez-y un œil, tapez quelque chose dans la barre de recherche et nous verrons que nous recevrons des suggestions. Maintenant, si vous cliquez sur l' une des suggestions, nous sommes redirigés vers la page des produits, et nos produits s' afficheront en fonction des données. Mais la liste de suggestions restera ouverte. Nous devons le fermer. Ici, dans notre composant de lien, nous ajoutons un événement de clic et une fonction d'erreur interne. Et entre crochets, nous avons d'abord défini la recherche. Et définissez les suggestions sur un tableau vide. Enregistrez les modifications et jetez-y un œil, écrivez quelque chose et cliquez sur Suggestion. Tu vois, notre suggestion n'existe plus. Maintenant, nous devons également faire de même dans notre fonction handle submit. Ainsi, après cette méthode de navigation, nous ajoutons simplement des suggestions d'ensembles à un tableau vide. Enregistrez les modifications et jetez-y un œil. Tu vois, maintenant ça marche très bien, mais voici une chose. Même si nous n'avons aucune suggestion, nous recevons quand même ces lignes. Alors cliquez dessus avec le bouton droit de la souris et passez à l'inspection. Ici, nous pouvons voir qu'il s'agit notre bordure de liste non ordonnée. Réglons ça. Revenons donc au code VS, et nous enveloppons notre liste non ordonnée avec des crochets et passons simplement ici la condition si la longueur des points suggérés est supérieure à zéro, puis nous affichons cette Enregistrez les modifications et jetez-y un œil. Voyez maintenant que notre barre de recherche fonctionne bien. Maintenant, vous pourriez vous demander quel est l'avantage de cliquer sur suggestion et de rediriger vers la page qui ne contient qu'un seul élément. Ainsi, dans notre base de données, nous n'avons actuellement qu'un seul article pour chaque produit. Mais lorsque notre base de données s'agrandira, nous aurons peut-être un iPhone 14 avec plusieurs couleurs, et à ce moment-là, cette page affichera plusieurs produits. 174. Navigation pour les suggestions automatiques: Maintenant, dans notre barre de recherche, lorsque nous recevons des suggestions automatiques, nous devons cliquer sur cette suggestion pour effectuer une recherche. Mais dans le monde réel, 99 % des utilisateurs ne cliquent pas sur le lien de suggestion. Ils aiment utiliser les touches ARO, et c'est la bonne expérience utilisateur. Dans cette leçon, nous verrons comment ajouter la navigation par touches Ero à notre liste de suggestions. Donc, tout d'abord, nous créons une nouvelle variable d'état, appelons l'élément sélectionné, et comme valeur par défaut, nous passons ici moins un. Souvenez-vous simplement de la logique et tous vos doutes disparaîtront. Ainsi, lorsque nous appuyons sur la touche bas, la valeur de l'élément sélectionné augmente d'un, soit zéro. Et nous mettons une condition si l'élément sélectionné est identique à l'index de notre ligne de suggestion, puis nous surlignerons cette ligne, aussi simple que cela. Donc, tout d'abord, dans notre entrée de recherche, nous devons transmettre un événement appelé touche vers le bas, qui s'exécutera chaque fois que nous appuierons sur une touche dans cette entrée. Ici, nous passons la fonction appelée handle key vers le bas. Définissons d'abord cette fonction. Écrivez const, poignée vers le bas. Nous obtenons ici un objet d'événement, et à l'intérieur de celui-ci, nous ajoutons simplement console point log e point kee. En utilisant cette touche e point, on appuie sur le nom de la touche. Dites les modifications et jetez-y un œil, sélectionnez la zone de saisie, appuyez sur la flèche vers le haut pour voir apparaître la flèche vers le haut. J'appuie sur la flèche vers le bas et sur Entrée. Tu vois, c'est ici que nous trouvons nos principaux noms. Nous pouvons maintenant ajouter nos conditions en fonction de cela. Donc, dans cette fonction, nous ajoutons notre première condition I K égale à la flèche vers le bas. Assurez-vous d'écrire la même chaîne, sinon cela ne fonctionnera pas. Maintenant, à l'intérieur de celui-ci, nous écrivons définir l'élément sélectionné. Ici, nous obtenons notre fonction de flèche de valeur actuelle, et nous renvoyons le courant plus un. Ensuite, nous ajoutons une autre condition, si K est égal à la flèche vers le haut. Et à l'intérieur, il suffit de copier cette expression et de la coller ici. Mais nous le remplaçons simplement par le courant moins un. Enfin, nous ajoutons une condition supplémentaire si le point K est égal à Entrée et si l'élément sélectionné doit également être supérieur à moins un, car si l'élément sélectionné est inférieur à un et que nous appuyons sur Entrée, cela nous donnera une erreur. Si l'élément sélectionné est supérieur ou égal à zéro, nous accédons à ce lien. Donc, d'abord, nous définissons ici une suggestion égale à une suggestion, et dans un paquet carré, nous transmettons l'élément sélectionné. Ensuite, nous naviguons simplement avec cette recherche. Alors, comment pouvons-nous obtenir cela simple en utilisant la méthode de navigation ? Ici, nous copions ce lien depuis le composant de lien et le collons dans cette méthode de navigation. Ensuite, nous définissons la recherche sur une chaîne vide et définissons également les suggestions sur un tableau vide. Maintenant, dernière étape, nous devons mettre en évidence l'indice actif actuel. Pour cela, dans notre balise d'élément de liste, nous avons coupé le nom de cette classe et AddHeklBackets, J'ai sélectionné un élément égal à l'index de cette suggestion, puis nous ajoutons un lien de suggestion de recherche et une classe active. Comme nous ajoutons simplement un lien de suggestion de recherche. Et nous devons également obtenir un index à partir de cette méthode cartographique. Enregistrez ce fichier et définissons le CSS pour cette classe active. Ouvrez donc le fichier CSS Navar point, et ici, dans notre style ***, nous ajoutons une autre classe appelée search suggestion link point AcTV. Enregistrez les modifications , jetez un œil, écrivez quelque chose , appuyez sur les touches bas et haut pour voir que cela fonctionne Maintenant, nous appuyons sur Entrée et sur C, le lien s'ouvre. Mais ici, lorsque nous atteignons le bas et que nous appuyons à nouveau sur la flèche vers le bas, l'élément sélectionné n'est pas surligné et il en va de même pour la flèche vers le haut. Ainsi, lorsque nous sommes en haut de notre liste et que nous appuyons à nouveau sur la flèche vers le haut, nous devons définir la valeur de l'élément sélectionné sur le dernier élément. Revenez au composant Naver ici, dans notre fonction de touche de poignée vers le bas pour la flèche vers le bas, nous passons ici la condition si le courant égal à la longueur du point de suggestion moins un, qui est le dernier élément, puis nous revenons à zéro, qui est notre premier élément, sinon nous retournerons le courant plus un Maintenant, pour Arrow up, on passe son état. Si le courant est égal à zéro, nous renvoyons la longueur des points suggérés moins un, ce qui est notre dernier élément, sinon, nous renvoyons le courant moins un. Enregistrez les modifications et jetez-y un œil. voyez, nous pouvons nous déplacer de haut en bas dans notre liste de suggestions, mais voici un bogue. Si nous sélectionnons le dernier élément, puis que nous continuons à écrire, nous devons appuyer plusieurs fois sur la touche haut, et c'est une mauvaise expérience utilisateur Pour résoudre ce problème, cliquez ici dans notre fonction Handle Down. Ajouter une condition J'ai sélectionné article dont la longueur est inférieure à celle des points suggérés. Ce n'est qu'alors que nous appliquons cette logique. Déplacez donc ce code dans la condition I, sinon nous définirons l'élément sélectionné sur la valeur par défaut, qui est moins un. Enregistrez les modifications et jetez-y un œil. Vous voyez maintenant que cela fonctionne correctement. Vous pouvez voir à quel point il est simple d' ajouter une navigation d'erreur à notre liste de suggestions. 175. Méthode de démystification pour obtenir des suggestions: Maintenant, dans notre implémentation, nous avons fait quelque chose de très mal. Laisse-moi te montrer. Donc, dans nos outils de développement, ouvrez l'onglet Réseau et tapez ici quelque chose dans cette barre de recherche. Ici, nous pouvons voir que nous effectuons un appel d'API au backend chaque fois qu'un utilisateur tape un caractère dans la barre de recherche. Par exemple, ici, nous envoyons six demandes, et nous n'avons vraiment pas besoin des cinq premières réponses. Ainsi, lorsque nous envoyons autant de demandes, notre application ralentit et la charge sur le serveur augmente également. Pour réduire le nombre d'appels d'API nous pouvons donc utiliser une technique appelée debouncing débouncing est une méthode qui permet de retarder l'exécution d' une fonction jusqu'à ce qu'un certain temps se soit écoulé Par exemple, lorsque l'utilisateur tape quelque chose dans la barre de recherche, après un certain délai, nous appellerons notre API. Laissez-moi vous montrer comment nous pouvons le faire. C'est vraiment simple. Donc, dans notre effet d'utilisation, nous ajoutons ici la fonction set timeout Comme nous le savons, à l'exception la fonction de rappel et d'un deuxième paramètre, nous devons passer le temps en millisecondes Ici, on passe les 300 millisecondes. Quoi que nous ajoutions à cette fonction de rappel, elle s'exécutera au bout de 300 millisecondes Nous allons déplacer cette logique dans notre fonction de rappel. Bien. Nous devons maintenant ajouter une fonction de nettoyage pour ce délai d'attente. Nous stockons ce délai dans une variable appelée suggestions de délais En bas pour le nettoyage, nous renvoyons la fonction de rappel, nous renvoyons la fonction de rappel, et ici nous effaçons simplement délai imparti et transmettons les suggestions de délai Enregistrez les modifications et jetez-y un œil, actualisez la page , publiez quelque chose ici, et nous pouvons voir nous n'envoyons qu'une seule demande, donc cela fonctionne. Je vais maintenant vous expliquer ce qui se passe ici. Lorsque l'état de notre recherche change, la fonction de temporisation définie s' exécute et après 300 millisecondes, nous appelons Désormais, si l'utilisateur saisit un autre caractère dans les 300 millisecondes, le délai d'attente est réinitialisé et l' appel d'API Si l'utilisateur n'écrit aucun caractère en 300 millisecondes, qu'alors que cette API appellera pouvons modifier ces millisecondes en fonction de nos besoins, mais 300 millisecondes est le temps moyen, ni trop lent ni trop rapide. La méthode de débounçage est donc très utile si vous souhaitez limiter le nombre de demandes d'API Notre dernière tâche est donc terminée ici. 176. Tri de la liste des produits: Terminons maintenant notre dernière tâche, qui consiste à raccourcir notre liste de produits Ainsi, lorsqu'un composant de liste de produits est créé, nous définissons tout d'abord une variable d' état pour stocker la valeur de tri, que nous appelons short B et set short B. Et comme valeur par défaut, nous passons une chaîne vide. Ensuite, nous créerons un autre état d'utilisation pour stocker les produits triés. Et comme valeur par défaut, nous passons un tableau vide. Maintenant, dans notre balise de sélection, nous obtenons d' abord notre valeur de tir actuelle. Nous adhérons donc à l' événement modifié, et à l'intérieur de celui-ci, nous obtenons la fonction de flèche d'événement, et nous définissons simplement la valeur du point cible du point de tri B à E point. Définissons maintenant la fonctionnalité de court-circuit. Dans notre projet précédent, nous avons donc tourné notre gamme de films en utilisant une bibliothèque low desk. Maintenant, permettez-moi de vous montrer une autre façon d' ajouter des raccourcis sans utiliser de bibliothèque Donc, tout d'abord, nous ajoutons ici use Effect hook et pass callback function Dans le tableau de dépendances, quelle variable ajoutons-nous. Lorsque notre estimation de la valeur changera, nous voulons vendre nos produits à découvert et lorsque nos données changent, nous voulons également vendre des produits à court terme. Écrivons maintenant la logique du court-circuit. Tout d'abord, nous ajouterons une condition : si les données sont disponibles et que les produits Data point ne sont disponibles que, alors notre court-circuit sera effectué Donc, dans cette condition, nous créons d' abord la copie de notre gamme de produits. Les produits Cons sont donc équivalents à des produits matriciels, étalez les données de l'opérateur par points. Maintenant, supposons que la condition I, courte, B est égale au prix décroissant, et à l'intérieur de celle-ci, nous utiliserons la méthode de tri Nous écrivons donc les produits point SHOT. Maintenant, laissez-moi vous expliquer rapidement votre méthode courte. Ainsi, dans cette méthode de tri, nous obtenons deux paramètres A et B. A est la valeur du premier élément, et B est la valeur du deuxième élément. Ne t'inquiète pas pour ça, regarde ça. Pour la descente, il faut passer ici, B moins un, et pour la montée, il faut passer A moins B, c'est aussi simple que cela Maintenant, dans notre cas, nous avons un ensemble d'objets. Ici, nous renvoyons B, qui est le prix de notre deuxième article, moins A, qui est le prix ponctuel de notre premier article. Maintenant, cela renverra un tableau trié, nous l'enveloppons simplement avec des produits triés définis, et c'est tout. Ajoutons maintenant une autre condition. Donc, le tri par C est égal au prix croissant. À l'intérieur de cette expression, nous allons copier cette expression, la coller ici et remplacer cette condition par «   prix moins le prix point B point ». Maintenant, dupliquons ces deux conditions, et ici nous changeons I en sf. Maintenant, au lieu de la baisse des prix, nous adoptons le taux décroissant Et dans notre méthode de tri, nous avons défini comme condition le taux de points B pour les avis, moins le taux de points A pour les avis. Ensuite, nous avons taux croissant et nous changeons la fonction de comparaison en A point reviews dot rate moins B point reviews dot rate Maintenant, si nous n'avons pas cette valeur de tri pour cela, nous ajoutons et nous définissons simplement les produits triés en produits Maintenant, dans notre JSX, à la place des produits à points de données, nous utilisons des produits triés par points MAP Enregistrez les modifications et jetez-y un œil. Passez du prix le plus élevé au plus bas et consultez nos produits triés par prix en ordre décroissant Rappelez-vous toujours que pour l'ordre croissant, nous devons passer la fonction comparée à A moins B, et pour l'ordre décroissant, nous utilisons B moins un, et c'est C'est ainsi que nous implémentons le shorting sans aucune bibliothèque. Mais cette méthode de tri ne fonctionnera que pour les nombres. Dans notre projet précédent, nous devions classer les courts métrages par date, et c'est pourquoi nous utilisons la bibliothèque Low desk. 177. Section 16 Accrochets de performance et de gestion de code: Bienvenue dans la 16e section mise à jour des réacteurs ultimes. Certains étudiants me demandent d'expliquer d' autres React Hooks. Donc, dans cette section, nous verrons quelques hooks de React grâce auxquels vous pouvez améliorer les performances de votre application comme l'utilisation du mémo et l'utilisation du rappel Nous verrons également quand nous pouvons utiliser ces crochets et quand nous ne pouvons pas les utiliser. Et après ces deux hooks, nous verrons un autre hook pour la gestion du code, qui est use reducer hook Il s'agit de la mini-section, alors commençons rapidement. 178. Comprendre l'utilisation du crochet mémo: Voyons maintenant ce qu'est Use Memo et quand nous en avons besoin. Use Memo est un arceau qui est utilisé pour améliorer les performances si nous avons des calculs coûteux dans notre application React Maintenant, vous vous demandez peut-être ce que sont les calculs coûteux. Parfois, dans notre application, nous sommes confrontés à des calculs complexes, tels que la recherche de la somme d'un million de produits , la recherche de la factorielle ou la recherche des séries de Fibonaki, qui sont de très gros calculs et le calcul du résultat peut prendre du temps Dans ce cas, nous pouvons utiliser un crochet mémo pour réduire le temps de calculs indésirables et éviter les rendus inutiles Grâce à cela, nous pouvons améliorer les performances de nos applications. Laissez-moi vous le montrer de façon pratique. Donc, pour démontrer ces hooks, j'utilise un nouveau projet car nous ne voulons pas regrouper notre application de commerce électronique. Et après avoir appris cela, nous implémenterons ces crochets dans notre projet. Vous pouvez donc simplement les voir et ensuite les implémenter. Donc ici, j'ai créé une variable d'état appelée count. Et dans JSX, j'ai créé deux boutons, moins et plus, et au centre, nous affichons le nombre Supposons maintenant que nous devions trouver la somme totale d'un million de produits. Ce n'est qu'un exemple. Ne t'inquiète pas pour ça. Pour le démontrer, j'ai créé cette fonction de calcul coûteuse, qui exécute essentiellement une boucle aussi longue et renvoie la somme du nombre total. Et dans notre JSX, nous affichons simplement ce total. Laissez-moi vous montrer à quoi cela ressemble dans le navigateur. Vous voyez, nous obtenons ici le total par défaut. Maintenant, permettez-moi de cliquer sur ce bouton plus. Vous voyez, cela prend deux à trois secondes par calcul. Maintenant, c'est tout à fait normal, car nous devons en calculer un peu, mais voici une chose. Même si nous faisons quelque chose dans ce composant, ce résultat est à nouveau calculé. Laissez-moi vous montrer ce que je veux dire. Donc, ici, dans notre composant, je crée une nouvelle variable d'état appelée thème sombre et je définis le thème sombre. Comme valeur par défaut, je passe false. Ne vous inquiétez pas, il ne s'agit que d'une démo. Je ne vais pas implémenter le thème sombre et clair ici. Maintenant, après notre total, j'ajoute un du et à l'intérieur de ce du j'ajoute un tag et j' affiche ici le thème. Si le thème sombre est vrai, nous affichons le mode sombre L en mode clair. Et après cela, j'ajoute un bouton appelé thème togal. Et pour ce bouton, j'ajoute Click Event Simple Set Tag Theme au thème False Dag. Voyons maintenant comment fonctionne notre application. Donc ici, si nous augmentons ou diminuons le nombre, cela prend deux à 3 secondes, ce qui est une bonne chose. Maintenant, laissez-moi essayer d'aborder le thème global. Pouvez-vous voir qu'il faut encore deux à trois secondes pour changer de thème ? Parce que cette fonction coûteuse appelle à nouveau. Nous pouvons le constater en utilisant cette ligne de console. Alors pourquoi recalcule-t-il ce total ? C'est vrai, parce que nous changeons l'état du thème. Et nous savons que lorsque nous changeons l'état du thème, l' ensemble du composant est rendu à nouveau, et c'est pourquoi ce total compte à nouveau. L'idéal est donc que lorsque nous modifiions cette variable de comptage, n'est qu'alors que notre coûteuse fonction de calcul devrait s'exécuter. Dans le cas contraire, cela ralentira notre application. Nous avons le problème d'un nouveau rendu indésirable pour le calcul, et nous pouvons maintenant le résoudre Ici, nous pouvons utiliser un crochet mémo pour arrêter les calculs indésirables. Il suffit de voir ceci et tous les doutes seront dissipés. À la place de cette fonction de calcul coûteuse, nous appelons use memo hook et, comme use effect hook pour use memo, nous devons également passer aux arguments de la fonction de rappel du premier paramètre, que nous voulons exécuter dans celle-ci, nous voulons appeler une fonction de calcul coûteuse Utilisez notre décompte comme argument. Au deuxième paramètre, nous devons transmettre un tableau de dépendances dans lequel nous devons transmettre des variables. Chaque fois que ces variables sont modifiées, seule cette fonction appelée et c'est pourquoi je passe ici count. Chaque fois que cette variable de comptage est modifiée, cette fonction de calcul coûteuse s'exécute et quel que soit le résultat de cette fonction, elle ajoutera notre variable totale. Vérifions-le si cela fonctionne ou non. LCONPlus S, cela prend deux à 3 secondes. Mais maintenant, si nous cliquons sur le thème total, cela change immédiatement C'est ainsi que l'utilisation de Memo Hook peut améliorer les performances de notre application en arrêtant les calculs indésirables. Maintenant, permettez-moi de vous poser une question. Comment pouvons-nous obtenir le même résultat sans utiliser le crochet Use Memo ? Ce que je veux dire, c'est que si notre variable de comptage est modifiée, n'est qu'alors que cette fonction de calcul coûteuse devrait s'exécuter. C'est-à-dire que nous avons une autre méthode, pensez-y. C'est vrai. Nous pouvons obtenir le même résultat avec Use Effect Hook. Voici la solution avec un crochet à effet d'utilisation. Mais dans cette implémentation, nous devons créer une autre variable d'état appelée total et définir le total. Mais dans le mémo d'utilisation, nous n'avons pas besoin de créer une variable d'état distincte. Ce total fonctionne comme une variable d'état totale. C'est donc une étape supplémentaire pour cette implémentation de l'effet d'utilisation. Sinon, les deux fonctionnent presque de la même manière. Il est donc préférable d' utiliser un crochet mémo pour gérer des calculs complexes. 179. Exercice pour un sous-total: Il est maintenant temps de faire un peu d'exercice. Donc, dans notre projet Cart Wis, modifions notre logique de sous-total et utilisons Memo Hook pour cela Je sais que tu peux le faire très facilement. Alors essayez-le et la solution était là. Voyons maintenant la solution. Ouvrez le composant de la page du panier. Tout d'abord, laissez-moi supprimer cette variable d'état du sous-total Tout simplement à la place de ce crochet d'effet d'utilisation, nous ajouterons un crochet d'utilisation mémo. La saisie automatique fonctionne bien. Maintenant, au moment de définir ce total comme sous-total, nous renvoyons simplement ce total car use memo renvoie toujours une valeur. Tu t'en souviens ? Enfin, stockons ce total dans la variable const subtotal Supprimons maintenant l'effet d'utilisation et utilisons l'entrée par le haut. Nous n'en avons pas besoin. Enregistrez les modifications et jetez-y un œil. Tu vois, ça marche comme avant. Vous pouvez voir à quel point il est simple d'utiliser le crochet Mamo. Comme effet d'utilisation, use memo prend deux arguments. La première, la fonction de rappel, qui renvoie toujours une valeur Et si nous ne voulons renvoyer aucune valeur à partir de cette fonction de rappel, pourquoi utilisons-nous use memo hook, n'est-ce pas Et le deuxième argument est un tableau de dépendances. Utilisez donc un crochet mémo lorsque vous devez gérer des calculs complexes. Maintenant, dans la leçon suivante, je vais vous montrer un hook très similaire , à savoir use callback hook, à la prochaine leçon 180. Comprendre l'utilisation du crochet de rappel: Maintenant, découvrons comment utiliser le crochet de rappel. Ce hook est très similaire à use memo hook, ce qui signifie qu'il est utilisé pour améliorer les performances de notre application React et empêcher les rendus indésirables La seule différence entre use memo et use callback est que use memo renvoie une valeur et use callback renvoie une fonction. C'est ça. Je sais que c'est un peu confus. Laissez-moi vous montrer de façon pratique. Donc, ici, je supprime notre ancien code d'utilisation mammo et tout d'abord, je crée une variable d'état en utilisant état d'utilisation appelé counter et set counter, et la valeur par défaut est un Nous créons une autre variable d'état appelée set theme et comme valeur par défaut de light. Maintenant, dans notre JSX, je crée ici pour étiqueter et afficher simplement thème ici et dans le thème Gully bracket Il suffit de voir ceci et vous comprendrez comment utiliser callback Hook. Maintenant, pour changer la valeur du thème, nous créons un bouton et le passons ici au thème Ogle Pour l'événement onclick, j'ajoute ici une référence de fonction au thème GL Définissons maintenant cette fonction en haut de la page. Donc, le thème total des inconvénients est égal à la fonction flèche et appelez simplement fonction set theme et nous obtenons ici la valeur précédente, la fonction flèche, et nous passons ici la condition Si le thème est égal à la lumière, alors nous le changeons en foncé, sinon nous le changeons en clair. Maintenant, vous vous demandez peut-être pourquoi je n'affiche pas le compteur. Donc, pour afficher le compteur, nous créons un nouveau composant dans notre dossier source appelé counter point JSX Je sais que tu te poses beaucoup de questions, mais après les résultats, tu comprendras ce que je veux te montrer. Ajoutons du code standard en utilisant RAFC et ici nous renvoyons simplement le tag et affichons ici renvoyons simplement le tag et affichons bouclés , le compteur Pour modifier ce compteur, nous allons créer un bouton appelé augmenter. Pour augmenter le compteur, nous transmettons l'événement de clic et passons simplement ici, nous augmentons la fonction du compteur. Maintenant, comment pouvons-nous obtenir le compteur et augmenter la fonction du compteur ? C'est vrai, en utilisant des accessoires. Nous déstructurons ici, controns et augmentons la fonction du compteur. Enregistrez les modifications et dans le composant a, avant qu'il ne comporte deux balises, nous ajoutons simplement un composant compteur. Nous devons maintenant passer deux accessoires contre contre et augmenter le compteur pour augmenter le compteur Enfin, nous devons simplement définir cette fonction de compteur d'augmentation. Donc, const increase counter est égal à set counter. Ici, nous obtenons la valeur précédente, la fonction d'erreur et simplement la valeur précédente plus un. Enregistrez les modifications et jetez-y un œil. Vous voyez, lorsque nous cliquons sur le bouton Augmenter, le compteur augmente d'un, et lorsque nous cliquons sur le thème Togal, le thème change Parfait Maintenant, voici une chose. Dans ce composant de compteur, supposons que nous exécutions une tâche qui prend 500 millisecondes, soit Donc, pour le démontrer, nous ajoutons d'abord ici le journal des points de la console, le composant compteur, le rendu. Ensuite, supposons maintenant que le temps de démarrage soit égal au point de performance. Cette fonction Performance Dot Now renverra l'intervalle de temps en haute résolution. Pour l'instant, ne t'inquiète pas pour ça. Et j'adhère simplement à la boucle Y et je lui donne la condition si point de performance maintenant moins le temps de début est inférieur à 500, puis j'exécute cette boucle. Cela ajoutera simplement un délai de 500 millisecondes. Enregistrez les modifications et jetez-y un œil. Ouvrez la console et actualisez la page. Cliquez maintenant sur le bouton Augmenter et voyez ici que nous recevons un message de rendu du composant du compteur et que nous avons également un deuxième délai augmenter la valeur du compteur, ce que nous voulons Parfait Mais voici le seul problème. Même si nous cliquons sur le thème Toogle, il est également affiché en tant que contre-composant Après un délai de 500 millisecondes, notre thème change Mais le changement de thème ne devrait pas restituer le composant compteur car il s'agit de deux états différents. Ici, notre composant compteur reçoit des rendus indésirables et, de ce fait, notre application ralentit. Pouvez-vous voir le problème à démontrer plus clairement ici, dans le composant de l'application, que nous associons le nom de la classe au thème. Et en haut, j'ai importé le fichier CSS app point. Enregistrez ceci, et dans le fichier CSS à points de l'application, j'ajoute d'abord DU et dans le crochet C, rembourrant à 20 pixels Ensuite, nous ajoutons du style pour Dark Class. Et à l'intérieur, nous ajoutons la couleur d'arrière-plan deux 101010 et la couleur deux FFE 400 Enregistrez les modifications et jetez-y un œil. Cliquez sur le thème Gal. Tu vois, on voit clairement le retard. Nous devons donc résoudre ce problème de rendus indésirables, et c'est ce que nous pouvons faire avec Us callback 181. Comment utiliser le crochet de rappel dans React: Maintenant, laissez-moi vous montrer comment utiliser Calbeck Hook pour éviter les rendus indésirables Comme vous le savez peut-être, use callback renvoie toujours une fonction Nous devons donc d'abord identifier la fonction à l'origine des rendus indésirables Peux-tu t'identifier correctement. Il s'agit d'une fonction de comptage accrue car lorsque nous cliquons sur le thème Ontogal, composant de notre application est rendu à nouveau et grâce à cela, une contre-fonction accrue est C'est pourquoi notre composant compteur est également rendu à nouveau. Mais l'état de notre thème n'est pas lié au composant compteur, pourquoi nous devons rendre le composant compteur. En termes simples, le composant du compteur ne devrait être rendu à nouveau que lorsque nous changeons l'état de notre compteur. Permettez-moi de dupliquer cette contrefonction accrue. Commentez celui-ci. Vous pouvez clairement voir les modifications. La syntaxe d'utilisation du crochet de rappel est désormais la même que celle d'utilisation du mémo. Nous pouvons placer cette fonction de flèche entre parenthèses et l'ajouter ici en utilisant simplement callback Hook Maintenant, au deuxième paramètre, nous devons transmettre le tableau de dépendances. Dans ce tableau de dépendances, nous comptons la variable que nous ajouterons. Ils sont vraiment intelligents, bons. Ainsi, lorsque la variable du compteur change, n'est qu'alors que cette fonction de compteur augmentée la recréera. Regardez les modifications et jetez-y un coup d'œil. Cliquez sur le thème Togal, et il y a encore du retard Pour compléter cette logique, il faut donc faire une petite chose. Donc, dans quel composant, nous voulons arrêter le rendu indésirable, nous devons envelopper ce composant avec la fonction mammo Donc, ici en haut, nous pouvons importer Mammo depuis la bibliothèque React Et lorsque nous exportons ce composant en bas, nous l' enveloppons simplement avec la fonction mammo Regardez les modifications et jetez-y un coup d'œil. Cliquez sur le thème Togal et voyez qu'il fonctionne très bien sans que nous recevions un message de rendu. Si nous changeons notre compteur, n'est qu'alors que notre composant de compteur sera à nouveau rendu. C'est ainsi que nous empêcherons les rendus indésirables. Récapitulons maintenant l' utilisation de Callback Hook. Le crochet Use Callback est utilisé pour empêcher les rendus indésirables et nous aider à améliorer les performances de notre application Vous vous demandez peut-être si nous devrions encapsuler toutes les fonctions de notre application avec use callback hook ? La réponse est non. Nous ne devons supprimer que les fonctions qui sont origine de nouveaux appels indésirables et de retards Existe-t-il un raccourci pour trouver ce type de fonctions ? La réponse est oui. Il y a une astuce que j'utilise quand j'ai commencé à apprendre à utiliser le crochet de rappel Chaque fois que vous transmettez une fonction en tant qu'accessoire et qu'il y a un autre état dans ce composant, n'est qu'alors que vous devez utiliser callback Hook Voyons si cette astuce fonctionne ou non pour notre composant d'application. Donc, premier point, la fonction passe par les accessoires. Dans notre composant d'application, nous transmettons la fonction de compteur d'augmentation en tant qu'accessoires au composant de compteur Et deuxièmement, il devrait y avoir un autre état dans ce composant. Nous avons donc ici un état du thème autre que le contre-état. Donc, cette astuce fonctionne. J'espère que vous comprenez que l'utilisation du crochet de rappel, l'utilisation de Mamo et l'utilisation du rappel sont utilisées pour améliorer Lorsque votre application React commence à ralentir, vous pouvez consulter votre code et voir si vous pouvez utiliser use memo et utiliser callback ou non Ce n'est pas obligatoire, mais vous pouvez les utiliser quand vous en avez besoin. 182. Exercice d'utilisation du crochet de rappel: Il est maintenant temps de s'entraîner à utiliser le crochet Calbeck. Donc, dans notre projet Cows, vous devez trouver s'il existe un composant dans lequel un rappel d'utilisation est nécessaire Si vous en trouvez, vous devez utiliser le crochet Calbeck dans ce composant Consacrez donc un peu de temps cet exercice et souvenez-vous de ces deux points pour les identifier. La fonction passe par des sondes au composant enfant, et il doit y avoir une variable d'état Alors essayez-le et ensuite , voyez la solution. Ainsi, dans notre application Carwis, nous vérifions d' abord notre composant racine qui est le composant de l'application Nous avons donc ici des variables d'état, user et CAT. Nous passons également la fonction du composant parent au composant enfant. Nous pouvons donc implémenter ici, utiliser un crochet de rappel. Ici, dans la fonction At to cart, nous mettons simplement cette fonction de rappel entre parenthèses et nous l'ajoutons simplement ici, en utilisant le rappel et pour le deuxième paramètre, nous ajoutons un tableau de dépendances et à l'intérieur ce que nous ajoutons, c'est vrai, nous ajoutons vrai, nous ajoutons Maintenant, pour la fonction removed from card, nous enroulons sa fonction de rappel avec parenthèses et également en haut, nous ajoutons use callback hook et pour le deuxième paramètre, nous ajoutons un tableau d'indépendance de l'état de la carte Nous faisons de même pour cette fonction de mise à jour de la carte, enveloppez-la entre parenthèses et ajoutez-y un rappel et un tableau de dépendances avec l'état de la carte Maintenant, pour la fonction Get card, nous enroulons sa fonction de rappel avec des parenthèses et ajoutons use callback Maintenant, ce que nous ajoutons dans ce tableau de dépendances, devons-nous ajouter l'état de la carte ? Non, nous n'avons pas besoin de l'état de la carte ici car si nous ajoutons un tableau d'indépendance de l'état de la carte, ce n'est que lorsque l'état de notre carte changera que cette fonction Get card sera exécutée, ce que nous ne voulons pas Nous voulons que lorsque l' état de l'utilisateur change, nous obtenions les détails de la carte. Nous ajoutons donc ici l'état de l'utilisateur, et c'est ainsi que vous devez envisager d'ajouter une dépendance. Et c'est tout. Nous ajoutons use Callback hook dans notre composant d'application. Enregistrez ce fichier, et nous devons encapsuler tous les composants qui utilisent cette fonction par fonction mammo J'emballe rapidement ces composants avec Mammo Function. Enregistrez les modifications et jetez-y un œil. Tu vois, ça marche comme avant. En utilisant use memo et use callback hook, nous pouvons améliorer les performances de notre application React Maintenant, vous pourriez dire que nous ne constatons aucune amélioration des performances. Oui, vous pouvez le voir actuellement. Mais lorsque notre application devient volumineuse, à ce moment-là, ces hooks sont vraiment utiles pour améliorer les performances. C'est ainsi que vous pouvez utiliser le mémo et le crochet de rappel. Maintenant, dans notre application, vous trouvez n'importe quel endroit où vous pouvez ajouter use callback hook, alors vous devez implémenter use callback à cet C'est encore un petit exercice pour toi. Consultez les composants de notre application et si vous trouvez l'endroit, vous pouvez ajouter une commande dans la section Q&R Les autres étudiants recevront également ce composant pour mise à jour. Su dans la leçon suivante. 183. useCrochet réducteur: Voyons maintenant un autre hook de réaction, qui est Use Reducer Hook. Donc, utiliser un crochet réducteur est utilisé pour organiser un état complexe et sa méthode En termes simples, utiliser un réducteur est utilisé pour rendre notre composant plus propre Je sais que c'est un peu confus, alors laissez-moi vous expliquer cela à l'aide d'un exemple simple. Imaginons donc que nous ayons une petite application dans laquelle nous n'avons qu'un seul compte et que nous ayons trois boutons : augmenter, diminuer et réinitialiser. Lorsque nous cliquons sur augmenter, le nombre augmente d'un. Si nous cliquons sur Diminuer, nombre diminue d'un, et si nous cliquons sur Réinitialiser, notre décompte est réinitialisé à sa valeur par défaut, qui est zéro. Son code ressemble à ceci. En haut, nous avons count state using us state hook avec la valeur par défaut zéro. Maintenant, pour cet état, il existe trois méthodes, ou on peut dire qu'il y a trois fonctions. Augmentez le nombre, diminuez le nombre et réinitialisez le nombre. C'est aussi simple que ça. Maintenant, ce code est un peu désorganisé, nous pouvons donc organiser ce code en utilisant use reducer hook. Je commente ce code et j' appelle ici à utiliser un crochet réducteur. Maintenant, ce hook accepte deux arguments. La première est la fonction réductrice, qui est la fonction qui décide des méthodes que nous voulons appeler, comme augmenter, diminuer ou réinitialiser Le deuxième argument est la valeur par défaut de notre état, qui est zéro, n'est-ce pas ? Maintenant, ici, nous pouvons également ajouter un autre argument, qui est utilisé pour retarder l' initialisation de la valeur de l'état Mais d'habitude, nous ne l'utilisons pas. Donc, pour l'instant, nous ne voulons pas cela. Maintenant, comme pour notre Use State Hook. Ce crochet d'utilisation du réducteur renvoie également un tableau, qui contient deux éléments, l'état actuel et une fonction permettant de mettre à jour l'état Donc C, nous obtenons d'abord le nombre de nos états. Ensuite, la fonction par état du programme de mise à jour, que nous appelons fonction de répartition Expédier signifie envoyer quelque chose. C'est le nom le plus courant de réducteur par utilisation. Si vous souhaitez prendre un autre nom, vous pouvez également le faire. Cela dépend entièrement de vous. Définissons maintenant notre fonction de réducteur. En dehors de notre fonction de composant, nous définissons une nouvelle fonction appelée réducteur, qui est la partie la plus importante de Use Reducer Hook. Donc, dans cette fonction, nous allons écrire toute la logique de notre réducteur d'utilisation Je sais que c'est un peu confus, mais après avoir terminé cette leçon, tous vos doutes seront dissipés. Cette fonction de réduction d'utilisation comporte donc deux paramètres. Le premier paramètre est l'état, c'est-à-dire où se trouve actuellement notre application. Et le deuxième paramètre est l'action, c' est-à-dire l'action que nous devons effectuer. Par exemple, augmentez le nombre, diminuez-le, réinitialisez-le, etc. Maintenant, cette fonction renverra l'état mis à jour de notre état de comptage. Donc pour l'instant, je renvoie simplement l'état, qui est la valeur de comptage actuelle plus un. Maintenant, pour appeler cette fonction, nous utilisons cette fonction d'expédition. Donc ici, dans la fonction d'augmentation du nombre, j'appelle simplement la fonction de répartition et je ne transmets rien dedans. Je dois également commenter cette ligne de comptage définie. Voyons maintenant ce que nous obtenons. Enregistrez donc les modifications et jetez-y un œil. Cliquez sur le bouton plus et voyez que le compteur augmente d'un car dans la fonction réducteur, nous renvoyons ici l'état plus un Si nous changeons ce paramètre en état moins un, cela diminue la valeur du comptage. Lorsque nous appelons cette fonction de répartition, cette fonction de rappel s'exécute et quelle que soit la valeur renvoyée par cette fonction, cette valeur devient la valeur d'état actuelle est aussi simple que ça. Maintenant, vous vous demandez peut-être comment pouvons-nous effectuer d'autres actions telles que l'augmentation ou la diminution pour différentes fonctions ? Pour cela, nous pouvons transmettre un objet dans cette fonction d'expédition. Dans cet objet, nous ajoutons une propriété appelée type, et nous passons simplement ici type pour augmenter tout le capital. totalité du capital n'est pas obligatoire, mais il est préférable de mettre en évidence le type d'action. Maintenant, en utilisant ce type, notre fonction de réduction saura quelle tâche nous voulons effectuer Ici, nous pouvons mettre une condition en fonction de ce type. Nous pouvons utiliser I s ou nous pouvons également utiliser un boîtier de commutation. J'aime utiliser switch case, switch, et ici nous passons notre propriété type. Maintenant, la question est de savoir comment obtenir le type de propriété ? Nous obtenons la propriété du type en utilisant ce paramètre d'action. Ici, nous écrivons simplement une action, qui est ce type d'objet et de point. Maintenant, entre crochets, nous ajoutons majuscule, augmentation, deux-points, et nous renvoyons ici l'état plus un Maintenant, nous ajoutons un autre cas, qui est diminution, deux-points, et voici ce que nous renvoyons ? Wight. Nous renvoyons l'état moins un. Ensuite, nous ajoutons un autre étui qui est réinitialisé. Colon et ici on renvoie zéro. Et pour des raisons de sécurité, nous ajoutons ici le cas par défaut, et nous renvoyons simplement cet état tel quel. Si par erreur, nous ajoutons un autre type d'action, cela ne provoquera pas d'erreur. La fonction de réduction est donc prête. Il ne nous reste plus qu'à envoyer un type d'action différent. Copiez cette fonction d'expédition et ajoutez-la simplement dans la fonction de réduction du nombre et modifiez ce type pour diminuer. Ensuite, pour la réinitialisation, nous changeons ce type en réinitialisation. Enregistrez les modifications et jetez-y un œil. Vous voyez, notre application fonctionne de la même manière qu'avant. Vous pouvez voir maintenant notre code semble un peu plus organisé. En utilisant le réducteur utilisateur, nous pouvons organiser notre code Récapitulons cela en utilisant un crochet réducteur. Use reducer accepte deux arguments. Fonction de réduction qui gère simplement le type d'actions que nous effectuons et ce qu'il fait Et le deuxième argument est la valeur par défaut. Maintenant, comme use state, use reducer renvoie également un tableau avec deux éléments, l'état et la fonction de répartition Cet état est la valeur de l'état actuel, et en utilisant cette fonction de répartition, nous pouvons spécifier le type d'action. Quel que soit le type que nous passerons à partir d'ici, il fonctionnera dans notre boîtier de commutation, c'est aussi simple que cela. Donc, utiliser un réducteur n'est rien. Il suffit de rendre notre code plus organisé. Si vous êtes satisfait de votre code actuel, vous n'appliquez pas de force réducteur d'utilisation à ce composant Cela dépend entièrement de vous. Ne vous laissez pas embrouiller par cela. Maintenant, vous pourriez dire qu'en utilisant cette fonction de réduction, notre code semble plus laid, et c'est vrai La solution est que nous pouvons définir cette fonction de réduction dans un autre fichier et simplement importer cette fonction ici dans use reducer hook. Dans notre dossier source, nous créons un nouveau dossier appelé reducers à l'intérieur de ce dossier, nous créons un nouveau fichier appelé count reducer point js Maintenant, à partir d'un composant, nous coupons cette fonction de réduction et la collons dans le fichier du réducteur de comptage Nous pouvons également renommer cet état pour qu'il compte. Je pense que cela a plus de sens et changez également le nom de la fonction en Count Reducer. Ensuite, nous exportons simplement le réducteur de comptage par défaut. Enregistrez les modifications, et dans notre composant d'application à la place de ce réducteur, nous ajoutons un réducteur de compte Enregistrez les modifications et voyez maintenant que notre code semble plus propre. C'est ainsi que vous pouvez nettoyer votre composant. 184. Exercice pour réducteur: Il est maintenant temps de faire un peu d'exercice. Dans notre projet Card wise, nous avons notre composant d'application dans lequel nous gérons différentes méthodes pour modifier l'état de la carte. Vous devez donc implémenter un réducteur d'utilisation pour l'état de la carte. De plus, l'indice réside dans la fonction de réduction, nous devons uniquement appliquer la logique de mise à jour de l'état, sans appeler une API Il doit être séparé. le cas de l'état de la carte. À partir de cet exemple, vous pouvez créer d'autres dossiers. Cela va être amusant, consacrez du temps à cet exercice et voyez ensuite la solution. 185. Actions complexes pour les réducteurs: J'espère que vous aurez résolu cet exercice, ou du moins que vous essayerez de le résoudre. Parce que l'utilisation d'un crochet réducteur dans des actions complexes comme ajouter un panier, supprimer une carte ou mettre à jour une carte est un peu confuse Si vous êtes trop confus, alors selon ma suggestion, n'implémentez pas use reducer hook car en fin de compte, devez travailler sur votre code et utiliser le réducteur sert juste à organiser Vous pouvez utiliser un crochet réducteur. Ce n'est pas obligatoire, mais de nombreux étudiants veulent apprendre à utiliser un crochet réducteur. C'est pourquoi j'ajoute cette leçon. Voyons maintenant la solution à cela. Dans notre dossier source, nous créons un nouveau dossier appelé reducers, et dans ce dossier, nous créons un nouveau fichier appelé card reducer point js Maintenant, dans ce fichier, nous créons une nouvelle fonction, réducteur de carte, ce qui nous donne ici deux paramètres Sais-tu ce qu' ils écrivent ? Tout d'abord, nous obtenons l'état, ou nous pouvons appeler ici panier, et le second est l'action, qui est l'objet que nous transmettons dans la fonction d'expédition. Maintenant, dans cette fonction, nous devons écrire switch case. Alors changez, et nous ajoutons ici le type de point d'action, Cali Brackets Étui pour ajouter au panier. Colonne, passons au composant de l'application, et supprimons simplement cette logique de changement d' étape avant d'appeler l'API head to cart et de la coller dans le case d'ajout au panier. Maintenant, pour formater ce code, laissez-moi le sauvegarder correctement. Maintenant, à la fin, nous devons simplement renvoyer l'état mis à jour. Supprimez cette fonction de carte définie et nous renvoyons cette carte mise à jour. Exportons maintenant ce réducteur d'ici. Exportez donc par défaut, réducteur de carte. que disent les modifications, et dans notre composant d'application à l'endroit de ce cerceau de date d'utilisation, nous écrivons use reducer, et tout d'abord, nous voulons ici une fonction de réduction Donc, le réducteur de carte, une belle entrée automatique fonctionne. Et au deuxième paramètre, nous avions la valeur par défaut de notre carte, qui est un tableau vide. Utilisez maintenant un réducteur de retours pour les articles, afin que nous puissions déstructurer ici la carte et la carte d'expédition Maintenant, dans notre fonction tête à carte, nous appelons la fonction carte d'expédition, et à l'intérieur de celle-ci, nous passons un objet, et la première propriété est le type, qui est la tête à carte. Assurez-vous d'écrire la même chaîne que celle que vous utilisez dans Switch Case. Maintenant, dans notre boîtier d'interrupteur, nous n'avons pas ce produit et cette quantité. Alors, comment pouvons-nous l'obtenir ici ? C'est vrai. Pareil que nous obtenons ce type. Ainsi, dans notre fonction d'expédition, nous transmettons une autre propriété appelée charge utile Dans cette charge utile, nous pouvons envoyer toutes les données externes que nous voulons envoyer dans la fonction de réduction. Il s'agit du nom, du type et de la charge utile courants des propriétés. Vous pouvez le modifier si vous le souhaitez, mais assurez-vous d'utiliser ce nom de propriété dans la fonction de réduction Nous passons ici l'objet et nous voulons envoyer le produit en tant que produit et la quantité en tant que quantité. Ou nous pouvons même le simplifier ainsi. Enregistrez ce fichier, et dans notre fonction de réduction de chariot, nous obtenons ici les inconvénients des supports Cli, du produit, quantité égale à la charge utile du point d'action Sauvez les gangs et jetez-y un coup d'œil. Oh, nous arrivons ici à une erreur. Laisse-moi ouvrir la console. Vous voyez, ici, nous obtenons que la fonction de la carte n'est pas définie. Ainsi, dans notre composant d'application de notre fonction Getcard, nous ne pouvons pas utiliser la fonction set card Nous avons donc besoin d'un étui pour la fonction Get card. Nous appelons donc la fonction de carte d'expédition et transmettons son type à Get card. Et dans la charge utile, que voulons-nous envoyer, écrire ? Nous voulons envoyer un objet avec des produits pour répondre à des données ponctuelles. Enregistrez ce fichier, et dans notre fonction de réduction, nous définissons un autre étui, une autre carte chat, une autre colonne, et à l'intérieur de celui-ci, nous renvoyons simplement les produits Action point payload point point Enregistrez les modifications et jetez-y un œil. Encore une fois, nous obtenons une erreur. Je pense qu'il existe toujours une fonction de carte SAT. Vous voyez ici que nous transmettons fonction set card dans le contexte de la carte. Enregistrez les modifications et jetez-y un œil. Tu vois, c'est ici que nous obtenons les détails de notre carte. Notre réducteur fonctionne donc bien. Maintenant, nous avons besoin d'un autre cas car si notre API At to cart reçoit une erreur, nous devons également remettre notre carte à son état précédent. Nous appelons donc ici fonction de carte d'expédition et passons ici le type de carte à annuler la carte Et dans la charge utile, nous transmettons la propriété de l'objet à la carte. Enregistrez ceci et dans la fonction réductrice en bas, nous ajoutons un autre étui pour le chariot inversé et renvoyons simplement ici la carte Action Payload Enregistrez ceci et cela fonctionnera. Nous allons maintenant plaider en faveur de la suppression de la fonction de carte recto. Dans cette fonction, nous avons coupé cette logique jusqu'à définir la carte. Et dans notre fonction de réduction, nous ajoutons un autre étui à retirer de la carte Et ici, il suffit de coller le code. Maintenant, à la place de la carte définie, nous pouvons ajouter une nouvelle carte écrite, mais voici la seule chose. Nous avons besoin ici de l'identifiant du produit que les utilisateurs souhaitent supprimer. Nous pouvons donc ajouter ici action point payload point ID. Ceci. Et dans notre composant d'application, nous appelons ici la fonction de carte d'expédition et transmettons ici un objet avec un type à supprimer de la carte et ajoutons une autre charge utile à un objet avec une propriété ID Dans la méthode du cache, nous voulons inverser l'état de la carte. Nous pouvons simplement copier cette fonction de carte d'expédition pour revenir en arrière et la coller dans la méthode de cache Remplaçons également cela dans toutes les méthodes de cache. Bien. Maintenant, nous n'avons pas besoin de cette ancienne variable de carte, nous pouvons donc la supprimer. Passons maintenant à notre dernier étui, qui concerne la carte de mise à jour. Ici, nous pouvons mettre en œuvre deux solutions. Nous pouvons créer des caisses séparées ou augmenter la quantité et diminuer la quantité. Ou nous pouvons simplement le faire dans un seul cas. Mais dans ces deux cas, nous nous perdons beaucoup. Ignorez ces SA, ou nous pouvons simplement le faire. À la place de cette fonction de carte définie, nous copions simplement cette fonction de carte d'expédition avec une carte de type cat, qui remplacera l'état actuel de la carte par la carte mise à jour. Ici, nous le collons et remplaçons les données du point de réponse sur la carte mise à jour. Maintenant, dupliquez cela et nous ferons de même pour la diminution. Enregistrez les modifications et jetez-y un œil. Vous voyez, l'ajout, la suppression et mise à jour de toutes les fonctionnalités fonctionnent bien. Maintenant, vous devez décider si vous devez utiliser un réducteur ou non pour organiser votre code À mon humble avis, vous pouvez utiliser un crochet réducteur pour des actions un peu moins complexes, mais pour des actions plus complexes, je ne suggère pas d' utiliser un crochet réducteur C'est à vous de choisir. Si vous êtes confus, ne serait-ce que de 1 à 2 %, n' utilisez pas de crochet réducteur pour cette action C'est très bien. Il s'agit de la section mise à jour pour le cours de réaction ultime et la prochaine mise à jour est sur le point de réagir à une requête. Restez à l'affût de ces mises à jour. J'espère que ce cours vous plaira. Restez à l'affût de ces mises à jour. 186. Section 17 Maîtriser React-Query: Bienvenue dans la 17e section du parcours ultime de Rac. Dans cette section, nous allons découvrir la meilleure bibliothèque pour gérer et capturer les données dans l'application React, qui est Reac Query En implémentant la requête de lecture dans notre projet, les performances de notre application augmenteront considérablement. Lorsque je décide de créer ce cours React, pour être honnête, je ne connais pas toutes les fonctionnalités de Rea Query. Lorsque je demande aux étudiants de suggérer un sujet, le sujet le plus demandé était « il faut ajouter une requête ». J'ai donc essayé de faire des recherches sur Raquery et j'ai été vraiment étonnée de voir à quel point cette bibliothèque est utile Si vous pensez la même chose que moi, faites-le moi savoir dans la section questions-réponses J'adore en entendre parler. Voici donc la comparaison. Je vous montre à la fois sans Raquery et avec reaquery comment notre Comme vous pouvez le constater, l'implémentation de reaquery est vraiment bonne et meilleure pour notre Donc, sans perdre votre temps précis, apprenons la requête d' une manière très simple et facile 187. Qu'est-ce que React Query et pourquoi nous en avons besoin: Maintenant, avant de commencer à apprendre la requête rea, voyons d'abord ce qu'est requête rea et, surtout, pourquoi nous en avons besoin. Re query est donc une bibliothèque utilisée pour gérer et mettre en cache les données de notre demande d'API. En utilisant la bibliothèque Requeri, nous pouvons facilement récupérer, mettre à jour et mettre en cache nos données, que nous obtenons à partir des API Maintenant, nous comprenons ici le fetch et la mise à jour, mais vous pourriez vous demander ce qu'est le cache Le cache est donc un magasin qui peut contenir les données de récupération en mémoire Il agit comme un stockage temporaire pour nos données que nous renvoyons suite à une demande d'API. Laissez-moi vous expliquer à l' aide d'un exemple. Donc, dans notre projet Card Wish, nous allons chercher toutes les listes de produits ici Maintenant, toutes ces données sur les produits stockées dans le stockage temporaire sont appelées mallettes. Maintenant, si nous allons sur une autre page, comme la page des cartes, et revenons à la page de nos produits, que nous revenons à la page de nos produits, nous obtenons ces données immédiatement à partir du boîtier. Donc, si nous implémentons le cache dans notre application, l'expérience utilisateur augmentera considérablement. Et cela ne suffit pas. Les autres fonctionnalités de la requête sont que nous obtenons une fonction d'annulation de la demande sur le montage du composant De plus, nous recevons plusieurs tentatives, ce qui signifie que si notre connexion réseau est interrompue ou que, pour une raison quelconque, notre demande échoue, Requery peut réessayer plusieurs fois Vous pouvez également désactiver cette fonctionnalité si vous le souhaitez. Cela dépend entièrement de vous. Ensuite, nous obtenons également actualisation automatique dans l'intervalle de temps. Par exemple, nous pouvons régler la minuterie, par exemple, 2 minutes pour le rafraîchissement automatique. Toutes les 2 minutes, nous recevons des données du serveur si l'utilisateur est toujours sur cette page. Bien sûr, nous pouvons implémenter ces fonctionnalités en écrivant plus de code, mais avec requery, nous pouvons implémenter ces fonctionnalités en très moins de code Si vous souhaitez améliorer l' expérience utilisateur de votre application, pour gérer et mettre en cache les données à partir de l'API nous pouvons utiliser la bibliothèque de requêtes Rea Je suis vraiment amoureuse de cette bibliothèque. Les développeurs pensent que Raquery est complexe, mais croyez-moi, ce n'est pas le cas Ce n'est qu'une question de temps et de pratique. Donc, pour simplifier Raquery, je divise la section Raquery en plusieurs parties Tout d'abord, nous apprendrons tous les concepts d'un autre projet, puis dans la section suivante, nous ferons de l'exercice pratique en implémentant ces fonctionnalités dans notre projet Cartwish Commençons donc à apprendre Raquery. 188. Préparer React Query dans notre projet: Maintenant, configurons Requeri dans notre projet. Donc, pour apprendre Raquery, nous n'allons pas gâcher notre projet Catwish Au lieu de cela, nous allons apprendre tous les concepts de notre précédent projet de routage, puis après avoir appris tous les concepts, nous mettrons à jour notre projet Catwish sous forme d'exercice Ici, nous utilisons notre ancien projet de routage sur lequel nous apprenons le routage et l'API d'appel dans les sections huit et neuf. Vous ne trouvez pas votre projet, alors ne vous inquiétez pas, rendez-vous dans le dossier Ressources et vous obtiendrez ce modèle de requête, qui est le même projet Ouvrons donc ce projet dans le code VS. Sympa. Tout d'abord, nous allons installer tous les packages avec NPM install Bien. Maintenant, ajoutons rapidement une vraie requête dans notre projet. Ici, dans notre terminal, nous écrivons donc NPM, soit dix requêtes SCR. Et si nous voulons installer exactement la même version, écrivez au taux 0,12 0,2 et appuyez sur Entrée Bien. Réduisez maintenant ce terminal et ouvrez le fichier principal point jsx Ici, nous devons encapsuler notre application avec un seul composant de requête rea, comme nous l'avons fait dans Rag Router Doom Nous importons donc ici. abord, nous avons besoin d'un client de requête provenant de dix Stack Raquery et deuxièmement, nous avons besoin d'un fournisseur de clients de requêtes Maintenant, après nos importations, nous créons une nouvelle instance appelée client de requête égale à nouveau client de requête. Maintenant, pouvez-vous deviner avec quel composant nous encapsulons notre application avec le fournisseur de clients de requêtes car c'est celui qui reste. Tu es intelligent. Maintenant, nous ajoutons simplement ici l' attribut client, et à l'intérieur de celui-ci, nous passons notre client de requête instantanée, que nous venons de créer ici, et c'est tout. Nous avons correctement ajouté une requête à notre projet. Vous pensez devoir vous souvenir de ce processus, alors ne vous inquiétez pas. Vous pouvez voir ce processus dans la documentation relative aux requêtes Rea. Dans la leçon suivante, nous allons récupérer des données à l'aide de Raquery 189. Récupérer les données des vendeurs: Maintenant, récupérons les données à l'aide d'une requête rea. Donc, dans la requête, nous avons un hook de requête, qui est utilisé pour récupérer et gérer les données à partir des API Donc, ici, dans le composant de notre vendeur, nous appelons U Query hook from ten Stack rea query library. Maintenant, dans ce hook de requête américain, nous devons transmettre un objet de configuration avec deux propriétés. La première concerne la clé de requête, qui est l' identifiant unique de notre requête. Il est principalement utilisé pour la mise en cache. Ainsi, chaque fois que nous récupérons des données du back-end, telles que les informations du vendeur , ces données ont été stockées dans le cache avec cette clé, et à l'avenir, elles seront accessibles via cette clé. Nous devons définir notre clé sur array, qui peut avoir une ou plusieurs valeurs. La plupart du temps, la première valeur est une chaîne , utilisée pour décrire le type de données que nous stockons dans le cache. Dans ce cas, nous voulons des données sur les vendeurs. Ici, nous pouvons transmettre des chaînes comme les autres aux vendeurs ou nous pouvons même transmettre objet comme une page à une, etc. Pour l'instant, ne t'inquiète pas pour ça. Nous verrons cela en détail dans la leçon de devinettes. Pour l'instant, concentrons-nous sur la récupération des données. Supprimons ces autres valeurs. Maintenant, la deuxième propriété est la fonction de requête, qui est la fonction que nous utilisons pour récupérer des données depuis le back-end Notez que cette fonction doit toujours renvoyer une promesse qui peut renvoyer des données ou des erreurs. Nous passons donc ici une fonction d'erreur et ici, à partir de cet effet d'utilisation, nous copions cette méthode point Gad du client API, qui est notre variable Axios, et nous la collons simplement Maintenant, vous vous demandez peut-être, devons-nous toujours utiliser Axios pour la fonction de requête ? Et la réponse est non. Nous pouvons utiliser l'API Patch ou n'importe quelle bibliothèque pour créer SttprQuest Raquery ne se soucie pas de la façon dont nous créons StdprQuest. Il ne se soucie que de la gestion et de la mise en cache des données, mais assurez-vous qu'il doit renvoyer une donnée ou une erreur, c'est la seule condition Maintenant, nous savons que ce client API point Get Method renverra un objet de réponse, mais nous ne voulons pas stocker l' objet de réponse complet dans le cache. Nous voulons uniquement stocker les données réelles que nous obtenons du back-end. Nous ajoutons donc ici la méthode, et dans celle-ci, nous obtenons une réponse, puis nous renvoyons simplement les données des points de réponse. Et dans ces données, nous obtenons les informations de nos vendeurs aussi simplement que cela. Maintenant, ici, nous pouvons également implémenter cette logique en dehors de la requête use. Donc, en haut, nous définissons une fonction appelée fat sellers, et ici nous ajoutons notre fonction flèche. Et pour la propriété de la fonction de requête, nous passons simplement la référence de la fonction. Ainsi, lors de l'exécution de la requête rea, nous appelons cette fonction. Et lorsque cette promesse est terminée, nous obtenons un tableau de données sur les vendeurs, puis ce tableau est stocké dans le cache avec cette clé. Comment pouvons-nous accéder aux données à partir de ce hook de requête d'utilisation ? Cette requête d'utilisation renverra un objet contenant quelques propriétés telles que les données, erreurs, le chargement, le statut, etc. Ici, nous pouvons restructurer cet objet et obtenir des données ici Avec cette requête d'utilisation, nous n'avons plus besoin de créer les erreurs du vendeur ni de charger les variables d'état. Nous obtiendrons toutes les variables à partir de cette requête d'utilisation. Nous pouvons donc supprimer les variables d'état. De plus, nous n'avons pas besoin de cet effet d'utilisation. Et dans notre JSX, pour l'instant, commentons cette instruction de facilité de chargement ainsi que cette déclaration d'erreur Maintenant, à la place de ces vendeurs, nous pouvons écrire une carte à points de données, ou nous pouvons même renommer notre objet de données et lui donner un nom de vendeurs Je pense que c'est plus exact. Enregistrez les modifications et lançons notre application. Donc, dans le terminal, NPM run DV ouvre ce lien. Accédez maintenant à la page d'administration et ouvrez la page du vendeur. Ici, nous pouvons voir que nous recevons une erreur. Ouvrons donc la console et nous pouvons voir que les propriétés non définies ne peuvent pas être lues Alors pourquoi cela se produit-il ? Parce que même si nous ne recevons pas de données depuis le back-end, par défaut, nos données sont définies sur null. Donc, pour résoudre ce problème, nous devons ajouter ici un point d'interrogation, qui est un chaînage facultatif Enregistrez les modifications et jetez-y un œil. Tu vois, c'est ici que nous obtenons les données de notre vendeur. Actualisez maintenant la page. Vous voyez, nous avons presque immédiatement accès à nos données. Cela est dû à la mise en cache. Laissez-moi vous le montrer clairement. Cliquez sur cette page de vente, et lorsque nous cliquons sur la page des vendeurs, nous pouvons voir directement ces données ici sans délai. Il s'agit de la mise en cache. Ainsi, avec l'implémentation de requery, nous obtenons des tentatives automatiques, ce qui signifie que si quelque chose se produit et que nos appels d'API échouent, requery réessaiera encore quelques fois Après cela, nous obtenons une actualisation automatique, ce qui nous permet de définir la durée. Passé ce délai, notre requête est actualisée automatiquement. fonctionnalité la plus importante est la mise en cache, ce qui signifie que la première fois que nous obtenons des données, elles sont stockées dans le cache, puis si la prochaine fois nous obtenons les mêmes données, si elles sont disponibles dans le cache, nous n' irons pas sur le serveur Au lieu de cela, nous l' obtenons directement à partir du cache, ce qui améliorera considérablement les performances de notre application Dans la leçon suivante, nous allons traiter les erreurs et le chargement dans une requête. 190. Traitement des erreurs et chargement: Voyons maintenant la gestion des erreurs avec Raquery. Comme nous le savons, notre requête renvoie un objet. Et dans cet objet, nous obtenons également une propriété d'erreur. Nous obtenons donc une erreur. Maintenant, dans notre JSX, supprimons le commentaire de cette déclaration d'erreur Et à l'endroit des erreurs, nous ajoutons une erreur, et à l'intérieur de notre balise d'emphase, nous imprimons un message d'erreur à point. Faisons maintenant une faute de frappe dans notre EPI et pointons du doigt, enregistrons les modifications et jetons un coup d'œil Actualisez la page, et dans la console, nous pouvons voir que Rafery essaie plusieurs fois de récupérer des données depuis le back-end en raison de sa fonction de réessai récupérer des données depuis le back-end automatique Et après un certain temps, nous avons une erreur. Maintenant, affichons l'indicateur de chargement. Ainsi, lorsque nous obtenons une propriété d'erreur, nous obtenons également une propriété de chargement facile grâce à notre hook use query. Et dans le JSX, il suffit de supprimer ce commentaire et d'afficher notre chargeur Enregistrez les modifications et jetez-y un œil. Ici, nous pouvons également voir notre indicateur de chargement. C'est ainsi que nous gérons les erreurs et le chargement dans une requête. Vous souvenez-vous que dans notre projet Cartwish, nous avons créé un type similaire de crochet personnalisé, à base de données utilisées Mais cette requête d'utilisation possède bien plus de fonctionnalités que notre hook de données d'occasion. Nous ferons donc ce qui est le mieux pour notre application. Ne vous embrouillez pas avec votre propre code. En tant qu' ingénieur logiciel professionnel ou développeur Web, votre objectif le plus important est d' améliorer le fonctionnement de votre application. Et pour cela, nous ferons tout ce qui est nécessaire. 191. Créer un crochet personnalisé avec React Query: Maintenant, dans notre implémentation actuelle, nous pouvons séparer notre hook de requête américain de notre composant. Vous pouvez utiliser cette approche ou vous en tenir à la mise en œuvre actuelle. C'est à toi de choisir. Cela dépend totalement de vous. Ainsi, dans notre dossier source, nous créons un nouveau dossier appelé hooks, et dans ce dossier, nous créons un nouveau fichier appelé Uellers point JS Maintenant, tout d'abord, nous créons ici une fonction appelée fonction d'erreur des vendeurs américains, et à la fin, nous exportons la fonction des vendeurs américains par défaut. Maintenant, à partir du composant de notre vendeur, nous avons d' abord supprimé la fonction de notre gros vendeur et nous l'avons collée dans notre crochet personnalisé. Encore une fois, revenons à la composante du vendeur. À partir de là, nous avons coupé la requête avec cet objet de configuration. Et dans notre fichier de vendeurs américains, nous renvoyons simplement ici la requête d'utilisation. Importons maintenant le client API, supprimons cette faute de frappe et importons également la requête américaine depuis la bibliothèque TNStekrQuery Enregistrez les modifications. Et dans le volet vendeur, ici, nous nous appelons simplement «   Sellers custom Hook ». Alors maintenant, dans n'importe quel autre composant, si nous avons besoin de récupérer les données des vendeurs, il suffit d'appeler cela use sellers hook Supprimons toutes les importations indésirables, enregistrons les modifications et jetons un coup d'œil. Tu vois, maintenant notre code semble un peu plus propre. 192. Ajouter des outils de développement dans React Query: L'un des moyens les plus simples d'apprendre comment fonctionne Rafery est d' utiliser Raquery DevTools Ajoutons les outils de développement de Rafery dans notre application. Ouvrez donc le terminal et écrivez NPM, puis tapez directement sur Sag re aquari DevTools, à 5.13 0.3 et appuyez sur Enter Bien, minimisez ce terminal, et dans notre fichier GSX principal, en haut, nous importons un composant appelé requery DevTools Nous devons maintenant ajouter ce composant après notre composant d'application, Rafery DevTools, et nous assurer de l'ajouter dans ce composant Rafery DevTools, et nous assurer fournisseur de clients de requêtes Sinon, ça ne marchera pas, et c'est tout. Enregistrez les modifications et jetez-y un œil. Vous voyez, dans le coin inférieur droit, nous obtenons un beau logo. Si vous obtenez un autre logo, ne vous inquiétez pas. Cette bibliothèque change plusieurs fois le logo de ses boutons pour le plaisir. Cliquez simplement dessus et nous obtenons l'outil React Query Dav. Ici, on obtient ce type de structure. Ne t'inquiète pas. C'est assez simple et utile. Ici, nous pouvons voir que nous obtenons la liste des requêtes, qui est l' API de notre vendeur. Cliquez dessus. Maintenant, sur le côté droit, nous pouvons voir ici que nous obtenons notre clé de requête. Ensuite, nous obtenons des observateurs qui indiquent le nombre de composants qui utilisent la requête de ce vendeur. Actuellement, un seul composant utilise cette requête du vendeur. Supposons que cette même requête soit utilisée dans trois composants, le nombre d'observateurs en affichera trois. Ensuite, nous avons l'heure de la dernière mise à jour, c' est-à-dire la dernière fois que la requête a été récupérée Ensuite, nous avons quelques actions utiles telles que la récupération, l' invalidation, la réinitialisation, la suppression de l'erreur de déclenchement du chargement du déclencheur Nous pouvons donc déclencher le chargement et voir. Ici, nous obtenons notre indicateur de chargement. Restaurons maintenant le chargement, et nous déclenchons une erreur. Vous voyez, nous avons notre erreur d'échantillon. Maintenant, après nos actions, nous avons un explorateur de données, qui est ce que renvoie la requête, et ce sont les données de notre vendeur, et nous pouvons également voir ses propriétés. Enfin, nous avons l'explorateur de requêtes. Ici, nous pouvons voir toutes les propriétés et les détails de notre requête. Le plus souvent, nous n'utilisons pas cette section, mais certaines propriétés sont utiles. Comme ici, nous pouvons voir l'heure de notre GC, c' est-à-dire l'heure de collecte des ordures. Ou nous pouvons dire que la durée du dossier est fixée à 300 K, soit une valeur en minisecondes, et qu'elle est égale à 5 minutes Ainsi, si notre composant est supprimé de notre écran, ce qui signifie que nous n'avons aucun observateur, et lorsque la requête n'a aucun observateur, données seront supprimées du cache au bout de 5 minutes. Oui, nous pouvons modifier ces propriétés, et nous le verrons dans la prochaine leçon. De plus, petit conseil : à partir de là, nous pouvons changer le thème de nos outils de développement. J'aime le thème sombre, donc je sélectionne le thème foncé. 193. Personnaliser nos propriétés de requête React: Actuellement, dans les requêtes réelles, nous avons peu de paramètres par défaut qui fonctionnent bien dans la plupart des situations, mais nous pouvons également les personnaliser pour toutes les requêtes ou pour une requête individuelle. Par exemple, nous pouvons modifier la valeur temporelle de notre GC. Je vais donc vous montrer comment nous pouvons le faire. Ainsi, dans notre fichier point jsx principal, ici dans ce client de requête, nous pouvons transmettre un objet de configuration Dans cet objet, nous avons une propriété appelée options par défaut, et nous pouvons également définir sur object, et dans cet objet, nous avons la propriété queries, qui est également un objet. Maintenant, dans cet objet, nous pouvons transmettre des valeurs par défaut pour les propriétés de nos requêtes. Nous passons donc ici la tomodensitométrie et nous pouvons la régler à 10 minutes. Ici, nous devons transmettre la valeur en millisecondes. Donc 10 à 60 secondes en 100 millisecondes. Ou nous pouvons passer directement 600 K ou nous pouvons écrire ici six double zéro, souligner zéro En JavaScript, nous pouvons ajouter soulignement à la place des virgules dans les chiffres Enregistrez les modifications et jetez-y un œil. Dans nos outils de développement en bas, nous pouvons voir que le temps C est changé à 600 000 millisecondes, ce qui équivaut à Nous pouvons désormais également modifier le nombre de tentatives de notre requête Donc, si notre connexion utilisateur perdue ou si nous avons une faute de frappe dans notre requête, une requête réessaie plusieurs fois Par défaut, le nombre de nouvelles tentatives est fixé à trois, mais nous pouvons le modifier à partir d'ici. Disons cinq. Enregistrez ce fichier, et dans notre guide d'utilisation du vendeur, nous corrigeons les fautes de frappe dans notre point de terminaison, enregistrons les modifications et y jetons un œil, ouvrons NetworkTab et actualisons la page Ici, c'est la première fois que notre requête est remplie. Je pense que je dois changer de panneau pour écrire. Maintenant, rafraîchissez la page et voyez ici que la première demande échoue. Après cela, cela prendra un certain temps et réessayez cinq fois de plus. Donc, six demandes au total sont envoyées à cette requête. Revenons maintenant au code VS, et ici nous supprimons notre faute de frappe Enregistrez ce fichier, et dans le fichier principal, ici, nous avons également un temps périmé qui indique pendant combien de temps nos données sont considérées comme fraîches Actuellement, notre durée périmée est fixée à zéro, ce qui signifie que dès que nous recevons des données du back-end, elles sont considérées comme anciennes Donc, si nous avons besoin des mêmes données la prochaine fois, Reacquery récupérera une nouvelle donnée d'actualisation depuis le Donc, pour la démonstration, fixons-le à 6 secondes. Enregistrez les modifications et nous obtenons ici de nouvelles données, que nous pouvons voir en vert. Et au bout de 6 secondes, il deviendra encore vieux. Maintenant, comme je vous l'ai dit, reacquéreurs rechargent automatiquement vos données périmées Alors laissez-moi vous dire dans quelles situations il sera protégé. Ainsi, tout d'abord, lorsque notre connexion utilisateur est reconnectée, composant est monté et enfin lorsque la fenêtre de notre application est refocalisée Alors laissez-moi vous montrer ceci de façon pratique. Donc, ici, dans notre navigateur, si vous ouvrez un nouvel onglet et revenez à l'onglet de notre application, nos données sont actualisées Ouvrez donc un nouvel onglet et revenez à notre application. voyez, ici, nous obtenons les données d'une phrase, puis elle s'arrête. Dans la plupart des applications, cette fonction de rafraîchissement automatique est très importante Mais parfois, si votre application n'a pas besoin de cette fonctionnalité, vous pouvez également la désactiver. Ainsi, dans notre objet de requête, nous avons la propriété refedg on reconnect Nous pouvons le rendre faux. De plus, nous avons refedg sur le montage et défini sur false et refetg sur le focus de la fenêtre, nous pouvons également Par défaut, les valeurs de ces trois propriétés sont vraies, mais si nécessaire, nous pouvons les définir comme fausses. Permettez-moi maintenant de vous expliquer un scénario. Lorsque nos données seront immobiles, requery essaiera de récupérer de nouvelles données sur Mais en même temps, il renverra les données fixes du cache à notre composant. Grâce à cette implémentation, nous pouvons obtenir nos données immédiatement, mais en même temps, nous demandons les données les plus récentes. Une fois que nous avons les dernières données, Rafery met à jour notre cache et met également à jour les données de notre composant, ce qui est plutôt cool, non ? Ici, nous pouvons modifier les propriétés par défaut de toutes les requêtes. La plupart du temps, nous ne changerons cela car ces propriétés sont déjà bonnes. Mais parfois, dans notre application, nous devons modifier ces propriétés pour une seule requête. Alors, comment pouvons-nous le faire ? Permettez-moi de vous montrer le crochet du vendeur ouvert. Et ici, dans le hook use query, nous pouvons transmettre les mêmes propriétés, comme retrte à cinq, et nous pouvons également transmettre d'autres C'est ainsi que nous pouvons modifier les propriétés par défaut des requêtes. 194. Exercice de récupération de données: Il est maintenant temps de faire un peu d'exercice. Donc, sur notre page de vente destinée aux administrateurs, je veux que vous récupériez des données sur todos à partir de notre API JcnPlaceholder à l'aide Notre API devrait donc être GDP, deux-points, double barre oblique, jsnplaceholder.typicod.com slash Tu Doo Cette API renverra 200 fausses données todos. Créez donc un hook personnalisé pour récupérer les objets, nous devons afficher le titre de ces sudo dans un simple paragraphe et également afficher les indicateurs d'erreur et Je sais que tu peux le faire, et après c'était la solution. Voici donc une solution à cet exercice. Tout d'abord, dans notre dossier hooks, nous créons un nouveau fichier appelé ustdos point js Ici, nous créons une nouvelle fonction appelée fonction d'erreur ust Dos, et à la fin, exportons simplement ce todos par défaut Maintenant, avant cette fonction, nous créons une nouvelle fonction appelée fast Dos, error function. Ici, nous renvoyons directement le point cat et le point de terminaison du client API, qui sont slash todos Cette expression renverra une promesse, nous utilisons donc la méthode, réponse et renvoyons simplement les données des points de réponse. Ici, nous renvoyons des données par points de réponse car notre API d'espace réservé JSON renvoie todos dans la propriété des données Pour votre API, vous devez vérifier la réponse de votre API et vous assurer de renvoyer ces données. Maintenant, appelons notre hook use Query de la bibliothèque Rafery. Ici, nous passons l'objet de configuration, et nous devons transmettre ici deux propriétés. Peux-tu me dire ce qu' ils ont raison ? Clé de requête et fonction de requête. Donc, interrogez le tableau et transmettez-le ici à dos. Ensuite, utilisez la fonction de requête pour transmettre todos, et nous renvoyons simplement cette requête d'utilisation à partir de ce hook Les utilisateurs changent et sur la page de vente de notre composant, nous appelons StdS Hook, que nous venons de créer Et comme nous le savons, ce crochet a écrit un objet avec des propriétés. Nous pouvons donc le restructurer ici, et obtenir des données, que nous pouvons renommer Tutu De plus, nous obtenons des erreurs et facilitons le chargement des propriétés. Avez-vous remarqué à quel point il est facile d'appeler un PI ? J'aime vraiment cette bibliothèque de requêtes React. Qu'est-ce que tu en penses ? Maintenant, dans notre JSX, nous changeons ici ce titre en page de travail Et pour ajouter plusieurs éléments, nous utilisons des fragments de réaction. Déplacez-les vers la fin, ceci pour formater notre code. Et après notre titre, nous ajoutons des calibracets, des todos, une carte à interrogation Ici, nous obtenons un objet unique à faire, qui a un identifiant, un titre, version terminée et un identifiant utilisateur. Nous avons simplement écrit ici une balise de paragraphe et lui avons donné la clé de l'identifiant Tudot Dans ce paragraphe, nous affichons le titre de Todo. Affichons également l'erreur et l'indicateur de chargement. Avant cette fonction cartographique, ajoutez des crochets Cali. Si le chargement est vrai, puis nous renvoyons le composant du chargeur et la saisie automatique fonctionne enfin, nous ajoutons des crochets Cali Si une erreur est disponible, nous renvoyons la balise d'emphase et affichons le message d'erreur à point. Les modifications et jetez-y un coup d'œil. Passez à la page de vente et voyez ici que nous obtenons nos todos. Vérifions-le dans query DevTools et voyons ici que nous obtenons zéro par requête du vendeur Ce zéro correspond au nombre d'observateurs, et sur notre page, nous n'avons aucun composant, qui appelle l'API des vendeurs. Actuellement dans notre application, notre page comporte un composant, qui appelle la requête. Si nous accédons à la page du vendeur, nous obtenons un observateur pour les requêtes du vendeur et aucun observateur pour exécuter Squery C'est donc ce que veulent dire les observateurs. Nombre de composants actuellement rendus, qui utilisent la requête. 195. Comprendre les paramètres de requête dans React Query: Dans cette leçon, nous verrons comment passer un paramètre dans notre hook use query. Nous allons construire quelque chose comme ça. Avant notre titre, nous avons une liste déroulante contenant cinq valeurs, telles que utilisateur un, deux, trois, quatre et cinq. Lorsque nous sélectionnons l'utilisateur 1, nous n'obtenons que les todos créés par l'utilisateur 1 En gros, nous allons effectuer un filtrage. Mais ici, nous obtenons des données du backend et nous transmettons les détails de notre filtre dans les paramètres de requête de notre API to do Voyons ce que nous pouvons faire. Donc, avant notre indicateur de chargement, nous avions sélectionné et à l'intérieur de celui-ci, nous avions l'option six fois Maintenant, dans notre première option, ici nous n'ajoutons rien à la valeur, et nous passons ici select user. Maintenant, après cela, nous passons la valeur à un, et ici nous passons l'utilisateur un. De même, valeur jusqu'à deux et utilisateur deux, trois, utilisateur trois, quatre, utilisateur quatre et cinq derniers utilisateurs cinq. Ici, nous n'avons pas besoin de ce nom et de ces attributs d'identifiant, nous pouvons donc les supprimer. Enregistrez les modifications et jetez-y un œil. Vous voyez, nous avons ici notre liste déroulante. Maintenant, lorsque nous sélectionnons ici l'utilisateur 1, nous ne devrions recevoir que deux doses de la publication de cet utilisateur. Nous devons gérer cette liste déroulante. En haut, nous créons une nouvelle variable d'état appelée ID utilisateur, définissons l'ID utilisateur et, comme valeur par défaut, nous la définissons sur null. Dans notre balise de sélection, nous ajoutons un événement de changement, et nous obtenons ici la fonction d'erreur de l'objet d'événement, et nous définissons l'ID utilisateur sur la valeur du point cible de l' événement. De plus, ici, nous obtenons une valeur sous forme de chaîne, nous devons donc la convertir en entier. Et comment pouvons-nous le faire ? vrai, en enveloppant notre valeur dans parse int, et ici nous passons également la valeur à notre ID utilisateur Bien. Maintenant, dans ce composant, nous utilisons notre crochet personnalisé utilisé pour le faire. Dans ce hook, nous pouvons passer notre variable d'état d'ID utilisateur en argument. Enregistrez ce fichier et voyons ce que nous devons faire dans notre hook Todos d'occasion abord, nous obtenons ici l'ID utilisateur en tant que paramètre, et ici, dans notre demande d'API, nous devons transmettre cet ID utilisateur à notre demande GAT. Ici, nous devons déplacer cette fonction dans notre fonction use todos Nous pouvons donc accéder à l'identifiant utilisateur dans notre fonction Fair Studios. Maintenant, nous devons transmettre quelque chose comme ceci slash Studios, et dans le paramètre de requête, nous passons un ID utilisateur égal à notre ID utilisateur Ou nous pouvons passer object dans le deuxième argument et addHeParams, qui est Et ici, nous passons simplement un ID utilisateur à un autre, ou nous pouvons le supprimer. La dernière chose à faire est de modifier notre clé de requête. Actuellement, nous ne passons qu' une seule chaîne dans notre clé de requête, mais nous avons maintenant affaire à plusieurs données dans notre requête. Nous devons également l'ajouter dans notre clé de requête. Nous passons donc ici notre nom d'utilisateur. De plus, ici, de nombreux développeurs aiment utiliser structure hiérarchique qui représente la relation entre nos objets de données. Laissez-moi vous montrer ce que je veux dire. Ici, nous commençons par l' objet de premier niveau, à savoir les utilisateurs. Cet utilisateur possède un ID, qui est un ID utilisateur. Et grâce à ce nom d'utilisateur, nous pouvons récupérer todos Il s'agit de la même structure que celle utilisée par les développeurs de Bend pour définir l'URL de notre API. L'URL de notre API peut donc être la suivante. L'utilisateur 1, qui est l'ID utilisateur, barre oblique todos. Je pense que ce schéma est plus spécifique. Maintenant, voici la seule chose. Ici, nous transmettons l' ID utilisateur dans cette clé de requête, qui signifie que chaque fois que l'ID utilisateur change, une requête actualise les données de notre API. Si nous n'ajoutons pas de variable d' ID utilisateur ici, notre requête ne sera exécutée qu'une seule fois, même si nous ajoutons cet ID utilisateur dans nos paramètres. Ce tableau de requêtes est donc similaire à notre tableau de dépendances en termes d'effet d'utilisation. Enregistrez les modifications et jetez-y un œil. Permettez-moi de faire un petit zoom arrière. Maintenant, nous n' avons actuellement aucun utilisateur sélectionné, donc nous obtenons ici les utilisateurs null todos, et nous obtenons tous les todos Maintenant, si nous changeons d'utilisateur en un, nous n'obtenons que les données de notre utilisateur. Dans nos outils de développement, nous obtenons les utilisateurs par todos De même, nous pouvons sélectionner d'autres utilisateurs et récupérer de nouvelles données pour chaque utilisateur Nous avons maintenant toutes les données dans notre cache. Si nous passons aux utilisateurs précédents, nous obtenons nos données immédiatement sans aucun chargement. C'est la beauté d'une vraie requête. La seule chose que je veux corriger, c'est pour une valeur nulle, nous allons changer notre clé de requête. Revenons au code VS, et ici nous passons la condition si l'ID utilisateur est disponible, puis nous renvoyons ce tableau de clés, sinon nous renvoyons un tableau avec une seule chaîne à faire car pour un utilisateur nul, récupérons toutes les tâches sans aucun filtre Enregistrez les modifications et jetez-y un œil. Actualisez la page et voyez ici que nous n' obtenons que deux tâches. Si nous sélectionnons l'utilisateur 1, nous obtenons notre clé de requête avec l'ID utilisateur et les tâches de l'utilisateur. Maintenant, nous avons un petit problème. Donc, si nous revenons à un ID utilisateur nul, nous n'obtenons pas nos données ici. Pourquoi ? Vérifions-le dans NetworkTab. Réprimez la page. Tout d'abord, nous avons ici tous les todos Ensuite, nous sélectionnons l'utilisateur 1, et nous obtenons ici la demande todos avec l'ID utilisateur 1 Maintenant, sélectionnons à nouveau, sélectionnons l'utilisateur et voyons ici que nous obtenons ID utilisateur qui n'est pas un numéro. Et c'est là le problème. Pour résoudre ce problème, nous devons donc passer une condition pour ce paramètre d'ID utilisateur. Donc, pour simplifier les choses, je crée ici une nouvelle variable appelée params, nous passons en tant qu'objet Params Maintenant, après cela, nous ajoutons une condition. Si UserId est disponible, nous définissons params point UserId sur notre ID utilisateur Si l'ID utilisateur est nul ou indéfini, nous n'ajoutons pas de paramètre d'ID utilisateur Nous pouvons simplement passer ici des paramètres aux paramètres, ou nous pouvons supprimer ces Enregistrez les modifications et jetez-y un œil, appuyez sur la page, sélectionnez l'utilisateur 1, nous obtenons ici les données de l'utilisateur B, puis sélectionnez l'utilisateur et voyez, nous avons tout à faire. C'est ainsi que nous transmettons les paramètres de requête dans rea Query. 196. Pagination dans React Query: Maintenant, dans notre liste de tâches, nous récupérons 200 tâches en une seule requête, mais cela augmentera la charge Auparavant, dans notre application Cartwig, nous nous retrouvions dans la même situation Vous souvenez-vous de ce que nous avons fait pour réduire cette charge ? C'est vrai, nous utilisons la pagination ou la fonction de défilement infini. abord, nous verrons la requête de pagination dans cette leçon, puis nous verrons également comment appliquer une requête à défilement infini. Ne t'inquiète pas pour ça. Tout d'abord, supprimons ce filtrage car je ne veux pas compliquer les choses. Nous supprimons donc cette variable d' état de l'ID utilisateur à partir d'ici. Supprimez également la balise de sélection avec ces options. Bien. Maintenant, pour la pagination, nous avons besoin de l'état de la page, que nous pouvons modifier ou gérer à l'aide de nos boutons de page Nous créons donc ici une nouvelle variable d'état appelée page set page, et comme valeur par défaut, nous en passons une ici. Maintenant, ajoutons les boutons précédent et suivant pagination, pour plus de simplicité Donc, après notre carte de Tudos, nous ajoutons un bouton et passons ici précédent et un autre bouton ou le suivant Maintenant, pour le bouton précédent, nous pouvons ajouter un attribut de désactivation, qui sera désactivé si la page est égale à un. Lorsque nous transmettons l' événement de clic et à l'intérieur de celui-ci, les flèches fonctionnent et définissons page par page moins un. Maintenant, pour le bouton suivant, nous passons la désactivation à ici, nous passons de la page à la taille de la page. taille de page est le nombre de données que nous voulons afficher sur une seule page. Et nous savons que cette requête en a 200 à faire. On passe donc ici à plus de 200. Maintenant, vous pourriez dire qu'ici, nous savons que nous en avons 200 à faire. Et si nous ne connaissons pas le nombre total de produits contenus dans notre application ? Dans ce cas, vous devez donc demander au développeur du backend d'envoyer également un certain nombre de produits au total avec vos données d'API Nous le voyons déjà dans notre projet Cartwh, n'est-ce pas ? Maintenant, ici, nous passons l'événement click, et à l'intérieur de celui-ci, nous définissons la page deux pages plus une. Bien. Ici, nous créons une variable simple appelée taille de page égale à, disons dix. Maintenant, dans notre habitude à la place de cet ID utilisateur, nous ajoutons la page et la taille de la page. Maintenant imaginez que dans cette fonctionnalité, nous voulons également ajouter un filtre ou une prise de vue par fonctionnalités. Ensuite, nous devons ajouter plusieurs valeurs dans cette fonction. Au lieu de cela, nous pouvons transmettre toutes les valeurs dans un seul objet. Ajoutez donc un objet et transmettez la page et la taille de page. OK ? Ce fichier et celui nous avions l'habitude de le faire à la place de cet identifiant utilisateur, nous obtenons notre objet de requête. Supprimons également ces paramètres, et si c'est le cas, nous pouvons directement passer les paramètres ici. Maintenant, dans nos paramètres de requête, nous ajoutons un objet, et à l'intérieur de celui-ci, nous devons transmettre deux propriétés, limite de soulignement et le début du trait de soulignement Ces paramètres dépendent de votre API. Donc, pour ce qui est de la limite, nous passons notre requête par point de paiement, et pour commencer, nous devons passer le point de départ de nos todos Ici, nous passons la page à points de requête, moins un, multipliée par la taille de la page à points de requête. Maintenant, si notre page est définie sur un, alors un moins un, soit zéro et multiplié par dix, ce qui est également zéro. Notre point de départ est donc zéro. Nous recevons donc le post 1-10. Ensuite, pour la page deux, notre point de départ sera un sur dix, soit dix. Nous obtenons donc le post 11-20 aussi simple que cela. Maintenant, changeons notre clé de requête ici. Nous n'avons pas besoin de cette condition. Nous passons un tableau avec une chaîne à faire, et après cela, nous passons directement ici ou interrogeons l'objet. Ainsi, si quelque chose change dans cet objet de requête, reacquery récupérera de nouvelles données Enregistrez les modifications et prenez-en une. voyez, ici nous n'obtenons que dix données, et notre bouton précédent est désactivé. Maintenant, cliquez sur Suivant, et nous obtenons les dix données suivantes. De plus, si nous revenons à la page précédente, nous obtenons des données sans les charger car elles sont stockées dans le cache. Maintenant, une petite mise à jour que nous voulons faire est de cliquer sur Suivant, sur nos boutons précédent et suivant, déplacer vers le haut puis vers le bas. Donc, pour résoudre ce problème ici dans la requête d'utilisation, ajoutez ici une propriété appelée données de remplacement ici, nous devons ajouter une référence de fonction, qui consiste à conserver les données précédentes Assurez-vous qu'il provient de la bibliothèque de requêtes Ten Stag React. Ici, nous pouvons voir qu'il est importé depuis notre bibliothèque de requêtes rea et c'est tout. Pendant que nous récupérons de nouvelles données, nous voyons toujours les données précédentes, et si nous obtenons de nouvelles données, les données précédentes disparaîtront par la suite. Les modifications et jetez-y un coup d'œil. Cliquez sur Suivant pour voir si nos données sont en cours de correction, nos tâches précédentes sont toujours là, et une fois la demande terminée, nous obtenons nos nouvelles données Vous pouvez donc voir à quel point il est simple et facile d'ajouter de la pagination à l'aide de rea Query 197. Défilement infini dans React Query: Voyons maintenant comment récupérer requête infinie en utilisant une requête rea Nous allons donc ajouter le bouton Charger plus en bas, et lorsque nous cliquons dessus, nous obtenons nos nouvelles données. Dans le monde réel, nous chargerons nos données lorsque nous arriverons au bas de notre page. Nous verrons cela dans notre partie d'exercice. Pour l'instant, implémentons cela. Tout d'abord, pour un défilement infini, nous devons remplacer notre crochet use query par le crochet use infinite query Sauvegardez ceci. Maintenant, voici une chose. Lorsque nous utilisons use Infinite query hook, nous n'avons pas besoin de transmettre l'objet Iquery à la page suivante Utiliser une requête infinie le fait automatiquement. Ici, nous pouvons supprimer cela et également supprimer cette page de l'objet de requête. Maintenant, vous vous demandez peut-être : comment pouvons-nous compter le nombre de pages ? Ne t'inquiète pas. C'est vraiment très simple. Donc, pour compter les numéros de page, nous avons une fonction dans notre requête use infinite appelée Get next page perm Ici, nous devons passer une fonction de rappel, et cette fonction a deux paramètres dernière page, qui est le tableau de la dernière page de notre liste de tâches, et le deuxième paramètre correspond à toutes les pages, qui est le tableau bidimensionnel, ou nous pouvons dire tableau à deux D. Quelque chose ressemble à ça. Nous avons un tableau et à l'intérieur de ce tableau nous avons les données de chaque page en séquence. Ne t'inquiète pas pour ça. Lorsque nous imprimerons notre tableau, vous le comprendrez. N'oubliez pas que toutes ces pages sont le tableau de tous les todos Maintenant, dans cette fonction, nous devons renvoyer le numéro de page suivant. Comment pouvons-nous le trouver ? Comme je vous l'ai déjà dit, toutes les pages contiennent toutes les données sur nos todos Si nous avons chargé deux pages, données de toutes les pages ressembleront à ceci. Ici, nous pouvons faire quelque chose comme ça. Nous renvoyons toutes les pages de longueur N plus un, qui est notre numéro de page suivant. Et si on passe à cette page qui n' est pas disponible ? Dans ce cas, nous n'avons pas besoin de passer le numéro de page suivant. Ainsi, lorsque nous transmettons le numéro de page, qui n'existe pas dans l'API d'espace réservé JSON, il renvoie un tableau vide Nous passons donc ici la condition I dernière page, qui est la longueur des points de données de notre dernière page supérieure à zéro Si c'est vrai, nous retournons la page suivante, sinon, nous renvoyons null, c'est aussi simple que cela. Il ne nous reste plus qu'à passer le numéro de page dans notre ancienne fonction DOS. Une requête transmettra notre numéro de page dans les paramètres de notre fonction de requête. Ici, nous déstructurons l'objet et arrivons au paramètre de page. Et passez-le à la place de la page à points de requête. De plus, pour la valeur par défaut, nous passons votre page par um à un. En termes simples, quel que soit résultat de cette fonction perm de la page suivante, nous obtiendrons cette valeur dans notre page par um Enregistrez les modifications, et dans notre composant commercial en bas, nous pouvons supprimer les deux boutons, et ici nous ajoutons un nouveau bouton en télécharger plus Ajoutons un événement « on click » pour ce bouton. Et ici, nous devons passer la fonction de page suivante, que nous obtenons à partir de notre requête use infinite. Et en bas, lors de notre événement « on click », nous ajoutons simplement la fonction « fetch next page Dans notre projet Catwig, lorsque nous atteignons le bas de notre page, nous pouvons simplement appeler cette fonction « fetch next page Enregistrez les modifications et saisissez le message d'erreur « here we get ». Examinons donc cela et dans la console, nous voyons ici que todos point map n'est pas une fonction Imprimons le contenu de nos données. Donc, enregistrez les données par points de console et nous supprimons ces todos pour qu'ils ne soient pas renommés Enregistrez les modifications, puis faites défiler la page vers le haut dans notre console. Nous sommes de plus en plus mal définis. Je pense que nous devons commenter la méthode cartographique. Enregistrez les modifications et regardez si nous obtenons les données. Ici, ces données sont des objets qui ont deux propriétés, paramètres de page et les pages Dans ces pages, nous trouvons un tableau de nos dix todos. Ainsi, dans notre JSX, avant notre carte à points de Todos, nous avions un point d'interrogation sur les données, points des pages à points Ici, nous obtenons la fonction de flèche de données de chaque page. Et ici, nous devons renvoyer une autre méthode cartographique car chaque page est un tableau de tâches. Nous ajoutons donc ici des fragments de réaction, et à l'intérieur de ceux-ci, nous pouvons déplacer cette méthode cartographique. Et remplacez ce todos par notre page. Dites les modifications et jetez-y un coup d'œil. Tu vois, c'est ici que nous obtenons nos données. Maintenant, cliquez sur le bouton Charger plus, et nous obtenons un autre todos, donc ça marche Mais dans notre console, nous obtenons une erreur, selon laquelle la liste doit avoir un accessoire clé unique Donc, ici, dans notre fragment de réaction, nous devons transmettre des accessoires clés Donc, pour cela, cette syntaxe de fragment de réaction ne fonctionnera pas. Nous devons ajouter un fragment de point de réaction. Et la clé pour y parvenir, c'est d'obtenir un index et de le transmettre ici. Dites les moteurs et jetez un œil. Tu vois, l'erreur a disparu. Maintenant, lorsque nous récupérons des données, nous pouvons désactiver notre bouton. La requête Use Infinite possède une autre propriété pour cela, qui consiste à récupérer la page suivante Lorsque nous arrivons à la page suivante en bas, dans notre bouton, nous ajoutons l'attribut de désactivation et le passons ici, correctif à la page suivante Nous pouvons également modifier le texte de notre bouton afin de pouvoir transmettre cette condition. Si l'épachage de la page suivante est vrai, nous renvoyons le chargement point, point, point, sinon nous affichons load more De plus, nous enroulons notre bouton entre crochets et ajoutons ici I car la page suivante est vraie, ce n'est qu'alors que nous affichons ce bouton Charger plus Cette propriété renvoie, notre requête a la page suivante ou non. Dites les anges et jetez un œil, actualisez la page et cliquez sur Charger plus. Vous voyez, nous avons ici notre texte de chargement, donc ça marche. 198. useCrochet de mutation pour la mutation: Jusqu'à présent, nous avons vu comment récupérer des données à l'aide d'une requête rea Voyons maintenant comment nous pouvons muter, c'est-à-dire ajouter, mettre à jour ou supprimer des données dans notre application à l'aide de Raquery Tout d'abord, fermons tous les fichiers et ouvrons le composant Sellers. Dans cette leçon, nous allons exécuter la fonctionnalité d'ajout d'un vendeur à l'aide d'une requête. Pour la mutation, nous avons un hook qui est use mutation , comme nous avons use query et dans cette fonction, nous passons notre objet de configuration. Dans notre hook use query, nous avons une fonction de requête. Mais dans le cas d'une mutation d'usage, nous avons une fonction de mutation. Et ici, ce que nous allons transmettre, c'est vrai, nous passons notre fonction, que nous appellerons API et renverrons les données. Nous passons donc la fonction flèche et nous ajoutons point post du client API et 0,2 slash users point puis la réponse de la méthode, et nous renvoyons simplement les données du point de réponse Actuellement, nous ne transmettons pas ici l'objet d'un nouveau vendeur. Nous verrons cela dans une seconde. Maintenant, vous vous demandez peut-être comment pouvons-nous appeler cette API, que nous venons de définir ? Pour cela, cette fonction use mutation renvoie un objet, nous le stockons dans une variable appelée add seller mutation. Cet objet possède une méthode appelée muter. En utilisant cette fonction de mutation, nous pouvons appeler l'API Où nous voulons appeler cette API dans la fonction de vendeur d'annonces. Tout d'abord, nous supprimons ici ces vendeurs d'ensembles et supprimons également cette demande d'API. Nous n'en avons pas besoin et nous ajoutons ici simplement fonction add seller mutation point mutate. C'est ce que nous appellerons cette fonction de mutation. Nous pouvons maintenant transmettre l'objet de notre nouveau vendeur, que nous avons créé précédemment. Voyez ici. Et lorsque nous passons un objet dans une fonction mutée, ici, nous obtenons ce paramètre dans notre fonction de mutation et le transmettons après notre point final Enregistrez les modifications et jetez-y un œil. Accédez à la page du vendeur et ouvrez l'onglet Réseau. Écrivez un nouveau vendeur et cliquez sur Ajouter un vendeur. Vous voyez, ici, nous obtenons un identifiant de demande New Post avec notre nom. Maintenant, comme nous l'avons fait précédemment, nous pouvons ajouter nos nouveaux vendeurs à cette liste. Il existe donc deux manières de mettre à jour notre liste. Tout d'abord, nous pouvons directement mettre à jour notre cache. Ensuite, nous pouvons invalider notre ancien cache, puis récupérer nos données sur le serveur Ici, dans cette situation, nous ne pouvons pas utiliser cette deuxième méthode car JcnPlaceholder n'ajoutera pas nos données dans C'est juste pour la dégustation, mais ne vous inquiétez pas. Je vais vous montrer les deux voies. Voyons d'abord cette deuxième méthode, puis nous écrirons notre code pour mettre à jour directement le cache. Donc, dans notre hook de mutation use, nous avons une autre méthode appelée success, qui s'exécutera si notre demande d'API est terminée avec succès. De plus, nous avons une propriété d'erreur, qui s'exécutera si une erreur se produit dans cette mutation. Ici, nous pouvons afficher une notification Toast en cas d'erreur. Pour l'instant, nous ne voulons pas en revenir au succès et nous passons la fonction de rappel, et nous obtenons ici deux paramètres Le premier paramètre renverra l'objet de notre vendeur depuis le backend. Nous pouvons l'appeler vendeur enregistré et nous obtenons également l'objet du nouveau vendeur, que nous venons d'envoyer avec notre API. Et dans cette fonction, nous voyons d'abord comment nous pouvons invalider la requête de notre vendeur précédent. Pour cela, en haut, nous nous appelons le client de requête de rea Query. Et stockez-le dans une variable appelée client de requête. Ce client de requête est le même que notre fichier JSX principal, cet objet client Maintenant, dans notre fonction de réussite, nous ajoutons des requêtes query client point Invalidate et, dans cette fonction, nous devons transmettre la clé de requête Object pass here à nos vendeurs Quelle que soit la requête contenant cette clé, commencez par indiquer aux vendeurs que toutes les requêtes sont considérées comme non valides C'est pourquoi une requête actualisera ces requêtes. Enregistrez les modifications et jetez-y un œil, inscrivez le nom de notre vendeur ici et ajoutez un vendeur. Vous voyez, notre requête avec la clé du vendeur est en train de s'arrêter. Vous pouvez le voir d'après la dernière valeur mise à jour. Regardez, encore une fois, ajoutez un vendeur et cette fois, c'est mis à jour. Ici, nous ne voyons aucun changement dans notre liste à cause de l'espace réservé à Jon, n'enregistre pas vraiment nos nouveaux vendeurs sur le serveur S'ils veulent le stocker, alors nous aurons ce nouveau vendeur ici. Voyons maintenant une autre méthode, qui consiste à mettre à jour directement le cache. Pour cela, nous commentons cette méthode et ajoutons un commentaire pour la méthode deux. Et ici, interrogez les données de requête du client par ensembles de points. Au premier argument, nous devons transmettre la clé de requête, à savoir les vendeurs. Et le deuxième paramètre est la fonction de données. Nous arrivons donc ici à nos vendeurs, qui est le tableau de la liste actuelle des vendeurs, fonction d'erreur, et nous renvoyons le tableau. Maintenant, nous ajoutons d'abord notre objet vendeur enregistré, puis nous ajoutons les vendeurs des opérateurs de spread, enregistrons les modifications et jetons un coup d'œil. Entrez le nom du vendeur et cliquez sur l'annonce. Tu vois, nous avons ici notre nouveau vendeur. C'est ainsi que nous transformons nos données dans React Query. Récapitulons rapidement la mutation. Lorsque nous nous appelons query hook for mutation, nous appelons use mutation hook et inside object, nous transmettons une fonction de mutation qui prend fonction avec l'appel d'API. Après cela, nous avons une propriété de réussite qui fonctionnera une fois notre mutation terminée avec succès. Ici, nous mettons à jour nos données de cache avec les données de requête définies par le client de requête. Et en bas, pour appeler cette mutation, nous ajoutons la fonction de mutation par point de mutation Ed Seller. est aussi simple que ça. Si vous êtes un peu perplexe, ne vous inquiétez pas grâce à cet exercice, vous comprendrez ce concept. Voici donc un petit exercice pour vous. Comment faire une demande, utilisez la méthode de mutation pour cette fonctionnalité de suppression du vendeur et de mise à jour du vendeur. Le résultat devrait rester le même car nous supprimons et mettons à jour la liste des vendeurs. Essaie de résoudre ça. Et si vous en avez besoin, vous pouvez revoir cette leçon Je vous verrai lors de la prochaine leçon. 199. Supprimer et mettre à jour les vendeurs: J'espère que vous allez essayer de résoudre cet exercice. Voyons maintenant la solution très rapidement. Tout d'abord, je vais déplacer ce crochet Use TD en haut. Bien. Maintenant, après notre mutation d'erreur Ads, nous appelons à nouveau use mutation et passons sa fonction de mutation d'objet de configuration à la fonction flèche. Maintenant, à partir du bas, nous avons obtenu ce client d'API grâce à la fonction différée et nous l'avons collé ici. Ici, nous n'avons pas besoin cette méthode d'esquisse, nous pouvons donc la supprimer. Et ici, nous ajoutons ensuite les données de méthode, de réponse et de réponse de retour. Maintenant, nous obtenons cet identifiant ici à partir de ce paramètre. Ensuite, nous ajoutons la méthode de réussite et transmettons ici la fonction de rappel, et nous obtenons ici nos données de vendeur supprimées, notre fonction de flèche et les données de requête par ensemble de points du client Write Query Au premier argument, nous transmettons nos principaux vendeurs. Au deuxième argument, nous transmettons notre fonction de mise à jour Nous obtenons donc ici notre fonction de flèche pour vendeurs, et nous renvoyons ici le filtre à points des vendeurs. Ici, nous obtenons un vendeur unique, avec une fonction de flèche, comme identifiant, qui n'est pas égal à l'identifiant de vendeur que nous avons sélectionné. Donc, ici, j'ai supprimé le point ID du vendeur, mais voici un problème. espace réservé Sun ne renvoie rien lorsque nous supprimons un utilisateur Laissez-moi vous le montrer en direct. Donc, pour appeler cette API, stockons cet objet de mutation dans une variable appelée delete seller mutation. Et dans notre fonction de suppression du vendeur, supprimons notre ancien code. Ici, nous l'appelons fonction muted delete seller mutation point muted. Et à l'intérieur de celui-ci, nous passons notre identifiant, enregistrons les modifications, jetons un œil, ouvrons l'onglet Réseau, et ici nous supprimons le vendeur. voyez, nous obtenons ici une demande de suppression, mais notre liste n'est pas mise à jour car dans la réponse du serveur, nous n'obtenons rien. Maintenant, comment pouvons-nous résoudre ce problème ? C'est vraiment simple. Nous pouvons également transmettre la méthode de réussite dans notre fonction this mutate. Ainsi, après notre premier argument, nous passons l'objet de configuration ici, et nous supprimons simplement notre méthode on success de use mutation hook. Et collez-le dans cet objet. Maintenant, nous n'avons pas besoin de supprimer le paramètre vendeur ici, et à la place de cet identifiant de point Deleteller, nous passons simplement l'ID Dites les modifications et jetez-y un coup d'œil. Cliquez sur Supprimer et notre vendeur sera supprimé d'ici. Voyons maintenant comment nous pouvons informer le vendeur. Après notre mutation Delete, nous appelons à nouveau la mutation américaine Hook. Passez ici l'objet de configuration, fonction de mutation à ici, nous obtenons l'objet vendeur mis à jour, que nous transmettons à partir de notre fonction de mise à jour des vendeurs, fonction d'erreur. Trouvons ce client EPA avec la méthode patch. Et collez-le ici. Nous supprimons également cette méthode d' esquisse et l' ajoutons, car cette API renverra nos données de vendeur mises à jour. Donc, les données de réponse et de retour sont des points de réponse. présent, à la place de cet identifiant de point de vendeur, nous ajoutons un identifiant de point de vendeur mis à jour. Maintenant, nous obtenons des données du serveur, nous pouvons donc transmettre ici la méthode de réussite. Ici, nous obtenons notre objet vendeur mis à jour, que nous obtenons à partir du serveur, fonction flèche, et dans cette fonction, nous ajoutons des données de requête par ensemble de points du client de requête. Tout d'abord, nous ajoutons la touche de requête, qui est définie pour les vendeurs, puis, une fonction mise à jour, nous obtenons les données des vendeurs, la fonction flèche. Ici, nous devons renvoyer le tableau mis à jour. Pour cela, en partant du bas, nous pouvons couper la méthode de la carte à points du vendeur et simplement la coller ici. Et dans notre état actuel, nous remplaçons l'identifiant point vendeur par un identifiant point vendeur mis à jour. Maintenant, pour appeler notre mutation Update, nous stockons cette mutation d'utilisation dans une variable appelée Update seller mutation. Et en bas, nous pouvons supprimer les vendeurs du set et simplement appeler ici, Mettre à jour le point de mutation du vendeur et transmettre ici, l'objet du vendeur mis à jour Dites les modifications et jetez-y un œil, cliquez sur le bouton Mettre à jour et nous verrons que le vendeur sera mis à jour. Vous comprenez maintenant comment nous pouvons utiliser un crochet de mutation pour muter nos données C'est vraiment simple. Nous avons juste besoin de nous entraîner. 200. Gérer les erreurs dans les mutations: Voyons maintenant comment nous pouvons gérer les erreurs de mutation. Dans notre objet d'ajout de mutation, nous avons une méthode appelée en cas d'erreur. Ici, nous obtenons notre objet d'erreur, que nous obtenons de l'API et dans cette fonction, nous pouvons également écrire la logique pour afficher les notifications Toast. Pour l'instant, enregistrons simplement cet objet d'erreur par Consult. Faisons maintenant une faute de frappe dans notre point de terminaison. Utilisez NGs et jetez-y un coup d'œil. Ouvrez la console, écrivez ici le nom du vendeur et modifiez-le. Vous voyez, nous avons ici une erreur Axios. Cette erreur a de nombreuses propriétés telles que CF, message, requête, etc. Pour l'instant, nous avons juste besoin de ce message. Revenons donc au code VS et ici, à la place du journal des points de la console, nous pouvons écrire la fonction d'alerte et simplement transmettre ici un message d'erreur. Ça se bloque et vous voyez, nous recevons ici une alerte d'erreur. Magnifique. Maintenant, laissez-moi vous montrer comment nous pouvons également afficher une erreur sur notre page. C'est vraiment simple. Comme nous le savons, tous les crochets de mutation utilisent des crochets pour renvoyer un objet avec une mutation et un tas de propriétés À l'intérieur de ceux-ci, nous obtenons également une erreur, qui est le même objet que cet objet d'erreur. À partir de là, nous pouvons commenter méthode d'erreur, et en bas, dupliquer cette condition et la modifier pour ajouter une erreur de point de mutation du vendeur est disponible. Ensuite seulement, imprimez ici, ajoutez le point de mutation du vendeur, point d'erreur, point d'erreur, message. Enregistrez les modifications et prenez-en une et vous verrez que nous obtenons notre erreur. C'est ainsi que nous affichons l' erreur en cas de mutation. Supprimons maintenant cette faute de frappe, nous avons goûté avec succès notre application Dans la leçon suivante, nous allons afficher notre progression au cours des mutations. 201. Montrer les progrès pendant les mutations: Maintenant, notre mutation s' exécute souvent en arrière-plan et cela peut prendre peu de temps. À ce moment-là, nous pouvons afficher une sorte de chargeur ou de spinner pour indiquer une mutation en cours Donc, pour cela, use mutation renvoie une propriété appelée Es pending. Et en utilisant cette propriété, nous pouvons afficher le chargeur. Cette attente E fonctionne de la même manière que notre état de chargement Ese, que nous avons créé dans notre hook personnalisé Use Data. N'oubliez pas que notre bouton de vendeur d'annonces situé le site de ce vendeur d'annonces, nous respectons les conditions. Si la mutation de l'adseller est en attente est vraie, nous renvoyons l'ajout d'un vendeur, sinon, la valeur d'ajout de vendeur par défaut Nous pouvons donc désactiver notre bouton Ajouter par attribut désactivé et simplement le transmettre ici au point de mutation E du vendeur en attente. Donc, si c'est vrai, notre bouton se désactivera, enregistrera les modifications et jettera un œil. Écrivez le nom du vendeur et ajoutez-le. Vous voyez ici que nous ajoutons vendeur et que notre bouton est désactivé. Vous pouvez voir à quel point Raquery est simple et utile. Je ne peux pas imaginer que je n' allais pas ajouter Requeri dans ce cours Mais Dieu merci, je l'ajoute. Cela vous aidera beaucoup. Et aussi, merci beaucoup d'avoir demandé. J'en ai également beaucoup appris. 202. Mise à jour optimiste dans React Query: Actuellement en cours de mise en œuvre, nous faisons d' abord une demande d'API puis nous modifions les données sur notre page, ce que l'on appelle une approche pessimiste Mais nous pouvons également appliquer ici une approche optimiste, ce qui signifie essentiellement que nous mutons d'abord nos données, puis que nous appellerons notre API pour cette mutation Auparavant, nous avons déjà vu cette approche, non ? Implémentons donc cette approche dans une requête. Donc, dans le cadre de notre mutation de vendeur de publicités, ici, dans notre cerceau de mutation d'utilisation, nous avons une autre méthode appelée muter Ici, nous passons la fonction de rappel. Cette fonction s'exécutera avant que cette fonction de mutation ne s'exécute, et c'est exactement ce que nous voulons. Vérifions-le. Donc, au premier paramètre, nous obtenons nos données, que nous envoyons au serveur, qui est ce nouveau vendeur. Et dans le cadre de cette fonction, nous consultons simplement point log on mutate new seller Ensuite, nous déclenchons simplement une alerte avec un message d'absence de mutation. Enregistrez les modifications et jetez-y un œil. Ouvrez l'onglet Réseau, appuyez sur la page, nous nommons ici et cliquez sur chez le vendeur. Vous voyez, nous recevons d'abord une alerte, et si nous cliquons sur OK, nous recevons une demande de publication. Il est donc clair que cette méthode muette s' exécutera avant notre fonction de mutation Et également dans notre console, nous pouvons voir ici que nous obtenons les données de nos nouveaux vendeurs. Dans cette fonction, nous devons donc ajouter notre nouveau vendeur dans les données de notre vendeur. Supprimons ce code. Et il suffit de mettre à jour les données de nos clients. Nous pouvons donc déplacer cet ensemble de données de requête selon notre méthode muette et remplacer ce vendeur enregistré nouveau vendeur, et c'est tout Enregistrez les modifications et jetez un œil à ce nom et cliquez sur Ajouter un vendeur. Vous voyez, nous obtenons immédiatement les données de nos nouveaux vendeurs, puis l'API appelle. nous reste plus qu'à gérer la fonction en cas de succès et en cas d'erreur. Dans le cadre de notre propre fonction de réussite, nous remplacerons notre nouvel objet vendeur, que nous venons d'ajouter en mode silencieux Nous le remplaçons par l'objet vendeur enregistré , que nous recevons du serveur. Nous écrivons donc les données de requête par ensembles de points du client, transmettons votre clé aux vendeurs, et pour la fonction de mise à jour, nous obtenons ici les vendeurs, fonction flèche. Nous transmettons aux vendeurs un point d' interrogation, une carte à points, la fonction flèche du vendeur, et ici nous adoptons une condition simple. Si le vendeur unique est égal à notre nouveau vendeur, nous renvoyons le vendeur enregistré, sinon nous renvoyons ce vendeur tel quel. Maintenant, ici, ce nouveau vendeur est ce nouvel objet vendeur, que nous transmettons dans notre fonction de vendeur d' annonces. Et c'est terminé. Maintenant, gérons la fonction d'erreur, car si quelque chose ne va pas, nous devons restaurer nos données dans leur état antérieur. Nous l'avons vu dans notre section sur l'API d' appel. N'oubliez pas qu'à ce moment-là, ce que nous avons fait dans la méthode de l'époque, nous faisons de même dans la méthode du succès. Et ce que nous avons fait dans notre méthode de cache, nous faisons de même dans cette méthode en cas d'erreur. Notre syntaxe est modifiée, mais notre logique est la même qu'avant. C'est pourquoi j'explique d'abord la nouvelle logique, puis nous implémentons cette logique à l'aide de la bibliothèque de requêtes React. Gérons donc la méthode d' erreur et passons ici la fonction de rappel Dans ce rappel, nous obtenons d'abord un objet d'erreur, puis au deuxième paramètre, nous obtenons un nouveau vendeur, et enfin, nous obtenons des contextes Maintenant, vous pouvez demander un texto. Donc, dans ce contexte, nous obtenons tout ce que nous en renvoyons lorsque la fonction est désactivée La logique est donc que nous allons renvoyer liste de nos vendeurs précédents à partir de cette fonction désactivée, puis nous pourrons obtenir cette liste dans notre contexte Il suffit de voir ceci et votre sortie s'éclaircira. Donc, ici, avant de définir les données de requête, nous écrivons query client point Get query data. Et à l'intérieur, nous passons notre clé, qui est celle des vendeurs. Stockons maintenant ces données dans une variable appelée vendeurs précédents. Et à la fin, nous retournerons les vendeurs précédents en objet. Ici, nous pouvons également simplifier. Et en bas, dans notre fonction d'erreur, dans ce contexte, nous obtenons cet objet avec la propriété du vendeur précédent. Donc, d'abord, nous vérifions si le contexte est faux, puis nous revenons de cette fonction. Et si le contexte est disponible, nous pouvons exécuter le client de requête, définir des données de requête, transmettre ici les principaux vendeurs et simplement transmettre ici les contextes pointant les vendeurs précédents. Maintenant, vérifions que cela fonctionne ou non. Donc, en cas d'erreur, nous faisons ici une faute de frappe dans notre point de terminaison, S les modifications et jetons un coup d'œil Écrivez le nom et cliquez sur Ajouter un vendeur. Tout d'abord, le nom est ajouté, puis nous recevons une erreur et notre liste est définie à l'état précédent. Cela fonctionne donc plutôt bien. Récapitulons maintenant cette approche afin que vous puissiez mieux la comprendre Tout d'abord, nous ajoutons une fonction muted, qui s'exécute avant notre fonction de mutation, et nous définissons nos nouvelles données directement dans notre liste Ensuite, nous devons nous occuper du succès et des méthodes d'erreur. Si notre appel d'API est terminé avec succès, nous remplacerons notre nouvel objet de données par les données de sauvegarde que nous recevons du serveur. Et si nous recevons une erreur lors de notre appel d'API, nous devons restaurer notre liste à son état précédent. Pour obtenir la liste précédente, nous récupérons nos données précédentes dans cette fonction mutée avant de les muter et les renvoyons simplement dans l'objet Nous pouvons également renvoyer directement les données précédentes sans objet, puis en cas d'erreur, nous devons écrire des contextes, ce qui créera de la confusion. Il est donc préférable de renvoyer l'objet en mode muet, et c'est tout Nous mettons en œuvre avec succès une approche optimiste. 203. Crochet personnalisé pour la mutation AddSellers: Actuellement, dans notre implémentation, nous stockons toute notre logique de mutation dans ce composant unique, qui peut être difficile à maintenir à l'avenir. Nous pouvons donc stocker cette logique dans un hook séparé, comme nous avons créé use sellers. Si cette implémentation vous convient, vous n'avez pas besoin de le faire. Mais selon ma suggestion, il vaut mieux écrire du code propre. Dans notre dossier Hooks, nous créons d'abord un nouveau dossier appelé sellers, dans lequel nous ajouterons tous nos hooks liés aux vendeurs. Nous déplaçons donc ces vendeurs d'occasion dans le dossier Sellers. Bien. Créons maintenant un nouveau fichier appelé used seller point js. Tout d'abord, créons une nouvelle fonction appelée use add seller error function. Et en bas, il suffit d'exporter par défaut, en utilisant Ajouter un vendeur. Revenons maintenant à notre composant vendeur, copiez ce client de requête et copiez également cette mutation d'ajout de vendeur à partir d' ici et collez-la dans notre crochet d'ajout de vendeur. Et ici, au lieu de stocker cette mutation dans une variable, nous pouvons simplement la renvoyer à partir d'ici. Importons maintenant ligne par ligne quelques crochets et méthodes dont nous avons besoin dans ce code. Donc, d'abord, nous devons utiliser le client de requête, donc nous l'importons depuis rea query. Nous avons également besoin de ce crochet de mutation. Après cela, nous avons besoin du client IEI, qui est notre Axios et j'ai également oublié de supprimer cette faute de frappe Et c'est tout. Notre SedSellerHok Enregistrez ce fichier et dans le composant du vendeur à l'endroit de ce crochet de mutation, nous pouvons appeler use Ed seller. Vous pouvez voir maintenant que notre code semble propre. Mais nous avons cette mutation de suppression et mise à jour dans ce composant. Nous pouvons également les séparer, mais je vous propose cela à titre d'exercice. Créez des crochets distincts pour utiliser Supprimer le vendeur et utiliser Mettre à jour le vendeur. Je ne vous montre pas cette solution parce qu'elle est trop simple. Voici donc à quoi ressemble notre composant après avoir séparé la mutation de notre composant. Vous verrez que cela semble plus propre et facile à entretenir. 204. Section 18 : améliorer les performances des sites Web avec React Query: Bienvenue dans la 18e section du cours Ultimate React. Dans cette section, nous allons maintenant implémenter la requête reac dans notre projet de cartouche final Donc, comme je vous l'ai déjà dit, je vais d'abord vous donner l'exercice au début de chaque leçon, et vous devez le résoudre à cent pour cent. Vous êtes coincé quelque part ou vous terminez l'exercice , puis vous voyez la solution. Mais d'abord, vous devez faire de votre mieux pour le résoudre. Ne t'inquiète pas. Je ne vais pas vous donner quelque chose de nouveau. Vous avez déjà appris ces concepts de requête React dans la section précédente. Toujours dans cette section, je vais vous montrer comment ajouter une requête rea dans un projet React existant sans difficulté majeure. La mise à jour du projet est une chose que vous devez faire dans le cadre de votre carrière professionnelle ou indépendante. Êtes-vous donc enthousiaste à l'idée d'améliorer votre projet ? Commençons. 205. Avez-vous vraiment besoin de React Query: Avant de commencer à mettre à jour notre projet React , vous devez avant tout vous demander si nous avons besoin de cette réacquisition ou non Parce que si votre application ne possède pas beaucoup de fonctionnalités de récupération de données à partir de l'API, il est inutile d'ajouter Requery Cela ne fera qu'augmenter la charge de votre application. Un de mes amis a utilisé Requery dans un petit projet, qui ne comporte que deux petits appels d'API, comme des données de cinq paragraphes Tu penses à lui ? Prend-il de bonnes décisions ? Bien sûr que non, non ? Voici donc nos trois projets. vous, quels projets n' ont pas besoin de cette réacquisition ? C'est vrai. Notre premier projet, TaS track, n'a pas besoin de cette réacquisition Maintenant, notre deuxième projet , Movie Maniac, comporte trois appels d'API Devrions-nous y ajouter une requête ? Oui, nous pouvons ajouter une requête dans ce projet car ce site Web se concentre principalement sur les données API Si les utilisateurs n'obtiennent pas rapidement les données des films, ils fermeront immédiatement le site Web. Et comme nous nous concentrons principalement sur les données d'API, nous avons besoin d'une requête même si nous avons trois appels d'API Nous pouvons donc ajouter une requête dans notre projet Movie Maniac. Et je n'ai pas besoin de vous poser des questions sur le projet 3, car il possède également de nombreuses fonctionnalités de récupération C'est ainsi que vous devez penser à votre projet React. De plus, dans cette section, nous ne mettrons à jour que notre projet trois et non le projet deux. Tout d'abord, dans notre projet cartwih, nous remplaçons toute la logique de récupération par une requête use, puis nous implémenterons également une requête rea pour Maintenant, tout d'abord, je dois clarifier une chose : appliquer la bibliothèque entière projet existant est un peu déroutant car nous devons d'abord être clairs sur notre code précédent, puis nous devons ajouter une nouvelle bibliothèque. C'est pourquoi j'enseigne abord une bibliothèque de requêtes rea avec notre projet de routage simple. Si vous avez bien compris la requête présentée dans la section précédente, vous êtes maintenant au niveau requis pour l' implémenter dans notre projet Cartwis sans aucun stress Ne t'inquiète pas. Je vais essayer de simplifier tous les processus , ce qui vous aidera beaucoup. Commençons donc à implémenter Raquery dans notre projet. 206. Préparer React Query: Maintenant, avant de commencer à utiliser rea query, nous devons d'abord configurer rea Query dans notre application de cartouche. Vous devez ouvrir votre projet de cartouche, ou si vous ruinez votre code, vous obtiendrez le même code que le mien dans le dossier des ressources, section code. Et dans cette section 16, dossier terminé. Vous pouvez donc me suivre. Mais assurez-vous de modifier l'URL de base de votre backend dans le fichier de configuration. Maintenant, dans cette section, au début de chaque leçon, je vais vous donner une approche étape par étape pour terminer toutes les leçons sous forme d'exercice. Donc, étape numéro un, installer reaquery dans notre projet, et étape numéro deux, ajouter outils reaquary Dao Vous pouvez effectuer toutes ces étapes sous forme d'exercice. Commençons donc par l' étape numéro un, configuration d'une requête dans notre projet Ouvrez donc le terminal et écrivez NPM, I, addict, ten SAC, slash reac Query, adt 5.12 0.2, et nous installons également query DevTools, donc space, addit tenga query DevTools, à la date addit tenga 5.13 0.3. Et appuyez sur Entrée. Bien. Maintenant, vous souvenez-vous dans quel fichier nous configurons la requête ? Nous devons ajouter Requeri dans notre fichier JSX à points principal. Ici, en haut, nous importons le client de requête depuis Ten Stack rea Query et nous avons également besoin d'un fournisseur de client de requête. De plus, nous importons rea Query DevTools à partir de re query DevTools Maintenant, après nos importations, nous créons une nouvelle instance appelée client de requête égale à nouveau client de requête. Maintenant, nous devons simplement encapsuler notre composant d'application avec le fournisseur de clients de requête. Ajoutez ici le fournisseur du client de requête et déplacez ce composant de fermeture après notre composant d'application, et nous passons simplement ici le client au client de requête. Et pour ajouter DevTools ici après le composant de l'application, nous ajoutons simplement le composant React Query DevTools Enregistre les modifications et permettez-moi d'exécuter mon application à l' aide de NPM run Dev Ouvrez le lien et voyez. Ici, nous obtenons Query DevTools. Ici, nous avons intégré avec succès Raquery dans notre projet. 207. Récupérer des données en utilisant useQuery: Maintenant, actuellement dans notre application, nous récupérons la plupart de nos données à l'aide du hook personnalisé Use Data Mais dans le Use Data Hook, nous gérons manuellement les erreurs de données et facilitons le chargement des propriétés. Et nous savons que si nous utilisons use query, nous n'avons pas besoin de gérer ces propriétés. La première étape consiste à utiliser le hook de requête dans notre crochet d'utilisation de données et à l'étape numéro deux, nous mettrons à jour tous les composants dans lesquels nous utilisons le crochet de données d'utilisation. Tout d'abord, mettons à jour notre hook d'utilisation des données. Tout d'abord, nous allons supprimer ces trois variables d'état supprimer ce crochet d'effet d'utilisation et supprimer cette instruction de retour. Nous allons repartir de zéro. Comme nous l'avons fait dans la section précédente, nous renvoyons ici use query hook à partir de notre fonction. Maintenant, vous souvenez-vous de ce que nous allons ajouter dans cette requête d'utilisation ? C'est vrai, nous ajoutons un objet avec deux propriétés. La première est la clé de requête, et comment pouvons-nous obtenir cette clé de requête à partir du paramètre. Donc, ici, nous pouvons enfin obtenir la clé de requête. Maintenant, ici, nous pouvons transmettre cette clé de requête ou nous pouvons la supprimer. Mais pour mieux comprendre, je vais garder les choses telles quelles. Maintenant, nous ajoutons une fonction de requête, et ici nous devons créer une nouvelle fonction pour appeler toutes les API de patch. Avant notre retour, nous créons une nouvelle fonction appelée fonction fetch, fonction flèche, et nous renvoyons simplement ici la méthode point Get du client API Ici, ce que nous allons ajouter, c'est vrai, nous ajoutons un point de terminaison, que nous obtiendrons à partir de nos composants. Maintenant, après cela, si nous voulons ajouter une configuration, nous pouvons également ajouter notre configuration personnalisée ici, comme nous l'avons fait précédemment, nous savons que cela renverra une promesse, nous ajoutons donc la méthode, et ici nous obtenons une réponse et nous renvoyons simplement les données des points de réponse. Nous pouvons simplement transmettre cette fonction, fonction de requête. Assurez-vous de ne pas appeler cette fonction ici, nous devons transmettre une référence. Maintenant, pour notre requête de récupération, nous pouvons définir le temps imparti à 10 minutes pour toutes nos requêtes de récupération, ce qui signifie qu'une fois que nous aurons récupéré nos données du backend, resteront actualisées pendant 10 minutes, mais nous ne pouvons pas le définir globalement car dans notre application de commerce électronique, nous devons obtenir les informations de carte très rapidement L'utilisateur peut s'asseoir pendant 10 minutes ou consulter sa carte. Comprenez-vous la situation ? Ainsi, pour chaque requête, nous pouvons définir une heure fixe différente en utilisant un paramètre. Nous ajoutons donc ici le temps immobile et par défaut, nous passons ici 5 minutes, soit 300 K. Et au lieu de 600 K, nous ajoutons le paramètre de temps de l'acier. Et si nous n'avons pas de configuration personnalisée, cette configuration personnalisée peut nous donner une erreur. Nous pouvons donc passer un objet vide comme valeur par défaut. Supprimons également ce paramètre de profondeur, et en haut, nous supprimons cette première ligne de saisie. Nous n'en avons pas besoin, et c'est tout. Enregistrez les modifications, et voilà, notre première étape est terminée. Maintenant, si nous vérifions notre application, elle se bloque parce que lorsque nous appelons used data hook dans nos composants, nous n'avons pas transmis la clé de requête. Ne vous inquiétez pas, nous allons le réparer. Nous devons donc mettre à jour tous nos composants qui utilisent un hook de données usagé. Maintenant, vous avez peut-être une question. Comment savoir dans quels composants nous utilisons des données utilisées ? Cela va prendre beaucoup de temps. Ne t'inquiète pas. J'ai un appareil. Ici, dans notre panneau d'explorateur, nous avons cette icône de recherche. Et ici, nous pouvons rechercher notre fonction ou variable, que nous voulons trouver dans notre projet. Nous écrivons donc ici les données d'utilisation, et elles afficheront tous les mots de données utilisés. Mais ici, vous pouvez voir qu'il affiche les lignes d'entrée et également les lignes de fonction. Donc, pour le filtrer davantage, nous pouvons ajouter ici des parenthèses ouvrantes et voir notre liste se réduire. Tu aimes cette astuce ? J'espère qu'il vous plaira. Je l'utilise beaucoup lorsque je travaille sur de grands projets. Maintenant, nous cliquons d'abord sur notre première ligne, qui se trouve dans le fichier du produit vedette, puis sur C, cela ouvrira ce fichier avec nos données d'utilisation mises en évidence. Ici, nous ajoutons null dans le deuxième paramètre car nous n'avons pas de gunfig personnalisé, puis nous passons notre clé de requête, qui est array products and featured Et il reste encore 10 heures car nous n'avons pas besoin de nouvelles données à chaque fois. Les produits en vedette sont mis à jour au bout de 24 heures, et c'est tout. Maintenant, vérifions que cela fonctionne ou non. Dites les modifications et jetez-y un coup d'œil. Vous voyez, nous avons ici nos produits phares. Nos données utilisées fonctionnent donc correctement. Mettons maintenant à jour notre deuxième composant à partir de la recherche , à savoir notre page Ma commande. Pareil. Ici, nous passons null pour clé de demande de configuration personnalisée à mes commandes et temps passe encore à 1 minute car c'est nécessaire. Donc un sur 60 sur 1 000, et c'est tout. Enregistrez ce fichier. Ensuite, nous avons la liste des produits, mais nous n' y touchons pas car pour cela, nous devons utiliser une requête infinie. Nous allons ignorer cela. Ensuite, nous avons barre latérale des produits et nous ajoutons ici la valeur nulle pour les deux catégories de clés de requête de configuration et le temps passe encore à 24 heures, 24 à 60 minutes, 60 secondes à 100 millisecondes La raison pour laquelle nous ajoutons le temps encore à 24 heures est qu'il est également rare qu'une application de commerce électronique mette à jour ses catégories de produits Ici, vous pouvez modifier l'heure fixe en fonction des exigences de votre application. Cela dépend totalement de vous. Enregistrez ceci pour la dernière page, qui est une page de produit unique, ajoutez un faux pistolet personnalisé à null, clé de requête aux produits, une virgule Ici, nous ajoutons l'identifiant du produit, et il est encore temps de revenir à sa valeur par défaut. Enregistrez les modifications et jetez-y un œil. voyez que notre application fonctionne, Vous voyez que notre application fonctionne, et je suis étonné que nous obtenions également des données sur les produits, mais la fonction de requête infinie ne fonctionnera pas. Voyons donc notre composant de liste de produits. Oh, tu vois, nous passons ici un tableau de dépendances, et notre hook use data obtient cette clé Squery, et c'est pourquoi cela fonctionne pour les données passées Mais nous devons procéder à une mise à jour ici avec une utilisation dans les requêtes finies. Ne t'inquiète pas. C'est également très simple. 208. Implémenter des requêtes infinies: Implémentons maintenant la fonctionnalité Infinite Query pour notre liste de produits. Étape numéro un, nous allons créer un nouveau hook pour utiliser Infinite query, et étape numéro deux, nous mettrons à jour notre composant de liste de produits. Commençons par la première étape. Pour cela, dans notre dossier Hooks, nous créons un nouveau fichier appelé proroductlst Ici, nous créons une fonction appelée Utiliser la liste des produits avec fonction flèche. Et à la fin, nous exportons simplement la liste des produits par défaut et utilisons. Maintenant, vous souvenez-vous de ce que nous allons renvoyer d'une requête infinie ? Bien, nous revenons ici, utilisons une requête infinie. Maintenant, à l'intérieur de celui-ci, nous ajoutons un objet avec quelques propriétés. La première est donc la clé de requête, qui est pour le moment, gardons-la en tant que produits. Maintenant fonction de requête. Ici, nous devons créer une fonction pour appeler l'API. Donc const fresh products équivaut à la fonction flèche, et nous renvoyons simplement pi client point Get 0,2 slash products Et ici, nous devons transmettre le numéro de page et les catégories, que nous transmettons à partir de notre composant de liste de produits. voyez, cet objet a tous les paramètres, nous pouvons donc l' ajouter directement en tant que configuration. Dans notre fonction d'utilisation de la liste des produits, nous obtenons cet objet sous forme, disons, de requête, et nous l'ajoutons simplement après notre point de terminaison. Vous souvenez-vous que nous avons fait de même dans la leçon précédente ? Maintenant, ajoutons également cet objet de requête dans notre clé de requête. Ici, cette expression renvoie une promesse. Nous ajoutons donc la méthode et simplement la fonction de flèche de réponse, les données du point de réponse. Passons maintenant cette référence de fonction dans notre fonction de requête. Après la fonction de requête, nous ajoutons une autre propriété appelée Get next page param Pouvez-vous me dire pourquoi nous avons besoin de cette propriété ? Hein ? Fondamentalement, cette fonction signifie le nombre de pages et les données de phase en conséquence. Ici, nous devons passer une fonction, qui a deux paramètres, la dernière page, qui correspond aux données de la dernière page, et le deuxième paramètre est toutes les pages, qui est le tableau de toutes nos pages. Et ici, nous renvoyons simplement la condition si la longueur des points de la dernière page est supérieure à zéro, ce qui signifie que notre dernière page contient des données, et si c'est vrai, nous augmentons la page, c' est-à-dire la longueur des points de toutes les pages plus un, sinon nous renvoyons null. Maintenant, comme nous le savons, quel que soit le résultat de cette fonction, nous obtiendrons cet objet dans notre fonction de requête. Ici, nous obtenons cet objet déstructurons ici et arrivons ici au paramètre de page, et comme valeur par défaut, nous en passons ici Nous devons maintenant ajouter cette page pum dans notre objet de requête, que nous transmettrons depuis notre composant Ici, nous pouvons voir que nous transmettons la propriété de la page avec notre numéro de page. Nous devons donc faire de même ici. Tout d'abord, à la place de cet objet de requête, nous ajoutons un objet, et d'abord, nous déstructurons notre objet de requête, et à la fin, nous ajoutons une page à cette page peram et c'est Enregistrez les modifications et appelons ce hook dans notre composant de liste de produits. Ici, en ce qui concerne les données relatives au lieu d'utilisation, nous appelons « liste des produits d'utilisation ». Maintenant, ici, nous n'avons pas besoin de passer le point de terminaison. Nous sommes les seuls à transmettre nos paramètres. Je coupe donc l'objet params, je supprime tout ce qui se trouve dans notre fonction et je le colle simplement ici Maintenant, ici, nous n'avons pas besoin de ce paramètre de page car nous avions déjà cette logique dans Gt next page params, et nous avons également supprimé cette variable passée par le haut Voyons si notre composant fonctionne ou non. Peux-tu deviner ? Hein ? Cela ne marchera pas. Sauvez les moteurs et jetez-y un coup d'œil. Une bonne page de produit est bonne, et notre application tombe en panne. Ouvrons la console et voyons ici une erreur. La page de définition n'est pas définie. Donc, en bas, nous supprimons cette fonction de page définie. Et ce que nous allons ajouter ici pour obtenir les données de la page suivante. Bien, nous devons récupérer la page suivante, que nous obtenons grâce à use infinite query Et nous avons également retiré ce crochet à effet d'usage, qui donnera à notre pièce une seule valeur. Maintenant, en bas, dans notre effet d'utilisation, nous appellerons cette fonction fetch next page Les modifications et jetez-y un coup d'œil. Vous voyez ici que notre erreur a disparu, mais nous n'obtenons toujours pas nos données, nous progressons donc Maintenant, nous obtenons la même erreur que dans notre section précédente. Il suffit donc de const point log nos données. Regardez les modifications et jetez-y un coup d'œil. voyez, nous obtenons ici des données dans un objet avec deux propriétés, faisceaux de pages, qui sont indéfinies Deuxièmement, nous avons des pages qui ont un objet, et à l'intérieur de cet objet , nous avons quelques propriétés, page en cours, article par page, produits, etc. Auparavant, dans les pages, nous n'arrivions qu' à doce array N'oubliez pas que ces propriétés dépendent entièrement du back-end. Ainsi, dans notre GSX, avant nos produits à points de données, nous ajoutons des crochets Ci, et nous voici à point MAP sur les pages de données À l'intérieur de ceux-ci, nous obtenons une seule page, qui est notre objet. Nous renvoyons donc ici des fragments de réaction, et à l'intérieur de ceux-ci, nous déplaçons simplement notre méthode cartographique, et à la place des produits par points de données, nous ajoutons des produits par points de page. Maintenant, comme nous le savons, nous devons ajouter une propriété clé dans notre fragment de réaction. Nous adhérons donc au fragment React Dot. Fermez également ce fragment de point de réaction et collez simplement la touche, qui est l'index. Et nous le transmettons clé à index. Voyons voir si cela fonctionne ou non. Enregistrez les modifications et jetez-y un œil. Pourtant, nous n' obtenons pas nos données. Ici, nous arrivons à ne pas lire les pages. Dans notre fichier, nous devons donc transmettre des données sur des pages à points d' interrogation. Enregistrez ceci et voyez ici que nous obtenons la page n'est pas définie sur la ligne 43. Alors vérifions-le. Tu vois, ici nous avons une page. Supprimons donc cette condition, enregistrons les modifications et jetons un coup d'œil. Nous ne recevons aucune erreur, et nous ne recevons aucune donnée non plus. Maintenant, je pense que c'est le problème de notre méthode. Je pense que nous n'obtenons pas de données parce que nous présentons ici des produits court-circuités, mais cela est également nécessaire pour les ventes à découvert Peut-être que nous faisons quelque chose mal en court-circuitant. Vérifions-le. Donc, dans notre effet d'utilisation, oh, nous vérifions le mauvais état. Nous pouvons donc supprimer cette condition relative aux produits à points de données et ajouter ici des pages à points de données. Et aussi, ici, nous voulons obtenir tous les produits. Voici donc nos données, qui sont le tableau d'objets. Et dans cet objet, nous avons la propriété des produits, qui comprend une gamme de dix produits. Maintenant, la question est de savoir comment obtenir tous les produits simplement en utilisant la méthode FlatMap Donc ici, à Data point Pages, qui est la méthode Array point FlatMap Et voici chaque page. Et nous renvoyons simplement ici les produits à points de page. En utilisant cette méthode FlatMap, nous n'obtenons pas de tableau de tableaux Tous nos produits seront ajoutés en une seule gamme. Maintenant que nous affichons directement les produits Short, nous pouvons les déplacer en dehors de notre méthode cartographique, et nous n'avons même pas besoin de cette boucle de carte à points de données. Supprimons également ce composant de pagination. Cela compliquera un peu notre code. Enregistrez les modifications et jetez-y un œil. Vous voyez, maintenant nous avons nos données. Essayons de modifier le tri. Vous voyez, cela fonctionne également. Voyons maintenant la fonction de défilement infini et elle ne fonctionne pas Donc, ici, je pense que nous avons fait quelque chose de mal parce que notre page ne passe pas à deux, ce qui signifie que nous pouvons une erreur dans notre utilisation d'un crochet de requête infini. Oui, nous commettons une grave erreur. Laisse-moi t'expliquer. C'est très intéressant. Donc, comme nous le savons, cette dernière page est la dernière donnée que nous recevons de notre back-end. Ici, nous traitons cette dernière page comme un tableau, mais comme nous le savons, nous obtenons un objet à partir de notre appel d'API. Laisse-moi te montrer. Nous ajoutons donc ici le journal à points de la console, dernière page, et ajoutons ici la dernière page. Les modifications et jetez-y un coup d'œil. Ici, nous pouvons voir que la dernière page n'est pas un tableau. C'est un objet que nous recevons depuis le back-end. Ici, nous obtenons la page actuelle et la propriété totale de la page. Nous pouvons donc simplement renvoyer ici une condition, comme si le point de la dernière page la page actuelle est inférieure au nombre total de pages de la dernière page. Si c'est vrai, nous augmentons le nombre de pages, qui correspond à la dernière page, point sur la page en cours plus un, sinon nous renvoyons null. Les modifications et jetez-y un coup d'œil. Pourquoi je ne propose que huit produits. Je pense que notre paramètre ne passe pas correctement. Laissez-moi vérifier. Ici, j'ai oublié d' ajouter la propriété Perms. Nous enveloppons notre objet avec des crochets, ajoutons ici propriété Perms et la transmettons Sauvez les moteurs et jetez-y un coup d'œil. Fermons la console. Voir. Enfin, nous obtenons notre requête infinie. Je fais intentionnellement ces erreurs pour vous montrer quelle erreur peut se produire dans votre projet. Vous pouvez donc tirer des leçons de ces erreurs lorsque vous implémentez use infinite query. Tout d'abord, vous vérifiez la propriété de la dernière page , puis vous renvoyez le numéro de page suivant en fonction de celle-ci. Nous pouvons maintenant rendre cela encore meilleur en affichant des squelettes de cartes tout en récupérant plus de données. Donc, dans notre crochet de liste de produits d'utilisation, nous ne voulons pas que cela charge une propriété. Nous arrivons simplement ici à la propriété du correctif, et nous obtenons également la page suivante Maintenant, dans notre fonction de défilement des poignées à l'endroit où je charge, nous ajoutons I fetching, puis nous ajoutons et ensuite comme page suivante Ce n'est qu'alors que nous allons chercher la page suivante. Toujours dans le tableau de dépendances, nous le changeons en « extraction », et en bas, nous changeons ici son et en bas, nous changeons ici chargement en « extraction Utilisez Gs et prenez un. Découvrez maintenant que notre fonction de défilement infini fonctionne mieux Vous pouvez donc voir comment nous implémentons une requête pour récupérer des données infinies dans un projet existant Je pense que cette vidéo est un peu longue, vous pouvez donc faire une pause de cinq à dix minutes, boire un peu d'eau ou écouter de la musique, puis continuer cette section. Rendez-vous dans la prochaine leçon. 209. Devrions-nous ajouter la mise en cache dans les suggestions automatiques: heure actuelle, si dans notre projet, nous voulons savoir quelle API est encore présente, alors pour savoir ce que nous allons faire correctement, nous effectuons une recherche ici. Nous recherchons donc le client API point Get Method. Vous voyez ici que nous avons trois fichiers. Le premier concerne les données utilisées, que nous avons mises à jour. Ensuite, nous avons les services de cartes, que nous verrons dans la leçon suivante, et enfin, nous avons fichier de services de produits dans lequel nous avons une API pour les suggestions. Maintenant, à mon humble avis, l' ajout du cache dans les requêtes de recherche n'est pas nécessaire car peu de personnes aiment rechercher les mêmes produits encore et encore Une autre raison est que l'ajout de la mise en cache dans notre application est que nous voulons envoyer un peu moins de demandes au serveur Et si nous ajoutons en cache dans notre suggestion automatique de recherche, nous ne pouvons pas retarder cette demande de suggestion car si nous utilisons Query pour cette requête, nous devons appeler Squery dans notre composant Nous ne pouvons pas l'appeler effet d'utilisation car une requête ne nous permet pas de le faire. Implémentez le code si vous souhaitez ajouter une requête dans ce composant, mais à mon avis, cela augmentera la charge sur notre serveur. C'est pourquoi j'ai décidé de ne pas utiliser Query pour les suggestions automatiques. 210. Mise à jour de la requête getCart: Nous allons maintenant mettre à jour notre dernière demande de récupération, qui est Get card request Pour l'API Gecard, nous utilisons notre hook de données d'occasion. Dans notre composant d'application, nous appelons ici use data et nous passons endpoint comme premier argument, qui est card null pour l'objet de configuration, et enfin, nous ajoutons une clé de requête, qui est card et c'est tout. Nous pouvons voir à quel point ce crochet de données d'occasion est utile. Maintenant, comme nous le savons, cela renverra nos données. Nous nous déstructurons donc ici, récupérons nos données et les renommons en données de carte Maintenant, lorsque nous appliquons un crochet réducteur, nous devons faire quelque chose comme ça Nous appelons ici UIPechok et dans un premier temps, la fonction de rappel, puis le tableau de dépendances, et ajoutons Maintenant, dans cette fonction de rappel, nous ajoutons une condition si les données de la carte ne sont pas nulles, disponibles Ensuite, nous définissons les données dans notre variable CAT en utilisant la méthode de répartition. Donc, à partir du bas, nous avons simplement supprimé cette méthode d'expédition de la fonction Get card, et nous avons également supprimé toute cette fonction. Nous n'en avons pas besoin. Maintenant, collez cette fonction d'expédition dans notre UIFectHok et à la place des données du point de réponse, nous ajouterons les données de la carte Maintenant, en bas, nous avons ce crochet d'effet d'utilisation. Déplaçons-le en haut après notre crochet d'effet d'utilisation. Ce crochet sert à récupérer les données de la carte. Mais maintenant, nous n'avons pas la fonction Get card. Ce que nous allons faire est simple. Nous avons une fonction dans US query, qui est re fetch et à la place de Gcard, nous l' appelons Enregistrez les modifications et jetez-y un œil. Ici, nous devons nous connecter avec notre compte pour obtenir les données de la carte. Vous voyez ici que nous obtenons les données de notre carte. Maintenant, de notre fichier de services de cartes, nous supprimons cette fonction Get card. Nous n'en avons pas besoin. Et dans notre composant d'application, nous supprimerons également l'entrée de l'API Get card. Sinon, cela nous donnera une erreur. Nous en avons donc terminé avec toutes les mises à jour pour récupérer les données. 211. Mutation pour ajouter au panier: Commençons maintenant à utiliser les mutations pour les mutations. Dans notre composant d'application, nous avons donc trois mutations. Le premier est Head to Cart. Deuxièmement, nous l'avons retiré du panier et enfin, nous avons mis à jour le panier. Commençons donc par le premier head-to-cart. Nous l'avons fait dans la section précédente, nous allons créer un crochet séparé pour chaque mutation. Dans notre dossier hooks, nous créons un nouveau dossier appelé CAT et à l'intérieur de ce dossier, nous créons un nouveau fichier appelé used to cart point js. Maintenant, créons une fonction appelée Use ad to cart, arrow function, et après cela, nous exportons cette fonction par défaut. Bien. Maintenant, à partir de cette fonction, nous renvoyons use mutation hook. Et à l'intérieur de ceux-ci, nous devons passer un objet de configuration. Maintenant, la première propriété est la fonction de mutation connue de S V. Et ici, nous devons simplement retourner notre API head to card, que nous avons déjà dans le fichier Card Services. Vous voyez, nous vous renvoyons directement la promesse. Nous pouvons donc ajouter ici un point puis une méthode et simplement ajouter des données de réponse et de point de réponse. Ou nous pouvons simplement supprimer cette API à partir d' ici et également supprimer cette fonction. Maintenant, dans notre utilisation de to cut hook, nous renvoyons simplement cette API. Mais ici, nous devons obtenir un paramètre dans notre fonction de mutation pour cet identifiant et cette quantité. Ici aussi, nous devons encapsuler nos paramètres dans un objet. Je vais vous expliquer pourquoi dans une seconde. Maintenant, après notre fonction de mutation, ce que nous allons ajouter, c'est la propriété success, et nous passons ici la fonction de rappel Maintenant, comme je vous l'ai dit , nous avons deux options. Nous pouvons invalider les données actuelles de notre carte ou mettre à jour les données de notre cache. Dans la section précédente, nous mettons à jour les données relatives aux vendeurs car nos nouvelles données sur les vendeurs ne sont pas ajoutées au backend de Jasen Mais ici, les données de notre chat nous permettront d' accéder à notre backend. Ainsi, au lieu de mettre à jour les données des dossiers, nous pouvons simplement invalider nos données actuelles. Ici, en invalidant les données de carte actuelles, nous nous assurons que notre utilisateur obtient ses nouvelles données de carte Donc, ici, nous devons utiliser le client de requête et comment pouvons-nous y parvenir correctement ? En appelant, utilisez le client Query en haut et stockez-le simplement dans une variable appelée client de requête. Maintenant, avec succès, nous ajoutons le point « Invalid Queries » du client de requête. Et à l'intérieur de cela, nous devons nous opposer à propriété de la clé de requête et clé que nous voulons invalider correctement. Nous invalidons le panier, enregistrons les modifications et revenons à notre composant d'application Maintenant, en haut, après les données d'utilisation, nous appelons notre fonction use at to cart. Et nous savons que cela renverra une variable de mutation. Nous stockons donc cela dans une variable appelée mutation « head to cart ». Maintenant, en bas, il suffit d'appeler la fonction de mutation en utilisant la variable de mutation head to cart Commentons maintenant ce code, et nous appelons simplement ici la fonction head to cart mutation point mutate function. Maintenant, ce que nous voulons transmettre au premier paramètre. Nous pouvons vérifier cela ici dans notre fonction de mutation. Vous voyez, nous devons transmettre l'objet avec son identifiant et sa quantité. Revenons donc à notre composant, nous ajoutons ici l'objet et l'identifiant au point de soulignement du produit et la quantité à la quantité Maintenant, vous pourriez vous demander pourquoi nous passons ici un objet ? Pouvons-nous transmettre séparément le numéro d'identification et la quantité ? Non, cela ne fonctionnera pas car comme nous le voyons dans la section précédente dans la fonction muted, nous devons passer tous nos paramètres en première position à la deuxième position, nous pouvons ajouter un objet de configuration avec des propriétés en cas de succès ou d'erreur Ici, nous avons déjà ajouté le succès de notre fonction de mutation d'utilisation. Nous n'en avons pas besoin ici. Ici, nous n'avons besoin que d'une seule fonction de flèche d'erreur. Ce que nous ferons en cas d'erreur. Nous annulerons notre carte en cas de problème dans l'API Head to Cart voyez, ici, nous avons déjà une méthode d'expédition pour retourner une matrice de cartes Il suffit donc de le copier et de le coller ici, et c'est tout. Auparavant, nous utilisions une variable de contexte car nous renvoyons des données sur la fonction de mutation. Mais ici, nous n'avons pas de mutation, nous pouvons donc le faire directement Enregistrez les modifications et passez à la vitesse supérieure. Maintenant, sur la page des produits, nous cliquons sur le bouton Ajouter au panier, et notre application s'est bloquée. Laissez-moi voir dans la console. voyez, ici, nous ne pouvons pas utiliser la variable de produit avant l'initialisation Ici, nous avons une erreur dans notre fichier de réduction de carte. Ouvrez le fichier du réducteur de carte et, dans notre cas Head to Cart , nous utilisons le produit pour souligner l'ID avant d' initialiser la variable Déplaçons-le avant cette ligne, enregistrons les modifications et jetons un coup d'œil. Ici, nous avons une autre erreur pour l' API head to cart que nous avons supprimée. Nous devons également supprimer cette entrée de notre composant d'application. Enregistrez ceci et maintenant cela fonctionnera. Cliquons sur le bouton «   Accéder au panier ». Rien ne se passe Permettez-moi de vérifier les outils de développement de requêtes. Nous passons aux mutations et nous pouvons voir ici que nous avons une erreur. Vérifions cette erreur. Comme nous le savons dans cette propriété d'erreur, nous obtenons ici notre erreur et nous enregistrons simplement cette erreur par points sur la console. Enregistrez-le et ouvrez la console. Cliquez sur le bouton « Accéder au panier », et voici notre erreur et nous voyons qu'elle indique que le client API n'est pas défini. Oh, nous avons oublié de saisir client API dans notre fichier d'utilisation head to card, et c'est ainsi que nous résolvons les problèmes. Enregistrez les modifications et jetez-y un œil. Permettez-moi de fermer tout cela et de cliquer sur le bouton « Accéder au panier ». Vous voyez ici, cela fonctionne, mais la mise à jour prend du temps car nous n'avons pas appliqué une approche optimiste. Maintenant, si nous comprenons que l' approche optimiste consiste essentiellement afficher les modifications sur notre site Web avant d' appeler notre EPI Si la demande d' API aboutit, nous laissons nos données telles quelles ou nous les récupérons auprès du serveur pour confirmation Et si la demande d'API génère une erreur, nous annulons nos données est aussi simple que ça. Maintenant, il nous suffit de mettre à jour les données de notre carte locale avant d'appeler l'API. Nous pouvons le faire en utilisant deux méthodes. Tout d'abord, nous devons utiliser la fonction mutate, mais à l'intérieur de celle-ci, nous devons écrire la même logique que celle que nous avons écrite dans notre réducteur Head to Cart Ainsi, au lieu d'utiliser Mutate, nous pouvons simplement envoyer ici l' action avec le type d'action « head to cart Vous voyez ici que nous avons déjà cette fonction d'expédition, copiez-la et collez-la avant d'appeler la fonction de mutation, c'est aussi simple que cela Maintenant, nous pouvons également supprimer ce code de commentaire, enregistrer les modifications et y jeter un œil. Vous voyez, nous avons maintenant une approche optimiste. 212. Mutation pour retirer du panier: Maintenant, ajoutons une mutation pour notre fonction de retrait de la carte. Vous pouvez également prendre cela comme exercice et essayer d'implémenter la fonction de suppression de la carte. Et alors, quelle est la solution ? Nous créons donc ici un nouveau fichier appelé use remove from cart point js. À l'intérieur de celui-ci, nous créons une fonction, utilisons Supprimer du panier égale à la fonction flèche, et à la fin, nous exportons par défaut, utilisons, supprimons du panier. Maintenant, nous retournons ici utiliser la fonction de mutation, et à l'intérieur de celle-ci, nous passons l'objet de configuration. Et la première propriété est la fonction de mutation. Et ici, nous devons ajouter l'API de suppression de la carte. Nous allons donc dans le fichier Card Services et nous pouvons couper cette API et également supprimer cette fonction. Sauvegardez ceci. Et dans notre fonction de mutation, ici, nous renvoyons cette API, puis nous ajoutons les données de méthode, de réponse et de point de réponse de retour, et nous nous assurons d'importer le client API depuis nos Utils car j'ai oublié de l'importer plusieurs fois lorsque je copie l'API à partir d'un autre fichier Ensuite, nous ajoutons la propriété de réussite. Ici, nous ajoutons une fonction de rappel et à l'intérieur de celle-ci, nous devons invalider notre requête de carte Nous avons besoin ici d'un client de requête et pour cela, nous avons besoin d'un client de requête. En haut, nous appelons la fonction use query client et nous la stockons dans une variable appelée query client. Maintenant, au point du client de requête, invalidons les requêtes. À l'intérieur de celui-ci, nous ajoutons un objet avec une clé de requête au panier. Enregistrez ce fichier et dans notre composant d'application, après notre utilisation chez TCAT Hook, nous appelons use remove from card Hook et nous le stockons dans une variable appelée remove from card mutation bas, dans notre fonction de suppression du panier, après cette fonction d'expédition, nous ajoutons la fonction de mutation par point de suppression du panier Et dans ce premier, nous passerons un objet paramètre, qui est notre identifiant. Hé, avons-nous ajouté le paramètre ID dans notre fonction de mutation ? Laissez-moi vérifier cela. voyez, ici j'ai oublié d'ajouter un objet de déstructuration et d' obtenir un identifiant en tant que paramètre Sauvegardez-le et retournez dans notre dossier. Maintenant, après notre objet paramètre, nous ajoutons un autre objet dans lequel nous pouvons ajouter des propriétés. Nous ajoutons donc une fonction d'erreur et d'erreur de passe, et à l'intérieur de celle-ci, nous voulons simplement inverser l'état de notre carte Nous pouvons donc copier cette fonction d'expédition à partir d' ici et également copier cette fonction d'erreur Toast Dot. Je pense que cela va aider. Nous les collons donc dans notre propre fonction d'erreur. Nous pouvons maintenant supprimer cet ancien appel d'API. Nous n'en avons pas besoin. Et aussi, j'aime ajouter cette notification d'erreur dans l'API Head to Cart. Enregistrez les modifications et jetez un œil et réprimez la page. Ici, nous avons une erreur. Consolons-le. Ici, nos services de cartes ne fournissent pas d'exportation nommée Remove from card API. Ou bien, nous avons oublié de supprimer l'importation de notre API de suppression de la carte. Supprimez-le. Enregistrez ce fichier et notre fonction de suppression de la carte fonctionne bien. Passons maintenant à notre dernière mutation, qui est Update card. 213. Mutation pour augmenter et diminuer: Implémentons maintenant notre dernière mutation, qui concerne l'augmentation et la diminution. Donc, tout d'abord, nous allons créer des hooks séparés pour les deux API, puis nous les appellerons dans notre composant d'application. Ainsi, dans notre dossier Card Hooks, nous créons un nouveau fichier appelé use increased product point JS, et comme vous le savez, nous créons d'abord une nouvelle fonction appelée use increase product with arrow function syntax, et à la fin, nous exportons simplement par défaut, cette fonction use increased product function. Maintenant, dans cette fonction, nous renvoyons use mutation hook et nous y ajoutons notre objet de configuration. Ici, nous ajoutons une fonction de mutation à une fonction de flèche, et nous avons besoin ici d'une API de produit accrue. Nous allons donc dans le fichier des services de cartes, coupons cette API d'augmentation et la collons dans notre fonction de mutation. Enfin, nous devons ajouter la méthode VN par points et nous avons des données par points de réponse et de retour . C'est aussi simple que ça. Nous avons maintenant besoin de cet identifiant de produit. Ici, nous allons obtenir un objet avec paramètre ID et nous assurer transmettre dans notre fonction de mutation dans le composant de l'application Et aussi, nous importons ici le client API. Maintenant, ajoutons une autre propriété appelée en cas de succès, et nous passons la fonction de rappel ici Dans cette fonction de rappel, nous avons besoin d'un client de requête Donc, avant notre déclaration écrite, nous ajoutons le client de requête Cs égal à ce que nous appelons ici use query client function. Vous pouvez voir avec quelle facilité nous effectuons des mutations dans notre application. Il ne vous convaincra que lorsque vous l' implémenterez pour la première fois. Après cela, vous pourrez facilement l'ajouter. Je sais que vous avez déjà terminé cette logique de crochet pendant que je parle. Permettez-moi donc également de compléter ce code. Ici, nous ajoutons simplement requêtes non valides au client de requête, et à l'intérieur de celui-ci, nous passons l' objet de configuration avec clé de requête de propriété et la carte ici, qui sont les données que nous voulons invalider. Maintenant, je remarque une chose dans la diminution de l'API du produit, il suffit de modifier cette API et de pointer afin de créer une API commune pour l'augmentation et la diminution. Je pense que ce sera plus bénéfique. Tout d'abord, nous allons changer le nom de notre fichier en us updcard point js Bien. De plus, nous changeons le nom de la fonction, sélectionnons et appuyons sur la touche F deux du clavier et ici, utilisons la carte de mise à jour. Maintenant, dans le paramètre de notre fonction de mutation, après notre identifiant de produit, nous ajoutons également le type de mise à jour. Et à la place de cette augmentation, nous ajoutons dollar CliBackets, tapons, enregistrons les modifications, et dans notre composant d'application en haut, nous supprimons d' abord ces deux API des services de cartes, nous ne voulons pas que cela maintenant dans notre composant, une fois notre utilisation supprimée de la carte, nous appelons notre crochet de mise à jour d'utilisation et nous le stockons dans une nouvelle variable appelée Update card mutation Faites maintenant défiler l'écran vers le bas jusqu'à la fonction de carte de date. Ici, dans la condition I, nous devons augmenter le produit. Nous appelons donc ici Update Card Mutation Dot Mutate. Et au premier paramètre, nous ajouterons écrire, objet avec paramètre. Tu t'en sors vraiment très bien. Nous ajoutons donc ici un objet avec des propriétés d'ID et de type. N'oubliez pas que nous utilisons ici des objets car nous avons plusieurs paramètres pour la fonction de mutation. Maintenant, après notre objet paramètre, nous passons un autre objet pour une propriété d'erreur. Et nous passons ici la fonction de rappel et à l'intérieur, déplaçons simplement ces deux lignes Supprimons maintenant cet ancien appel d'API. De plus, nous pouvons voir ici que pour ces deux fonctions, ces deux instructions seront identiques. Nous avons juste besoin d'une condition pour cette mise à jour de la quantité. Nous pouvons donc déplacer cette carte d'expédition et mettre à jour la ligne de mutation de la carte après ces deux conditions if et également supprimer la carte d'expédition et appel d' API de la deuxième condition I. Enregistrez les modifications et nous pouvons également supprimer le fichier des services de cartes de notre projet. Nous n'en avons plus besoin. Voyons maintenant notre implémentation. Vous voyez, notre fonction d'augmentation et de diminution fonctionne également bien. C'est ainsi que nous implémentons mutation dans notre projet de cartouche, et cela améliorera certainement les performances de notre site Web. Comme je vous le montre au début, voici une comparaison avant et après. Nous pouvons clairement constater qu'après réacquisition, les performances de notre projet sont bien Merci donc beaucoup d'avoir regardé cette section complète. 214. Section 19 Déploiement: Maintenant c'est le moment. Nous avons terminé notre projet majeur, qui est l'application Card Wish Ecommerce. Notre projet s' exécute actuellement sur l'hôte local Déployons-le donc sur Internet. Ensuite, vous pouvez partager directement le lien de ce site Web avec vos amis, et vous pouvez également l'ajouter à votre CV ou à votre portfolio. C'est vraiment simple. Commençons donc le processus de déploiement. 215. Début du déploiement: Commençons maintenant notre processus de déploiement d'applications. Donc, dans notre projet, nous avons deux parties, le backend et le front-end Sans backend, notre application frontale n'est rien. Nous devons donc déployer ces deux parties. Nous utiliserons le rendu pour notre backend, et pour le front-end, nous utiliserons Netlify Il s'agit de mon choix personnel pour le déploiement. Si vous allez travailler dans une entreprise, le choix du service revient à votre responsable ou à votre client, car il doit également prendre en compte le budget et les installations. Tout d'abord, nous téléchargerons notre code sur Github, puis nous connecterons notre référentiel Github à nos services Ne t'inquiète pas pour ça. C'est vraiment simple. Nous expliquerons toutes les étapes de manière simple et facile. Si vous souhaitez déployer une application React sans backend, vous pouvez ignorer les trois leçons suivantes et préparer directement l' application React pour le déploiement Mais avant cela, vous devez télécharger votre projet sur Github Maintenant, la raison pour laquelle nous déployons également le backend dans ce projet est que nous n'avons pas besoin de démarrer notre serveur local lorsque nous accédons à notre application React Dans nos deux premiers projets, nous ne pouvons déployer que notre front-end car dans ces projets, nous n'avons ni backend ni base de données 216. Ajouter MongoDB Cloud: Donc, actuellement, dans notre backend, nous avons une base de données MongoDB locale Maintenant que nous déployons notre application, fois en frontend et en backend, peuvent y accéder, mais tous les utilisateurs n'ont pas Mongo Dibe dans leur système Et en plus, ce n'est pas une bonne chose. Les données de notre application doivent rester synchronisées pour tous les utilisateurs. Nous devons donc créer notre base de données Mongo Db dans le Cloud. Ainsi, tous les utilisateurs utiliseront la même base de données. Rendez-vous donc sur mongodb.com et inscrivez-vous simplement avec votre compte L'inscription ne prendra qu'une minute. Je suis déjà inscrit, donc je reçois cette interface. À partir de là, cliquez sur Nouveau projet et donnez le nom de votre projet , CAT Wish, puis cliquez sur Suivant. À partir de là, vous pouvez ajouter des membres de l'équipe à votre projet. Il vous suffit de cliquer sur Créer un projet. Maintenant, cliquez sur Créer une base de données. Ici, vous pouvez voir comme sur le plan. Il suffit de passer à la version gratuite et de cliquer sur Créer. Maintenant, nous obtenons ici notre nom d'utilisateur et notre mot de passe pour notre base de données. Donc tout d'abord, je copie nom d'utilisateur et dans Note paid, on le colle. Après cela, copiez également ce mot de passe aléatoire et collez-le également. Il s'agit de l'étape la plus importante. Cliquez maintenant sur Créer un utilisateur. Ensuite, nous devons donner accès au réseau, qui peut lire et écrire des données dans notre base de données. Nous sélectionnons donc ici de donner l'accès au réseau à tout le monde. Ne t'inquiète pas pour ça. Il vous suffit de cliquer sur Terminer et de fermer. Accédez à la base de données. Il ne nous reste plus qu'à donner accès au réseau à tout le monde. De n'importe où, l'utilisateur peut accéder à notre base de données et y obtenir des produits. Sur le côté gauche, accédez à l'accès au réseau. Ici, nous avons notre adresse actuelle. Cliquez sur Modifier et cliquez simplement sur Autoriser l' accès depuis n'importe où. Cela définira notre adresse sur 0000, qui est accessible à tous, puis cliquez sur Confirmer. Cela prendra un certain temps avant qu'il soit actif. Bien. Notre base de données est donc prête. Il ne nous reste plus qu'à connecter cette base de données au back-end de notre nœud. Revenons donc à l'onglet de base de données et simplement à Cconnect. Maintenant, utilisez l'option « Connecter l'application ». Et nous avons ici les étapes à suivre pour connecter l'application du nœud. Ne vous inquiétez pas, copiez simplement ce lien de base de données, et dans notre backend Vs code, open point NV, et à la place de cette encre Mongo Db locale, nous collons notre encre Mongo Di Maintenant, ouvrez non jumelé et copiez notre mot de passe. Revenons au code Va, et nous devons coller notre mot de passe à la place de ce mot de passe. Notez qu'ici, nous devons également supprimer ces crochets angulaires. Enregistrez ce fichier et c'est terminé. Vérifions-le s'il est connecté ou non. Dans notre terminal, arrêtez ce serveur en cours d'exécution en appuyant sur Control plus C ou Command plus C, puis écrivez à nouveau le point d' index du nœud Js et appuyez sur Entrée. Cela prendra un certain temps et verrons ici que nous sommes connectés à la base de données. Encore une fois, arrêtez ce script et exécutez node products point js, car nous n'avons actuellement aucune donnée dans cette nouvelle base de données cloud, et C nous recevons un message de réussite. Revenez donc sur notre site Web MongoV et cliquez sur Parcourir les collections Et vous voyez, nous avons ici notre base de données et nos collections. Nous avons donc réussi à connecter base de données Mongo Debi Cloud à notre application de nœud 217. Comment télécharger des projets sur github: Voyons maintenant comment nous pouvons télécharger notre projet sur Github Si vous ne connaissez pas Github, en bref, il s'agit d'un site Web qui permet aux développeurs de stocker, partager et de collaborer sur du code avec d'autres Github permet aux développeurs de créer des référentiels, ou nous pouvons appeler des dépôts où ils peuvent stocker leur code et suivre les modifications au fil Et c'est le moyen le plus simple et le plus efficace pour les équipes de travailler ensemble sur un même projet sans avoir à remplacer le code des autres Il existe donc de nombreuses façons de télécharger du code sur Github. Nous verrons le moyen le plus simple et le plus simple, qui consiste à utiliser l'application de bureau Github Alors, étape numéro un, téléchargez l'application de bureau Github. Rendez-vous donc sur notre navigateur, recherchez application de bureau Github et ouvrez ce lien Github Maintenant, cliquez sur le bouton Télécharger. Cela va prendre un certain temps. Une fois cette opération terminée, ouvrez le programme d'installation et notre installation démarre. Si vous l'ouvrez pour la première fois, vous devez vous connecter avec votre compte Github Donc, pour vous montrer cela, je supprime mon compte Github de l'application Github Maintenant, étape numéro deux, nous devons nous connecter avec un compte Github Donc, pour vous connecter, accédez aux fichiers et ouvrez les options cliquez sur le bouton de connexion à Github et continuez avec le navigateur Cela nous redirigera donc vers le site officiel de Github. Entrez maintenant votre nom d'utilisateur et votre mot de passe pour votre compte Github et cliquez sur se connecter Cliquez maintenant sur ce bureau Open Github, et il sera automatiquement redirigé vers notre application Ne t'inquiète pas Vous n'avez besoin de le configurer que pour la première fois. Maintenant, vérifions-nous si nous sommes connectés ou non. Encore une fois, accédez aux fichiers et ouvrez les options. Et dans les comptes que nous pouvons voir ici, nous avons notre compte Github Passez maintenant à l' option Git, et à partir de là, nous pouvons définir notre nom et notre e-mail pour notre Github Ainsi, lorsque nous publions cool sur Github, les autres membres de l'équipe verront ce nom et cette adresse e-mail Assurez-vous de sélectionner votre adresse e-mail officielle ici et de cliquer sur Enregistrer. Maintenant, étape numéro trois, ajouter un dépôt local. Donc, pour ajouter notre code au dépôt, allez dans le fichier et sélectionnez Ajouter un dépôt local. Et à partir de là, sélectionnez le chemin de notre dossier principal. Et sélectionnez ce dossier. Maintenant, il est dit de créer un nouveau dépôt, alors cliquez sur ce lien, et nous devons passer le nom de notre dépôt. Ne vous inquiétez pas pour cela, cliquez simplement sur Créer un dépôt, puis sur Créer un dépôt. Maintenant, vérifions-nous si nous avions le bon chemin ou non. Cercle montrant Explorer et C, notre dossier Ben est ouvert Alors fermez-le et cliquez simplement sur ce dépôt public. À partir de là, nous pouvons modifier le nom et la description de notre référentiel. Il s'agit pas d'un backend pour une application de transport. Et à partir de là, nous pouvons également sélectionner la confidentialité de notre code. Pour notre usage, veuillez ne pas le rendre privé. Décochez cette case et cliquez sur Publier le référentiel. Cela prendra du temps et c'est fait. Découvrons-le sur Github. Cliquez sur Afficher sur Github voir ici notre code principal. Low, vous pouvez voir à quel point il est simple de télécharger du code sur Github Maintenant, publions également notre interface utilisateur. Revenons donc à l'application Github, allez dans le fichier et cliquez sur Local Repository Sélectionnez le chemin de notre projet frontal. Et cliquez sur Create Repository. Encore une fois, cliquez sur Créer un référentiel et cliquez simplement sur Dépôt publié. Ici, nous pouvons changer notre apoame en CartwisFront end. Tu peux écrire ce que tu veux. Cela dépend entièrement de vous. Dans la description que nous ajoutons, il s'agit de l'application React pour CartWishpject Cochons cette case pour rendre notre dépôt public Nous pouvons le faire depuis le site Github. Cliquez sur Publier et c'est fait. Ouvrons-le dans Github et voyons comment le front-end est également publié sur Github 218. Déployer le backend: Maintenant, déployons d'abord notre backend. Rendez-vous donc sur render.com, et ici nous pouvons voir le processus de déploiement instantané Mais tout d'abord, nous allons enregistrer notre compte à partir d'ici. Nous pouvons utiliser Google ou Github pour l'enregistrement, ou nous pouvons simplement utiliser un e-mail et un mot de passe Il nous enverra un e-mail d'activation, dans lequel nous recevrons le lien d'activation. Je copie donc ce lien d'ici et je le colle dans notre URL. Et nous obtenons cette planche de test. Ne t'inquiète pas pour ça. Cliquez simplement sur le bouton Nouveau. Et ici, nous sélectionnons les services Web. Nous devons maintenant connecter notre compte Gitub. Cliquez sur C Connect Gitub et connectez-vous avec votre compte Gitub. Assurez-vous d'utiliser le même compte Github sur lequel vous publiez votre code principal. Maintenant, installons render sur notre compte Github. À partir de cette page, nous pouvons sélectionner dépôt que nous voulons ajouter à notre compte Render. Vous pouvez ajouter tous les référentiels, mais dans ma suggestion, sélectionnez uniquement une option de référentiel. À partir de là, nous pouvons sélectionner le référentiel. Nous sélectionnons donc le backend Cardwig et cliquons sur Installer. Maintenant, cela nous redirigera vers la page d'accueil du tableau de bord, et nous cliquons à nouveau sur Nouveau et sélectionnons les services Web. Vous voyez, maintenant nous avons ici notre dépôt. Cliquez simplement sur Connect, et nous obtenons ici notre formulaire. Maintenant, tout d'abord, nous ajoutons ici le nom de notre application, qui est le backend Cartwig Ensuite, nous pouvons sélectionner la région et la branche de notre référentiel Github Maintenant, pour le répertoire racine, nous ajoutons un point. Ensuite, nous avons un environnement défini sur node. Ne changez rien à cela. Et pour la commande de construction, nous écrivons NPM install Et pour la commande start, nous ajoutons simplement node index point js. Maintenant, en bas, nous sélectionnons notre type de service que nous avons défini comme gratuit. Cliquez maintenant sur cette liste déroulante avancée et sélectionnez Ajouter un fichier secret et donnez-lui un nom point ENV Revenons maintenant à notre projet Bend, dans lequel nous avons un fichier ENV dans lequel nous avons nos variables secrètes Copiez simplement tout le code du site Web de Render, cliquez sur le contenu et collez notre code ici. Il vous suffit maintenant de cliquer sur Créer des enquêtes Web et de voir comment le processus de déploiement est lancé. Cela prendra un certain temps et sera couronné de succès, et maintenant le déploiement est en cours. Et voyez que le serveur fonctionne sur ce port et je reçois une erreur dans la connexion Mongo Deb. Laissez-moi vérifier cela. Je pense que j'ai fait une erreur en ajoutant un fichier secret. Nous passons donc à l'onglet Environnement, et ici, permettez-moi de vérifier le contenu du fichier. C'est bon. Oh, ici je saisis un mauvais nom de fichier. Nous devons ajouter le point ENV. Enregistrez les modifications et revenez à l'onglet Logs. Ici, cliquez sur Option de déploiement manuel et sélectionnez Déployer la dernière commande. Il déploiera à nouveau notre application. Ici, nous obtenons une compilation et un déploiement réussis et voyons, ici, nous connectons la base de données. Vérifions-le. Donc, en haut, nous obtenons notre URL principale, nous la copions, et dans le nouvel onglet, nous mettons en page cette URL, nous slash API slash Products et voyons, ici, nous obtenons les données de nos produits Nous avons donc déployé avec succès notre back-end. Maintenant, nous préparons notre interface pour le déploiement. 219. Préparer notre application React pour le déploiement: Préparons maintenant notre application React pour le déploiement. Dans notre application actuelle, nous appelons notre API avec l'hôte local SDTP 5 000, mais il s'agit du backend local Nous devons appeler l'API avec l'URL de notre application déployée, comme nous l'avons vu dans notre dernière leçon. Ainsi, dans notre application Carts React, nous ouvrons notre fichier client d'API, et nous définissons ici notre URL de base pour les appels d'API Nous devons également mettre à jour notre URL de base pour nos images. Nous définirons notre URL de base à un seul endroit, et en l'utilisant, nous remplacerons notre ancienne URL partout. Donc, dans notre dossier source, nous créons un nouveau fichier appelé config point JCN et ici nous ajoutons des crochets Cul et ajoutons ici l'URL du backend de propriété Et pour ce qui est de la valeur, nous copions l'URL de notre backend et nous la collons ici Enregistrez ce fichier, et maintenant nous remplaçons toutes les URL par celui-ci. Donc, tout d'abord, ouvrez le fichier point Js du client API, et en haut, nous importons la configuration depuis. Ici, nous avons un dossier up config point jCN. Supprimons maintenant cette URL de base, puis nous ajoutons des coches arrières et ajoutons ici des crochets dollar Cal , une configuration, une URL BN, puis une barre oblique API Enregistrez ceci et ouvrez le composant de la fiche produit en haut, depuis lequel nous importons la configuration. Nous passons ici aux dossiers, à Config touch et au fichier. Maintenant, dans notre JSX, remplaçons cette URL par des crochets dollar, config point, URL du backend Enregistrez ce fichier et ouvrez un seul composant du produit. Ici, en haut, nous importons à nouveau la configuration depuis. Nous passons ici aux dossiers up, config point JS et file. Maintenant, elle aime l'URL du backend et appuie sur Ctrl plus D ou Command plus D et remplacez-la par des crochets dollar Cul et un point de configuration Bend URL Enregistrez ce fichier et ouvrez la barre latérale du produit. En haut, encore une fois, nous importons Config depuis les dossiers up, config point js et file. Maintenant, remplaçons cette URL dollar Culiackets config Enregistrez ce composant et dernier composant de la page de carte ouverte et en haut, nous importons la configuration à partir de deux dossiers, config, touches et file. Remplaçons maintenant cette URL par dollar Coli Brackets, configpoint Bn URL, et enregistrons ce fichier. Transmettons maintenant notre code mis à jour dans le dépôt Github. Donc, une seule application de bureau Github et sélectionnez notre référentiel frontal comme étant actuel Et ici, nous pouvons voir toutes les modifications que nous apportons à notre code. Ici, envoyez un message, mettez à jour l'URL de Ben et cliquez sur Commit to Maine, puis appuyez simplement sur Origin, et c'est terminé. 220. Déployer l'application React: Déployons maintenant notre application React sur Netlify. Rendez-vous donc sur tontlfy.com, et cliquez sur s'inscrire pour vous inscrire. Ici, je m'inscris avec mon compte Github et cela demandera une authentification Cliquez donc sur autoriser Netlify, et nous sommes redirigés vers la page Netlify Ici, nous devons répondre à quelques questions courantes sur Netlify Ici, je sélectionne le travail. Ensuite, je sélectionne autre chose, et nous saisissons ici le nom de notre application, Cartwis Maintenant, répondez rapidement à ces questions. Ça n'a pas d'importance. Nous pourrons changer cela plus tard. Juste à la fin, cliquez sur Continuer pour déployer. Maintenant, nous allons utiliser Deploy avec Github, et cela demandera à nouveau une autorisation Autorisez-le, de la même manière que nous autorisons notre Github à effectuer le rendu. Ensuite, nous obtenons simplement le processus d'installation de Netlifi Ici, nous ne sélectionnons que le référentiel sélectionné, et en bas, nous sélectionnons notre application CartwGFront end et cliquons sur Installer Maintenant, à partir de là, nous pouvons voir que notre dépôt est ajouté dans Netlifi, cliquez dessus et il vous demandera simplement de déployer notre projet Alors cliquez dessus et notre code commence à s'initialiser. Vous pouvez voir ici le début de l'installation des dépendances. Cela prendra peu de temps, puis il sera créé et déployé et tout le processus sera terminé. Ici, nous recevons le message de réussite du déploiement, et le nom de notre application est défini sur ce point pour le moment. Ne t'inquiète pas pour ça. Cliquez simplement sur Commencer. Ici, nous pouvons voir que nous avons notre site Web, et voici le lien de notre site Web. Cliquez dessus et nous verrons que nous aurons notre application React. Ici, l' URL de notre application est une URL aléatoire. Nous ne pouvons pas partager ce lien avec notre client, n'est-ce pas ? Revenons donc à notre site Web Netlify, et nous avons ici les paramètres de notre site, ainsi que les paramètres de domaine, alors cliquez sur les paramètres du domaine, et à partir de là, cliquez sur Options et modifiez le nom du site Maintenant, nous avons défini le nom de notre site sur quelque chose d'unique, qui n'est pas encore une étiquette. Donc, pour vous, vous devez ajouter une ou deux cartouches ou autre chose pour la rendre Enregistrez ce nom, et l'URL de notre site Web est maintenant modifiée. Nous avons déployé avec succès notre application sur Netlify gratuitement. Si vous souhaitez supprimer cette application netlify point, vous devez connecter votre propre domaine à ce site Si vous comptez utiliser cette application uniquement pour montrer votre travail en tant que développeur, alors ce nom est correct. Maintenant, je vais vous montrer comment vous pouvez simplement mettre à jour votre projet. Ici, sur notre site Web, nous voulons modifier ce site Web, son titre et son icône Fab Revenons donc à VSCode, et dans notre point d'index STMLFle à la place de ce titre, nous ajoutons l'application de commerce électronique moderne CatWish Maintenant, dans notre dossier SS, nous avons le fichier Cartwishpvicon Il suffit donc de le déplacer dans un dossier public. Et à la place de ce fichier SVG, nous ajoutons simplement Cart Wig favicon point SVG. Enregistrez les modifications. Et maintenant, déployons ces modifications. Donc, pour mettre à jour l'application déployée, il suffit de transférer notre code sur Github et Netlify détectera automatiquement les modifications, et c'est pourquoi nous sommes un projet React to Revenons donc à l'application supplémentaire Github. Et ici, nous transmettons notre message de validation, qui est le titre de la mise à jour, l'icône fabuleuse, et la validation à la page principale Et à la fin, il suffit d'appuyer sur Origin. Maintenant, sur notre site Web Netliive, allez dans la section de déploiement, et ici nous pouvons voir qu'il est en cours de construction, et à la fin, le site est publié Ouvrons le site et voyons si notre icône est mise à jour. C'est ainsi que nous déployons nos applications React. Vous pouvez voir que le processus de déploiement est vraiment simple et facile. Il vous suffit de télécharger votre code dans le référentiel Github, puis en utilisant Netlify, nous déploierons rapidement notre application Et pour mettre à jour notre application, il suffit de transférer les modifications sur le Github, et dans les deux à trois minutes, notre site sera reconstruit aussi simplement que cela 221. Merci !: Bien, c'est la fin de ce cours. C'était une bonne idée, non ? Cela a été long, mais vous pouvez voir les projets que vous avez créés et aussi vous féliciter pour être arrivés au bout D'après les statistiques, je sais que peu de gens arrivent ici, mais vous y êtes parvenus. Nous sommes arrivés à la fin de ce cours. Merci beaucoup et oui, à bientôt. Au revoir