Construire une application CRUD complète React en utilisant le serveur Fausses Redux-thunk et JSON

1. Introduction: Bonjour les gars, comment ça se passe. m'appelle Michelle et j'ai plus de 50 ans d' expérience de travail que Trenton et développeur dans son industrie logicielle. Et aujourd'hui, je vais vous apprendre que comment vous pouvez intégrer le lecteur transformé en une application React et effectuer toutes les opérations de lecture avec l'aide de cadeaux et pour toujours. Alors passons à la diapositive. Donc ce que vous allez apprendre dans cette partition. Vous allez donc construire une application React à partir de sa crête. Et nous allons construire un composant React à l'aide de l'interface utilisateur matérielle. Et dans cette application React via aller sur toute l'opération actuelle avec l'aide de adjacent pour toujours. Et vous n'avez pas besoin d'écrire de code back-end pour travailler avec l'API qui est lu, supprimer, mettre à jour et créer. Donc absolument, le géocodage requis pour, pour travailler avec l'API. Dans cette application. Nous utilisons également pour gérer l'état de l'application. Et nous allons utiliser un, un middleware redex pour faire une demande d'API avec notre JSON. Alors quelles compétences sont requises pour ce cours ? Donc, vous devez avoir une compréhension de base du HTML ici et du JavaScript. Vous avez également besoin d'une compréhension de base de ES6 et il est bon d'avoir une sorte de connaissance React. Mais de toute façon, je vous expliquerai tout à partir de zéro si vous ne savez rien sur le numéro. Et c'est aussi bon d'avoir un peu de compréhension sur le redox. Mais encore une fois, je vais tout expliquer à partir de zéro. Et vous n'avez pas besoin d'expérience requise pour travailler avec le serveur JSON. Maintenant, ce qui se refroidit et la technologie que nous allons utiliser dans ce projet. Vous devez donc avoir un code Visual Studio pour écrire tout le code lié au réactif, un redex. Et en plus de cela, vous devez avoir Node installé sur votre système. Et une fois que vous aurez installé ce nœud, vous aurez accès au NPM. Donc, avec l'aide de npm, nous allons installer quelques dépendances dans notre projet. Parce que le projet d'art va également soutenir le routeur de réaction dom. Et nous allons installer cette dépendance, redox tank x ici, matériel, interface utilisateur, et routeur React, dom aussi, et Acks, oui. Si vous n'êtes pas au courant de l'excès, l'excès est nous aider à faire le HTTP 2 a et matériel. Vous, je l'ai déjà dit où le début que nous allons construire un composant dans cette application avec l'aide de matériel USO. Et nous allons fondamentalement, il écrit là-dedans, dans ce cours. C' est pourquoi j'ai utilisé l'interface utilisateur matérielle. Alors démontons l'application. Donc, nous allons effectuer toutes les opérations de lecture un par un avec un morceau et adjacent, cependant, dans notre application React. Nous allons donc explorer chaque opération de lecture un par un. Donc, indiquez l'opération la plus élevée. Conscient je suis capable de charger tout le budget de l'UE à partir du serveur JSON. Et nous ajoutons également l'accent que vous pouvez voir que nous ajoutons la collecte de données, oublier toutes les données ici du serveur. Maintenant, nous allons effectuer la deuxième opération appelée période en ajoutant le, vous entrez dans le côté adjacent d'un. Donc, je vais donner à savoir le changement dans. Et puis j'ai lu gmail.com quelque chose de numéro de contact aléatoire et l'adresse sera un échec. Et je l'admettrai en détail. Et je vais obtenir la table mise à jour ici avec la mise à jour et les données. Donc, nous avons aussi sur l'opération de création comme, comme ajouter l'UE entrer dans le adjacent pour toujours. Maintenant, l'opération suivante consiste à supprimer l'utilisateur. Donc, je vais supprimer celui-ci bonjour. Maintenant, nous sommes également en mesure de faire un supprimer les données de la table et de lire un texte et aussi être embauché afin de supprimer un élément de la table. La prochaine chose est en direct pour mettre à jour les détails. Donc je vais cliquer sur la mise à jour et je vais atterrir dans la maison idiote, ok ? Et je vais juste mettre à jour le nom ici et juste cliquer sur notre dette pour l'instant. Nous sommes également en mesure de l'opération de mise à jour avec les injections Harvard et là, vous auriez le temps. Donc je vous dois toutes les fonctionnalités avec GFF Harbor et un lecteur. 2. Comprendre Redux, Redux-thunk et son diagramme: Donc les gars, avant que je voulais commencer à écrire n'importe quel code sur React, et juste je voulais vous donner un aperçu sur le lecteur. Alors qu'est-ce qu'un redox ? Redox ? Est-il prévisible, est bon et ténor, ou une application JavaScript, c'est essentiellement gérer votre application entière, l'état, et il est couramment utilisé avec une bibliothèque appelée React ou Angular snow, trois principes suivis par un lecteur qui est une seule source de vérité est déclaré une lecture seulement. Et quels que soient les changements que nous avons faits dans chaque état, Nous utilisons votre fonction et c'est le composant de x et le réducteur est de voir. Donc, afin de mettre à jour le réducteur de statine, nous avons acyclique créer une action. Et l'action est distribuée à partir du composant et est stockée essentiellement contenir l'état entier de l'application. Et la vue n'est rien d'autre que notre composant React. Alors maintenant, nous allons comprendre ce qu'est un redox. Alors lisez f, merci. Le middleware qui vous permet d'appeler un créateur d'accent qui renvoie une fonction est à la place de l'objet action. Et cette fonction recevra la méthode d'expédition de magasin, qui est ensuite utilisée pour distribuer une action synchrone régulière à l'intérieur d' un corps de fonction si l'opération asynchrone avait été terminée. Alors pourquoi ai-je besoin de cette fois ? Parce que le middleware étend la disponibilité en magasin et vous permet d'écrire une logique qui interagit avec le magasin. Alors, quel est le pivot tang ici ? Donc un réservoir, un autre quelle partie de la fonction, mais ce n'est pas seulement n'importe quelle vieille fonction. C' est un nom spécial pour une fonction renvoyée par une autre. Et donc vous aurez plus de compréhension sur le réservoir ou une fois que nous commencerons à écrire le code dans notre application. Donc, comprenons le diagramme de flux de redox global. Donc les gars, ce diagramme de flux de données, et vous pouvez le voir ici. Donc, ici, vous pouvez voir que, à , ci-dessous, nous avons un composant. Un composant est un envoi d'une action. Et ici, l'action n'a aucune logique pour mettre à jour le terme. Et c'est juste agir comme un messager. C' est donc une portée vers le middleware. Mais ici, le milieu divers optionnels et middleware pourrait être quelque chose comme Hancock, saga. Et dans ce cours, nous utilisons la langue redex. Ensuite, il a atteint où le réducteur et mettre à jour l'échappé. Donc réducteur a essentiellement remplacé la date la plus ancienne par le nouvel état. Le tour d'image immuable. Donc, nous avons encore axe est tour où nous stockons tous les actifs de l'application et du magasin il passé l'état mis à jour que les réfs qui le plaignant. Donc, 1 cinquième après mise à jour, si cela frotte son déclencheur, le re-rendu de vos composants d'interface utilisateur. Ainsi, le composant remarquera le contenu du titulaire avec l'état mis à jour ou L0. Donc, ils disent le concept global de redex et son diagramme de flux. Et j'espère que vous comprenez ce concept de redox et que vous comprenez aussi le diagramme de flux. Et dans la vidéo suivante, nous allons réagir projet afin de commencer à travailler sur cette application. 3. Configurer le projet React: Je vais utiliser l'interface utilisateur matérielle pour enterrer ce bouton d'accueil du câble. Donc, nous allons travailler avec l'interface utilisateur matérielle et vous devez également installer Jenkins tête d'un global. J' espère donc que vous en êtes conscient. Donc, il a fourni choisir un APA taux et sans codage. Donc, vous n'avez pas besoin, donc vous n'avez pas à écrire de code pour exécuter les injections pour toujours. Tu dois juste regarder tout ça à nouveau. Donc, vous avez tous les différents npm installer moins g, JSON iRobot. Alors laissez-moi commencer à construire l'application. J' irai donc dans mon répertoire et j'ouvrirai cette panoplie chaotique. Et je vais obtenir la demande. Je vais donc donner le nom de l'obligation et le champ de texte. Et le nom de l'application sera très acteur JSON que Rudolf, le nom de l'obligation fédérale. Donc, il faudra un certain temps pour installer toutes les dépendances et je serai de retour une fois toute la dépendance si peut être désinstallée. Donc les gars, je suis de retour et il semble que tout est installé de façon dépendante. 4. Installer des paquets et JSON Server: Donc, avant de faire npm est que je vais installer quelques paquets. Alors allons dans le dossier du projet que j'ai créé, comme UD, réagissez j, puis lisez. Et avant de faire n timess commencer, je vais le stocker. Je l'ai ici comme React Reducx. J' ai donc besoin de construire cette application. Maintenant, je me suis dépêché. Puis caviardé lave lourd réservoir. Ensuite, nous avons besoin de matériel nous avec le composant de notre projet. Jusqu' à présent, ce nombre de paquets requis dans notre application pour construire une application de propagation entière dans une réaction avec j de Harvard. J' ai lu f fois middleware. Attendons l'installation. Le package est installé. Maintenant, vous devez également installer ce sculpteur JSON. J' ai donc déjà installé le serveur JSON sur ma machine. Donc, je vous montre juste comment installer le JDK dans la machine. Donc, vous devez le faire. Vous avez de la peinture sur l'injection cependant des preuves. Attendons donc l'installation du paquet. Et j'ai ouvert un projet en VS Code aussi. Donc, la décennie ouverte dans VS conseil adder. 5. Configurer le serveur JSON dans React App: Maintenant, nous devons créer une variable pour meilleur db.json militaire pour travailler avec le JSON Haraway. Et pas ici. Supprimons ceci. Nous devons créer un fichier ici. Ce sera db dot JSON et un autre fichier, point ENV fichier. Donc, nous allons obtenir le add-on aussi, point ENV fichier. Mais avec l'Italie on nous dit l'API ici. Et tu ne veux pas de celui-là, sans titre. Maintenant, nous allons commencer le développement de React, une sorte de courbe de maillage. Vous êtes dans le répertoire. Quelque chose ne va pas par réaction. Mais ils prennent le nom du dossier. Et je le ferai et Tim Star. Et pendant ce temps, le jour même qui commence, j'en ajouterai un ici. Pour vous faire commencer à Jacob pour toujours. J' ajouterai ici un dérivé de carbone. Donc, à l'intérieur d'un, à l'intérieur cette application Start est un début. Alors allons dans le code VS et ajoutons le script ici. Bien qu'il sera regarder le fichier db.json. Ils ont frappé le hilum, ce que nous avons donné ici. Et ça va courir sur la cour. Je 100 encore. Et je vais juste les coller et l'onglet média ici. Donc ils disent que les données fictives, je suis juste en train d'éditer à la place le fichier David et JSON. Donc, nous avons un enregistrement de re ici, ok, dans notre db.json, vous pouvez également lire les données dans le navigateur asic. Donc, afin de lire les données dans le navigateur, vous devez exécuter la hauteur d'un, que nous avons ajouté tout à l'heure. Donc je vais juste aller ici et je vais courir le NPM hors de nous. Et vous pouvez voir que notre matériel fonctionnant sur cette URL. Donc, je vais juste copier cette URL. Et je vais juste aller dans l'embrasure et la coller ici. Donc, c'est une utilisation plus utile maintenant. Mais vous pouvez voir quelles que soient les données dans notre db dot. Je charge dans le navigateur comme il. Et vous pouvez également lire les données mensonge si elles faux ID. Donc, vous pouvez aussi le faire. 6. Créer une structure de dossier: Alors commençons à travailler sur l'application de l'application. Donc, je vais entrer dans mon VS Code et j'ajouterai un peu plus vieux encore. Donc, je vais avoir les pages. Alors. Je vais en faire quatre. Et vous dites les pages. Et j'aurai un autre dossier appelé redox. 7. Configurer Redux et l'itinéraire: Alors faisons ça. Et tu le lèves. Dans notre obligation. Je vais créer un fichier ici, Node.js et action ici. Et puis point js. Ensuite, il y aura un nœud racine. Et à la dernière est orteil un peu plus grand. Donc d'abord, nous devons diriger le magasin. Donc, je voudrais importer des choses à partir des données, effectuer en profondeur. Nous allons donc importer à partir de redex, créer, stocker, appliquer le middleware. Ensuite, on va importer l'enregistreur, l'enregistreur. Logger pour faire glisser l'état de l'application. Et l'état suivant. Ensuite, nous devons importer. Et vous savez, nous avons aussi besoin d'une lecture en racine. Dites notre, importons la rubrique, que nous devons définir encore. Maintenant. On va l'avoir, middleware, middlewares. Et à l'intérieur, je les mettrai tous les jours. Maintenant. Je vais vérifier dans le processus JK, processus, processus point a et a, garde AN a et B, cela à Nébuleuse. Et puis pour cette lave dans la zone. Maintenant, je vais vraiment pousser l'enregistreur. Maintenant. Définit le magasin, leur stockage, mais il va créer un magasin. Vous le réduiriez. Application du middleware. Middleware à Ford par défaut, désolé, exportez le magasin par défaut. Maintenant, revenons au réducteur de racine. Donc nous avons besoin des lectures que j'ai plus tôt. Mais définissons d'abord l'état initial de base du réducteur. Vas-y. Ici, il le fera, vous nous aiderez dans chaque pilule. Je demande la première demande. Donc ce serait comme YuJa. Donc, nous allons avoir beaucoup de YuJa et travaillerons aussi avec l'angle que vous. Donc simple généralement ce sera juste sur un objet et il y aura un chargement de jambe supplémentaire. Donc, ce sera un faux. Et je vais passer la racine, pas le rotor. Donne-lui le nom comme le tien. Réduire. D' accord. Non. Je vais utiliser la fonction flèche encore. Et je vais attribuer cela à l'état initial, sera une action. Retour en arrière. Et ajoutez que maintenant, je vais juste revenir, la valeur par défaut est morte. Je pense que l'addition complexe maintenant. Et j'exporterai l'utilisateur par défaut. Maintenant. Je vais aller à la racine. Et ici, je vais combiner les trois, le réduire de la profondeur même. Donc, j'importe le combiné et il est là. Ensuite, je vais définir les cotes de route et faire aujourd'hui dire la lecture combinée expérimentale Sara. Et je vais, en fournissant la clé ici, utilisateur à accéder. Prenez l'avance pendant l'heure, vous la réduisez aussi. Donc oui, dit-il, et je suis en train d'ajouter l'eugénisme à l'éditeur UV est ici. Donc, avec l'aide de avez-vous obtenu p, je serai en mesure d'agir comme la table de page des données est stockée. Alors laissez bâbord, ne réduisez pas m. Maintenant, nous avons un rotor pour dire ici est important dans un magasin. Et laissez-moi aller à l'index, pas dans le fichier JS. Donc, dans le fichier index.js, nous avions besoin du fournisseur sur le livre React fourni directement pour poster pour fournir essentiellement l'état global de l'application. Donc, de cette façon, nous avons utilisé le fournisseur pour cette application peut accéder à un magasin d'état pour cela par son nom. Comme les fournisseurs bien qu'il fournisse l'application est adaptée à l' ensemble de notre application React et il est stocké. Maintenant, nous aurons besoin d'un routeur de navigateur ainsi que pour avoir l'application de routage tous les jours dans nos obligations. Donc, je vais aussi important de React routeur point I et je pense que nous n'avons pas installé le point de routeur de réaction o. laisser tout ce paquet, NPM installer le routeur React, dom. J' ai donc oublié d'installer l'invité Skype. Donc, pendant ce temps est l'installation, je vais juste importer le routeur React du tout. Et le paquet sera, je suis dans la comparabilité, le routeur de navigateur. Et encore une fois, je vais envelopper l'application avec eux L'autre avec notre application a maintenant la capacité de routage. Oui. Maintenant, nous avons fourni un itinéraire et un magasin dans notre application. 8. Travailler avec une table sur les page d'accueil: Alors laissez-moi commencer le PDF de largeur ici, bien que je vais le porter page d'accueil Feist, le home.html. Et j'utiliserai des extraits réactifs pour générer un n-bit. Donc si vous ne l'êtes pas, si vous n'êtes pas au courant de cela comme des extraits. Ainsi, vous pouvez installer cette tension ou réacteur redex et grok, même si cela a aidé à générer un extrait. Donc j'utilise ce texte que je peux envoyer dans mon code VS. Donnons donc non plus. Ce n'est pas seulement tout. Et je vais enregistrer cette route ici dans notre fichier app.js. Je vais déplacer ce truc et je vais importer React routeur dom, je vais importer React non seulement chose, il y a un problème. Donc je pense qu'il ne le stocke pas dans ce parc. Donc, en fait, par erreur, il est stocké dans R, donc nous devons aller dans ce dossier. Donc je peux juste aller dans ce dossier. Vous réagissez. Oui. Mais vous auriez et maintenant je vais installer la fin tout réagit routeur vers le bas. Assurez-vous que vous êtes dans ce dossier pour installer l'indépendance supplémentaire. Mais... Pendant ce temps, je vais importer le commutateur et l'itinéraire. Je vais utiliser le pitch. Ensuite, la sortie, laissez un acte. Et je vais donner le chemin que je suis maintenant à la maison. Et le composant sera la maison. Il est donc automatiquement importé. Vf Corp hydrogène kilomètre ou à importer. Alors attendons que l'itération de réaction excessive auto Dom installé dans notre obligation. Alors, allons dans le navigateur et actualisons. Maintenant, nous sommes en mesure de charger la page d'accueil. Bien qu'à partir de maintenant, qu'est-ce que je vais faire référence à l'interface utilisateur matérielle afin de construire les tables dans notre application. Donc, je vais juste aller au composant ici et juste savoir où une table de stock devrait être dans l'affichage des données. Oui. Donc voici la table et j'utilise cette table. Je vais vous montrer en utilisant cette table. Donc cinq fois seront tous ceux-là. Donc vous les gars aussi juste ouvrir ce lien et copier toute cette histoire. Et je vais coller dans mon code VS. Donc c'est à la maison. Donc j'ai mis à jour tout le fichier, ouais, je veux dire toute l'importation. Maintenant. J'ai aussi besoin de tout ce dont j'ai besoin. Donc, je vais appeler Peak. Je vais copier tout ça maintenant. Alors allons sur la page d'accueil. Je n'ai pas à copier le fait d'être embauché ici. Je vais juste copier cette chose en dehors du composant. Ok, donc j'ai de l'huile de pavot, ce truc sur le composant d'en-tête. Et puis je vais copier tout ce truc. Alors assure-toi que tu es aussi avec moi. Donc oui, je suis un truc lié. Paige a enregistré le code VS. Eh bien, je vais coller ça là-dedans et ajouter, non, je n'ai pas les données brutes. Donc je vais juste commenter celui-là. Et j'applique un peu de style mien sur mon propre carrelage. Donc je vous ai donné méchant avec 900 et marge top marché jeu de puissance, un 100. Soudain coiffer et donner mon propre et nous devons copier l'entreprise a afin d'appliquer le style. Oui. Non. Alors, et je l'ai laissé. Et juste p et puis l'URL où nous sommes en mesure de voir la table ou non. Donc, nous sommes en mesure de voir qu'ils ont beaucoup d'argent pour supprimer rangée. Dans notre cas. Ce que nous avons, nous n'avons pas de jour sans vraiment avoir de nom. Ensuite, il contactera puis le nom, e-mail, l'adresse et le dernier. Et ici, nous avons une action. Et tout devrait être la ligne standard. Donc je te donne juste un centre. Et allons dans le navigateur. Maintenant, nous avons une bonne rubrique dans la table. Et maintenant pour obtenir les données, bien qu'au départ nous avons déjà des données et leur fichier db.json, mais nous avons besoin des données dans la table. 9. Rédiger notre premier d'action et réducteur Redux pour obtenir des données d'utilisateur à p: Nous allons écrire une faction et casser. Donc je vais donner la cendre à taper ici. Encore une fois. C' est juste que tu vas bien. Et maintenant venez, venez travailler ici dans le fichier d'inactions. Je vais importer des temps. Je peux taper et je vais en donner un. Habituellement ici, je vais définir ce qu'est une action ici. Obtenir les utilisateurs. Et D Si vous aurez habituellement habitable. Cette action aura donc le budget de l'UE comme argument. Et maintenant, nous allons écrire un dividende en frais de technologie ou en fait un peu de types. Et puis tapez point. Et la charge utile sera vous. Oui. D' accord. Alors ils disent l'accent. Maintenant, nous devons écrire une extension d'accent comme la charge en direct. Vous juste et il sera l'exportation en fait aller pour le coût inférieur faire oui. Donc, avant d'écrire le répartiteur d'accent, mais assurez-vous que vous avez ajouté APA. Oui. Oh, d'abord, je vais ajouter l'API APA React app. Et l'API sera celle-ci. D' accord ? Donc, dans cette API, nous avons besoin ici. Et donc j'ai mis à jour l'environnement fortement. Donc je dois commencer avec Herbert Eye, alors. Je passerai sur ce noeud. J' ai enseigné que le développement avait environ et vraiment puiser dans cette chose que nous devons faire si vous travaillez avec la variable d'environnement. Maintenant, venez au taxane. Et pendant ce temps, je vais écrire l'accident à une fonction temporelle. Donc, il s'ouvre dans le navigateur. Donc, pendant ce temps, je vais juste écrire l'image car il faudra un certain temps pour charger dans le navigateur. Et nous avons besoin de ce kit aussi. Donc si je mets les enfants, j'importe les Acks. Oui. Maintenant, venons ici et faisons X. Oui, je l'ai fait. Et ici, je vais utiliser le processus et, ou T et V point PNG API. Après cela, je vais faire dans le, puis laisser que ce soit comme bar. Et après cela, je vais faire défaut et l'action sera posée. Obtenez l'obtenir en tant que données POME. Et je voudrais également mettre un journal de console encore que nous pouvons prendre si nous sommes en mesure d'obtenir les données de la get-go, cependant ne sont pas. Et si vous avez de l'air, alors nous allons attraper ici. Et si longtemps, pas en route. Alors maintenant, venez à ce dossier. Et ici, je vais ajouter le type K. Mais nous devons également importer les types ici. Donc je copie celui-là. Et je vais coller ici. Et les types point arrivent à encore. Et en retour, je vais juste étaler l'état. Et l'état sera à Chandon charge utile et valeur initiale, ce sera le bleu. Maintenant. Ce sera de faux ballonnements. 10. Envoyer une action pour obtenir des données de l'utilisateur sur table: Donc, nous avons monté l'action pour envoyer. Maintenant, allons dans la page d'accueil. Mais ceci dans la page d'accueil. Et à partir de là, nous allons envoyer et je peux donc apporter de React Reducx. U est sélectionné. Et tu as fait des parents, cependant. J' importe le personnel américain du silicium et de l'USDA. Et, et butez ce chemin et l'action. Et p, si nous sommes en mesure de stocker l'utilisateur peut faire queue dans le lecteur avec qui ne sont pas. Eh bien, je vais le garder sur une variable d'expédition. Et je vais utiliser un énorme effet ici. Si important pour vous à la foire, alors c'est vraiment courant. En règle générale, effectuez un appel d'API. Il a cartographié. Et nous sommes de retour pour envoyer YuJa inférieur. Donc, si nous actions m'identifions automatiquement bien que je bureau important et aussi m'assurer que c'est important comme le top. Donc oui, l'importateur, vous abaissez l'utilisateur. Nous avons donc cette épreuve, le Seigneur. Maintenant, nous sommes sur le navigateur. Il suffit de remplacer l'application. Et même le semestre prochain, si nous sommes en mesure de continuer à dire à notre narc. Et ici, nous obtenons tout l'utilisateur que nous avons dans notre fichier db.json. Donc c'est le fichier db.json et toutes les données maintenant, nous avons dans notre lettre, dites-vous ? Alors allons-y et affichez tous les détails ici. Donc ce que je vais faire, chercher l'état dans le magasin. J' ai deux unités un énorme sélecteur à l'intérieur du composant de la maison. Donc je vais être structure et je vais utiliser l'ère sanitaire. Et l'état est de prendre l'Artesia ci-dessous que vous pouvez amincir la racine réduite et l'agent réducteur. Ajout de la clé ici. Alors je vais les utiliser. Utilisateur Ted dot. Et à partir du data.txt, je vais structurer les utilisateurs. J' espère donc qu'il ne fera pas de pays et d'efforts pour faire unpair. Alors je vais juste changer celle-là. Donc je fais juste les données encore si vous avez une certaine confusion. Donc maintenant ce que je vais faire chaque année puja est tf.data et toutes les familles, ted dot data, je vais vous décrire, oui. Donc ici, je vais donner de la texture. Et voici ce que je vais faire, je vais juste commenter et décommenter. Et je le ferai, tu auras et tu pars, on n'a pas d'époque en faisant le truc. Donc je vais tout changer. Donc, ce sera plus presse-agrumes. Pour la clé. Je donne un nom de point rho comme user.name rangé que je donne ici. Et ici, je donne le nom de point d'utilisateur, point, qu'avons-nous ? Et puis je peux l'appeler. Donc nous avons un e-mail, mais nous devons tout cartographier. Et ici, ce sera le contact, et ici il regardera l'ancre. Et ici, nous devons fondamentalement ajouter le bouton pour en fait, eh bien, je vais partir comme je le sais. Et celui-ci aura un énorme succès. Et assurez-vous également que l'alignement est 1010 et toutes les données et entrez. Alors, allons dans le navigateur. Recharger. Maintenant, nous sommes en mesure de charger toutes les données dans la table à partir du magasin. 11. Ajouter un bouton de suppression et de montage sur la table: Donc, la prochaine opération que nous allons effectuer, supprimer n. Pour cela, nous devons additionner par 10 afin d'ajouter le bouton. Et je vais à nouveau à notre interface utilisateur matérielle, et je vais chercher les entrées de boutons. C' est donc l'entrée du bouton. Et, et je vais utiliser ce bouton, d'accord ? Donc, je vais vraiment frapper le groupe de boutons en fait, donc je vais utiliser celui-ci. Je vais juste copier. Et je vais aller au code VM. Et vous le collez. Et laissez-moi enlever celui-là. Et nous avons donné celui-ci, supprimer. Et ça l'a fait. Et je vais enlever la couleur du primaire ici. La Primaire sera comme celle-ci, et celle-ci sera le deuxième jour. Eh bien, je donne le deuxième cerveau. Moi et nous devons également importer le groupe de boutons. Alors je vais tout ouvrir. Et je vais importer ces deux choses. Donc je vais juste copier et je vais juste mettre ici. Et nous avons aussi besoin a donné son style. D' accord. Donc, copions ceci et collez-le en haut. Et énorme décompte le déjà pris. Donc je vais donner ici, utiliser une tuile botaniste. Et j'ai besoin de cette tuile botanique et du fond. Donc ici, j'ai besoin mes minuscules tuiles et de l'utiliser, mais à tout moment. Et maintenant, je vais utiliser ce style de bouton. Et troisièmement, oui. Revenons sur comment ils vous ont. Donc, ils ont ajouté un jour via je vais juste copier les fichiers. Et je suppose que referme ça encore ici. Et nous n'avons pas de classe ou de table où nous avons des tuiles bhoutanaises. Et nous avons un problème. Alors allons à l'affichage. Et nous avons je pense que nous avons importé réagir deux fois. Oui, alors ouais, tu en connais un important. Maintenant, allez dans le navigateur. Maintenant, nous avons notre suppression n'importe quel bêta1. Et la prochaine chose que nous allons faire est de fournir un peu d'espace entre les deux. Mais je le suis, donc c'est sympa d'avoir un écart entre les différents mais je sais ce que je vais faire. Je ne vais pas écrire de fichier CIMP Thailand. Je suis prêt à fournir le style en ligne. Ce sera comme de moi à J. et je donnerai mon pixel que nous pouvons avoir un peu d'espace. Oui, maintenant, nous avons l'espace. 12. Travailler pour supprimer l'action et le régénérateur: Donc maintenant, nous avons mis sur l'opération de suppression. Donc, nous allons à nouveau écrire le type d'accent. L' heure vintage sera supprimée files d'attente, oui, nous supprimons. Un syndicat lui fera supprimer un UGA. Et j'appellerai le charisme. Et je vais aller aux accents. Et je vais juste copier celui-ci à cause de la fidélité parler plus cette chose va l'ajouter dans cette équation, une longueur de chaîne de la porte à supprimer. Et il recevra l'ID. Je vais changer le nom, vous supprimer là. Il va ajouter quelques ID, j'ajouterai l'ID ici. Et je prédis que différentes actions par temps. Nous allons donc fournir l'action que l'utilisateur a supprimée. D' accord ? Donc, il n'aura pas d'argument. Action avec un type, un type supprimer soit. Donc je vais reporter celui-là. Supprimer l'une ou l'autre Ne vous tuez pas aussi. Oui. Je veux dire, vous supprimez alors. Avez-vous vécu supprimé. Maintenant, allez vers un réducteur. Et ici, nous allons ajouter cette affaire. Donc, ce sera très cuit kf ici. Supprimez et faites-le simplement à la place et faites les barres de chargement. Nous avons donc fait avec l'action de suppression. 13. Rédiger l'action pour supprimer les données de l'utilisateur: Maintenant, venez sur la page d'accueil et appuyez simplement sur le supprimer. Donc, ce que je vais faire, je vais écrire un onclick. Et sur clic, nous aurons une poignée, les méthodes de suppression. Et supprimez. Et la mort sera le parking de l'ID, l'utilisateur. Id. Maintenant créé ce gestionnaire en dehors qui retournent un créer le fichier. Et il va vaincre l'identité. Et, et je vais le rendre maigre, fournir une fenêtre. Et des formules si vous hey, en supprimant ça. Donc, je voulais juste avertir l'utilisateur mythiquement. Mais de toute façon, je voulais vous supprimer que lorsque la facture ne sont pas ici, je vais fournir à la fenêtre une boîte de dialogue d'avertissement, et il aura une méthode posée. Vous voulez supprimer l'inverse a. Ainsi, nous pouvons générer la boîte de dialogue en utilisant la barre window.com et nous pouvons donner un lac ou un partagé. Êtes-vous sûr de vouloir supprimer l'année alors ? La carte de données est et cliquez sur OK, puis il va divertir que si la condition et trouvé là, Je vais envoyer supprimer vous le et diluer l'audition automatiquement importé à partir du VS Code. Vous pouvez voir en haut, VS Code me frappe dans mon panneau MDF. Alors laissez le chemin si Id pas des années. Donc je pense que, par erreur, vous auriez la poignée en dehors du composant. Nous n'avons pas besoin de créer le composant externe. Nous devons créer le composant intact. Fondamentalement en dehors du retour. Oui. Ici Ted. Et nous devons passer la carte d'identité. Et une chose fait en sorte que dans l'action. Pour une fois que vous supprimez, vous devez également avoir besoin des données mises à jour du GitHub. Donc, ici, je vais à nouveau envoyer la charge YuJA afin d'obtenir les données mises à jour du JSON P où qu'il fonctionne ou non. Donc, je vais supprimer le dernier enregistrement, supprimer, et je vais cliquer sur OK concernant notre suppression. Donc, pas de problème. Maintenant, nous avons des problèmes avec qui peut attacher. Donc, c'est bien ici. D'accord. J' ai un labyrinthe ici, FlatMap, ce n'est pas effacer. Alors essayons encore une fois ici. Donc encore une fois, va supprimer le dernier enregistrement. Et maintenant, nous sommes en mesure de supprimer l'enregistrement. Nous avons de tous l'opération de lecture et suppression en utilisant NADH et FADH sur n. Chaque deck. 14. Travailler sur le composant de formulaires: Donc, la prochaine chose que nous allons travailler sur le composant de formulaire. Donc, pour travailler sur le composant de formulaire, nous devons en ajouter un en haut pour ajouter l'utilisateur. Alors ajoutons le bouton. Donc, je vais à la composante de la maison. Main ici. Et nous allons ajouter un bouton. Tiens, je prends le bouton. Et puis nous covarions. Je vais juste copier un bouton. En fait, ils ont été WO va juste copier celui-ci et juste le coller ici. Et ce sera une variante. Variante contenue et en colère. Et ce sera la jambe du nom que vous là-bas. Et je vais mettre ça dans un bataillon dans un jour parce que je dois appliquer un nom de classe ici. Donc je peins juste dans la div. Et le nom de la classe ne sera pas le nom de la classe de style. Donc, nous avons un toit en tuile bouton. Alors voyons dans le navigateur. Alors maintenant, nous recevons l'annonce que vous au fil du temps. Donc, cliquez sur Obtenir l'itinéraire de données. Donc, ce que je vais faire, je vais apporter l'image h3 du routeur de réaction dom 0. Il sera utilisé h3 et venir ci-dessous. Et si vous conservez la variable t, arbre énorme. Et juste ce que vous avez à faire sur clic, hé, x3, point push. Donc je vais pousser vers la tour pour aller sur cette route. Si non, testez. Alors ajoutons cette route. Donc ici dans app.js, par point la page à vous, ils ne sont pas ds. Et il suffit de créer une donnée transmise à partir de maintenant. Le total relier cette annonce vous là-bas. Et je ne suis pas arrivé à cette route ici. Et je vais fournir ce nom comme ajouter l'utilisateur. Et le compressible nous ajoutons l'Egypte, donc il a automatiquement importé dans mon VS Code. Et maintenant et juste cliquez sur l'ADA vous que maintenant nous sommes en mesure de déplacer Adi payer alors et il panne aussi obtenir chaîne. Alors commençons à travailler sur la zone Ajouter, mais ici nous devons travailler avec l'automne. Mais encore une fois, je vais à l'interface utilisateur matérielle et je vais utiliser le champ de texte. C' est donc le champ de texte très basique. Je vais vous dire que je vais vous voir. Alors je suppose que ça a été bon. Ouvrez également ce code source entier. Laissez importer ces deux choses. En cette année haute à partir de maintenant. Et maintenant ce que nous avons va copier. Il faudra peut-être copier ces trucs. Et il suffit de coller à l'intérieur ici et d'enlever les deux premiers. Mais seulement besoin et aussi copier cette cravate. Oui, j'en ai une copie. Et je suis là où vous pouvez créer une largeur par, mais si je frappe, ok, maintenant de 25 à 45, mauvais. Et compte tenu de ça avec Allons-y et vérifions. Donc, nous obtenons le bon. Accueil d'entrée. D'accord. Oh, laissez ajouter d'autres entrées. Will papa est allé, Oh, je vais juste copier Apala ou le temps parce que là-bas et je vais fournir une certaine valeur ici de, essayons de trouver un état de l'application. Nous devons donc fournir la valeur au champ d'entrée également. Alors j'ai besoin de toi à la place. Et je vais définir l'état ici. Indiquez ce steak que vous avez répertorié et ce que nous apprécions retard nom, e-mail, puis contact. Et puis nous avons eu beaucoup. Donc tout est en joli non plus maintenant. Et tout de suite, je vais obtenir, mais nous n'avons pas besoin d'écrire comme head.next test.html dans la valeur. Donc nom, e-mail sur le pont, adresse. Maintenant, la valeur sera nommée ici. Et l'étiquette que nous allons changer le nom des voies. Et je serai là. Et on va faire une pause. Maintenant. Et plus de cerveau ici. Ici. Et ici, je vais zoomer, en MPF et ici. Et oui, empochez ces deux choses. Ce sera un e-mail. Oui, alors nous allons nous engager et celui-ci à envoyer un e-mail. Et l'e-mail et l'étiquette seront maintenant contenus. La valeur sera le contact. Et ce sera le numéro. Et celle-ci sera l'adresse. Et le précieux V. Drift sera le texte. Et laissez la colère, mais une moyenne. Donc je suppose que copiez un bouton d'ici. Copions et collons-le ici. Donc on n'a pas besoin d'onlick. Peut même taper, mais taper sommet millimétrique. Et de collaborer avec variante en temps opportun et la tuile sera si important en fait, nous ne sommes pas nous laisser idéation pour les boutons moins importants maintenant, oui, déclaration d'importation coopérative. Et je vais juste le coller ici. Donc, la déclaration est peinte. Et donnons-lui un titre ici. Donc, style fondamentalement, nous voulons juste ajouter juste un peu du bouton. Donc, ce sera le pixel 100. Et, et donne-lui juste le nom sera un peu de cou. Donc, une partie de ça. Et la prochaine chose que nous allons faire la jambe. Allons voir le docteur. Nous recevons le formulaire ici. Maintenant. Ce qu'on pourrait faire, on pourrait faire du style ici. Prenons une marge en haut. Donc, je vais ajouter un discours de marge. Et je donnerai du calme. Je n'ai pas encore de spectacle est brûlé au Rajah. Oui, maintenant, je vais donner un titre. Donc, ici, nous avons besoin d'un titre, lay add user. Ok, donc le cap mort. Et nous avons besoin et nous avons aussi besoin d'un bouton. Donc si tu voulais y retourner, je vais copier ce bouton. Donc, copions différer. Je vais copier tout le truc et je vais juste le coller. Et cette roue de couleur avec un secondaire. Donc, je donne secondaire. Ville de marketing moderne sera marge. Top, sera un film épique. Et ça restera le thème. Et dans onclick, changeons le nom du bouton agile. Et onclick. Nous retournerons à la page d'accueil. Donc, nous devons amener ici est du routeur de réaction vers le bas. Contenirons jour est de réagir routeur dom, énorme HJ, et restaurer les trois variables. Et l'histoire. Eh bien, vous conservez l'historique des variables. Et je vais juste le changer autour, comme l'histoire, l'histoire, le point push, et juste enlever le type de celui-ci. Mais ne fous pas fois 100, nous avons bas, nous n'avons pas de spectacle. Eh bien, allons dans le navigateur et vérifions. Oui. Maintenant, retournez en arrière. Donc ça marche. Donc, commençons bouton sous la fonctionnalité, chaque échec d'entrée aura l'onchange et ainsi de suite. Pouvez-vous définir un ion ici ? Je vais exiger cette déclaration hors réseau. Et le changement d'entrée. Et ce sera, il sera FEV. Et je vais capturer la cible Lambda e point. Et cette cible, j'ai besoin de nom et de valeur et je vais définir l'état, l'état, le nom. Et ainsi de suite à chaque frappe, j'ai besoin de stocker la valeur dans un état qui est très unique en gérant le changement d'entrée. Et je vais l'appliquer si gérer le changement d'entrée dans toutes les entrées une par une. Donc, je vais juste fournir ce changement de point et ils vont entrer le changement. Donc, je suppose que si PDS maintenant basé ici, je vais coller ici, et je vais coller ici. Donc, nous avons fait avec le et, et le niveau de formulaire. Nous avons besoin de certains qu'il gère, je vais définir obtient géré d'une manière ou d'une autre. Alors définissons. Et je pense que nous avons aussi moi et nous allons empêcher le comportement par défaut de Roger am write tous les gains, donc nous avons juste besoin d'écrire u dot prevent default. Et ici, pour continuer dans le sommet de la poignée, nous devons ajouter l'axial. Mais avant d'écrire et je viens de définir par l'état ici aussi bien. Donc je vais avoir de l'empathie certainement vous ne pouvez pas former de l'impiété envers eux. Et j Donc, pour cela, je vais en avoir une, c'est la queue, la tête. Et vous êtes l'état et l'équilibre l'invitation. Et dans la poignée soumettre passé, je vais vérifier. Donc, si une entrée dans la pomme de terre, je ne vais pas permettre de simplement soumettre le formulaire au serveur d'injection. Donc, nous allons donner chaque entrée sera dans le prochain mail 18 et le dernier 20e contact. Donc, je vais définir le message d'erreur est et mettre toute la main d'entrée. Et le gamin de LD, on va écrire le code à quelqu'un pour former le Watergate. 15. Travailler à ajouter des actions et de la réduction pour ajouter un utilisateur à JSON sever: Alors écrivons le type d'accent doit. Alors je vais juste en parler. Un, j'ajoute un utilisateur, ajoute un utilisateur. Et dans ajouter un utilisateur, désolé, dans les Actions. Je vais devoir copier celui-ci. Coller. J' ai donné le nom de jambe ADA vous là-bas. Et ici, nous allons vous filtrer là-bas. Et je vais changer de demande. Où faire le poste. Et je vais enlever celui-ci et je passerai. Et le second argument, il les connaissait, et cela conduira au changement. Alors écrivons ici une action. Donc je vais juste copier celui-là. Et je vous donnerai leur ajouté et il vous ajoutera là. Mettons à jour celui-ci. Je te verrai là-bas. Et sinon, je ne pense pas que nous en avons besoin parce que nous allons pousser vers la page d'accueil après la soumission de la bombe. Donc, dans la sommation de formulaire aussi, par défaut, nous chargeons le vous ce détail de la cellule de lecture afin que nous puissions laisser celui-ci tel qu'il est. Je veux dire, vous pouvez juste venir différent maintenant et aller au réducteur et ajouter ce cas afin que je puisse juste l'ajouter, il est défini ici. Parce qu'il va rester, ajoutez-le et ajoutez-le. 16. Envoyer une action pour ajouter des données à l'utilisateur: Guider l'utilisateur. Maintenant, allez vers le plus haut vous ils ont composant. Et à l'intérieur, dans la partie L, nous devons écrire le code. Par écrit. On n'a pas apporté les paires de base. Donc, on peut apporter la pomme. Jouer DOM réagit. Nous avons fait une énorme différence. Et nous avons poussé vers l'envoi d'une variable. Alors laissez que c'est rapide. Mais jusqu'à ce que vous récupérez. Et laisse les statistiques ici après le s'il n'y a pas d'erreur à l'automne lorsque tout le champ d'entrée est fourni par l'UE il. Donc, nous allons être gros pad. Donc je me débarrasse de l'éthique. Et je suppose que de la carte VF. Et je vais fournir cet état. Donc, dans cet état, nous avons toute l'UE là-bas. Encore une fois. Je vais fournir cet état. Et après cela, je vais pousser le point supplémentaire, pousser vers la page d'accueil. Et aussi nous devons diviser l'empathie s'il y a une erreur s'est produite. Et cette fois, vous y avez entré tous les détails dans la volonté d'entrée, alors nous devons faire l'erreur. Donc, nous allons définir l'éditeur a été. Nous devons donc définir l'erreur ici. Donc, je vais afficher la méthode de la zone de l'ADA vous là-bas. Et ici, je prends si David une erreur, alors je vais afficher la zone qui a trois temps et style. Et je donne juste la couleur. Passons à l'autre. Je charge celui-ci et juste involontairement sans fournir de détails encore. J' ai juste sonné. Donc, nous recevons l'adénome et il n'y a pas plus haut. Pour l'instant, fournissons les détails d'entrée ici. Alors commençons les jeux. Donc, sur la méthode de chaînage ne fonctionne pas. Alors allons-y et continuons un peu que je n'ai pas fourni ici, on y va les gars. Il nous manque un attribut ici. Nous devons également fournir un attribut de nom. Mais cet échec ne pas obtenir quoi que ce soit ici, à savoir contenir e-mail, désolé, peut-être que je vais nommer votre nom sera e-mail. Et ici le nom sera alors numéro, pas numéro, je suis en contact. Et ici le nom sera l'adresse. Alors maintenant, donnons-lui encore un essai dans le navigateur. Donc, je vais juste donner quelques détails encore jeux, jeux, gmail.com sur le numéro de type, adresse que, donner des plans. Et fatigué de soumettre à vous que même être ajouté. Mais nous n'avons pas encore reçu de données. Je ne le regarde pas dans le JS à l'intérieur de notre administrateur. Donc, il y a un problème avec elle, si vous l'avez déjà lu, mais à VIV, Nous ne recevons pas les données mises à jour. Ce que l'UE redirige ensuite vers la page d'accueil. Laisse-moi résoudre ce problème. Alors ce que vous pouvez faire. Ajoutons donc une autre donnée. Je prends juste quelque chose. Ok, donc l'esprit et gagner quelque chose de aléatoire. Et maintenant, laissez ça. Mais cette fois-ci a ajouté. Donc, il pourrait y avoir un problème. Il n'y avait pas d'ajout. Maintenant, nous recevons les données. Une fois que vous obtenez financé la salle, puis ici les données et de s'améliorer à. Alors mettons-nous à jour une, nos données. Maintenant, je suis là. Nous ajouterons un contact à gmail.com. Et cette fois, je vais vous donner donné et frapper quelqu'un. Les travaux se poursuivent. Maintenant encore. Il n'est pas mis à jour. Donc, une fois que je me rafraîchis, alors je ne reçois que leurs données. Alors faisons une chose. Alors, qu'est-ce que les accents et juste décommenter diffèrent. Alors ajoutons maintenant l'utilisateur. Donc encore une fois, je vais donner une zone énorme appropriée, qui est TFS queue et la tête, gmail.com. L' adresse de numéro aléatoire sera l'Australien si bon. Et appuyez sur Soumettre. Maintenant est kVA obtenir correctement et nous sommes, et obtenir la valeur mise à jour sous vous, leur navigation. Donc, nous avons fini avec l'utilisateur. 17. Travailler sur le formulaire de montage: Donc, la prochaine chose que nous allons travailler sur la fonctionnalité, mais vous obtenez un peu qui est venu une minute et nous allons avoir le même code. On doit ajuster un peu de code, d'accord ? Donc, cette copie du noyau entier et crée un fichier, ouais. Et donnez-les à l'examen. Pas l'affaire. Ce sera nouveau pour vous que la discipline de la chaîne alpha comme mettre à jour et changer le nom ici je vais. Et pourtant il est à la disposition de tout le monde là-bas. D' accord. Et allons-y et disons-le. Dans le fichier app.js. Par juste encombrant. Ce sera le tout. Et je suis comme si je pense que l'identité et une idée importante de l'utiliser. Donc, le code VS est automatiquement importé. Maintenant, venez à la maison, oui. Et dans Idiot, nous devons fournir l'onclick. Onclick. Qu'est-ce qui va se passer ? Comme si elle allait à la piscine va vous poser que vous avez fait l'un ou l'autre cas cependant, avez-vous vécu quand vous avez acheté un billet ? Et ici, je vais vous fournir la pièce d'identité. Encore une fois, je dois te donner la pièce d'identité noire. Alors essayons de le faire dans leur ensemble. Et je vais cliquer sur ce qu'ils ont fait. 18. Populer une valeur existante sur Monter un formulaire en utilisant Action: Maintenant, nous avons besoin de toute la valeur ici. Donc, quelle que soit la valeur que nous avons dans la table pour cet utilisateur spécifique. Nous avons donc besoin de tous les détails dans le champ d'entrée jusqu'à présent que nous devons mourir à nouveau à une action. Donc nous entendons dire que nous allons écrire pour obtenir le doigt que vous venez juste d'aller, nous avons besoin de la chose, vraiment utiliser ça ici. Donc, je t'ai donné bien là-bas. Non plus. Et allez aux actions. Et oui, wow, point. Mais le Dieu, la carte d'identité féminine familière. Donc on est dans Will, ils sont juste un peu bons. Et allez sur le bureau et créez un temps partagé. Donc d'accord. Utilisez-le et changez le type de chose. Eh bien, toi et moi allons utiliser l'enlever celui-ci. Nous ne m'obligeons pas à vous obtenir le et ici nous devons passer ça comme des liens qui ont passé des données à points. Donc, nous devons passer ceci, l'attaque aux données et à DKA. Nous devons écrire ce cas hybride pour ce type valeur point là. Et je vais revenir, et je vais lire la NTU de l'Etat là-bas que nous avons ici. Habituellement, alors je dans un tableau vide, et maintenant ce sera en-tête, charge utile. Et le chargement sera les murs. Alors allez à la DTU là-bas. Donc, nous avons fini ici. Et tu l'as utilisé ? On a besoin de la carte d'identité. Donc, chaque fois que vous là-bas et naviguez, nous obtenons le bien rangé la façon dont nous allons obtenir un bon ordre. Donc nous, nous allons avoir l'idée. Vous pensez que le US para 0, nous avons besoin de modèle d'utilisation du routeur de réaction. Donc, nous avons besoin d'utiliser ce suis-je. Et l'intention du composant. Ici. Je vais à De Factor Dy, dy. Donc, utilisez des modèles. Eh bien, on va sortir avec la carte d'identité. Peu de choses que nous devons juste ajuster ici, donc nous avons une pièce d'identité et nous devons apporter l'effet américain ici. Dès que nous avons l'ID que vous faites pour vous, le composant devra envoyer l'action dans l'ID utilisateur réel. Donc je vais vous écrire l'effet ici. Et la prochaine chose, juste gagner par jour main. Je vais voir ce pasteur, l'envoi de la faction, et nous vous l'obtiendrons. D' accord. Ils ont donc dit l'action que nous avons créée plus tôt. Maintenant, mets-toi en colère. Tu as l'air. Alors allons à une DTU là-bas et fournissons simplement l'ID car il accepte l'ID à l'arrière et il retournera que vous utilisez une UE spécifique là-bas. 2010 que l'Asie et l'ADA maintenant et juste aller dans le navigateur et revenir en arrière et cliquez sur le premier. Mais nous envoyons l'action, y obtenons de la valeur. Et vous pouvez voir dans cet état vous qui est indéfini. D' accord ? Nous n'arrivons donc pas à faire entrer l'UE dans ce pays. Ok, si non, voyons la console. Donc, dans la console, nous avons du DU là-bas, mais en quelque sorte vous que ce n'est pas une attente dans le réducteur. Mythiquement, cependant, dans la console, nous avons comme à la ligne 54, si vous allez à l'accident. Donc, à 64 ans, nous avons le contrôle. Mais il ne va pas vers elle a fait est il va aller à la Getty vous là-bas et engagé à utiliser le que nous avons à fournir cette année. On veut dire Ok, Seigneur. Et il utilisateur. Alors maintenant, voyons, oh, voyons dans le navigateur. Alors maintenant, allez aux données. Et maintenant, nous avons l'u qui ici. Retournez en arrière et cliquez sur le troisième. Maintenant, voyez, nous avons les données utilisateur respectives ou non, mais nous avons ces données. Et maintenant, ce que nous allons faire, nous allons frapper le réalisateur danois. Si vous utilisez un lambda est l'état 0. Supposons que nous avons un énorme sélectionné ou non importé. Donc, nous n'avons pas utilisé sélectif, donc nous devons utiliser le sélecteur. Et, et utilisez le sélecteur. Ce que nous allons faire, nous allons juste donner des temps si l'UE, le collecteur américain t8, t8 point de données. Maintenant, nous vous avons ce que d'accord. Au cours de la prochaine chose, nous devons essentiellement vu le détail encore, tous les détails que nous avons à pré-remplir ici lorsque vous faites un clic droit sur le nouveau. Donc, une partie de cela, nous devons en écrire un de plus. Utilise mythiquement le pieu ici. Désolé, utilisez la FFT ici. Donc, je vais fournir une année de plus en vigueur. Et en fait que je vais vérifier la vue quotidienne, cela signifie que cet énorme facteur va courir un 30 jour vous là-bas. Et maintenant, je prends s'il y a là, puis l'étape, remarquez que vous y emmenez. Alors, allons dans le navigateur. Fournit dire non défini. Ok, maintenant ça arrive. Allons dans le navigateur. Et maintenant, en ce qui concerne les données. Et nous recevons un avertissement pour le moment. Joué un composant est de changer une entrée de contrôle sur le téléviseur et le contrôle où la valeur changeant formative Manto indéfini. Donc, cet éditeur provoque généralement parce que nous n'avons pas encore fourni de valeur et que la chaîne définitivement nous définissons l'indéfini réellement sur le mode composant, la valeur est indéfinie de cette façon. Il n'y a pas d'avertissement dans la console. Donc, afin d'éviter que L, nous allons simplement, vous avez juste pensé Advocate ici. Donc, il est emprunté des pensées évaluation adéquate. Vous pouvez le donner et l'éditeur continuera. Ce n'est pas un avertissement ironique. Alors, allons dans le navigateur, recharger. Et nous n'avons pas l'avertissement maintenant dans la console. 19. Envoyer une action pour mettre à jour les détails de l'utilisateur: Allons à la DTU, leur composant. Et dans handle submit, nous devons dissiper la mise à jour pour vous il, Ne pas ajouter non plus. C' est si mortel là-bas et assurez-vous qu'il est importé. Alors oui. D' accord. L'important de déplacer l'ADA vous que nous n'avons pas besoin dans ce composant. Et alors, allons-y et vérifions si les parties sont en train de créer ne le sont pas. Je vais le laisser de côté. Et je vais donner des gemmes et faire du bénévolat et laisser un peu de rendez-vous. Donc, il ne met pas à jour la demande de problème d'énergie remplie avec le statut pour indéfini introuvable. Alors passons à l'action. Donc, l'ont certainement problème dans la chaîne. Donc, l'utilisateur de données. Maintenant, voyons la console de la console. Les données ne sont pas mises à jour également. Je peux oui. La console a également des données non sur Decker. Quels sont les trois qui peuvent être le problème ? C' est l'UE, ils sont mis à jour. Et va au réducteur. Tout a l'air bien. Allez à la vue d'édition là-bas et NAD à vous là-bas. Donc, le problème est comme si nous ne fournissons pas l'ID ici. Nous devons fournir l'ID parce que Notre am envoyer, recevoir le moment tuatara. Vous là détail et ID. Alors allons dans le navigateur et donnez-lui un de plus. Essaie. Encore une fois. Celle-ci, je leur ai donné un lien. Voyons voir. Maintenant, ils vous ce détail est mis à jour. Donc, nous avons un formulaire toute l'opération de lecture ici dans l'application React comme créer, lire, mettre à jour, et supprimer. Et je vais recommencer toutes les opérations pour que nous n'ayons aucun problème. Laissez-moi commencer par la lettre E pour que nous puissions lire toutes les données de notre cachette GFF. Maintenant, supprimez-le. C'est LaCA. Donc, les données deviennent délicates à fidèlement. Ajoutons l'UE là. Donc encore une fois, je vais ajouter l'utilisateur est la queue. Et je leur donnerai un email, euh, contact aléatoire. Et ce sera clair. Ces fichiers doc créer opération. Nous sommes donc en mesure d'ajouter l'utilisateur dans le serveur JSON également. Allons et en effet les adverbes de détail, donc Adam, Marcus, et ajouter le contact soit à cette poignée de grille. Alors je vous ai donné 1, 2, 3, 0, toi et Adam. Comme vous pouvez le voir que nous sommes en mesure de mettre à jour le vous que vous dites soit 0. Nous avons un formulaire. Toute la troisième opération avec l'aide de React, faire le pont merci et la défense. 20. Conclu: Si vous regardez cette vidéo, signifie que vous avez terminé ce cours. Et je suis sûr que vous avez acquis beaucoup de connaissances sur un redex. Maintenant, vous serez en mesure de travailler avec le redox dans n'importe quelle application React. Et aussi, vous avez un peu sur ces gens qui n'ont que des connaissances sur React. Merci donc d'avoir suivi ce cours, et je vous verrai dans une autre section de cours.