Guide complet de la requête RTK avec React JS

1. Introduction: Bonjour et bienvenue dans ce cours, guide complet sur la requête RTK avec React js, dommages mineurs, quelques itérations. Et je serai votre instructeur dans ce cours. Et dans ce cours, nous allons apprendre outil très puissant pour la récupération et la mise en cache des données appelé requête articulée. Si vous êtes développeur React, il se peut que vous utilisiez le routeur comme gestion de l'état de votre application React afin de gérer l'application. Vous pouvez également utiliser le middleware Redux languette ou redox logger pour gérer l'effet souhaité dans votre application React. Donc définitivement, l'équipe de redact a mis au la nouvelle approche de la logique d'écriture. Ainsi, l'âge de la requête d'article introduit par le même réducteur pour faciliter le montage et la mise en cache des données avec le caviardage le plus facilement possible. Et il est construit sur la boîte à outils expurgée. Cela signifie que vous n' avez pas besoin d'installer package supplémentaire pour fonctionner avec Arctic jQuery, il vous suffit d'ajouter le package Toolkit dans votre application React. À l'aide de la requête d'article, notre logique Rudolf sera plus précise et concise. Maintenant, permettez-moi de vous donner un bref aperçu de Rudolf à ceux d'entre vous qui ne savent pas ce que c'est. échec de la rédaction est donc la bibliothèque de gestion des états que nous utilisons dans notre application React, ainsi que vous allez utiliser dans votre application. Pas seulement avec React, mais il est très populaire auprès de la bibliothèque React. Voilà donc la vue d'ensemble de la réduction. Comprenons donc ce que nous allons apprendre dans ce cours. Tout d'abord, nous commencerons par quelques concepts théoriques. Comme nous allons essayer de comprendre le problème principal de React et pourquoi nous utilisons Redux avec le React. Ensuite, nous comprendrons comme ce qu'est une boîte à outils et quel APA est collé dans la requête d'article. Tous ces concepts que nous allons comprendre à l' aide de la puberté. Et après cela, nous construirons notre application Credit React à l'aide de la requête RTK et de JSON corrigé. Avec l'aide de cette application, vous allez comprendre comment écrire une série de points de terminaison à l'aide de l'API de requête RTK, vous allez apprendre à faire des requêtes API qui obtiennent, put, post et supprimer. Cela a frappé l' application globale que nous allons construire dans ce cours avec l'aide de jQuery dur. Parlons maintenant l'exigence de base avant de vous inscrire à la discorde. Ce cours est conçu de manière à ce que quiconque puisse rejoindre ce cours qui souhaite apprendre le concept Redux moderne, vous suffit d'avoir une compréhension de base du HTML, CSS, du JavaScript, ainsi que de Réagissez les connaissances de base. Et à la fin de ce cours, vous comprendrez parfaitement le concept de requête RTK et vous pourrez également implémenter une requête articulée dans n'importe quel projet React addictif. Vous pourrez également remplacer si l'ancienne logique de rédaction présente dans votre projet React par cette requête d'article, qu'attendez-vous pour rejoindre ce cours afin d'apprendre tout ce concept moderne ? Et si vous avez des questions ou des suggestions, vous pouvez toujours me contacter. Je ferai de mon mieux pour résoudre toutes vos questions. C'est donc ça. De mon côté, je vous verrai dans la section des cours. 2. Qu'est-ce que Redux et pourquoi nous l'utilisons ?: Dans cette vidéo, nous allons d'abord comprendre le problème central de React c'est la gestion successorale. Nous avons notre composant principal de l'application. Ensuite, nous avons obtenu notre sous-composant. Si nous voulons modifier un texte, nous ne pouvons pas le faire directement. Au lieu de cela, je dois informer un parent et y modifier le texte. Et si j'ai un composant supplémentaire, il deviendra encore plus complexe. Par conséquent, nous avons une lecture qui a une approche différente. Nous avons donc ici notre point de vue, notre application et dans cette application dans n'importe quel composant donné sera expédié et action. Puis action marque à travers le réducteur. Réducteur plutôt simple tâche ou tâche. Il prendra une action, puis il prendra toutes les manipulations, et cela donnera un nouvel état. Cette manipulation va se produire, cuire sur l'immuable. Cela signifie qu'il ne modifiera pas l'ancien vecteur. Il prendra tout le circuit comme base, puis créera une toute nouvelle copie de tout ce qui est représenté avec les changements dans la ploïdie restés intacts. Nous venons de créer un nouvel élévation et de rendre ce nouvel état. Cet immuable vous donne un état unique dans votre application. Maintenant, nous obtenons un nouvel état peut être réduit , puis il sera stocké dans un magasin. Et nous n'aurons qu'un seul magasin dans notre application. Ce vecteur a une tâche simple pousser vers notre état. C'est pourquoi il s'appelle Restore. Vous avez peut-être un réducteur multiple, mais nous n'en aurons qu'un seul dans notre application. Ensuite, notre application s'abonne à cette boutique. Chaque fois qu'il est daté, mettez-vous à jour. Un nouveau parc national au magasin. Le magasin l' envoie automatiquement à tous les composants et le dirigera et l' application sera mise à jour. Revenons maintenant à l'exemple précédent où nous avions notre composant d'application avec d'autres composants. Et maintenant, nous avons également un magasin. Maintenant, si nous voulions modifier quelque chose, le composant utilisateur de MainComponent, nous allons procéder à l' envoi et à l'action. Ensuite, l'État l'a introduit. Et ensuite, nous sommes chers à tous les composants ces données sur ce qui est réduit et pourquoi nous utilisons Redux dans React js. 3. Qu'est-ce que Redux-Toolkit ?: Alors maintenant, comprenons quel est le bon lecteur à liquider également utilisé pour gérer l'application si vous énoncez une application React de manière efficace. Il a fourni des batteries incluses dans un ensemble d'outils pour un développement efficace. Ces batteries comprenaient un terme de jeu d'outils, un peu fantaisie ici, mais vous comprendrez ce terme plus tard. Les routeurs étaient déjà une option populaire pour la gestion de l'état dans notre application React. Alors pourquoi la boîte à outils expurgée est-elle nécessaire ? Avec la boîte à outils redact, il y avait tellement de code nécessaire pour le configurer, afin d'optimiser ce niveau de base. Et donc trop de code de plaque chauffante, ce qui rend notre code, nettoyons le tout efficacement. De plus, trop de paquets doivent être installés pour créer une application évolutive. Avec le redox traditionnel, nous avions l'habitude d'écrire des actions et des réducteurs dans un fichier séparé. Et cela devient de plus en plus complexe lorsque notre application vous aide à relever ce défi, caviarder a fourni une boîte à outils de lecture. La trousse à outils Redact est une meilleure approche pour se débarrasser de la logique. ensemble, le lecteur doit examiner sa période de réduction et de développement en incluant le lecteur Corbett rédaction de bons paragraphes qu' ils pensent être remplis pour construire une application native. outils redact permet donc aux développeurs d' écrire du code Redux simple et propre. Il s'agit donc d'une boîte à outils Redact et de la raison pour laquelle nous l'utilisons avec React. J'espère donc que vous comprenez maintenant ce terme sophistiqué qui est un ensemble d'outils inclus dans la batterie. Il s'agit donc de boîte à outils. Maintenant, comprenons que ce lecteur a l'air bien avec un scénario de base. Supposons que nous devions créer une application de compteur. Nous devons gérer qu'il y a encore cinq. Je vais vous montrer l'approche traditionnelle avec la réduction traditionnelle. Nous lisons donc généralement le réducteur et l'accident dans un fichier séparé. Comme vous pouvez le voir ici, nous avons x et dot js dans lesquels nous avons deux x dix pour incrémenter la valeur du compteur ou décrémenter la valeur du compteur et introduire un fichier dot js, nous avons une logique pour incrémenter un valeur de compteur ou décrémentez la valeur de compteur de la Thêta. Cariviration traditionnelle. Supposons maintenant que nous voyons comment nous approchons avec le lecteur pour avoir l'air bien. Dans l'outil de rédaction, nous pourrions réécrire notre réducteur et agir dans le même fichier. Vous pouvez constater que nous avons écrit notre action au réducteur sous la tranche Créer une tranche via l'approche Toolkit. Et vous pouvez rendre le code beaucoup plus concept en utilisant create. Le réducteur et moi pouvons écrire comme ça sous le live en voyant ce code, définir une grille avec lui et l' action devenir plus propre. Il a des données à regarder. Il n'est plus nécessaire d' utiliser l'instruction switch pour gérer l'action avec le producteur correspondant. Et une autre chose que vous pourriez avoir, remarquez ici, nous avons maintenant directement muté la valeur dans la fonction réducteur au lieu de renvoyer une nouvelle valeur à mettre à jour. Cela s'est effectivement produit parce que l'outil de rédaction pouvait utiliser la bibliothèque qui permettait d'écrire la mutation logiquement, réduisant. Il s'agit de la boîte à outils du lecteur avec le scénario de base. 4. Comprendre la question RTK: Comprenons maintenant ce qu'est la requête RTK. Rtk interroge soit un outil puissant de récupération de données n outil de suivi. Il est principalement utilisé pour récupérer le serveur de données com et son cache, les données en vue d'une utilisation future. Et ici, il est également mentionné qu'il est conçu pour simplifier les cas courants chargement de données dans une application Web, éliminant vous-même le créneau de récupération et de mise en cache des données d' écriture manuscrite. Ici, nous n'avons pas besoin d' écrire la logique manuellement, charger, de lancer notre partie d'erreur chaque fois que nous devons faire une demande d'API. En général, que s'est-il passé ? Articulate Query s' occupera de toutes ces tâches derrière les coulisses. Dans l'ensemble, la requête d'article a fourni un puissant jeu d'outils permettant définir la couche d'interface API pour notre application. Et vous n'avez pas besoin d'installer un package supplémentaire pour travailler avec la requête d'article, car la requête Article est construite en haut de l'autre API du package Reader Toolkit. Vous n'avez donc pas besoin d'installer une requête d' article supplémentaire dans votre application. Voyons maintenant ce que l'APA, y compris le fichier de requête RTK de scientifiques pour créer une API. Creative PI est donc le cœur de la fonctionnalité de requête d'article qui vous permet de définir un ensemble de points de terminaison. Décrivez comment récupérer les données d'une série de terminaux, y compris la configuration de la façon de transformer ces données. Et dans la plupart des cas, nous devrions l'utiliser une fois par. Dans l'ensemble, dans l'AV créative, nous définissons un point de terminaison différent, que vous pouvez appeler une série de points de terminaison. Il s'agit ici de la créativité. Parlons maintenant de la requête de base. Requête basée sur la foi. Il s'agit d'une petite enveloppe autour de la forme. Pour simplifier la demande. Inside est rempli de requête, définira l'URL de base de notre API. Parlons maintenant du fournisseur d'API du fournisseur d' API qui peut être utilisé comme fournisseur si vous n'avez pas de réduction stockée. Si nous ne l'avons pas stocké dans votre application. Vous pouvez donc utiliser ce fournisseur d'API. Dans ce cours, nous n' allons pas suivre cette approche. Nous suivrons l'approche traditionnelle. Donc, fondamentalement, nous amenons le fournisseur de bibliothèque React Redact et nous enveloppons notre composant d'application avec le fournisseur et nous transmettons notre composant restauré au composant de l'application. Cet APA a fourni une approche que nous n'allons pas utiliser dans ce cours. Maintenant, parlons du dernier qui est l' utilitaire d'écoute configuré utilisé pour permettre la recherche sur em et réfléchir à la reconnexion que nous avons ici. Il s'agit de la requête d'article. 5. Configuration du projet: Les gars, nous allons maintenant mettre en place notre projet React. Je vais utiliser le modèle TypeScript. Nous allons donc copier cette commande ici. Et maintenant, je vais dans mon répertoire. Ici. Je vais ouvrir une invite de commande et collons cette commande. Et je vais changer le nom de l'application. J'ai donc un trait d'union RTK courant. Appuyez sur Entrée. Il faudra environ deux à trois minutes pour installer toute la dépendance nécessaire. Je serai de retour 12 toute la dépendance qui se fait dire survivre. Notre projet est maintenant créé. Et j'ai déjà ouvert ce projet dans Visual Studio Code. Allons d'abord dans le code VS et ouvrons le fichier package.json. Voyons ce que nous avons dans notre fichier package.json. Vous pouvez donc constater que nous avons déjà éliminé une boîte à outils et un paquet Dxdt Redux car nous avons utilisé cette commande pour créer notre projet React. Si vous utilisez cette commande, vous n'avez pas besoin d'installer manuellement la boîte à outils du lecteur et de réagir ydx. C'est pourquoi j'ai utilisé cette commande pour créer notre projet React. Nous avons obtenu notre boîte à outils réduct et notre ensemble d'indices cardiaques. Maintenant, que doit-on faire ? Jusqu'ici ? Je vais faire un petit nettoyage ici. Nous n'avons donc pas besoin de dossier de fonctionnalités pour ce projet. Retirons celui-ci. Nous n'avons pas non plus besoin de ce dossier d'application. Supposons également que celui-ci soit supprimé. Un fichier TSX App Dot. Ce que nous devons faire, je vais supprimer tous ces contenus indésirables qui ne sont pas nécessaires à notre projet. Retirons celui-ci. Gardons cette direction. Comme si je n'aimais pas la requête RTK. Disons que je bouge tout ça. Supprimons également le fichier de test. Et un fichier détaillé ou TSX. Blush pour commenter cette ligne de code. Et j'ai également laissé commenter celui-ci. Nous allons le décommenter plus tard une fois que nous aurons configuré notre outil de rédaction, la grille de cette obligation, et commenterons également cette ligne d'importation et cette ligne importante car plus tard va nécessiter avant de faire npm, installer quelques paquets, je vais dans le répertoire et je vais installer un paquet comme React, routeur vers le bas. Et je vais aussi appeler réactif, car nous allons également utiliser la notification de couple dans ce projet. Donc, l'une ou l'autre méthode d'erreur, notre message de succès nous allons d'abord installer ces deux paquets. Pendant ce temps, je vais créer un fichier db.json car nous allons utiliser le serveur JSON dans ce projet. Créons le fichier db.json dans le répertoire racine. Ici, je vais payer des données. Je viens donc de peindre quelques données initiales pour que nous puissions commencer nos travaux. Et vous pouvez également créer les données à partir de l'urine. Vous devez injecter un nom, vous allez contacter un ID. Pour exécuter ce serveur JSON, nous devons écrire un script dans notre fichier package.json. Je vais choisir un script ici. Vous voyez le script requis pour exécuter notre serveur JSON. Jason cérébral va tourner sur 5 000 ports. Voyons si notre programme d'installation de paquets n'est pas. Donc, notre paquet est devenu grand. Maintenant, faisons-le ici et je vais également supprimer les publicités JSON Server. Eh bien, c'est notre répertoire de projets et je vais ajouter une invite de commande supplémentaire ici. Et je vais faire ici et le serveur. Nous pouvons accéder à cette ressource sur cette URL. Nous allons donc copier cette URL. Par erreur. Scott annule. Redémarrons ce serveur Jetsons. Nous pouvons accéder à cette ressource sur cette URL. Nous allons donc copier celle-ci. Allons dans le navigateur. Vous pouvez voir que nous sommes en mesure d'afficher toutes les données que nous avons dans notre fichier et db.json. Voici donc nos données initiales que j' ai mises dans mon fichier db.json. Il s'agit de nos données initiales affichées dans notre navigateur sur cette URL. 6. Structure: Maintenant, je vais rassembler assis ou projeter. Je vais créer quelques dossiers ici. Dossier Je vais avoir des pages. Le prochain dossier que nous allons avoir omniprésent. Dossier suivant, nous allons avoir un modèle car nous utilisons ici TypeScript. Nous devons donc créer un modèle pour ces données de contact. Maintenant, nous allons faire une visite sous la source. Créons donc ici si pour point D, pas JS, parce que nous utilisons TypeScript, donc il pourrait s'agir de TSX. Ici, vous obtiendrez une erreur. Jusqu'à présent. Maintenant, ce que nous pouvons faire ici, exporter, const store. Nous pouvons donner la barre d'erreur à votre journal de points de console. Maintenant, nous allons supprimer cela plus tard. Maintenant, ce que je vais faire, je vais rejeter cette route. Je vais donc créer des fichiers ici. l'ai ajouté, je vais créer édité obtenu THF. Ici, nous allons utiliser même fichier pour ajouter le nouveau contenu ou mettre à jour le contact sortant. Pour cela, l'a ajouté. Nous allons également avoir un fichier CSS pour ce cas, donc je l'ai ajouté point CHS. la page suivante, nous allons avoir la maison dans laquelle nous allons afficher tous les contacts dans un composant de table. Pour cela également, nous allons utiliser un fichier CSS. Donc à la maison point CSS. La dernière page que nous allons avoir en pleine page dans laquelle nous allons afficher un seul contact. Pour cela également, nous allons utiliser le fichier CSS info dot css. Et pour l'instant, je vais simplement générer un extrait réactif ici. Et je vais juste donner un titre parce que je vais rejeter dans notre fichier app.js. Générons également cet extrait de code ici. Il sera chez lui. Et nous allons également générer un extrait dans notre fichier txt point d'entrée. Il sera complet. Allons d'abord dans notre fichier app.js, que je vais enregistrer toute cette route à partir du routeur React vers le bas. Nous devons apporter un composant en haut à gauche. Nous avons besoin ici de routes, de routes, de navigateur, de routeur, et supprimons celui-ci. Et ici, je vais utiliser le routeur de navigateur. Les itinéraires sur lesquels je vais rejeter toute la route de la sécheresse seront le chemin de la maison. Nous utilisons la sécheresse annuelle, bien que nous n'ayons pas besoin de fournir le mot-clé exact. Nous utilisons donc ici la version mise à jour du routeur React vers le bas. Vous pouvez voir que dans notre paquet ou fichier JSON réagit avec le Dr Dom est devenu amer à la vergence. Vous allez voir que nous n'utilisons pas non plus Switch ici. Nous utilisons des itinéraires et ici ce ne sera pas un composant, ce sera l'élément. Nous pouvons apporter notre code VS à domicile importer automatiquement ce composant pour moi. Copions ça deux fois. Il s'agit du contexte Ajouter, ajouter. Nous allons apporter le composant ajouté. Maintenant, celui-ci sera l'option Modifier le contact. Nous allons lire le contexte et, en fonction de l'ID, nous allons utiliser le même composant, mais nous mettrons à jour le contact éjecteur. Au cours de la durée de vie, nous allons avoir une page de saisie dans laquelle nous pourrons voir les détails du contact unique. Il sera impliqué. Et nous allons être le seul contact. Il sera basé sur la pièce d'identité. Ici. Nous allons apporter le composant info. Vérifions dans le navigateur si tous ces éléments ont été routés, rejetés ou non. Allons dans le navigateur. Vous pouvez voir cette route d'origine appelée détecteur. Très mauvais au contact. Ils ont dit tout surjectif, vérifions l'édition du contact. Dans le cas où nous avons contacté, nous avons face à leur carte d'identité. Il affichera donc la même page car nous utilisons la même page avant d'ajouter le nouveau contenu ou de mettre à jour le contenu existant. Maintenant, vérifions également les informations en cas de faux. Nous allons donc fournir la pièce d'identité. Ils ont également été rejetés. Nous avons réussi à rejeter notre ancienne route dans cette application. 7. Configuration de la requête RTK: Nous allons maintenant commencer à travailler sur notre requête RTK. Comme vous pouvez le constater, dans notre fichier db.json, nous avons déjà quelques données initiales. Je vais écrire une requête pour faire face à toutes les données que nous avons dans notre fichier db.json. Je vais créer un fichier ici et un dossier de récolte. Le nom du fichier sera comme des contextes, APA dot TSX. Dans ce fichier, nous allons créer une série de points de terminaison à l'aide de créer une API à partir de la boîte à outils. Et nous devons aller à Query, puis réagir. Et nous devons apporter une API de création et album basé sur la foi dans lequel nous allons fournir notre URL de base. Et nous devons également créer un modèle ici. Donc, ce sera comme le modèle de point de contact, point ts. Dans ce contexte, je vais créer une interface pour notre contact. Vous pouvez constater que notre contenu comporte un identifiant, nom, un e-mail et un contact. Aller à ce fichier contextuel API point txt. Ici. Apportons cette interface à partir de notre dossier de modèles. Contact. Maintenant, nous allons créer notre série de points de terminaison avec l'API de création d'album , d'exportation, de contacts. Nous allons utiliser votre API. Ici. Je vais réduire son chemin. Cela est obligatoire car nous devons connecter ce service à notre code. Nous pouvons vous fournir uniquement une API Context de pièce réducteur. Ici, nous allons avoir notre couplage de base dans lequel nous allons spécifier notre URL de base. Et la requête basée sur la foi de Thaddeus. Notre URL de base, http localhost. 5 mille. Après cela, nous allons créer une haine envers les terminaux. Nous allons utiliser votre modèle. Après ça. Nous allons créer notre requête ici. Requête par points dans les contextes. Ici. Nous allons récupérer notre requête « all » sous forme de zone d'objet. Nous devons fournir ce modèle. Et nous devons spécifier cette zone parce que notre, notre contacté si tournée dans un tableau d' objets dans notre fichier JSON point de base de données. Vous pouvez le voir ici. C'est pourquoi je l'ai divisé. Le deuxième argument sera le câblé parce que nous ne passons rien à l'argument. Il sera câblé. À l'intérieur de cela, nous allons écrire une requête. Et nous y voilà. Veuillez spécifier notre point de terminaison. Il s'agira de contact. Cette requête expose essentiellement un genou. J'espère que nous pourrons obtenir ce crochet de genou comme ça. À partir de notre API de contacts. Le crochet de genou sera comme une requête de contextes énormes. Quel que soit le nom que vous allez vous donner, vous allez dévoiler un nouveau crochet comme ça. Voyons si vous donnez ici les données. Maintenant, notre nouveau crochet va devenir les États-Unis. Utilisez la requête de données, d'accord ? C'est à vous de choisir quel que soit le nom que vous allez donner. La requête sera donc modifiée. Il va maintenant utiliser une requête de contextes. J'espère que vous obtenez mon point de vue ici. Nous avons maintenant terminé notre première requête, qui est responsable de la récupération des données que nous avons sur notre serveur JSON. Nous devons configurer notre boutique. Supprimons donc ce morceau de code et nous allons l' apporter configuré dans notre boîte à outils. Store donc configuré. Nous devons également apporter cette API contextuelle, dossier de service, cette API de contacts. Ici, nous allons configurer. Notre exportation est stockée, équivaut à configurer le magasin. Ici, je vais m'en servir. C'est le chemin du réducteur de points de contextes api. Je dois spécifier le chemin du réducteur dans nos contextes fichier api dot txt afin qu'il puisse être connecté à nos contextes historiques api dot reducer. Et ici, je vais aussi utiliser le middleware, le middleware. Et je vais utiliser le middleware par défaut. Bon défaut, le milieu. Bon middleware par défaut. Conquis. Et nous allons convertir notre API de contact. Avec Middleware. Nous en avons fini avec la configuration du magasin. Allons maintenant dans le fichier txt du point d' index. Et nous pouvons simplement ne pas commenter tous les traitements importants et celui-ci aussi, celui du fournisseur. Nous sommes en train de tracer le chemin de if torr. Maintenant, il se trouve dans le dossier source, nous pouvons donc spécifier l' espace par ce chemin. Nous pouvons maintenant vérifier que nous avons configuré avec succès notre boîte à outils réduct ou non. Passons au navigateur. Allons sur la page d'accueil. Nous allons ouvrir notre outil de réduction de profondeur. Voyons si c'est l'état. Maintenant, vous pouvez voir que nous avons obtenu cette requête est une mutation fournie et des indices. Et que lorsque nous avons configuré avec succès notre boîte à outils de réduction dans cette application React. 8. Obtenir des données à l'aide de la requête RTK: Nous allons maintenant afficher tous les contextes que nous avons dans notre fichier db.json dans un composant de table. Passons donc au code VS. Vous pouvez donc voir que j'ai déjà des données dans notre fichier db.json. Donc, d'abord, je vais afficher les données ce composant de table dans le fichier home.html. Nous allons le faire à partir de React 5k. Apportons un effet américain. Nous devons également apporter le mode lien, React routeur dom. Après cela, nous aurons également besoin de toasts. Réacteur de démonstration. Apportons celui-là aussi. Nous allons également apporter ce fichier CSS. Alors importez chez vous, pas CSS. Je vais payer le code CSS pour ce fichier. Ne vous inquiétez pas de tout ce code CSS car j'ai déjà à ce fichier CSS à cette conférence. Vous pouvez trouver ce fichier CSS dans cette conférence elle-même. Revenons à ce fichier home.html. Maintenant, ce que nous devons faire, nous allons utiliser la requête de contact pour récupérer les données que nous avons dans notre fichier db.json. Utilisez la requête de contact. Vous pouvez voir que nous sommes appelés importer automatiquement celui-ci. Maintenant, que doit-on faire une fois que le serveur de base de données est mis en place progressivement, donc notre auditeur présentera dans les données. Vous pouvez voir que dans ces données, nous allons avoir toutes les données que nous avons dans notre fichier db.json. Maintenant, vous pouvez également attirer d'autres biens. Vous pouvez également apporter un chargement similaire. En chargeant, vous pouvez également utiliser ici chaque commutation. Vous pouvez voir que cette requête est fournie dans des propriétés différentes, comme plus facile à chaque pitch réussi. Vous pouvez utiliser celui-ci. Et nous allons utiliser uniquement les données qui chargent une partie d'erreur également. Selon votre commodité, vous pouvez également utiliser d'autres propriétés si vous le souhaitez, mais je vais utiliser uniquement les trois propriétés de cette énorme requête de contextes. Nous avons maintenant toutes les données. Nous devons maintenant afficher les données dans un composant de table. Retirons celui-ci. Je vais donner une année de carrelage Atlantis. Donnons ici la marge supérieure de 100 pixels. Après cela, je vais avoir un lien. Fondamentalement, il ne se dirigera jamais vers la page de contact de tête. Contact. Ensuite, nous allons avoir un bouton avec le nom de la classe. Ajoutez la valeur de l'enveloppe avec le contact d'ajout. Maintenant, après ce lien, nous allons faire quelques pauses. Ensuite, nous allons avoir une table avec la table de style de nom de classe. Maintenant, cette table échoue si la table est incorrecte, il s'agira donc d'une table comme celle-ci. Maintenant, à l'intérieur, nous allons avoir la tête de table en premier, troisième table, nous allons avoir une rangée de table. Ensuite, nous allons avoir la tête de table. La première colonne sera l'ID. Nous pouvons vous donner une tuile comme un centre de longueur, une ligne, un centre. Et je vais faire quelques copies de cette ligne de code. Cela deviendra nom, e-mail, contact avec l' action dans laquelle nous pouvons effectuer une opération de suppression, c'est une requête RTK. Maintenant, après cette tête en T, mettons en forme celle-ci. Donc, après ce niveau, nous aurons notre corps T. Dans le corps, nous allons afficher données que nous avons dans notre fichier db.json. Donc la carte de points de données, la carte de points de données. Nous pouvons avoir un article. Cela peut être logique. Nous utilisons ici TypeScript, donc nous devons fournir celui-ci. Sinon, vous obtiendrez une erreur. L'index sera également l'ennemi. Maintenant, après cela, nous allons être fidèles. Renvoie la ligne du tableau. Nous devons définir la clé ici. ID de point d'article. À l'intérieur de la ligne du tableau. Nous allons avoir la première tête de table d'édition de photos uniquement. Nous pouvons vous donner une ligne de portée. Ici, nous allons utiliser index plus un car, en profondeur, ils ont commencé à 0. Nous allons donc augmenter l'indice de façon éthique plus un. Donc ce ne sera pas une pièce d'identité, vous pouvez donner ici le numéro. Il ne devrait pas s'agir d'IID. Et après cela, que devons-nous faire ? Maintenant ? Nous allons avoir les données de notre table à l'intérieur et nous pourrons afficher le nom de notre article. Je vais copier quelques fois. Ce type de tableau, cela enverra un contact par e-mail dans la dernière colonne, dans laquelle nous avons une action. Cette action nous allons avoir trois boutons pour effectuer l'opération, supprimer l'opération et les données de l'intervalle d'opération V. Nous allons avoir le lien ici. Et vous devez en fournir deux ici. Nous voulions naviguer vers la page d'édition. Prenons d'abord la route. Nous avons ajouté un contact, puis Modifier le contact, contact, puis le dollar, l'ID de point d'article. Après cela, nous allons vers l'habitat. Ensuite, nous allons garder le nom de la classe ici, beauté et la beauté et l'éditer. Maintenant, après ce bouton, nous allons avoir un bouton supplémentaire pour effectuer l'opération de suppression. Donc bouton avec le nom de la classe, btn, btn tiret Lily. bouton Evaluer sera le bouton Supprimer. Nous allons bientôt définir la méthode OnClick ici également. Commençons par définir le bouton. Nous allons maintenant disposer d' un bouton d'affichage qui va naviguer vers une seule page de contact. Il aura également un bouton avec le nom de classe, btn, btn, vue tiret. La valeur d'un bouton correspond à la vue. Nous allons naviguer vers la page d'informations. Infos. Nous pouvons spécifier ici le dollar. Ici, nous devons spécifier l'ID. Nous allons également consulter la page de contact unique. Avec les informations uniquement. Allons dans le fichier home.html. Et nous pouvons en vérifier cinq, où nos données sont affichées ou non dans le composant de table. Vous pouvez maintenant constater que nous sommes en mesure de trier les données dans un composant de table. Nous avons un nom, un e-mail, un contact et une action. Maintenant, nous allons également utiliser ce chargement. Nous pouvons donc utiliser ici la lumière est le chargement est vrai. Que nous allons montrer certaines méthodes comme le chargement. Bon, allons dans le navigateur et nous pouvons également vérifier celui-ci. Rechargeons donc cette application. Maintenant, vous pouvez voir qu' elle un bref moment, on reçoit ce chargement. OK. 9. Gestion des erreurs: Utilisons également celui-ci aussi une erreur. Jusqu'à présent, je vais utiliser l'effet américain ici. Utilisons un effet énorme. Ici. Je vais tracer le théâtre indépendant à cet effet énorme que si nous avons une erreur quelconque. Nous pouvons vous donner des méthodes comme des toasts, comme quelque chose. Nous pouvons également prendre celui-ci, qu'il fonctionne ou non. Alors, ce que je vais faire maintenant, passons au fichier CSS de points de l' API Content. Et ici, nous pouvons simplement modifier celle-ci. Nous allons donc modifier celle-ci. Prenons celui-là. Allons dans le navigateur. Rafraîchissez celui-ci. Nous n'obtiendrons rien. Laissez la console enregistrer celle-ci. En fait, nous obtenons une erreur de journal de console. Que l'on coupe quoi que ce soit ou non. Allons dans le navigateur, rafraîchissons celui-ci. Vous pouvez donc voir que nous avons un objet et que nous avons le statut chaque fois que nous ne recevons pas la notification car nous n'avons pas configuré notre réacteur actif haut dans le fichier app dot txt. Nous devons donc configurer ce réacteur. Ensuite, seuls nous pouvons voir la notification. Faisons cela d'abord, je vais juste choisir les deux lignes de déclaration d'importation liées au réacteur. Et nous pouvons utiliser le conteneur. Allons dans le navigateur. Maintenant, vous pouvez voir que nous avons eu cette méthode comme si quelque chose s'est mal passé. Nous avons également goûté celui-ci. Maintenant, disons que nous renverrons nos changements ici. Ce sera des contextes. Allons dans le navigateur. Maintenant, tout semble bien. La prochaine chose que nous allons travailler pour ajouter le contact, cliquez sur Ajouter du contenu. Ensuite, nous allons être une composante mortelle de la ferme solaire ici, dans laquelle soit peut fournir le contact, nom, l'e-mail et le contact. Nous allons donc le faire dans la vidéo suivante. 10. Écrire une requête POST RTK: Donc, afin d'ajouter un nouveau contexte temporel, je vais écrire une requête ici. Je vais donc écrire une requête comme au contact. Et ici, nous allons écrire notre modèle constructeur, mutation de point constructeur puisque nous ajoutons une nouvelle donnée. Ici, nous devons écrire une mutation. Voici ce que nous pouvons faire ici, le premier argument sera l'objet, car nous allons envoyer un contact sous forme d'objet. Et ensuite, notre contact. Après cela, ce que nous devons faire ici. Ensuite, contactez. Nous allons recevoir un contact de notre composant. Ensuite, nous devons spécifier l'URL. L'URL un peu de contexte seulement méthode que nous avons avec PHP. Jusqu'à présent, l'ajout d'une nouvelle méthode de contact les mettra à la fois. Ensuite, corps, corps, nous allons envoyer le contexte que nous recevons. Nous avons payé pour l'un ou l'autre des contacts. Ici. Maintenant, nous allons exposer un nouveau crochet ici. Nous allons écrire un nouveau crochet comme une utilisation lors d'une mutation de contact. Nous avons terminé la partie requête liée à ajout d'un nouveau contact dans notre fichier JSON. 11. Composant des formulaires: Nous devons maintenant créer un composant de formulaire dans ce fichier txt de point ID ajouté. Faisons donc celui de React, je vais apporter un énorme effet d'utilisation de l'état. De React, routeur dom. Nous devons apporter le para américain et utiliser navigation. Nous demanderons par parenthèse plus tard une fois que nous aurons effectué l'opération de mise à jour. Maintenant, nous avons également besoin que les jeunes naviguent pour naviguer vers la maison après avoir ajouté un nouveau contact. Il est également nécessaire. Apportons aussi les orteils. Nous allons imprimer le toast. Apportons également ce fichier DHS pour cette page. ai donc ajouté point CSS. Je vais choisir le code CSS ici et ce fichier CSS. Et ne vous inquiétez pas les gars, j'ai déjà joint un fichier CSS à cette conférence pour que vous puissiez l'obtenir à partir de là. Commençons par travailler sur notre composant de formulaire. Je vais donc définir un élément d'état initial ou d'état. Au départ. Nom, e-mail et contact. Donnons votre nom. Doit être dans un e-mail mastic avec empathie. contact, qui sera l'impétigo. Maintenant, je vais définir un état, la valeur des coûts. Set. Valeur. Habituellement, état. Je vais passer cet état initial ici. Maintenant, je peux prendre toutes ces valeurs de notre valeur de forme. Nous pouvons faire des taxons comme le nom, l' e-mail et le contact. Et nous devons également, le cadre de nos efforts naviguer dans une variable de navigation, la sélectionner également. La chose fondamentale que nous avons faite ici. Maintenant, que doit-on faire en premier ? Je vais commencer par travailler sur notre composant Formulaire. Supprimons celui-ci, décide de marquer. Je vais vous proposer un style en ligne. C'est encore une fois, la marge, le top 100 pixels. Je vais avoir ici. Ici, je vais biper quelqu'un qui raconte. Encore une fois, il y a une mince ligne révélatrice. Je m'y oppose sur la photo. Cette façon ou le composant de formulaire sera au milieu. Maintenant, après cela, nous allons avoir une étiquette qui sera comme un nom. Car ce sera le nom. Nous allons avoir InputField. Dans ce cas, nous allons avoir un ID de type. Nom. Le nom ne sera que le nom. L'espace réservé sera comme un nom. Ensuite, nous pourrons donner votre nom. Et nous n' aurons aucun changement. Dépendez aussi de celui-là. L'entrée de la poignée change. Définissons celle-ci. Gérer le retour des étrangers de changement d'entrée. Définissons également le handle soumettre, effectuer la soumission, gérer la soumission. Nous pouvons utiliser Handle Summit ici. En cours de soumission. Soumettre. Les deux fonctions recevront un événement. Nous allons travailler plus tard sur cette fonction. Maintenant, je vais copier cette entrée quelques fois dans notre e-mail et notre contact. Cela deviendra désormais un e-mail. Il s'agit de l'e-mail. L'ID e-mail sera envoyé par e-mail, nom sera l'e-mail. Peut vous donner des e-mails similaires évalués avec l'e-mail et l'entrée lumineuse pour le contact disponible. Contact. Cela deviendra un contact. Ce sera le seul numéro. Laissez-nous vous donner un numéro de type. Deviendra contact, le nom deviendra contact. Ici, il sera en contact. Numéro. La valeur deviendra contact. Nous avons deux avertissements ici. Donc, puisque nous utilisons TypeScript, vous pouvez donc en donner n'importe quel, d'accord. Allons donc dans le navigateur et vérifions si notre composant de batterie de serveurs s'affiche ou non. Notre composant de formulaire est donc affiché ici. Nous avons maintenant un bouton ici. Ajoutons donc ce bouton également. ce qui concerne Credit InputField, nous allons ajouter ce bouton. type d'entrée sera le sommet. Et nous allons vous donner une valeur de lumière. valeur, de la valeur soit comme. Allons dans le navigateur. Maintenant, vous pouvez voir que nous avons également notre bouton. Notre formule est donc prête maintenant. 12. Utilisez la requête POST pour ajouter des données: Maintenant, la prochaine chose que nous allons ajouter notre nouveau contact et ce fichier db.json. Nous allons donc utiliser la requête. D'abord. Commençons par travailler sur cette fonction. Gérez le changement d'entrée, détachez-le d'une cible, d'un nom et d'une valeur. Ensuite, sur la valeur. Nous pouvons étaler la valeur de la bombe. Ensuite, nous pouvons faire comme nom, valeur de colonne. Donc, manipulez l'entrée effectuée. Maintenant, travaillons sur la soumission de la poignée. Nous allons le faire, c'est empêcher la défaillance. Pour empêcher le comportement par défaut d'un navigateur. Après cela, nous allons simplement vérifier que l'utilisateur n'a pas fourni nom ou d'e-mail que nous les contactons. Je ne le veux pas à quelqu'un sous forme PDF. Dans ce cas, j'ai donc voulu modifier une méthode sous la forme des deux notifications. Nous pouvons donc vous donner une erreur de point de torche. Nous pouvons donner une méthode comme Veuillez fournir la valeur à chaque entrée. Sauvons celui-là. Et dans l'autre partie, nous allons être éthiquement, vous utilisez cette requête que nous avons créée dans notre fichier contact api dot txt. Nous devons donc faire quelque chose ici. Au sommet. Nous devons apporter cette question. Utilisez une mutation de contact. Nous avons amené ici. Maintenant, nous devons ajouter un contact. Contact. Et ce contact que nous allons utiliser ici dans notre sommet des poignées. Est-ce que la soumission a été manipulée sera la chose. Voyons énormément entendre quoi que ce soit. Après ça. On peut faire comme un contact bizarre. Ici. Nous pouvons fournir la valeur de notre formulaire, la valeur complète du formulaire. Après cela, nous pouvons accéder à la page d'accueil et nous pouvons vous envoyer un message de succès tel que le contact a été ajouté avec succès. contact a été ajouté avec succès. Maintenant, nous pouvons vérifier que celui-ci fonctionne ou non. Allons donc dans le navigateur. Rechargeons l'application. Combattons varient en fonction de la validation du champ de saisie de l'empathie. Cliquons donc sur Ajouter. Vous pouvez maintenant voir que nous avons reçu notre notification de couple. Ajoutons maintenant un contact ici. Nous allons donc vous donner un nom de lactase pour l'instant. Et puis sur gmail.com, gardons un contact. Et cliquons sur la main. Vous pouvez maintenant constater que nous sommes en mesure d' ajouter le contenu dans notre composant de table. Donc, les gars, nous avons effectué l'opération d'ajout à l'aide de la requête RTK. 13. Écriture de DELETE: Nous allons maintenant effectuer l'opération de suppression. Donc, afin de diluer un contact, nous allons d'abord écrire une requête dans un fichier contextuel API dot txt. Nous allons écrire cinq requêtes pour supprimer le contact. Après cela, nous allons avoir une autre requête comme supprimer le contact. Supprimer le contact. Nous allons créer un modèle ici. Ce sera également une mutation. Nous allons passer le premier argument ici. Il sera câblé. Train. Pourquoi nous passons une chaîne, car nous allons passer l'ID. Vous pouvez supprimer le contenu en fonction de l'ID. C'est pourquoi ce sera la corde ici. Parce que nous allons transmettre l'ID de notre composant. Écrivons votre requête. Nous allons avoir une pièce d'identité. Ici. Nous allons spécifier l'URL. Et l'URL sera comme le contexte. Nous devons spécifier l'ID ici. Et la méthode. Je vais vous donner diluer car nous effectuons l'opération de suppression. Maintenant, cela supprime à nouveau le contenu, expose le crochet du genou. Laissez le détracteur qui savait qui utilise la mutation de suppression des contextes. Maintenant, nous allons utiliser celui-ci dans notre fichier txt à point d'origine. Parce que dans le fichier home.html, nous avons notre bouton Supprimer. Nous allons avoir notre méthode onclick, que nous allons définir une méthode, light, delete, ok ? Nous pouvons transmettre l'ID de point d'article. Maintenant, nous devons définir cette fonction à l'extérieur, revenir à celle-ci. Supprimer. Et ce sera aussi une chose. Et ici, il recevra une pièce d'identité. Il ne peut en être aucun. Après ça. abord, je voulais que la fenêtre contextuelle vous confirme le message. Désolé, vous vouliez supprimer ce message. Voici quelques méthodes que je voulais afficher à l'utilisateur avant de supprimer le message. Ce sera comme un ratio que vous vouliez supprimer ce contact. Si vous cliquez sur OK, et il sera essentiellement en état d'équilibre. Ici, nous pouvons utiliser cette requête Mutation. Nous devons donc apporter notre mutation de contact de suppression d'utilisation. Nous pouvons utiliser celui-ci pour supprimer notre contact. Ce sera un contact de suppression légère. Nous pouvons utiliser ici supprimer le contact, et nous pouvons transmettre l'ID. Ici. Nous pouvons maintenir cette installation à la fois vers le succès. Contact, supprimé avec succès. Passons maintenant au projet. Que nous soyons capables de diluer le contact ou non. Laissez-nous vous référer à cette application. Supprimons le quatrième. Maintenant, cliquons sur OK. Maintenant, vous pouvez voir que nous avons appelé la méthode de contact visuel supprimée qui dit brute. Mais à partir de notre composant de table, il n'est pas supprimé. Si vous avez peur de cette application. Vous y verrez le quatrième enregistré mais supprimé maintenant de notre composant de table. Pourquoi cela se produit-il ? Parce que nous devons ajouter d' autres propriétés dans notre fichier contextuel API dot txt. Nous devons donc fournir un type de balise. Nous pouvons vous donner des types d'attaques. Ici, ce sera contact car le nom de modal est contact chaque fois que tout changement se produit dans notre contexte entier, il sera donc actualisé. Nous pouvons utiliser ce type de balise de cette façon. Dans chaque requête. Dans GitHub Query, nous allons utiliser les balises fournies. Ici. Nous pouvons passer à nouveau ce contact. En cas de mutation, nous allons avoir des balises invalidées. Ici. Nous devons utiliser une taxe invalide. Ce sera un contact. Ici aussi. Nous devons utiliser invalidate. Si des modifications se sont produites dans nos données , notre interface utilisateur sera restituée avec les données mises à jour. Essayons encore. Rechargeons cette application. Et essayons de supprimer à nouveau un mot, enregistrer. Supprimez celui-ci et cliquez sur. OK. Maintenant, vous pouvez voir que cette fois, il a été supprimé sans recharger cette application. Vous devez fournir ces balises pour voir les données mises à jour sur l'interface utilisateur. Nous avons effectué l'opération de suppression dans cette application à l' aide de notre requête de désintégration. 14. Voir la page: Nous allons maintenant afficher l'enregistrement unique en fonction de l'ID sur cette page d'informations. Faisons celui-là. Cinq, nous allons écrire une requête à ce sujet. Passons au fichier txt point de l' API de contenu. Ici, nous allons écrire une requête. Contact. Encore une fois, nous allons écrire un modèle de constructeur ici. Requête de points. L'argument factuel sera le contexte car nous allons obtenir un seul contact dans l'objet. Et le deuxième argument sera la chaîne, car nous allons passer l'ID de notre composant pour obtenir le contact unique de notre fichier db.json. Ici, nous avons dirigé la requête. Nous allons spécifier l'ID. Ajustez d'autres points de terminaison ici. Ce sera la pièce d'identité. Et nous devons également spécifier la balise fournisseur ici. Nous allons donc copier celui-ci et collons-le ici. Allons vous donner une virgule. Maintenant, ce contact va exporter le nouveau crochet. Nous pouvons définir ce nouveau crochet ici. Utilisez la requête de contact. OK. Passons maintenant au fichier info dot txt où nous allons diviser un seul détail de contact. Voici maintenant ce que nous devons faire en réagissant par Tenet pour donner effet aux États-Unis. Nous allons aussi avoir besoin ici, il a utilisé parce que nous avons besoin d'IID de notre URL, du routeur React dom. Nous devons utiliser le parallèle ainsi qu'un lien. Parce que c'est le cas, car nous allons également avoir un bouton Retour en arrière. Pour naviguer vers la page d'accueil. Faisons ressortir pour réagir. Maintenant, apportons le fichier CSS. Ce fichier Info.plist également. CSS Info point. Je vais coller le code CSS ici, ou ce fichier CSS info dot. Et un fichier CSS est déjà joint à cette conférence. Vous pouvez donc facilement découvrir ce fichier CSS et cette conférence déjà jointe. Ici, ce que nous devons faire en premier, nous allons saisir la carte d'identité. Si je reviens à notre application. Si vous cliquez sur Afficher, vous pouvez voir que nous avons ce que cet id2. Si vous avez besoin de saisir cette pièce d'identité avec l'aide de l'US para. Nous allons utiliser mieux l'utilisation. Et nous avons besoin d'Heidi. D'accord ? Après cela, nous allons utiliser cette requête de contact. Cette requête de contact pour les jeunes. Nous allons passer une pièce d'identité. Ici. Nous devons fournir un point d'exclamation. Ici. Nous allons détacher les données. Il contiendra donc un seul objet dans lequel nous aurons nos coordonnées, notre nom, notre adresse e-mail et notre contact. Nous allons également utiliser l'erreur II ici. Nous allons également utiliser l'erreur. Apportons donc celui-là aussi. La partie aride que nous allons utiliser ici à la place de notre effet jeunesse. Cet effet énorme n'a fait que tourner. Si vous avez une erreur quelconque. Nous pouvons vous donner une erreur. Nous sommes en train de vérifier. Si nous avons une erreur, alors une erreur. Et nous pouvons donner quelque chose de méthylate, quelque chose qui a mal tourné. Nous avons maintenant nos coordonnées uniques ici à l'intérieur de ces données. Ici, ce que nous pouvons faire, c'est du style. Je peux donner une certaine marge, le top tip Excel. Je vais utiliser la classe, la classe de cartes. Je vais utiliser une autre classe, l'en-tête de carte. À l'intérieur de ça. Je vais avoir une bêta, un peu de cap. Vous avez les coordonnées. Après cette balise p. Ce que nous allons avoir. Encore une fois, je vais avoir un cours de plus avec le conteneur. Et à l'intérieur, nous allons utiliser une étiquette forte. Nous allons utiliser votre pièce d'identité. Ensuite, nous allons avoir une étiquette de span, que je vais afficher l'ID. Nous avons saisi l'identifiant avec Delta, nous utilisons le modèle. Maintenant, je vais faire quelques pauses ici. Et je vais le copier plusieurs fois car nous allons également afficher le nom, l'e-mail et le contact. Cela deviendra un nom. Cela deviendra comme un nom de point de données car ces données contiendront un seul objet dans lequel elles contiendront toutes les coordonnées telles que le nom, les contextes MLN. Cela deviendra donc une donnée masculine. Plus tard, partez le mal. Le dernier deviendra contact. Contact. Sur cet oreiller, nous allons avoir notre bouton Retour en arrière. Je vais utiliser le nom de classe tn, tn. Conservez la valeur du bouton. Retournez en arrière. Nous allons utiliser Air Link. Coupons ce bouton et collez-le ici. Nous allons naviguer vers la page d'accueil. Donc, si vous cliquez sur le bouton Copier ici, nous naviguons particulièrement vers la page d'accueil. Voyons si cela fonctionne ou non. Allons donc dans le navigateur. Voyons donc ce détail de contenu. Vous pouvez maintenant voir que nous sommes en mesure de voir les coordonnées d'un seul utilisateur sur nos informations. Et si vous cliquez sur Retournez en arrière, vous n'arriverez jamais à la page d'accueil Western. Maintenant, nous en avons fini avec les coordonnées d'un seul utilisateur basé sur l'idée à l'aide de notre requête de désintégration. 15. Populer des données de formulaire: Nous allons maintenant effectuer l'opération de mise à jour. Par conséquent, si vous cliquez sur le bouton Modifier, ici, nous accéderons à la page Modifier le contact. Nous allons remplir la valeur existante dans huit champs de saisie pour le nom, l'e-mail et le contact. Et le bouton Evaluer sera également modifié de had to update. Jusqu'à présent, faisons tout ça. Ensuite, nous allons effectuer l'opération de mise à jour dans le fichier ID dot txt ajouté. Ce que nous devons faire ici, je vais utiliser param avec l'aide de vous est parallèle. Nous allons obtenir nos idées à partir de notre URL. Après cela, ce que nous devons faire en premier, notre travail consiste à renseigner les données dans chaque champ de saisie respectif. Je vais avoir un état ici appelé mode Édition. Mode. Elle sera initialement fausse. Maintenant, nous allons avoir un effet énorme ici. Effet d'utilisation. L'effet d'utilisation ne s'exécute qu'une fois que nous avons l'ID et une fois que vous avez les données. Ici, nous allons utiliser cette requête pour obtenir le poids détaillé du contact du doigt sur l'ID afin de le renseigner dans le champ de saisie respectif. Ici, dans l'édition a obtenu LE fichier. Ce que nous devons faire. Nous allons donc utiliser cette requête également. Utilisez la requête de contact. Et nous allons obtenir des données. Apportons également l'erreur. Cet effet énorme ne s'exécute qu'une fois que nous avons des données. Ici, nous allons vérifier si nous avons la carte d'identité. Cela signifie que les utilisateurs mettent à jour les coordonnées existantes. Dans ce cas, je voulais que le mode paysage soit vrai. Ici, nous allons vérifier si nous avons la valeur du formulaire d'ensemble de données. Je vais simplement étaler les données car ces données auront un seul objet qui contiendra la valeur comme nom, e-mail et contact. Il imprime donc cette valeur afin d' insérer la valeur hésitante dans son portefeuille respectif. Maintenant, dans cette condition, ce que nous allons faire en mode d'édition statistique à fausse valeur à notre état initial. Utilisons également un mot, effet jeunesse. Cet effet énorme avec l' Italie se produira si vous avez une erreur. Ici. Nous pouvons vérifier si vous avez une erreur. Nous allons également fournir une pièce d'identité. On peut donner ici du méthylate, un point torché. Quelque chose s'est mal passé. En cas de mise à jour, nous ne prenons que cette partie d'erreur. Nous pouvons le donner comme si quelque chose s'est mal passé car en cas d' ajout de nouveaux contextes, vous n'obtiendrez pas d'identification. allons d'abord vérifier si nous sommes en mesure de remplir la valeur existante. Et ici, nous avons une erreur. Ici, avec l'Italie, nous devons fournir la pièce d'identité. C'est pourquoi nous obtenons cette erreur. Nous pouvons utiliser celui-ci après cette ligne. D'accord ? Allons d'abord dans le projet et voyons si nous sommes en mesure d' y insérer la valeur sortante indépendamment et de le mettre rempli ou non. Vous pouvez maintenant voir que nous sommes en mesure de publier la valeur existante dans chaque champ de saisie respectif. Revenons en arrière. Cliquons sur cet enregistrement d'une seconde. Il fonctionne. 16. Mise à jour avec la requête RTK: Maintenant, afin de mettre à jour les coordonnées existantes. Nous devons donc écrire une requête ici dans notre contexte, fichier txt plus lourd. Ici. Ce que nous devons faire ici, je vais juste couvrir celui-ci. Restons ici. Ce sera comme si la méthode de contact mise à jour sera la sortie. Et ici, nous allons recevoir un contact. Et la seconde sera la chaîne car nous allons mettre à jour le contenu en fonction de l'ID. Ici. Ce que je peux faire a besoin d' identité et nous pouvons réussir le taux des additifs de contenu tels que le nom, l'e-mail et le contact. Nous pouvons donc simplement vous donner un corps. Nous pouvons injecter. chemin est rouge car l'objet thread contiendra nos coordonnées mises à jour telles que le nom, l'e-mail et le contact. Ici, nous avons eu une erreur. Ici. Nous obtenons une erreur car elle sera câblée. Ce sera du contenu car nous obtenons cet objet contextuel de notre composant. Nous recevons ce contenu de notre composant qui contient un identifiant, nom, un e-mail et un contact. C'est pourquoi je ne détecte que la carte d'identité. Et je ne fais que passer le rythme des détails comme l'e-mail, nom et le contact dans le corps. Nous devons faire ce petit ajustement ici. Cette requête va à nouveau révéler un nouvel espoir. Que dv a structuré ce nouvel espoir ici, la mutation de contact de mise à jour des États-Unis. Passons maintenant au fichier txt point adéquat et il gère le sommet. Nous avons deux mis à jour particulièrement la logique existante dans handle submit avec l'Italie, nous devons mettre à jour notre logique des adjectifs. Nous avons donc décidé ici si nous sommes en mode immédiat ou non. Donc, si vous ne l'êtes plus, cela signifie que l'utilisateur ajoute un nouveau contexte. Nous pouvons découper ce code et nous pouvons payer pour déchirer. Nous devons d' abord le faire, nous devons apporter cette mutation de contact de mise à jour. Il suffit de copier celui-ci. Et il sera utilisé la mise à jour sur la mutation technologique. Et ce contact sera mis à jour. Maintenant, gérez la soumission. Nous pouvons simplement copier celui-ci. Ici. Ceci va mettre à jour le contact. Nous voulions également enregistrer le mode d'édition sur false. Après avoir mis à jour le contenu, nous ne voulions jamais nous rendre sur la page d'accueil. Nous avons également spécifié et navigué ici. Et mettons également à jour la méthode. Le contact sera géré avec succès. Maintenant, nous devons également modifier la valeur du bouton en fonction du mode d'édition. Si vous êtes en mode édition. Mais n'importe qui avec la mise à jour et en cas d'ajout, ce sera l'annonce. Allons dans le navigateur. Rafraîchissez cette obligation. Maintenant, cliquons sur Modifier. Nous allons maintenant mettre à jour ce nom. Et ça va devenir comme James Gunn. Et cliquons sur Mettre à jour. Vous pouvez maintenant constater que nous sommes en mesure de mettre à jour les coordonnées existantes. Nous avons effectué l'opération de mise à jour avec la requête Hair Pop RTK et cette application React. Il est maintenant temps d' effectuer toutes les opérations une par une afin de ne rien briser. Ajoutons à nouveau un nouveau contact. Et cette fois, je vais vous donner le tarif gmail.com. Cliquez sur Ajouter, nouveau contact ajouté avec succès dans notre composant de table. Passons en revue celle-ci. Nous sommes donc également en mesure de visualiser le contenu. Maintenant, modifions les coordonnées existantes. Alors, cliquons dessus. Maintenant, je vais vous donner un journaliste. Mettons également à jour l'e-mail. Signalé. Cliquons sur la mise à jour. Nous sommes également en mesure d'effectuer l'opération de mise à jour. Effectuons maintenant l'opération de suppression. Je vais donc supprimer le deuxième enregistrement. Cliquez sur Supprimer. Cliquons sur OK. Nous sommes également en mesure de supprimer la table de sortie d'enregistrement par rapport à la requête articulée ci-dessus. 17. Démonstration du projet 2: Dans cette section, nous allons créer une application de recettes alimentaires l' aide d'une requête RTK dans React. Et nous utiliserons le modèle TypeScript dans cette section pour créer cette application de recettes culinaires. À l'aide de cette application, vous allez comprendre comment travailler avec des API tierces. En ce qui concerne l'article, nous utiliserons l' API tierce d' Edmund pour supprimer les différentes recettes de notre interface graphique. Ainsi, dans cette application, vous pouvez rechercher une recette différente. Essayons donc de rechercher le TP avec du pain. Nous allons donc cliquer sur Rechercher. Vous pouvez donc voir que nous obtenons la recette liée au pain. Et si vous êtes un peu soucieux de votre santé, vous pouvez sélectionner ici les valeurs les plus basses. Encore une fois. Notre résultat sera filtré en fonction de cette catégorie de santé. Et si vous cliquez sur une fiche de recette, un modal apparaîtra dans lequel j'ai inclus plus de détails sur cette recette particulière. Voici donc l' application globale que nous allons créer dans cette section à l'aide d'une requête Arctic. Dans React. Dans la vidéo suivante, nous allons configurer l' API tierce d'oedema. Et après cela, nous commencerons à mettre en place des projets. Je vous verrai donc dans la prochaine vidéo. 18. Projet 2 Configurer l'API de la recette Edamam: Configurons notre API de recettes alimentaires sur le site Web d'administration. Assurez-vous donc de créer un compte. Et une fois que vous aurez créé un compte, vous arriverez sur cette page. Et pour cela, nous utiliserons 31. Avec trois, nous ne pourrons faire que dix demandes par minute, ce qui est suffisant pour créer cette application de recettes culinaires. Donc, sous document, nous obtiendrons notre API de recherche de recettes. Nous utilisons donc ici une ancienne version. Faisons donc défiler la page vers le bas et nous avons besoin de cet APA. Copions donc le TPA et enregistrez-le quelque part dans le Bloc-notes. Nous avons maintenant besoin d'un identifiant d'application et d'une clé d'application. Nous devons donc cliquer sur Obtenir la clé API. Ensuite, vous devez cliquer sur cette vue dans l'API de recherche de recettes. Il s'agit donc de notre identifiant d'application et de notre application k. Alors, stockons également ces informations par paire. 19. Configurer le projet 2: Nous allons maintenant commencer à travailler sur la configuration de notre projet. Donc, pour travailler sur notre recette de localisation, nous allons utiliser un modèle de script de type redox. Copions donc cette commande. Et je vais le coller dans mon terminal. Et je vais juste changer le nom de mon application ici. Ce sera la recette RTK, d'accord ? Et appuyons sur Entrée. Il faudra environ deux à 3 minutes pour configurer notre projet React avec un modèle de script de type redox. Attendons donc la mise en place des projets. La configuration de notre projet s'est achevée au fil de l'année. Alors d'abord, entrons dans ce répertoire. C'est notre recette de décadence. Avant de créer une balise d'image, nous devons installer un package pour notre projet. Dans ce projet, nous allons donc utiliser le Material Design Booster Five. Copions donc celui-ci. Et ouvrons ce terminal. Je vais le peindre ici. Et appuyons sur Entrée. Il installera le package. Notre paquet a donc reçu une étoile. Allons-y et payons-moi pour commencer. Et j'ai déjà ouvert ce projet dans mon code Visual Studio. Passons donc au VS Code. Donc, comme vous pouvez le voir, le projet est ouvert dans mon VS Code. Et nous avons encore du code standard car nous avons créé ce projet en utilisant un modèle de script de type redox. Passons donc à ce fichier package.json. Comme vous pouvez le constater, lors de la création un projet avec le modèle Redact TypeScript, nous n'avons pas besoin de lire le package Toolkit nous n'avons pas non plus besoin d'installer React redux. Nous n'avons donc pas besoin d'installer ces deux packages à l'aide de TypeScript. Alors les gars, passons maintenant au navigateur car notre serveur de développement est en cours d'exécution, donc nous n'avons aucun problème. Voyons donc dans le navigateur. Nous avons donc acheté ce contenu et ce contenu avec l'Italie. Il s'affiche à partir de notre fichier texte ab.js. Nous avons donc ce contenu qui s' affiche sur notre navigateur. Et explorons également ces deux dossiers. Nous avons donc acheté une fonctionnalité et j' ai un dossier à l'intérieur , nous l'avons restauré. Nous avons donc une configuration de base savoir si nous avons des crochets ici. Et nous avons un dossier de fonctionnalités dans lequel nous avons un dossier de contenu. Ce dossier de contenu n' est pas obligatoire. Supprimons donc tout ce dossier, fuged. Le dossier de contenu n' était pas obligatoire. Passons maintenant au navigateur. Alors maintenant, notre candidature et nous avons fait une pause ici. Nous devons donc encore faire un peu de nettoyage. Passons donc au fichier CSS store point. Nous n'avons pas besoin de celui-ci. Supprimons celui-ci. Supprimons celui-ci. Et sauvegardons d'abord ce fichier. Passons au fichier app.js. Et je vais supprimer tout notre contenu. Nous pouvons vous donner une recette. Pour l'instant. Supposons que supprimiez celui-ci, car nous avons supprimé tout ce dossier. Localement non plus requis. Nous pouvons également supprimer cette déclaration importante de React. Sauvegardons ce fichier. Et passons au navigateur. Maintenant, nous n'avons aucun problème notre application puisque nous utilisons Material Design Bootstrap dans ce projet. Nous devons donc apporter le fichier CSS pour la conception matérielle Bootstrap. Alors, que pouvons-nous faire pour cela ? Nous pouvons donc copier cette déclaration importante et la coller ici. D'accord ? Nous pouvons donc voir les modifications dans notre navigateur. Passons donc au navigateur. Vous pouvez maintenant voir que nous avons une rubrique différente. Ainsi, lorsque nous aurons configuré avec succès un Material Design Book Club dans ce projet. 20. Structure de dossier du projet 2: Alors maintenant, nous allons le faire pour la structure. Nous allons donc avoir des dossiers et des fichiers dans cette application. Nous allons avoir un dossier contenant des composants dans lesquels nous allons avoir des fichiers tels que model, non TFX, spinner dot t sets. Et nous allons avoir un composant de carte. Je vais donc simplement générer un extrait dans chaque composant. l'autre cas, nous aurons une erreur dans le navigateur car nous utilisons TypeScript dans ce projet. Envoyons-lui donc également un extrait pour ce composant. Après cela, supprimons ce dossier de fonctionnalités. Au lieu de cela, nous allons avoir des services pour cela. Parce que nous allons créer un point de terminaison. Et à l'intérieur, nous allons avoir ces points STP, APA. 21. Projet 2 Configurer la requête Store et RTK: Configurons donc d'abord une requête Arctic dans ce projet. Nous devons donc apporter ici un peu d'APA de notre boîte à outils. Donc, de la rédaction à la version liquide, nous devons passer à la requête. Réagissez, d'accord ? Et nous devons créer une requête APA et Fitch bit. Maintenant, je vais prendre ma clé API et mon identifiant d'application que nous avons obtenus d'Adam. Voici donc la clé d'API et l'identifiant d'application que nous avons générés sur notre élément. Maintenant, nous devons créer un point de terminaison ici. Alors exportez ce NCP, APA. Créez APA. Nous sommes partie réductrice prédéfinie car nous devons connecter cette recette APA à notre restauration. Nous devons donc définir la partie réductrice ici. Ensuite, nous avons prédéfini la requête de base de notre API d'administration. Nous voulons donc utiliser votre requête basée sur la foi et nous devons fournir l'URL de base. L'URL sera donc HTTPS, apa.admin.com. Après cela, nous aurons un point final. Et nous allons écrire un modèle de construction. Ici. Nous allons avoir des recettes. Mutation du lot Builder. Si vous connaissez un peu les requêtes RTK, nous utilisons normalement cette mutation par points pour effectuer des sondages ou des demandes de suppression. Mais comme ici, nous devons obtenir la recette en fonction de notre requête de recherche et de notre état de santé. Nous avons donc besoin d'une variété ou d'une mutation, car nous avons besoin de recevoir des informations de recherche, de requête et de santé de la part de notre composant. Nous devons donc écrire ici mutation. Donc, à l'intérieur de cela, nous allons avoir une requête et nous allons recevoir une requête, c' est-à-dire une requête de recherche. Ensuite, nous pourrons revenir. Nous devons donc spécifier ici l'URL. Je vais donc juste copier celui-ci. Il s'agit donc de notre URL de base, que nous avons déjà spécifiée dans la requête de base de phages. OK, collons-le ici. Et nous allons recevoir ce composant de requête Tamar. Nous pouvons donc utiliser cette requête, d'accord ? Et la santé. Nous allons également recevoir uniquement de notre composant. Remplaçons donc celui-ci. Formatons donc celui-ci. Et cette recette va révéler New Hope. Donc, ce que nous pouvons encore faire, exporter la recette APA. Cette recette va exposer votre nouveau crochet afin que nous puissions l'essayer ici. Sauvegardons donc ce fichier. Et nous devons travailler sur notre fichier CSS store point. Alors voilà, supprimons celui-ci. Nous n'avons pas besoin d'importer un meilleur auditeur à partir de notre boîte à outils. Donc, à partir de la boîte à outils de rédaction, nous devons accéder à dist, à dossier et à requête. Et nous devons apporter un écouteur de configuration. Et maintenant, nous allons vous proposer notre recette APA, issue de notre service pour le plomb. Passons au site de la série. Et nous devons apporter une nouvelle recette d' AV. Nous devons maintenant connecter notre réducteur à cette recette APA. Ils voient donc une partie réductrice PABA chez STP, un réducteur de points APA. Après cela, nous devons également utiliser des intergiciels ici. Nous allons donc utiliser le middleware par défaut. Très bon intergiciel par défaut. Ce middleware par défaut. Et nous devons ajouter cet APA STP à notre intergiciel. Formatons ceci 15. Et ici, nous pouvons supprimer celui-ci. D'accord ? Et nous pouvons configurer l'écouteur, le stocker, pas l'expédier. D'accord. Sauvegardons ce fichier. Nous avons donc configuré if tour dans ce projet. Ouvrons donc le terminal, que nous ayons un problème ou non. Nous n'avons donc aucun problème pour le moment. Passons donc au navigateur. Donc, ici aussi, nous n' avons aucun problème. Vérifions si notre requête Decay est correctement configurée ou non. Je vais donc ouvrir un outil de développement. Et vous pouvez voir que nous obtenons quelque chose dans notre outil réducteur. Ça gagne. Nous avons correctement configuré notre requête Decay dans cette application React. Nous pouvons donc commencer à travailler sur notre alimentation. Cette application SAP. 22. Projet 2 Navbar et champ d'entrée de recherche: Je vais d'abord afficher la recette dans un composant de carte. Je vais donc commencer à travailler sur ce fichier txt point de l'application. Nous devons donc ici apporter quelques crochets de notre React. De React. Faisons en sorte que cela soit utilisé. Et généralement, déclarez. Et nous devons également apporter la requête que nous avons écrite dans le dossier Services. Nous devons donc nous adresser à ces services. Et nous devons poser cette question. Utilisez Get Recipe Mutation. Ensuite, nous devons intégrer certains composants de notre base de conception matérielle. Depuis MDB, réagissez UHC. Nous avons besoin de MDB, d'une entrée MDB, d' une MDB, d'un NAB, mais je suis de marque Davy Container, MDB, Navbar. D'accord. Après cela, nous allons définir une partie de l'État. D'accord ? Nous allons donc avoir une valeur de barre d'état. Donc, en gros, nous définissons un état, notre troisième onde d'entrée ici. Ensuite, nous devons placer cette valeur dans un autre diktat, c'est-à-dire une requête. Tu viens de le faire. Et cela sera saisi. Nous ferons également preuve d'empathie. Nous devons maintenant définir la santé. Il s'agit donc essentiellement d' une catégorie classée. Ce sera réglé en santé. Et par défaut, nous allons essentiellement afficher un végétalien, d'accord ? Et nous allons également avoir chaque état pour notre modèle. Définissons. Et nous allons également devoir afficher une seule recette dans un modèle. Nous allons donc utiliser un objet. Donc, fondamentalement, nous sommes prêts à transformer cette recette en objet. Définissons donc ici dans l'objet de la partie D. Maintenant, supprimons celui-ci. Maintenant, nous n'en avons plus besoin. Et ici, je vais juste donner un style en ligne. Et attribuons automatiquement votre marge. Donnons un rembourrage de dix pixels. Je vais vous donner une largeur maximale, milliers de pixels et aligner le contenu. Il sera centré. Maintenant, dans ce div, nous allons avoir une barre de navigation MDB. Et ce sera une couleur de fond claire. Nous pouvons également donner de la lumière. Ensuite, nous aurons un conteneur MDB qui sera chargé. Ensuite, nous aurons mon DVD, ma marque de barre de navigation. Nous pouvons lui donner un nom de classe, un centre de texte. C'est donc un nom de classe Bootstrap que je suis en train de donner. Ensuite, nous pouvons avoir une balise h5 avec le nom de classe f, w. J'ai utilisé un trait d'union vide et gras. Et je vais utiliser ici des emoji. Je vais donc utiliser votre hamburger, hamburger après cette recette. C'est le titre de cette application. Sauvegardons celui-ci et voyons dans le navigateur à quoi il ressemble. Maintenant, nous avons terminé notre belle barre de navigation. Continuons à travailler sur l'autre partie. Donc, après cette barre de navigation, nous allons avoir le div, le nom de la classe, rho, d, le trait d'union, l'alignement des éléments, centre et le tiret md aussi. Et à l'intérieur de ce div, je vais avoir un champ de saisie. D'accord ? Et ici, donnons une classe supérieure qui sera niveau automatique. Donnons la recette. Continuons à taper du texte. Ensuite, nous aurons une valeur que nous avons déjà définie. Ensuite, nous allons utiliser la méthode de l'étain. Définissons donc également celui-ci. Cela va donc recevoir la valeur cible du point d' événement. Après ce champ de saisie, il nous reste un jour. Le nom de la classe Ball auto. Et nous allons avoir un seul bouton. Donc MDB, beauté et recherche. D'accord ? Nous définirons la méthode onclick plus tard. 23. Projet 2 List Recettes dans une carte: Maintenant, nous devons essentiellement présenter recette différente dans un composant de carte. Nous allons donc utiliser cette requête pour obtenir toute la recette. Utilisons donc cette requête. Donc, les inconvénients utilisent get recipe, mutation. Et nous devons transmettre cette requête et cette santé. Nous devons donc également apporter cette recette. Donc, d'abord, nous allons apporter cela, obtenir les recettes. Ensuite, nous allons explorer la texture, un élément différent de l'état généré par notre requête d'article. Vous pouvez voir que nous avons une lumière différente. Soit c'est le chargement, soit tous ces états différents vont le générer par notre requête Decay. C'est pourquoi on l'appelle puissant outil d'ajustement des données. Nous n'avons donc besoin que de chaque chargement et de chaque donnée. À l'intérieur de ces données, il contiendra toute notre recette. Après cela, ce que nous devons faire. Nous avons donc prédéfini le moment où vous défectez. Et cet énorme effet. Il fonctionnera chaque fois que nous la recette ou que nous modifierons la catégorie de santé. Donc, dans les deux cas, nous devons exécuter cette requête. D'accord ? Je vais donc définir une méthode pour l'instant. Alors, obtenez une recette de nourriture. Définissons donc cette méthode en dessous de cet énorme effet. Alors coûtez et obtenez la recette. Et ce sera possible parce que nous allons effectuer des opérations asynchrones. Vous pouvez donc voir que dans get recipe, nous faisons la demande d'API. Et ici, nous devons également définir une autre chose, à savoir la méthode. Vous avez donc cette mallette si je vais bien. Laissez-nous donc également spécifier la méthode. Après ça. On peut juste faire comme un poids, obtenir les recettes. Et nous devons transmettre la requête et la santé sous forme d' objet, car nous recevons ici uniquement sous forme d'objet. Vous devez donc passer par là. Après ça. Ce que nous devons faire. Nous pouvons donc vérifier celui-ci, s'il fonctionne ou non. Allons donc dans le navigateur et ouvrons le taux de mortalité. Vous pouvez voir que notre promesse, Dieu l'accomplit ici. Et voici une recette. Vous pouvez donc voir que les données internes dont nous disposons sont toutes de l'ATP. Données internes. Vous devez accéder aux notes et aux résultats internes. Vous aurez une recette différente et différente. Nous devons donc cibler de cette façon. Passons donc au code VS. Vous pouvez donc voir ici que nous avons déjà des données de structure détaillées. Nous devons simplement cibler de cette façon, les points de données et les résultats internes. Nous avons une recette très différente. Maintenant, pour afficher la recette, nous devons travailler sur notre composant cartonné. Commençons donc à travailler sur ce composant de carte. Ensuite, nous afficherons toujours notre recette depuis la réactivation de MDB. Nous devons apporter un élément issu de la conception des matériaux. Nous devons apporter mon DVD, ma colonne, mon groupe MDB, pas Beauty et mon groupe. Groupe de cartes MDB. MDB, image de la carte MDB et corps de la carte IMDB. D'accord ? Ensuite, nous devons apporter quelques ajustements à ce composant fonctionnel car nous utilisons TypeScript. Nous devons donc écrire de cette façon, composant fonctionnel React Dot. Et ici, nous avons des plaques pay-to-play pour jouer à la fonction de Rob. Nous allons définir celui-ci en dehors de ce composant. Et il va recevoir une recette d'accessoires. Ainsi, chaque fois que nous passons une sonde à un composant fonctionnel dans un TypeScript, nous devons écrire notre composant fonctionnel de cette façon. Et en dehors de ce composant fonctionnel, nous devons définir notre interface. Sinon, nous aurons un rouge. Définissons cette fonction rapide. Et nous allons recevoir une recette. Donc, ça pourrait être n'importe , après ça, ce que nous devons faire. Nous pouvons donc supprimer celui-ci. Et ici, ce sera la couleur MDB, le corps de la carte MDB. Ensuite, je vais utiliser la voiture MDB. Et ici, je vais utiliser le nom de classe Bootstrap. Il s'agira d'un trait d'union de bord, d' tiret md à d'un trait d'union d'un flux SM. Ensuite, nous allons avoir une image de la carte MDB. Source interne. Je vais être spécifié sur l'image STP. Donc, image à points de la recette. En alternative, nous pouvons nous attendre à des niveaux de rémunération. La recette n'est donc pas étiquetée. La pétition sera en tête de liste. Stylistes. Donne-moi un pointeur de caractère. D'accord ? Nous allons avoir la méthode OnClick. Nous allons donc définir celui-ci plus tard. Donc, pour l'instant, supprimons celui-ci. Et après cela, nous aurons le corps de la carte MDB. Et ici, je vais utiliser la balise h5 avec le nom de la classe, w et bold. Ici. Nous allons avoir le niveau de la recette. D'accord ? Formatons donc celui-ci. Et ici, ce seront les groupes de cartes MDB, le corps de la carte. Utilisons donc ici le groupe de cartes MDB. Sauvegardons ce fichier. Vous pouvez donc voir cet outil détaillé, nous avons une image de niveau. Nous utilisons donc cette propriété dans notre composant de carte. Minimisons donc celui-ci. Et je vais utiliser ce composant de carte dans le fichier txt de notre application. Donc, après cette division, nous allons avoir la ligne MDB. D'accord ? Et je vais utiliser ici le nom de la classe. ligne appelle vie, et une ligne appelle trait d'union, md, trait d'union trois, G, trait d'union quatre. Et nous avons fixé des cibles à atteindre. Comme vous pouvez le constater plus en profondeur, nous avons une recette différente et différente. Nous devons cibler comme ça des données, des points. Et j'utilise ici une expression ternaire. Alors pourquoi est-ce que j'utilise celui-ci ? Parce que si vous ne l'utilisez pas, vous devez donc écrire de cette façon, points de données, alors vous pourrez utiliser les points de données, les points de carte. D'accord ? Donc, leur citoyen, j'utilise cette expression ternaire. Donc, les données, les points, les cartes et les éléments, n'importe quel point. Parce que nous utilisons ici TypeScript, nous devons donc spécifier celui-ci. Et utilisons le composant de votre carte que nous avons créé. code soviétique importe automatiquement le composant de la carte pour moi. Et ici, nous devons spécifier les accessoires de la recette. Donc, article, point, recette. Nous devons donner de cette façon. Sauvegardons ce fichier. Et vérifions celui-ci s'il fonctionne ou non. Passons donc au navigateur. Vous pouvez maintenant voir que nous sommes en mesure de rendre des recettes différentes et différentes dans notre composant de carte. D'accord. 24. Projet 2 Recette de recherche et Spinner: Maintenant, ce que nous devons faire, implémenter une fonctionnalité de recherche. Nous avons donc créé le bouton Rechercher, mais nous n'avons essayé aucune logique pour exécuter la fonctionnalité de recherche. Nous allons donc avoir ici une méthode onclick. Ensuite, définissons celui-ci en dehors du descripteur de la clause de retour. D'accord ? Donc, ici, nous pouvons faire une requête et vous pouvez transmettre la valeur. Et après avoir cliqué sur le bouton de recherche, nous voulons qu'il efface le champ de saisie de recherche. Nous pouvons faire comme ajuster la valeur à la saisie t. Maintenant, nous pouvons exécuter une fonctionnalité de recherche dans notre application. Passons donc au navigateur. Et je vais le mettre au SAP avec le pain. Alors, tapons ici le pain. Cliquez sur Rechercher. Vous pouvez maintenant voir que nous sommes en mesure de préparer une recette de poisson à base de pain. D'accord, la fonctionnalité d'état est donc également implémentée dans cette application. Revenons maintenant au code VS. Et je vais utiliser, le chargement est également en thêta. Je vais donc travailler sur notre composant spinner. Voici donc ce que nous devons faire. Nous devons donc ici apporter un composant de notre matériau Bootstrap, à savoir qu'il s'agit d'une imprimante, c' est-à-dire que la MDB est une cacahuète. Et à l'intérieur, nous allons avoir un div avec le nom de classe text, md hyphen five. Et nous allons utiliser ici le spinner MDB. Et ici, nous allons avoir une balise span avec le nom de la classe visuellement masqué. D'accord ? Et ici, je vais vous donner le chargement à trois portes. Et dans MDB Spinner, nous devons passer une sonde qui est le nom de la classe Grow. Donnons ici un trait d'union vide. Gardons un style intégré. Je vais en donner trois ici. Je vais leur donner celui-ci. Et nous pouvons supprimer celui-ci. Nous n'en avons pas besoin. Utilisons ce composant dans notre fichier .txt app dot. Et nous voici en train de charger. Donc, ce que nous pouvons faire, vérifier si le chargement est vrai. Ensuite, dans ce cas, je voulais peindre, accord, donc VS Code importe automatiquement ce composant spinner pour moi. Passons maintenant au navigateur. Illustrons celui-ci. Vous pouvez donc voir que nous avons acheté une centrifugeuse sur notre obligation. Maintenant, la prochaine étape. 25. Projet 2 Obtenez des recettes sur la catégorie santé: Nous allons l'implémenter dans la liste déroulante ici. Nous allons donc avoir une seule santé et une liste déroulante, qui contiendra des options permettant de filtrer en fonction de différentes catégories de santé. Travaillons donc là-dessus. Nous allons donc avoir cette catégorie de santé dans notre liste déroulante. Créons donc une liste déroulante ici. Donc, ici, nous allons avoir liste déroulante et nous n' allons pas une liste déroulante et nous n' allons pas utiliser de composant déroulant, matière première que Bootstrap, nous allons utiliser du HTML normal et nous allons utiliser chaque tuile avec du CSS. D'accord ? Nous allons donc avoir ici un div avec le nom de classe appelé auto. Ce sera automatique. Et à l'intérieur de cela, je vais utiliser Select. Et nous allons avoir un nom de classe, une catégorie et une liste déroulante. Et nous allons en avoir un sur la méthode Jane. Il est bien géré. Et nous pouvons transmettre votre valeur. À l'intérieur de ça. Nous allons avoir des options. Ensuite, nous allons cartographier cette option que nous avons définie, nos stratégies, que nous avons définies à l'extérieur, ont une fonction. Utilisons donc l' adoption et l'index. Utilisons ensuite votre balise d'option. Donc, ici, je vais utiliser ce n'est pas un niveau. Et utilisons ici la valeur. Les valeurs des options sont donc les suivantes : elles seront exprimées par jour. Nous allons vous donner une clé. Et sauvons celui-ci. Et définissons et double-cliquons. En dehors de ce retour, vous pouvez gérer les clics. Et cela bénéficiera d'un événement. Et nous pouvons correspondre à la valeur cible du point E. Après cela, nous allons indexer le fichier CSS à points. Nous devons donc espacer selon le style de cette liste déroulante de catégories. Je vais donc simplement coller le style de ce nom de classe. C'est donc révélateur que je vais m'inscrire à notre liste déroulante. Alors, sauvegardons celui-ci. Et passons au navigateur. Passons maintenant à celui-ci. Vous pouvez maintenant voir que notre style s'applique à la liste déroulante. Sélectionnez à nouveau la recette de pain ici. Nous effectuons maintenant des recherches avec SAP sur le pain. Et ici, nous allons sélectionner la catégorie de santé. Je vais donc sélectionner ici un serveur bas. Alors maintenant, cette fois, nous allons obtenir une recette de résultats différente liée au pain. Vous pouvez donc constater que nous avons maintenant des résultats différents en fonction de notre catégorie de santé. Cela est donc également implémenté dans cette application React. 26. Détail de la recette du projet 2 sur Modal: Enfin, nous devons travailler sur notre composante modale. Donc, chaque fois que vous cliquez sur une carte compétente. Nous allons donc afficher des informations supplémentaires sur cette recette particulière. Travaillons donc sur ce composant du modèle. Nous devons donc revenir à VS Code. Et nous avons déjà créé un modèle compétent en la matière. Tu peux le voir. Donc, dans ce composant du modèle, nous devons intégrer un composant issu de la conception matérielle Bootstrap. Donc, les composants Vineet tels que MDB, dialogue modale MDB, le contenu du modèle MDB, l'en-tête modal MDB. Ensuite, nous avons également besoin de butane MDB. Modèle IMDB Muddy et modèle MDB. OK, formatons celui-ci. Ensuite, nous devons définir une interface pour les instructions que nous allons recevoir part de notre composant d'application. Définissons donc également celui-ci. Nous avons donc bien fait de vous , alors nous allons bénéficier de la densité. C'est donc une fonction que j'ai écrite comme ceci où il s'agit d'un objet. Tu peux lui en donner si tu le souhaites. Donc n'importe lequel, donc ce sera booléen. D'accord ? Ensuite, nous devons modifier ce composant fonctionnel car nous travaillons avec les groupes de tâches. Ce sera donc React point FC. Et ici, nous devons transmettre cette fonction proxy. Cela active la fonction, et elle va basculer entre recette, affichage et réglage. Alors maintenant, dans le terme, nous allons avoir un fragment. Et ici, nous allons avoir le modèle IMDB. Ici, nous allons être juifs. Donc, une fois que ce véritable modèle sera ouvert, d'accord ? Et nous devons également définir la journée d'hier. Donc, donc, dialogue modal MDB. Ensuite, nous aurons le contenu modal MDB. Ensuite, nous aurons un en-tête modal MDB. Ensuite, nous avons la balise h5 avec le nom de classe f, w, tiret en gras. Ce sera donc le niveau, le niveau de la recette. Après ça. Après cette balise de style, nous allons avoir MDB, BTN. D'accord ? Donc, ici, je vais donner ClassName btn, hyphen close, Taylor, aucun. En un clic. Nous allons encore donner. Donc, après cet en-tête , nous aurons le corps du modèle MDB. Pourtant, je vais utiliser la balise image. D'accord ? Donc, pensées, source interne, nous allons avoir la recette du labyrinthe Doherty. Alternative intérieure. Nous allons avoir disparu du niveau DOD. Ensuite, nous aurons le div avec le nom de la classe et l'iPhone. Ensuite, nous aurons une balise h5 avec le nom de la classe, le texte, le début, le tiret F, W, le gras, le texte, le trait d'union masqué. Et donnons un style en ligne. C'est du flotteur. Gauche. À l'intérieur, c'est cinq fois. Nous allons avoir un niveau similaire à celui des calories. D'accord ? Après cela, nous aurons à nouveau une balise h5 avec le nom de la classe, que j'ai fini de démarrer. Et ici, nous allons résoudre le nombre de calories. Donc des recettes, pas des galeries. Et nous pouvons également donner l'unité. Ici. Jusqu'à présent, calories, ce sera le cas. T a L. Après ce tag h5, nous aurons un ingrédient. Je vais juste copier celui-ci. Je vais le coller ici. Et supprimons ce style. Nous n'avons pas besoin de ce style. Ingrédient de la barre. Ingrédients. Ingrédients essentiellement contenus dans un tableau. Nous allons donc utiliser la carte ici. Donc, si vous regardez ça, c'est notre domaine, d'accord ? Donc, à l'intérieur de la mutation, nous devons passer à ceci. Passons à Data Flow pour appuyer. Vous trouverez les ingrédients d'une gamme d' ingrédients spécifique à Recipe Insight. OK, nous avons donc ici la gamme d'ingrédients, qui est Array. C'est pourquoi je vais utiliser la carte ci-dessous pour afficher l'ingrédient de cette recette en particulier. Nous devons donc cibler de cette façon, la recette, l'ingrédient, la ligne, la carte à points, l'article. Ça peut être n'importe lequel. Ensuite, nous allons utiliser yet lift avec le nom de la classe, texte que j'ai fourni commence. Et ici, nous allons avoir notre article. Ensuite, après le corps, nous en aurons un. Donc modèle IMDB. Donc, pour cela, nous allons avoir un bouton de fermeture. Donc MDB, beauté et proximité. Et voici la couleur, je vais donner au pays. Et OnClick. Nous allons utiliser des boutons. Nous devons donc définir cette fonction dans notre composant parent, savoir le fichier texte ab.js. Travaillons maintenant sur le reste de la pièce dans notre fichier app.js. Voici donc ce que nous devons faire. Ainsi, chaque fois que vous cliquez sur une carte, un modal apparaît. En dehors du retour, nous devons définir une fonction. Et dedans, je vais passer au STP. D'accord ? Nous pouvons donc simplement nous y opposer, quelle que soit la valeur que nous avons pour l'État. Nous pouvons donc définir ici chez SAP tout ce que nous recevons. Donc, en gros, nous stockons des objets dans des objets. Cette recette contient donc des détails différents sur une recette en particulier, comme les ingrédients au niveau de l'image. D'accord, nous stockons donc trois objets. Nous avons défini cette recette comme un objet vide. Nous explorons tout ce qui se trouve dans un objet. Donc, cette bascule, que nous pouvons utiliser ici. Donc, dans la carte, nous devons passer ce bouton. Alors, d'accord, passons maintenant à ce composant. Et là aussi, nous devons définir cela. OK, donc je vais juste copier celui-ci parce que ce sera pareil. Et ici, nous devons passer Toggle. Voici donc OnClick, ce que nous pouvons faire. Donc, en un clic, nous pouvons utiliser ce bouton pour transmettre cette recette. OK, enregistrons ce fichier et passons au fichier texte ab.js. Maintenant, une fois que cette apparence argentée est devenue réalité, nous devons ouvrir le modèle. Donc, après cette ligne MDB, nous devons essentiellement définir ce composant modal. Donc, si c'est vrai, alors nous avons Bu, composant du modèle d'affichage. Apportons donc ce modèle compétent que nous avons créé. Nous avons donc automatiquement retiré cet élément important pour moi. Et ici, nous devons passer des accessoires, comme un plateau de spectacle. Donc, comme cela vous invite et que nous l'avons déjà défini dans notre composant modèle, il s'agira ici du NCP. Et ici, nous avons également deux voies. Maintenant, enregistrons celui-ci et vérifions dans notre navigateur s'il fonctionne ou non. Actualisons donc celui-ci. Cliquons sur n'importe quel composant de la carte. Vous pouvez maintenant voir que nous sommes en mesure d'afficher plus d' informations sur cette recette particulière, comme les calories et les ingrédients. C'est donc également fait. Donc, tout fonctionne. Vous pouvez le voir là-bas. Nous avons donc créé cette application de recettes culinaires à l'aide d'une requête d' article dans React. Je vais donc ouvrir une console, que nous ayons un problème ou non dans cette application actuelle. Vous pouvez donc voir que nous avons reçu une sorte d'avertissement. Pour l' instant, nous pouvons ignorer l'avertissement. Et corrigeons ce deuxième avertissement. Je vais entrer dans mon VS Code. Et ici, nous pouvons utiliser la clé. Donc t est égal à l'indice. Sauvegardons ce fichier. Passons au navigateur. Rafraîchissez celui-ci. Maintenant, nous ne voyons pas cet avertissement lié à notre composant de carte. Et vous allez ignorer cet avertissement pour le moment. Alors fermons celui-ci. 27. Projet 2 Types de fixation: Travaillons sur le type sur lequel nous n'avons pas vraiment travaillé jusqu' à présent dans cette application. Revenons donc au VS Code. Et si je disais Amy, d'accord, pour que vous puissiez voir que dans tous ces fichiers différents, nous devons utiliser le type comme n'importe quel autre. Cela ne se produit donc pas chaque fois que nous travaillons avec le TypeScript. Vous pouvez donc voir que nous en avons utilisé ici. Nous en avons utilisé ici. Travaillons sur ce type. D'accord ? Donc, ce que je vais faire à temps partiel, c'est créer ici un dossier commun. Et je vais créer un type de fichier. D'accord ? Maintenant, si vous regardez le composant dans le point modèle TSX. Nous avons donc ici une recette. La recette doit être un objet correct, contenant des données d'image des ingrédients. D'accord, nous allons donc définir le type correspondant. Exportons donc le type. Et cela doit être un type de destinataire et le contenu de la recette, la propriété comme une étiquette. Ce sera donc une image entraînée. Ce sera également un printemps. Ensuite, nous avons une liste de calories, qui sera une gamme d'ingrédients. Gamme d'ingrédients. Cela sera ajouté et il y aura un verre. D'accord. Maintenant, sauvegardons ce fichier. Passons à ce modèle dot css. Et ici, nous pouvons apporter celui-ci. Ce sera donc au code de type STP, importez automatiquement ce type pour moi. J'ai donc repris ce type de recette de cette partie. Et ici aussi, nous avons une large saisie, n'importe quel autre type. Donc, ici, x serait le type LTP. Et donc, ce que nous pouvons faire pour cela, c'est que cela provient de notre fichier .txt de l'application. D'accord ? Voici donc ce que nous devons faire, donc React Dot Dispatch. Et ici, ce sera React.net axial et l'échec Boolean. Nous devons attribuer une valeur booléenne. D'accord ? Maintenant, ce que nous devons faire. Vous pouvez donc voir ici que nous avons reçu un avertissement. Passons à ce fichier app.js. Ici. Vous pouvez voir que nous avons reçu un avertissement ici. Alors pourquoi recevons-nous cet avertissement ? Parce que si vous revenez à ce fichier texte ab.js où il est nouveau, acceptez donc une recette comme argument. OK, donc ce que nous pouvons faire, fournir la recette. Et à partir de là, nous devons également fournir la recette même si vous fermez le modèle. Parce que maintenant, nous travaillons avec ce groupe, nous devons donc fournir la recette. Après ça. Passons à ce fichier texte ab.js. Et là, que devons-nous faire ? Nous ne pouvons donc pas écrire à nouveau comme n'importe quel autre ici, car vous travaillez avec le TypeScript. Donc, ce que nous pouvons faire ici, ce sera uniquement du type LTP. Nous devons donc revenir au type tippy depuis ce chemin, le code VS importe automatiquement celui-ci pour moi. Ici. Ce sera large, d'accord ? Et ici, nous devons simplement ne rien retourner. C'est donc la plus petite correction que je fais dans cette application liée au type. Maintenant, nous devons également travailler sur le clic sur la poignée. Ne cliquez sur rien , mais c'est une liste déroulante. Donc, ici, ce sera l'événement React Dot Change. Et ce sera un élément HTML, un élément de sélection HTML. Comme vous pouvez voir qu' ils ont été gérés plus tard, nous les avons utilisés uniquement dans une liste déroulante. D'accord, c'est pourquoi il s'agit d' un élément de sélection HTML. Maintenant, nous avons reçu un avertissement. OK, passons donc au navigateur. Maintenant, vous pouvez voir que cela signifie que les objectifs sont atteints, propriété suit le type de recette, le type d'artefact, ce problème. Ce que nous pouvons encore faire. Alors maintenant, il ne devrait pas s' agir d'un objet vide. D'accord ? Oh, ouais. Nous devons apporter ce type de recette. Le type tippy est déjà importé. Maintenant, à l'intérieur de celui-ci, nous devons définir la valeur initiale. niveau sera la chaîne saisie uniquement car tout sera initialement l'entrée D. Et l'image devrait également être prise en compte dans les taux que nous avons, donc elle sera nulle. Et nous avons les gammes d' ingrédients. Donc ça ne devrait pas être le cas, ça devrait être à une belle époque. Maintenant, cet avertissement a disparu. Et travaillons également sur cette partie, où nous avons défini un état différent et différent. Nous devons donc également mentionner le type ici. Donc, ici, ce sera une chaîne. D'accord ? C'est aussi un arbre. Il s'agit également d'une chaîne. Et celui-ci est un booléen. Sauvegardons celui-ci. Et c'est là que nous avons utilisé tout autre temps dans ce dossier. Nous en avons donc utilisé ici aussi. Pour cela, ce que nous pouvons faire indexer, nous pouvons donner ici un numéro. Et ici. Nous pouvons utiliser cette fonction. Dans un fichier modélisé ou TFX. Nous avons défini cette fonction. Nous pouvons donc importer cette interface à partir de ce fichier et l'utiliser ici. Fonction des accessoires. Je pense donc que nous devons exporter, exporter, exporter notre interface. Voyons voir, utilisez-le ici. Fonction. Nous ajoutons du code importé automatiquement celui-ci pour moi. Nous n'avons donc pas d'autre temps à consacrer à ce dossier pour l'instant. Revenons à nouveau à un fichier modélisé ou TSX. Donc, là encore, nous en avons acheté. Donc c'est le JSX, d'accord, donc ça devrait être une étrange source épithéliale. D'accord. Et utilisons également vos informations détaillées. Cela ne devrait pas être un chiffre et vous permettre d'utiliser votre clé. Dans le cas contraire, vous recevrez un avertissement. Comme si chaque enfant devait être unique. Utilisons donc votre index. Et je pense que dans le composant carte également, nous utilisons n'importe quel autre type. Nous pouvons donc ici apporter ce type de recette, type de recette sur cette voie. Et pour cela aussi, ce devrait être une recette. D'accord ? Nous sommes déjà en train de passer la recette. que soit l'endroit où nous nous trouvions, nous avons remplacé ME par le type approprié dans notre ancien fichier où nous avons utilisé n'importe quel autre type. Maintenant, revenons au navigateur et vérifions s'il fonctionne ou non. Le fait que je pense vraiment que c' est une obligation. Nous travaillons. OK, actualisons cette application. Sélectionnons n'importe quoi. D'accord ? Cela fonctionne également. L'application fonctionne normalement après avoir défini le type approprié dans notre code. C'est donc tout ce qui ressort de cette vidéo. 28. Envelopper le projet 2: Nous avons donc réussi à créer cette application de recettes culinaires à l'aide d'une requête RTK. Dans cette section, j'espère que vous avez maintenant appris à utiliser une API tierce avec une requête d'article. J'espère donc que vous avez appris quelques concepts importants liés à la requête Art K dans cette section. Merci beaucoup les gars d' avoir regardé cette section. Je continuerai à ajouter d'autres projets liés à la boîte à outils de rédaction, un article, à une requête. Dans ce cours. 29. Synthèse: Si vous regardez cette vidéo, signifie que vous avez terminé ce cours. Maintenant, je suis entièrement confiant que vous avez peu de compréhension du concept jQuery art avec React. J'espère que vous avez apprécié ce cours avec un nouveau format quantitatif et que vous avez encore quelques doutes sur quantitatif et que vous avez encore notre question liée à ce cours, alors vous pouvez toujours portefeuille pensées précieuses dans la section commentaires, Je ferai de mon mieux pour résoudre votre question. C'est ça. De ma fin, je vous verrai dans le prochain cours.