Réagir avec le projet TypeScript

1. Intro: Tous les bons gars, bienvenue à ce cours sur la façon de construire un projet en utilisant réagir avec TypeScript. Donc, pour ce projet, nous allons construire une liste de contacts. Laisse-moi te faire une démo ici. Je vais ajouter un nom pour ces utilisateurs. Par exemple, John, l'âge sera de 25 ans et est un développeur de logiciels. Je vais cliquer sur l'utilisateur, puis je vais ajouter un autre utilisateur. Par exemple, Jessica, elle a 20 ans et elle est infirmière. Je vais cliquer sur Ajouter un utilisateur. Donc, chaque fois que nous ajoutons un utilisateur, nous le verrons ici empiler. Et puis nous pouvons évidemment supprimer les utilisateurs de notre liste de contacts. Disons que je veux supprimer John. J' ai supprimé John de notre liste de contacts. Maintenant, quelles sont les exigences pour ce projet ? Pour ce projet, vous devez connaître les bases de la réaction. Donc, si vous êtes complètement nouveau avec React, ce cours n'est pas pour vous. Ceci est seulement pour les personnes qui connaissent déjà React, au moins les bases de celui-ci, mais ils veulent apprendre à vouloir TypeScript dessus. Rappelez-vous que TypeScript va être un moyen pour nous d'ajouter réellement les types et de savoir quel type de valeurs nos fonctions retournent et ainsi de suite. Vous apprendrez tout cela dans ce cours et comment construire son projet, bien sûr. J' espère donc que vous êtes excité de commencer ce cours et je vous verrai dans la prochaine vidéo. 2. Installation de React et typescript: Tous les bons gars, Aujourd'hui, nous allons créer un projet avec réaction et TypeScript. J' ai vu beaucoup de tutoriels là-bas juste expliquer ce qui est TypeScript et juste quelques tutoriels simples dessus. Mais je pensais que ce serait une meilleure idée de créer quelque chose avec elle. Laissez-moi vous montrer le projet que nous allons construire. Nous avons c'est une sorte de liste de choses à faire, mais avec certains utilisateurs. Donc, nous avons ici un formulaire où nous pouvons mettre, par exemple, un nom, âge et un emploi, par exemple, d'un utilisateur. Et puis lorsque nous cliquons dessus, nous pouvons ajouter ces utilisateurs à notre liste. Donc je vais juste mettre ici, par exemple, pour mon nom, je vais mettre ici 20 et je vais mettre ici, par exemple, des pilotes. Et je vais cliquer sur Ajouter un utilisateur. Et puis je vais mettre ici John. Donc John a par exemple 45 ans et E est, par exemple, infirmière va mettre ici. Donc nous avons ces deux utilisateurs et maintenant je peux cliquer sur n'importe lequel d'entre eux. Par exemple, le, l'employé en retard. Ce serait comme pour une entreprise, par exemple, si vous ajoutez ces utilisateurs. Donc, ce n'est qu'un projet simple. On va commencer avec ça maintenant. Alors, oui, allons-y. Dans notre code Visual Studio. suffit de choisir un endroit où vous souhaitez installer votre projet. Et maintenant pour cela, vous devez taper la commande suivante. Donc nous allons faire NP x, Create React app. On va lui donner notre nom. Je vais appeler ceci, par exemple, utilisateur moins TypeScript. Et maintenant, je vais faire un tiret, modèle de tiret et un autre espace. Et cette fois, je vais mettre un script de type. Nous allons donc installer maintenant un nouveau projet React complet, mais avec TypeScript déjà intégré. Ok, donc je vais appuyer sur Entrée, je vais le laisser installer. Et quand ce sera prêt, on pourra continuer. Bon, alors maintenant que le projet est installé, nous pouvons simplement l'ouvrir sur notre code Visual Studio. C' est exactement ce que j'ai fait. Donc j'ai été ici mon nouveau projet complet. Je vais ouvrir le terminal et maintenant assurer que vous êtes sur la bonne voie pour démarrer ce projet. Donc je vais faire ici PWD. Donc, je suis à l'intérieur de mes projets de développement parmi mon dossier TypeScript de liste d'utilisateurs, qui est celui-ci. Je vais vérifier. Et j'ai eu les modules de noeud package.json et ainsi de suite, qui est tous ces dossiers, nous sommes au bon endroit pour démarrer notre application. Je vais faire un démarrage NPM pour commencer. Et maintenant je devrais voir ici sur le navigateur, je suis juste en appuyant ici. Oui, je dois juste le faire parce que j'ai ces autres projets en cours d'exécution aussi. Donc cette partie est comme conflictuelle. Donc j'ouvre ça sur le port 3000 et un, et c'est tout. Nous partons essentiellement du début. Bon, alors allons à l'intérieur de notre source. Comme vous pouvez le voir maintenant, avant quand nous étions juste en train de créer une application React par défaut, nous aurions, par exemple, ces dossiers ici avec le app.js et ainsi de suite. Maintenant, au lieu d'avoir ces extensions de ab.js, nous avons l'extension de point TSX, ok ? Supprimons juste quelques choses ici, donc je n'ai pas besoin de ces logos. Je crois. Je vais supprimer tout ce qui est à l'intérieur de ceux-ci aussi. Donc, à l'intérieur de cette fonction, je vais tout supprimer. Je vais juste mettre ici pour l'instant. Comme TypeScript, je ne connais pas quelqu'un comme ça juste pour m'assurer que nous pouvons voir. Donc TypeScript, nous avons un H1 ici. Supprimons le logo. Nous n'avons pas besoin de ce logo ici sur le côté gauche. Et je pense que c'est tout pour l'instant. Ok, donc si vous allez dans votre navigateur, vous devriez voir ici TypeScript. Bon, donc quel est le point que nous faisons en fait ici à propos de, pourquoi devrions-nous utiliser TypeScript et ainsi de suite. C' est parce que nous voulons juste nous assurer que chaque variable que nous créons, ils auront un type spécifique. Et ce type ne va pas changer car par défaut, JavaScript, si vous créez une variable comme celle-ci, par exemple , âge, et vous allez le mettre égal à 20. Plus tard, vous pouvez simplement aller et changer cette variable à, par exemple, 20 comme une chaîne. Et ce n'est vraiment pas une bonne pratique. Vous voulez vous assurer que lorsque vous créez une variable, ce type de cette variable sera cohérent dans toute votre application. Donc, vous savez, TypeScript nous permet de contrôler ce genre de choses. Et aussi il vous permet de contrôler, par exemple, quelles fonctions ils retournent, ainsi de suite. Et, mais nous allons tout apprendre à ce sujet maintenant. Alors laissez-moi simplement les supprimer. Laissez-moi regarder ici le projet. Donc probablement ce que je vais faire, je vais les décomposer en parties séparées. Et je vais juste laisser le style pour la fin parce que je crois que certaines personnes, elles veulent juste commencer avec. Donc, laissons le style pour la fin et nous allons nous concentrer ici tout d'abord dans cela. Alors faisons ça. Je devrais peut-être les casser dans quelques vidéos différentes parce que ça pourrait être un peu trop long, non ? Alors, allons à l'intérieur de notre retour. Tout d'abord, et je veux créer un formulaire. Tout d'abord, mettons-nous ici à la IV. Donc ces div ici vont être une sorte de notre conteneur. Donc, je vais mettre ici ClassName du conteneur. Ok, donc on a le nom de classe du conteneur. Je vais mettre à l'intérieur d'un H1 va dire réagit avec TypeScript. Et à l'intérieur, je vais juste faire un formulaire. Ok, donc on a le formulaire. Et maintenant à l'intérieur de ce formulaire, je vais avoir quelques étiquettes. Donc, en gros, ce qu'on va faire avec ces étiquettes, c'est ce que tu as vu ici. Ce truc, le nom, l'âge, le travail, et ainsi de suite. Donc pour la première étiquette, je vais juste mettre le nom. D' accord ? Donc on a le nom ici, et je vais mettre une entrée. D' accord ? Et ces entrées ici vont être avec une pièce d'identité. Donc, je vais mettre ici un ID pour que je puisse cliquer sur cette étiquette et puis sélectionner ceci, ressembler à ceci. Si je clique sur l'étiquette, c'est comme les sélectionner que nous avons ici. Ok, donc je vais lui donner, par exemple, un nom d'utilisateur. Ok, on a le nom d'utilisateur là-dedans. Nous allons mettre un peu plus de ces paramètres. Donc je vais juste au style est un peu mieux. Donc, cette entrée ici va être avec un type de texte. Ensuite, nous voulons avoir un nom. Donc, le nom va juste être après pour que nous stockions réellement ces valeurs que nous avons ici dans l'état. Pour que tu lui donnes le nom que tu veux. Je vais juste mettre ici le nom, ok ? Et enfin, nous allons avoir une certaine valeur. Cela va juste être plus tard pour que nous stockions cette valeur dans l'état aussi. Laissons-le vide pour l'instant. Alors j'ai eu ça. Je pense que nous sommes tous bons jusqu'à présent. Est-ce que je manque quelque chose ? On a ça. On a le formulaire 0. Il y avait quelque chose ici. Alors laissez-moi juste mettre ici ainsi un HTML quatre. Et maintenant ça va être pour le nom d'utilisateur. Donc, lorsque vous mettez ces HTML4 doit être le même nom, comme ces ID. Et puis vous pouvez simplement cliquer sur l'étiquette. Et il va sélectionner, mettre l'accent sur ces entrées que vous utilisez. Ok, donc on a celle-là. Copions ça parce que nous allons en avoir trois, ça va être la même chose. Ok, copions ça. Donc je vais juste les coiffer. Donc, ce sera pour le courrier électronique de l'utilisateur. Cela va dire, est-ce email h. C'est h, C'est h ici. Cela va être l'âge de l'utilisateur ID. Le type de ces entrées va être un nombre parce que je veux juste écrire nos chiffres. Si vous tapez quelque chose ici ne va pas fonctionner, mais si ce doit être un nombre va aller bien. Donc on a celui-là. Le nom de ceci va être h, pourrait être n'importe quoi. Je vais mettre de l'âge, Valley était comme ça et on a une autre étiquette. Donc ces étiquettes pour le travail, ok, donc job utilisateur, nous allons avoir ici sauter et nous avons une entrée avec un utilisateur. Job, le nom va être facturé. Et je pense que c'est tout. La dernière chose dont nous avons besoin à l'intérieur de ce formulaire va être un bouton. Et ce bouton va être avec un type de soumission. Et ce que nous allons mettre ici dans ce bouton va juste dire Ajouter un utilisateur pour l'instant. Ok, laissez-moi m'assurer que je mets les annonces utilisateur. Ok, donc je pense qu'on a tout ce dont on a besoin correctement. Regardons notre page. Laissez-moi juste augmenter le zoom pour que vous puissiez voir un peu mieux. En ce moment. Nous devrions avoir ce nom droit, âge, emploi, et ajouter l'utilisateur. Bon, donc ça devrait être tout pour cette vidéo. Je ne veux pas les faire trop longtemps. Donc oui, on va le décomposer ici. Et quand nous reviendrons sur la prochaine, ce que nous allons faire, c'est que nous allons commencer à remplir ces valeurs et nous allons les stocker ici sur l'état, en créant les variables avec TypeScript et ainsi de suite. Alors c'est tout. D' accord, je te verrai dans la prochaine. 3. Créer un formulaire d'utilisateur: Très bien les gars, bienvenue. Alors commençons ici à faire ce qu'on veut. Donc, nous voulons commencer à taper quelque chose ici, saisir ces valeurs, puis faire quelque chose avec eux. Très bien, alors nous allons tout d'abord convertir ici sur le dessus, notre composant de fonction, notre composant d'application pour être avec certains réagissent un guide ici. Donc, ne réagissez pas TypeScript. Donc on va changer ces fonds d'une déclaration de fonction. On va les changer en fonction de flèche. Alors faisons const. Et je vais vous expliquer ce que c'est dans une seconde. D'accord ? Donc nous allons mettre ici un point AFC React dot. Et c'est comme ça, et nous devrions aller bien, ok, donc quand vous créez un composant avec TypeScript, vous devez le dire avec ce deux-points après pour dire, ok, ce sera un composant fonctionnel React. Donc, quand nous utilisons TypeScript, donc c'est la partie que nous allons commencer à toucher dans TypeScript en fait. Donc, comme vous le savez, par exemple, en JavaScript, lorsque vous créez une variable, disons l'âge. Si vous créez ces variables et que vous l'affectez, par exemple, pour 20 en tant que nombre. Plus tard, vous pouvez simplement aller dire que l'âge est égal à 20 ans. Vous pouvez le faire parce que JavaScript n'est pas une langue qui est comme fortement typée, est en fait faiblement typée. Donc, cela signifie que vous pouvez créer une variable. Vous n'avez pas besoin de spécifier le type de données que vous avez ici. Et puis plus tard, vous pouvez simplement le changer sans problème. Ainsi, ceux-ci peuvent introduire de nombreux problèmes dans votre projet, surtout lorsque vous travaillez dans grandes entreprises, comme avec beaucoup d'utilisateurs, beaucoup de développeurs. Et donc lorsque vous créez une variable avec TypeScript, vous avez la possibilité d'aller ici et dire, ok, Quelle est cette variable, quel est le type de celui-ci. Je peux dire que c'est le genre de nombre. Ok, donc pour le moment on a juste ce genre de lignes squiggly ici parce qu'il dit qu'on ne l'a jamais utilisé. Si je voulais juste faire ici, par exemple, un journal de points de console de h. Tu vois que c'est parti parce qu'on l'utilise. J' ai donc spécifié en entendant ces variables quand j'ai créé que ces valeurs doivent être avec un type de nombre. Si je voulais aller ici et le mettre comme une ficelle. Ok, écoute, maintenant ça me donne cette erreur. Le numéro de type recherché n'est pas assignable à la chaîne de type. D' accord ? Donc, cela pourrait être une façon que vous pouvez affecter, par exemple, le type de cette variable. Une autre façon de faire serait, par exemple, créer un type que vous pouvez utiliser sur plusieurs variables. Donc, je vais appeler ceci, par exemple, tapez. Mon numéro. Donc, peu importe le nom que vous donnez. Ça pourrait être n'importe quoi. Nous avons donc créé un type, donnez-lui un nom. Et puis nous disons, Ok, quel genre de type est celui-ci que nous voulons créer ? C' est un nombre. Donc, quand nous avons ici un nombre, c'est comme le mot clé de JavaScript qui vous dit réellement, regardez, ce type que vous voulez passer 20 variable doit être avec un type de nombre. Ok, pour que je puisse entrer ici, débarrassons-nous de ça. Au lieu d'écrire ici le numéro, je pourrais juste entrer ici et dire, Ecoutez, c'est mon numéro parce que vous savez que ces types ici que nous avons créés sont en fait un numéro, ok ? Donc, vous pouvez faire d'une façon ou d'une autre si vous voulez. Tu pourrais juste faire comme ça. D' accord ? Donc, cela devrait suffire pour l'instant pour que nous continuions avec le reste. Laisse-moi juste me débarrasser de ça. Alors maintenant que nous avons cette entrée ici, commençons à appliquer ici quelques événements onChanges. Donc nous pouvons saisir les valeurs que nous avons ici. Et puis on va le stocker dans un état. Alors créons cet état ici. Tout d'abord, faisons un CONST. Nous allons dire que l'état des utilisateurs, par exemple. Et je vais dire définir, définir les utilisateurs, définir l'état de l'utilisateur. D' accord ? Donc, cela va être égal à utiliser l'état. Et je vais définir ça comme un objet pour l'instant, d'accord ? Comme d'habitude, regardez, vous avez ces états américains ici, donc vous deviez l'importer sur le dessus de React. Et tout ça, c'est bon. Ce que nous voulons avoir à l'intérieur de ceux-ci maintenant, c'est que nous voulons avoir un utilisateur actuel. D' accord ? Nous voulions donc avoir un utilisateur actuel qui va être celui que nous allons taper. Donc, chaque fois que nous tapons ces valeurs, nous voulions stocker cela dans notre état, dans cette partie ici. Donc, ici, nous avons créé notre état. C' est le nom de notre État. C' est une fonction que nous exécutons chaque fois que nous voulons mettre à jour l'état. Et c'est la valeur de notre état, d'accord ? Donc, je veux avoir la valeur de mon état est un objet avec une clé de l'utilisateur actuel. Donc, ce sera l'utilisateur actuel que nous tapons en ce moment. Et puis quelles seront les valeurs de ceux-ci chez cet utilisateur actuel ? Donc je voulais avoir un nom. Donc je vais juste les mettre comme ça. Donc, ce sera un objet que je veux avoir un nom. Pour l'instant. Je vais juste le mettre vide, d'accord ? Alors je veux avoir quoi d'autre ? Je voulais, par exemple, avoir un travail. Et ce n'était pas là un H ouais, il y avait un âge. Donc je vais mettre encore dans chaque et ensuite le travail. Ok, juste comme ça. Nous avons donc créé ici un objet avec un nom, un âge et un emploi. Mais comme nous l'avons spécifié précédemment avec TypeScript, chaque fois que nous créons une sorte de variables ou d'objets et ainsi de suite. Vous devez spécifier le type de types que vous avez ici. Donc parce que qui est propriétaire de cet objet est en fait notre État américain. Après notre État américain ici. On peut passer ça ici. Une sorte de, certaines personnes appellent ça des accolades en crocodile. Donc, nous pourrions entrer ici et simplement passer, par exemple, nous voulons que notre état américain soit un objet, comme vous pouvez le voir. Et je veux que cet objet ait une clé utilisateur actuelle. D' accord ? Et cet utilisateur actuel va avoir un nom que je veux être une chaîne. Ensuite, nous avons un H que je veux être une chaîne. Disons, par exemple, nous allons changer cela après, ne vous inquiétez pas, parce que nous le définissons comme un nombre là-dedans. Et puis nous avons un travail qui est une chaîne aussi. Ok, donc on transmet ça à l'intérieur de ces états utilisateur. Nous savons que nous allons jeter un oeil. Si vous le pointez, vous allez avoir un objet avec un utilisateur actuel avec un nom qui est chaîne, âge, c'est-à-dire une chaîne et un travail qui est une chaîne. Ok, donc on a tout déclaré. Mais comme vous pouvez le voir ici, ces types que nous mettons à l'intérieur d'un regard, ça n'a pas l'air si génial parce qu'il prend beaucoup de place. Donc, chaque fois que nous voulons réellement et créer une sorte de types pour ce genre d'objets qu'ils ont beaucoup de clés. Nous pourrions créer quelque chose que nous appelons une interface. Donc, je vais créer cette interface apparaît. Donc, pour créer une interface, une interface va être juste un moyen pour nous de créer comme plusieurs types pour un objet. Donc, je vais mettre ici l'interface, et je vais mettre, appelez-le par exemple, user int, ce qui est juste court pour l'interface. Et maintenant je veux que ce soit quoi ? Ça va être un objet. Comme vous pouvez le voir, nous avons l'ouverture et la fermeture de l'objet. Et je vais dire ici que ce sera un nom, d'accord ? Ça va être un nom. Ça va être une chaîne. Même chose pour l'âge, doit être une chaîne. Et puis je vais mettre le travail qui va être une corde. D' accord ? Nous avons donc créé notre interface. Rappelez-vous que nous utilisons juste une interface chaque fois que nous essayons passer ce genre de types à un objet comme celui-ci. Ok, donc maintenant à l'intérieur de mon état américain, je veux que mon utilisateur actuel, qui est cet objet que nous avons ici. Je veux que ces utilisateurs actuels soient avec le type de cette interface que nous venons de créer. Donc maintenant, je n'ai pas besoin de spécifier tout cela. Nous avons créé l'interface, et elle est là. Ecoute, on a notre interface là-dedans. Donc, si vous survolez toujours cela, nous avons maintenant que notre état utilisateur est un objet avec une clé de l'utilisateur actuel. Et ces utilisateurs actuels ici est avec le type d'utilisateur INT. Ils utilisent INT est celui-ci. Donc, nous sommes tous bons pour l'instant. Ok, donc maintenant que nous avons ceci, la prochaine chose que je voulais faire maintenant est de commencer mettre une sorte de valeurs onchange en écoutant nos commentaires. Allons ici sur le changement. Donc, quand je change quoi que ce soit, qu'est-ce que je veux faire ? Je veux appeler une fonction appelée, par exemple, sur le changement. Handler, appelez ça ce que vous voulez. C' est juste une fonction que nous allons exécuter chaque fois que nous tapons quelque chose sur notre entrée. Donc, je vais copier cette même fonction sur toutes mes entrées comme ça. Bon, donc maintenant ça nous donne une erreur dans notre navigateur parce que nous n'avons toujours pas créé ces fonctions. Alors faisons ça. Donc, je vais faire ici const sur le gestionnaire de changement. Donc, ce sera une fonction comme celle-ci. Alors, qu'est-ce que cette fonction va faire ? Vérifions. Tout d'abord, je veux juste faire des choses à l'intérieur de cette fonction et je ne veux rien retourner de cette fonction. Donc, nous avons tapé le script. Tu peux dire qu'après ta parenthèse que tu as eu l'année, tu peux y aller et juste faire ici un vide, juste comme ça. Ecoute, tu peux le faire après la parenthèse, tu fais ce deux-points et tu mets nul. Donc, cela signifie que cette fonction va faire quelque chose, mais il ne retournera jamais quelque chose, vous savez, comme lorsque vous essayez de retourner quelque chose comme un nombre ou autre, cette fonction ne retournera rien. Il va juste faire un peu de travail, puis s'arrêter et ne rien rendre. Donc on l'a mis ici, vide. Si, pour une raison quelconque, vous faites cette fonction qui fait quelque chose comme, par exemple, retourner, retourner un nom, Disons revenir, bonjour, disons qu'il est spécifié, ok ? Cette fonction va retourner une chaîne si vous voulez faire quelque chose comme ça. Ok, alors débarrassons-nous de ça parce que je ne vais rien rendre. Maintenant, à l'intérieur d'une fonction, vous devez toujours spécifier quel type de changements ou quel type de paramètres vous allez mettre ici. Disons que tu mettrais un nom ici. Donc, ce serait un paramètre que vous devez spécifier, ok, Ce paramètre que vous avez ici est de quel type ? Disons que tu en passes un autre. Ce serait l'âge. Celui-ci serait, par exemple, un nombre. Je ne sais pas. Vous devez donc spécifier à l'intérieur de tous les types de ces paramètres que vous mettez à l'intérieur. Mais ce n'est pas ce que nous voulons en ce moment. Nous voulons que chaque fois que nous faisons ici un événement onchange, nous allons exécuter cette fonction. Et la seule chose que je veux saisir d'ici, c'est l'événement. Donc, vous savez, quand vous tapez quelque chose, il y a un événement. Ainsi, vous pouvez réellement saisir, par exemple, la valeur du point cible de point d'événement. Nous pouvons donc saisir les valeurs de ces entrées. Donc on va juste mettre ici E, on pourrait mettre n'importe quel nom qu'on veut parce que c'est comme ça que tu peux attraper les événements ici. Vous pourriez écrire un événement ou vous pourriez juste avoir E est vraiment à vous. Eh bien, nous devons spécifier cet événement est quel genre d' événement cet événement dans React est avec le type de réaction. Donc, c'est quelque chose que vous avez probablement juste à faire une recherche rapide sur Google si vous ne savez pas à ce sujet. Donc, nous allons mettre ici l'événement de changement de réaction. D' accord ? Et c'est donc l'événement que nous faisons, React dot change événement. Et puis nous devons spécifier, ok, Dans quels éléments faisons-nous cela, cela va être sur cet élément qui est HTML. Et puis nous avons des entrées, élément d'entrée. D' accord ? Maintenant qu'on a ça, on devrait pouvoir y aller. Par exemple, si nous faisons quelque chose comme imagine point d'événement, empêcher l'apparence par défaut est même à venir. Si on veut faire quelque chose. Pour l'instant, je veux juste faire un console.log du point d'événement. Ecoute, quand je mets le point vient même à moi. Tout ce que nous pouvons faire avec ça, ok, Donc l'événement a les bulles annulent, niveau est fiable, et ainsi de suite. Je voulais attraper cette cible d'un point. Si je veux mettre un autre point, écoute, maintenant, je peux avoir beaucoup d'autres choses. La chose que je veux saisir, c'est que la valeur devrait être très probablement ici sur le V. C'est tout. D' accord ? Donc, lorsque nous faisons quelques changements sur ces entrées, nous allons avoir accès à l'événement que nous spécifions déjà le type. Et parce que nous spécifions le type de cet événement, nous pouvons accéder à toutes ces valeurs sans avoir à les chercher. Ok, alors vérifions si ça marche. Ouvrons la console. Allons ici. Faisons une console. Laissez-moi les éclaircir. Je vais juste mettre par exemple, T E L M0. Et comme vous pouvez le voir, chaque fois que nous tapons quelque chose arrive comme tout ce que vous tapez là-dedans, ce qui est génial. Ok, donc tout est bon. Maintenant, sauvegardons ces valeurs maintenant avant que nous finissions cette vidéo devient un peu longue. Et gardons ça sous l'état. Alors faisons ça. Pour mettre à jour notre état, nous devons exécuter cette fonction appelée set user state. Alors faisons ça. Je vais faire définir l'état de l'utilisateur. Donc ça doit être quoi ? Il faut être l'utilisateur actuel parce que c'est la seule chose que nous avons là-dedans en ce moment. Nous avons ici un utilisateur actuel. Et à l'intérieur de ce que je vais faire, je vais seulement mettre à jour chacune de ces valeurs, comme individuellement. Donc, par exemple, si je ne fais que taper le nom, je ne fais que mettre à jour celui-ci. Donc je ne le fais pas, si je viens de mettre ici, par exemple, le nom et puis une certaine valeur, je vais perdre toutes les autres propriétés. J' ai donc besoin d'utiliser l'opérateur de repos, qui est le point point point. Et puis je vais faire l'état de l'utilisateur. Donc c'est mon état. Je veux aller à l'intérieur des points. Utilisateur actuel, et je vais attraper tout ce qui est à l'intérieur de là. Et puis, d'accord, je vais mettre à jour la nouvelle valeur. Maintenant, quelle est cette nouvelle valeur que je vais mettre à jour ? Je vais mettre ici ce genre de tableau. Parce que ce que je vais faire ici, que je vais expliquer dans une seconde, c'est la valeur des points cibles. Maintenant, c'est soit le nom du point cible. Donc, fondamentalement, lorsque vous voulez spécifier une clé d'un objet dynamiquement comme celui-ci, sans avoir à mettre, par exemple, le nom, l'âge, le travail, ou autre. Nous disons que regarder, si je tape cette entrée, cette entrée, c'est celle où je fais mon onchange. Je cours mon gestionnaire onchange chaque fois que nous tapons dessus. D' accord ? Donc, nous avons accès à l'événement. Et parce que nous avons accès aux événements, je peux dire, d'accord, Chaque fois que je vais mettre à jour ceci, je suis en train de mettre à jour l'état, l'utilisateur actuel. Et ici, je vais prendre le nom du point cible E point cible. Donc, le nom de point cible de point d'événement va être cette valeur que nous avons ici nom. Donc, je sais que sur mon état apparaissent, je vais mettre à jour ces clés ici, soit le nom du point cible. C' est ainsi que vous pouvez saisir les clés dynamiquement. Donc maintenant, ici, je vais juste faire des cibles E point valeur point. D' accord ? Donc, je vais mettre cette clé que nous avons ici, la valeur que vous avez dans cette entrée que vous venez de mettre dans. Ok, donc ça devrait être bien ici. Maintenant. Je pense qu'on devrait être bien maintenant. On devrait être tous bons. Maintenant, nous allons juste, après avoir fait ça, faisons juste ça. Et faisons juste un console.log de ceux-ci de l'état de l'utilisateur. Assurez-vous simplement que cela fonctionne console.log de. Je vais supprimer celui-ci ici afin qu'il ne complète pas l'état utilisateur point utilisateur actuel. Ok, essayons-le. Juste rafraîchir. Je vais mettre un T E L M0. Et maintenant, Ok, il manque quelque chose ici. Ce qui nous manque maintenant, je me souviens de ce qui nous manque, c'est que dans notre fenêtre d'entrée, comme vous pouvez le voir, nous configurons la valeur de l'entrée pour être tout le temps comme vide. C' est pour ça qu'il est comme se réinitialiser tout le temps. Nous voulons que ces valeurs que vous avez dans l'année soient tout le temps. La même valeur que nous avons apparaître sur l'état. Donc, je vais mettre pour cette valeur de la première entrée, je veux être tout ce qui est à l'intérieur de l'état de l'utilisateur, point, utilisateur actuel. Comme vous pouvez le voir, nom de point, vous voyez, vous avez toutes ces choses à venir à vous à cause de TypeScript. Alors copions ça. On va faire la même chose ici maintenant pour le H, peu importe ce qu'il y a sur l'état. Et puis la même chose ici pour le boulot. Ok, nous allons juste rafraîchir ça. Allons juste ici. Je vais mettre t L M0. Et comme vous pouvez le voir, après que j'ai tapé, tout arrive ici sur la console que mon état a h, rien, travail, rien. Nom Thelma. Si je vais mettre ici maintenant, par exemple, 35. Comme vous pouvez le voir, nous avons maintenant 35 ans, nom Thelma. Et mettons-nous un boulot. Où est-il ? Donc, nous allons mettre, par exemple, un développeur de logiciels. Et c'est là. Maintenant, nous saisissons toutes ces valeurs que nous voulons et sauvons, les sauvant sur l'état. Bon, donc c'est tout pour cette vidéo devient un peu trop longue. Et puis sur le suivant, nous pouvons réellement saisir ces valeurs que nous avons ici et simplement les ajouter ici sur la page. Bon, donc je te verrai dans la prochaine. 4. Afficher la liste d'utilisateurs sur le navigateur: Bon, bienvenue. Donc maintenant, nous allons ajouter ces utilisateurs que nous venons de taper. Nous allons l'ajouter à notre page. Donc, tout d'abord, nous avons ici un formulaire avec toutes ces entrées et nous avons un bouton avec le type de soumission que nous voulons créer ici un nouvel événement qui va être sur soumission. Donc, fondamentalement, ces événements, onsubmit signifie que chaque fois que vous appuyez sur ce bouton ici de soumettre, vous allez soumettre toutes ces valeurs et faire quelque chose. Voyons ce qu'on peut faire maintenant. Nous allons créer ici la fonction appelée formulaire de soumission, comme ça. Alors créons ce formulaire. Alors, allons ici. Faisons const soumettre le formulaire. Bon, donc maintenant ça va être la même chose ici. Cette fonction, nous ne retournerons rien. Donc, spécifions-le comme vide. D' accord ? Et puis à l'intérieur, nous allons avoir dans un autre genre d'événement différent. Et l'événement que nous voulons avoir ici quand vous soumettez un formulaire, c'est un point React voyant événement esthétique, c'est le seul. Donc, chaque fois que vous soumettez un formulaire et que vous voulez avoir accès à l'événement que vous avez dedans. Cet événement ici va être avec un type de réaction dans cet événement. Et maintenant, comme vous le savez, quand vous soumettez un formulaire, vous allez essentiellement soumettre ce formulaire à une autre page ou à cette page elle-même, et vous allez recharger la page. Donc si nous faisons ça, nous perdrons notre état et tout ce que nous avons ici. Nous voulons donc éviter que chaque fois que nous soumettons ce formulaire, nous voulons faire un événement. Et comme vous pouvez le voir, regardez, la première fois que j'ai fait E dot est même d' abandonner toutes les différentes sortes d'options que je peux faire avec ce genre d'événement. Donc je vais mettre ici ce point empêcher par défaut. Je fais juste cela pour empêcher la page de se recharger. Vous pouvez l'essayer si vous voulez. Donc maintenant que nous avons ça, ce que je veux faire est ici en haut, vous vous souvenez quand nous avions cet état d'utilisateur avec l'utilisateur actuel à l'intérieur ? Je veux que l'Etat ait quoi ? Pour avoir un utilisateur actuel, mais aussi avoir ici un tous les utilisateurs. Et tous ces utilisateurs que nous allons avoir ici va être un tableau car il va y avoir beaucoup de ces utilisateurs à l'intérieur. Donc, ce sera un tableau avec beaucoup de ces utilisateurs. Comme vous pouvez le voir, maintenant, nous avons quelques erreurs ici qui nous disent ce regard. Nous avons dit que notre état d'utilisateur ici, regardez, nous spécifions le type. Nous avons dit, ok, notre état d'utilisations va être un objet avec la valeur de l'utilisateur actuel. Et puis chacun de ces utilisateurs actuels sera avec le type d'une interface utilisateur qui est distaff name, namestring h, string et ainsi de suite. Bon, donc nous manquons tous nos utilisateurs. Donc, je pourrais entrer ici maintenant et mettre, par exemple, nos utilisateurs tous et ainsi de suite. Mais cela devient trop long maintenant, je pense que c'est mieux pour nous de créer réellement. Et maintenant cette interface, cette fois pour notre état d'utilisateur, ok, je pense que c'est une meilleure idée. Alors faisons ça. Allons ici et faisons une interface. Parce que nous voulions les créer pour un objet fondamentalement. Et nous allons appeler cela tous les utilisateurs int comme court juste pour l'interface. Je crois que j'ai raté quelque chose ici. Donc, lorsque vous créez une interface, vous n'avez pas réellement besoin de passer ces virgules, vous avez juste besoin de passer ces point-virgules. Donc, lorsque vous créez une interface n'est pas vraiment comme un objet. Ainsi, vous pouvez simplement faire le nom, la chaîne, h, la chaîne, et ainsi de suite sans avoir à passer les virgules. Nous créons donc ces interfaces pour cet état utilisateur. Donc, fondamentalement, ce que notre état utilisateur a là-dedans, nous avons un utilisateur actuel. Mettons ça ici. Quel est le type de cet utilisateur actuel ? Nous avons déjà dit, Ok, le type de cet utilisateur actuel est cet objet que nous avons ici. Très bien, alors disons que c'est une interface utilisateur comme nous l'avons fait ici. Ok, donc pour celle-là, on va tous bien. Ok, quelle est la prochaine valeur que nous avons dans notre état utilisateur ? Nous avons tous les utilisateurs. Alors attrapons ça. Mettons-le ici. Et maintenant, désolé, parce qu'on a ici un tableau, ok ? Nous devons spécifier ici comme ce tableau. Et donc c'est la façon dont vous pouvez dire TypeScript que la valeur que nous avons ici est un tableau. Vous dites, c'est un tableau. Et maintenant avec ces moins de, plus que de signer ce genre d'accolades de crocodile, vous devez dire, Ok, quel genre de tableaux il, quel genre de choses allez-vous mettre à l'intérieur de cet objet ? Les choses que je vais mettre à l'intérieur de ces objets, ils vont être des objets comme ceux-ci vont être des objets avec des noms, des âges et des emplois. Parce que cela va être comme plusieurs utilisateurs que vous allez mettre à l'intérieur. D' accord ? Donc, si ce que nous allons mettre à l'intérieur de ce tableau va être toutes les choses comme le nom, l'âge et l'objet. Comme pour Z, nous allons mettre comme plusieurs de ces objets comme ceci. Ok, chacun de ces objets, ils ont la forme, ils ont cette interface. Donc nous allons dire, ok, tous ces utilisateurs que nous avons ici vont être un tableau. Et à l'intérieur du tableau, ce que nous allons avoir ce sont ces objets avec cette interface utilisateur. Ok, donc nous sommes tous bons ici. Donc maintenant que nous avons cette interface prête pour notre état utilisateur, quand nous spécifions ici notre état américain. Supprimons tout ce qui est à l'intérieur d'ici parce qu'il prenait trop de place. Et maintenant, à l'intérieur de ces États américains, quelle est la forme de ces États américains ? Quel genre de types nous devrions avoir là-dedans. Celui-ci, l'interface de tous les utilisateurs. Passons-le ici et regardez, tout fonctionne bien maintenant. Donc, nous allons dire que regardez notre état américain, l'état utilisateur, le volume que nous allons passer dans l'état américain va être une interface pour tous les utilisateurs. Donc, cela signifie que cela va être un objet avec un utilisateur actuel. Ecoute, c'est l'utilisateur actuel ici. La forme de cet utilisateur actuel, ce type de ces utilisateurs actuels va être une interface utilisateur. Regardez avec le nom de l'âge des cordes. C'est ça. C' est ce que tu as. Et puis nous avons aussi tous les utilisateurs, qui est un tableau en ce moment est vide, mais cela a de l'importance. Donc nous disons que c'est un tableau. Et tout ce qui est à l'intérieur de ce tableau est, va être ce genre d'interfaces utilisateur. Ça va être des objets comme ça. Ok, on a déjà ça. Alors maintenant regardez, TypeScript nous dit même quelques erreurs ici. Écoute, parce que de notre fonction précédente, le gestionnaire onchange, quand nous mettions à jour l'état, écoutez, nous disons que, ok, mettons à jour l'état. Nous ne serions que l'utilisateur actuel, mais maintenant nous avons celui-ci ici que tous les utilisateurs. Donc, ce que nous pouvons faire, c'est, accord, à partir de notre état d'utilisateur, au lieu de simplement passer cela, amenons l'état des utilisateurs de l'opérateur de propagation. Et maintenant ce que nous voulions apporter de notre état utilisateur va être le Quoi d'autre ? Le, oh, ouais, on veut juste apporter ça. Nous voulons juste apporter l'état de l'utilisateur. Donc, fondamentalement, quand vous dites, amenons l'état utilisateur, cela signifie que nous allons apporter tous ces éléments. C' est ce que fait l'opérateur de propagation. On va copier tout ça. Et puis, ok, nous allons écraser cet utilisateur actuel avec ces nouvelles valeurs. Donc, en faisant cela, vous copiez toutes ces choses ici. Nous avons donc déjà cette valeur là-dedans. Et puis on est comme remplacer ces vieux par celui-ci. Ok, donc nous sommes tous bons ici. Maintenant sur notre formulaire de soumission, que voulons-nous faire ? Alors laissez-moi voir, nous avons eu notre formulaire de soumission et nous voulions mettre à jour notre état. Donc définissez l'état de l'utilisateur. Nous le voulons, tout d'abord. Faites un utilisateur actuel. Donc, dans l'utilisateur actuel, ce que je vais faire est comme quand je vais ajouter un nouvel utilisateur, je veux que nos valeurs que nous avons dans nos entrées soient réinitialisées. Donc je vais faire un nom vide comme ça. Je vais faire à l'âge vide aussi. Et je vais faire un travail vide comme ça. Donc, nous réinitialisons toutes les valeurs de l'utilisateur actuel fondamentalement, donc le, l'entrée est tout parti. Et puis nous allons mettre à jour tous nos utilisateurs. Donc, c'est un tableau. Et maintenant ce que nous allons avoir dans un tableau, parce que nous pourrions ajouter plusieurs utilisateurs. Vous voulez toujours faire un opérateur de propagation de l'état de l'utilisateur. Oups, utilisateurs, état point tous les utilisateurs. Donc, cela signifie que si pour une raison quelconque vous avez ajouté déjà plusieurs utilisateurs, vous voulez amener tous les utilisateurs qu'ils sont à l'intérieur de ce tableau déjà. C' est ce que nous faisons avec l'opérateur de propagation. Et puis vous pouvez ajouter votre nouveau. Les enjeux des utilisateurs pointent l'utilisateur actuel. Donc l'état de l'utilisateur point utilisateur actuel. Donc, vous allez les attraper tous qu'ils étaient alors MP4 et ensuite vous allez ajouter votre nouveau. Ok, donc je crois que nous sommes tous bons en ce moment, laissez-moi juste supprimer ça. Donc, je vais faire ici console.log de l'état de l'utilisateur pour voir si cela fonctionne réellement. Droit. Alors rafraîchissons la page que je vais mettre ici. Dis-moi. Je vais mettre ici 32. Je vais mettre ici, par exemple, ce sera un développeur de logiciels. Et maintenant, je vais appuyer sur Ajouter un utilisateur. Ok, donc c'est notre console qu'on a. Nous avons tous nos utilisateurs et regardons cela à l'intérieur de nos tous les utilisateurs. On a ces utilisateurs, juste celui qui porte le nom de Tom. Oh, 32, nom de poste et ainsi de suite. Ok, donc maintenant tout est bon. Mettons-les ici à l'intérieur de notre page et de notre page afin que nous puissions voir que sa valeur. Pour que nous puissions le faire rapidement. Nous pouvons le faire en créant ces variables. Allons juste ici et contre tous les utilisateurs va être égal à notre état utilisateur point tous les utilisateurs. Et puis on va faire une carte à points. Très bien, et donc fondamentalement une fonction de carte de points en JavaScript vous permettra de faire une boucle à travers un tableau et de faire tout ce que vous devez faire avec. Ok, donc on va faire une fonction ici. Le premier volume sera l'utilisateur que vous allez parcourir. Cela va être la valeur de votre tableau. Et le second sera l'indice de celui-ci. D' accord ? Donc, la fonction is.na a accès à ces index, ce qui va être la première fois que vous exécutez la boucle. L' index est 0, la deuxième fois est un et ainsi de suite. Et l'utilisateur va représenter l'objet que chaque fois que vous êtes en boucle dans le tableau. Ok, donc nous devons faire ici, en fait, écoute, tu devrais faire quelque chose comme ça. C' est notre carte del dot fonctionne donc vous devez jamais revenir comme ça et ensuite passer ce que vous voulez à l'intérieur. Mais au lieu d'avoir un dysfonctionnement avec ces accolades comme ça, je vais juste les remplacer comme ça par ces parenthèses normales. Donc, quand vous avez ce genre de parenthèses, cela signifie que nous allons retourner tout ce qui est à l'intérieur ici, donc vous n'avez pas besoin d'avoir ce mot-clé de retour. Donc, tout ce que je veux revenir ici maintenant va juste être, par exemple, un div. C' est juste comme vite de faire quelque chose. Par exemple, un H2 aura le nom d'utilisateur. Donc, parce que cela va représenter ces valeurs. Donc on a le poste d'agent de nom. Alors faisons ça. Où était-ce ? Où était-ce ici ? Donc nom d'utilisateur, je vais faire copier cela plus. Donc nom d'utilisateur, âge de l'utilisateur et travail de l'utilisateur. Bon, donc on a tout ça. Passons ici une clé. D' accord ? Donc, ceci est juste réagir veut que vous passez une clé unique à chacun de ces éléments chaque fois que vous les créez. Et c'est tout. Donc, nous allons utiliser cette variable de tous les utilisateurs. Et passons ce que notre formulaire. Donc je vais juste le mettre ici, je dois les mettre entre des accolades. Bon, voyons si ça marche. Rafraîchissons simplement la page. Allons ici. Dis-moi que je vais mettre 33. Je vais mettre ici qui est un pilote et appuyez sur Ajouter un utilisateur. Voilà, Thermo, celui-ci, et celui-ci. Ok, donc on est tous bons ici. Essayons à nouveau. Disons David. David aura 35 ans et sera développeur de logiciels. Je vais appuyer sur Ajouter, et comme vous pouvez le voir, nous ajoutons chacun d'eux ici. D' accord. Donc oui, on est tous bons ici. Donc je pense que ça va être tout pour cette vidéo. Dans le prochain, nous allons juste apprendre comment nous pouvons réellement cliquer ici dans chacun de ces éléments et tout comme les supprimer. Donc, si vous voulez supprimer chacun de ces utilisateurs, accord, donc c'est tout pour cette vidéo et je vous verrai dans la prochaine. 5. Supprimer l'utilisateur: Très bien, il est donc temps pour nous de commencer à supprimer toutes ces valeurs que nous ajoutons. Donc, pour cela, je vais aller ici et où nous avons tous ces utilisateurs que nous avons ici. Je vais passer ici sans doute comme un bouton. Et ce bouton va dire que l'utilisateur principal pourrait être n'importe quoi. Je vais juste l'appeler supprimer l'utilisateur. Et je vais mettre ici un événement onclick. Donc, chaque fois que je vais cliquer sur ce bouton, je veux réellement supprimer cet utilisateur. Donc, je vais mettre ici un gestionnaire de suppression. D' accord ? Ce sera notre fonction que nous ne lancerons jamais chaque fois que nous voulons supprimer ces utilisateurs. Alors les gars vont ici. Faisons un gestionnaire de suppression. Donc, tonnes Supprimer le gestionnaire. Cela va être une fonction juste comme ça. Et maintenant, le truc est, je veux que cette fonction soit exactement comme ça dans notre fonction. Et je voulais passer la valeur de l'index parce que comme vous pouvez le voir, regardez, quand nous passons ici cette fonction, d'accord ? Et nous voulons saisir l'index de ces utilisateurs en particulier, donc nous savons quel utilisateur nous sommes réellement, quel utilisateur nous essayons de supprimer. Donc, cette fonction ici prend ce périmètre d'index. Alors passons ici sur le dessus. Cela va être un index et le type de ceci va être un nombre parce que c'est ce que nous passons ici est un nombre et cette fonction ne retourne rien. Alors mettons-nous ici vide. Bon, alors qu'est-ce que cette fonction va faire ? Tout d'abord, je vais créer une nouvelle variable appelée, par exemple, const, filtrer les utilisateurs. Parce qu'on va les filtrer. Et ce qu'on va faire, ce sont des utilisateurs. Donc, les utilisateurs Etat point, tous. Alors, donc les utilisateurs, pourquoi n'est-ce pas ? Parfois, ça devient un peu plus lent parce que j' ai oublié de mettre le signe égal ici. C'est pourquoi. Donc, nous avons l'état utilisateur, tous les utilisateurs. C' est là que nous voulons maintenant faire une boucle à travers ces. Et je vais faire ici un filtre à points. Donc, fondamentalement, le filtre de points, ce qu'il fait est une autre de ces fonctions JavaScript que nous allons boucler à travers une course. Donc, chaque fois que je vais faire une boucle à travers le tableau de mes tous les utilisateurs. Donc, si vous vous souvenez que tous les utilisateurs ont des objets à l'intérieur, comme avec le nom, l'âge et ainsi de suite. Donc, nous allons représenter chacun de ces objets avec ce périmètre d'utilisateur. Et puis je vais mettre cet index ici. Donc, ce sera l'index actuel de la boucle que nous allons traverser. Donc on va mettre ça ici, et je vais mettre des parenthèses, pas des accolades. Donc, je peux juste comme les rendre tout de suite. En fait, non, je vais mettre ici cette fois les accolades, juste pour que vous puissiez voir que vous pouvez faire d'une façon ou d'une autre. D' accord ? Donc, à chaque fois que vous mettez ces accolades, comme nous l' avons fait, maintenant, nous devons implicitement entrer ici et juste revenir de ce que vous voulez revenir. Ok, donc ici, on va rendre quoi ? Donc, nous allons parcourir toutes les valeurs de l'état et nous voulons seulement retourner les utilisateurs que l'index. Donc, si vous vous souvenez, ces index ici proviennent de l'utilisateur en bas ici sur lequel vous avez cliqué. Vous voulez uniquement renvoyer l'utilisateur. Si l'index que vous cliquez ici va être différent de ces index de tous les utilisateurs que vous essayez de juste comme boucle. Donc, fondamentalement, ce que nous faisons est comme imaginer que je clique sur le premier utilisateur. C' est l'utilisateur 0 parce que c'est la façon dont ils indexent les comptes, compte à partir de 012, comme un tableau. Alors imaginez que vous cliquez sur l'utilisateur 0. Quand nous exécutons ces utilisateurs filtrés, nous allons dire, Ok, cette fois je suis en boucle à travers tous les utilisateurs. Je suis en boucle dans le premier, le 0 est mon index. Celle-ci que je clique ici. Celui-ci est le 0. D' accord ? Donc nous passons ici un 0 est 0. À l'avant. Ensuite, ces IA, qui va être 0, non, ils ne sont pas différents, ils sont les mêmes. Donc, cela signifie que ces premières personnes sur lesquelles nous cliquons vont être supprimées et nous allons retourner tous les autres parce que l'index va être différent pour les autres. C' est donc ce que vous pouvez faire avec une fonction de filtre. Et maintenant que nous filtrons ici, nos utilisateurs, ce que nous pouvons faire est juste de mettre à jour l'état. Donc, je vais mettre ici l'état de la cellule de l'utilisateur. Et je vais mettre le point-point. Nous devons saisir l'état de l'utilisateur, tout ce qu'il y avait là-dedans d'avant. Et cette fois, ce que nous pouvons faire, c'est que nous allons faire tous les utilisateurs. C' est ce qui est à l'intérieur de notre état. Et la nouvelle valeur sera ce qu'il y a ici dans les utilisateurs du filtre. Donc je vais essayer d'expliquer un peu plus rapidement. Donc, avant de passer aux gars, rappelez-vous juste que lorsque vous faites le filtre de points, ce qu'il fait va créer un nouveau tableau basé ici, cet utilisateur de filtre variable va être un nouveau tableau. Et lorsque vous filtrez toutes ces valeurs, n'oubliez pas que cela doit être basé sur une condition de vrai ou faux. C' est ainsi que fonctionne la fonction de filtre. Et si vous faites une boucle, par exemple, pour le premier utilisateur, vous vérifiez l'index que vous cliquez ici. Différent de l'index actuel de ces boucles. Si elles sont identiques, ce qu'elles regardent la première fois que vous allez mettre ici est 0 que vous cliquez ici, différent de 0, qui est la première boucle. Non, ce n'est pas vrai. Donc, cela signifie que ces utilisateurs ici ne vont pas être passés à la, à ce tableau. Ensuite, si vous passez au deuxième utilisateur, ce que nous allons faire est comme Look, vous cliquez sur cet utilisateur, est toujours la même chose. Vous cliquez sur le premier utilisateur avec l'index 0. On va y aller. Sur la deuxième boucle. L' index est un. Donc, nous allons dire que ces index où nous avons cliqué en venant d'ici est différent d'un index. Oui. Ok, donc tu vas retourner, par exemple, le deuxième utilisateur. Je ne sais pas ce qu'il y avait là-dedans. Et juste comme ça. D' accord. Donc je suis sûr que vous connaissez déjà toutes ces choses. J' étais comme essayer d'expliquer un peu plus. Bon, alors maintenant que nous avons ici l'état utilisateur défini, nous devrions être en mesure de supprimer l'utilisateur sur lequel nous cliquons. D' accord, laisse-moi, on a déjà ça ici. Cherchez, je vais cliquer sur ce premier utilisateur. Je vais cliquer sur le feu des États-Unis, il est parti. Je vais cliquer sur le deuxième utilisateur et il est parti. Et, et je pense que les sièges, et je pense que c'est vraiment ce que nous avons ici. Maintenant. La seule chose que je vais faire maintenant, c'est comme deux étapes supplémentaires pour terminer ce projet, qui va être, et on pourrait essayer de découpler ça un peu plus. Nous allons essayer de déplacer ces choses que nous avons ici, ces tous les utilisateurs et ainsi de suite. Peut-être que nous pourrions les convertir en leur propre composant parce qu' moment nous faisons tout dans un composant n'est pas comme une très bonne idée. Donc, dans la vidéo suivante, Essayons de les séparer un peu plus en un composant différent et ainsi de suite. Et puis la dernière vidéo, nous allons juste aimer, style tout pour rendre ça agréable si vous voulez. D' accord, donc c'est tout. Je te verrai dans la prochaine. 6. Coder et optimiser le code: Bon, bienvenue. Commençons donc par ces refactorisation de notre projet. Alors allons à l'intérieur de notre dossier source et je vais créer un dossier appelé composants. Donc, cela pourrait être si vous voulez créer comme plusieurs composants et ainsi de suite. Donc ce que je vais faire ici, c'est que je vais créer un nouveau fichier, un nouveau composant appelé user.email ASX. Rappelez-vous que nous utilisons TypeScript, donc vous devez mettre ces extensions et je vais juste créer pour l'instant aussi un point d'utilisateur CSS comme ça. Donc tout devrait être bon. Maintenant, nous allons juste créer ici ces projets. Alors maintenant, je vais faire l'importation. Je vais importer React de React. D' accord ? Je vais importer le point CSS de l'utilisateur slash point. Cela doit être une majuscule parce que c'est le nom du fichier. Ok, on a tout ça. Maintenant, faisons, créons le composant. Faisons l'utilisateur const. Et ça va être un point de réaction f, c. D'accord ? Donc, ce sera un composant fonctionnel React. Et je vais mettre ça ici comme ça. Bon, maintenant que nous avons créé nos composants fonctionnels React et que nous allons avoir un retour à l'intérieur. Et ce que nous voulons revenir ici. Je vais avoir un diff avec un nom de classe. Je vais juste mettre ici quelques noms de classe que nous allons appliquer parce que sur la prochaine vidéo, nous allons vraiment aimer les styles. Donc je vais juste mettre les cours maintenant et ensuite on peut faire le reste. Donc ici, je vais avoir un div avec un nom de classe de ligne. Juste comme ça. Et, et des idées, je vais avoir un H2 qu'on nomme, d'accord ? Et puis un paragraphe que nous allons avoir le nom, par exemple John ou autre. Ok, donc on a ce nom, puis John, et ensuite on va faire des règles horizontales comme ça. Je pense que ça doit être à l'intérieur d'ici. Ok, assurons juste que nous organisons bien le code. Ok, alors écoutez, nous avons ces cartes. On a une rangée avec celle-là. Nous avons une règle horizontale juste pour créer comme une division. Et puis je vais mettre une autre rangée, laisse-moi juste les copier en fait. Et puis je vais passer ça aussi. Je pense que ce sera très semblable à ce que nous faisons. Oui. Donc je vais les copier une fois de plus. Comme ça. Donc ça va être, n'est-ce pas h ? Et je vais mettre ici, par exemple, 23. Et je vais mettre ici, c'est h, et voici John. Ok, donc ça va être un chauffeur. Ça n'a pas besoin de ça. Et enfin, on a juste besoin d'un bouton. Et nous allons avoir besoin de ces noms de classe doit être capital. Et nous allons mettre ici le bouton de suppression. Et nous allons dire que supprimer l'utilisateur pourrait être n'importe quoi. D' accord, donc nous avons ici nos composants. Donc, fondamentalement, nous allons juste supprimer les choses que nous avions dans l'autre composant de l'application. Alors faisons juste une exportation de notre utilisateur. Ok, alors faisons-le exactement. Exporter par défaut. Exporter les valeurs par défaut utilisateur comme ça. C' est bon, donc tout va bien. Je pense qu'on est tous bons ici. Nous avons une importation React. C' est mieux. Je pense qu'il y avait une faute de frappe là-dedans. Ok, donc retourner dans notre app dot TSX, où nous avons nos anciens utilisateurs. Maintenant, nous ne voulons pas avoir ce truc tout le temps, ce genre de div ici, parce que fondamentalement nous avons juste créé notre propre composant. Ok, alors faisons-le. Commentons celui-ci. Et qu'allons-nous revenir quand nous parcourrons tous les utilisateurs de l'État ? Ce que nous allons faire, c'est que nous allons avoir notre composant utilisateur. Maintenant, évidemment, si nous avons ce composant utilisateur ici, nous devons l'importer sur le dessus parce que nous ne l'avons jamais importé. Alors importons ça. Importons. Je vais dire utilisateur. Je n'ai pas besoin d'avoir les accolades parce que nous avons exporté par défaut. Chaque fois que vous exportez par défaut, vous n'avez pas besoin de mettre ces accolades autour. D' où voulons-nous exporter cela ? Je vais mettre une barre oblique pour que nous puissions regarder sur le même niveau de répertoire. Nous voulons aller à l'intérieur des composants et nous voulons saisir notre fichier TSX point utilisateur. Vous pouvez simplement faire l'utilisateur point. Cette réaction comprendra que c'est le fichier que vous essayez de saisir. Ok, on a l'utilisateur. Maintenant, voilà le truc. Quelle est ma boucle ? Alors que la boucle, c'est là. Maintenant, à l'intérieur de ce composant, c'est là que nous devons commencer à passer les valeurs que vous devez saisir. Donc les valeurs que je vais passer. Donc c'est des bases de React, mais je suis comme vous le dire. Nous devons donc passer quelques propriétés à l'intérieur de ces composants afin que nous puissions les saisir puis à l'intérieur avec les accessoires. Donc je vais mettre ici, créer une propriété de nom. Et la valeur de cela va être l'utilisateur. Nom de point de notre boucle que nous avons fait ici. Juste comme ça. Donc, en créant cela, nous en créons un autre qui va être la propriété H et autre qui va être l'utilisateur point h. Et enfin, je vais passer un qui va être le saut. Et ce sera le travail de point utilisateur. Maintenant, il y a un problème ici, les gars, qui est au moment où nous avons créé notre composant, notre utilisateur, nous n'avons jamais spécifié quel genre de propriétés nous allons y passer. Nous n'avons jamais précisé quel genre de types nous avons ici. Donc, nous devons le faire. Bon, donc dans notre user.email ESX, nous devons spécifier ici, ok, vous pouvez passer ici, par exemple, invites comme ceci parce que c'est comme ça que vous attrapez toutes ces propriétés. Donc, vous pourriez graphier, par exemple, le nom du point des accessoires, les accessoires de point, le travail de point, et ainsi de suite. Avec ça. Ou tu pourrais y aller maintenant. Et au lieu d'avoir les accessoires, vous pouvez ces structurer cet objet et juste saisir ces valeurs tout de suite comme celles-ci, comme le nom At age et quoi d'autre était-ce ? Le nom, l'âge et l'emploi. Maintenant, évidemment, pour le moment, nous ne savons rien de ces valeurs. Nous n'avons jamais spécifié le type de ceci. Donc, ce que nous pouvons faire ici pour spécifier le type de ceci, Revenons dans notre app.js x. Et rappelez-vous quand nous avons créé ces interfaces pour comment un utilisateur devrait ressembler, comme avec la chaîne, âge, le travail et chaîne. Découvrons cette interface. Peinture. Allons juste sélectionné, découpez-le d'ici. Allons à notre interface utilisateur, nos composants utilisateur. Collons-le ici. Et maintenant, nous pouvons dire regarder, ces composants que nous créons, qui est un composant fonctionnel React. Mettons ici ce genre de crochets d'angle. Et nous allons dire, d'accord, ces valeurs que nous avons ici, le nom, l' âge et le travail, ils ont besoin de ces formes d'interface, ok, comme ça. D' accord, parce que je pourrais enlever celui-là d'ici et venir ici. Ecoute, c'est une chaîne et c'est quelque chose que nous pourrions potentiellement faire ça, mais nous pouvons juste passer ici, quelles sont les valeurs que nous allons transmettre à l'intérieur ? Donc, faisons l'utilisateur int, passons-le ici, et nous sommes tous bons. Ok, donc on utilise tout ce dont on a besoin. Maintenant, il y a un problème parce que si vous vous souvenez ici, quand nous créions notre interface pour l'état, nous avons dit, ok, l'utilisateur actuel va avoir une interface d'interface utilisateur. Mais maintenant nous n'avons pas celui-là ici. On ne l'a pas. Donc parce qu'on ne l'a pas. Cette interface que nous avons ici que nous utilisons pour ce composant en particulier, nous pouvons réellement l'exporter, ok ? Nous pouvons donc exporter ces interfaces. Donc, nous pouvons ensuite l'utiliser dans le fichier exe app.js. Alors faisons ça. Je vais importer. Et maintenant je vais les mettre ici comme ça, ça devrait aller. Oui, je vais mettre l'utilisateur. En fait, je vais attraper ça parce que nous importons déjà quelque chose de ce fichier. Alors faisons ça. Donc, l'utilisateur int. Donc j'utilise ce support d'angle, ces accolades parce que nous l'exportons juste. Pas par défaut. Par défaut est le composant lui-même look. Donc, le composant lui-même est par défaut, vous n'avez pas besoin d'accolades et celui-ci est juste l'exportation. Besoin de passer les accolades. Bon, donc maintenant que nous avons l'interface utilisateur est maintenant utilisée ici correctement. C' est effrayant que ces importants que j'avais, juste annuler ça. D' accord. Donc nous sommes tous bien maintenant avec tout ça. On manque quelque chose ? Laisse-moi vérifier. Oui, il nous manque quelque chose maintenant. Nous manquons maintenant quelque chose qui est fondamentalement maintenant ce bouton, quand nous cliquons dessus, le moment ne fait rien. Laissez-moi juste supprimer ceci. En fait, nous ne voyons même pas, nous voyons, nous voyons, nous voyons le nom, nous voyons l'âge et la suppression. Un regard lorsque vous cliquez ici sur le Supprimer, rien ne se passe. Ok, donc on doit passer cette fonction ici. Alors faisons ça. Alors, où est-ce qu'on traverse ? Où est-ce qu'on bouclera par ici ? Passons la clé aussi. Si vous vous souvenez, nous avons toujours besoin de passer juste une clé juste pour s' assurer que ça ne se plaint pas de ça. Donc c'est le I et nous devons passer ici, puis la fonction de suppression fondamentalement. Alors laisse-moi voir. Je vais les diviser en différentes lignes pour qu'on puisse mieux voir ça. Vous pouvez aussi le décomposer si vous le souhaitez. Pour que vous puissiez voir mieux. Donc, je vais mettre ici l'utilisateur de suppression. Ça va être le nom de mon accessoire. Et ce qu'on fait ici, c'est comme on l'a fait ici, c'est la même chose. Ok, Delete handler I. Donc, comme vous pouvez le voir dans notre utilisateur, nous spécifions cette interface qui a un nom, l'âge et le travail. Mais nous ne spécifions jamais cette fonction de l'utilisateur delete. Ok, regarde, regarde le nom de l'interface, l'âge, le travail, mais nous n'avons jamais spécifié l'utilisateur de suppression. Donc, parce que nous passons cette propriété, supprimez l'utilisateur. Donc, allons ici, mettre supprimer l'utilisateur. Ceux-ci doivent être avec un type de fonction qui ne retourne rien. C' est ainsi que vous spécifiez le type d'une fonction qui ne renvoie rien. Si cette fonction retournait une chaîne, elle mettrait, par exemple, quelque chose comme ceci. Si vous passez une propriété ici, par exemple, comme la couleur, elle passerait quelque chose comme cette chaîne. Laisse-moi juste enlever ça parce qu'on n'a pas besoin que j'essaie juste d'expliquer cette partie. Donc, je vais aller vide. Donc maintenant, nous devrions être en mesure de, chaque fois que nous cliquons sur ces boutons. Donc, je vais mettre sur le clic onclick. Nous allons exécuter la fonction que nous devons importer à partir d'apparaître, qui est que le plomb, l'utilisateur principal. Ok, alors attrapons cet onclick. Laissons ça. Et je pense que c'est tout. Est-ce que je manque quelque chose ? La propriété manque la piste vers l'utilisateur. Oui. Donc, ici en haut, l' utilisateur actuel, ce que nous avons dit ici, est une interface utilisateur. Donc, cela signifie que nous manquons cette fonction là aussi. Il faut qu'on le passe. Alors faisons ça. Faisons comme une fonction. C' est donc l'utilisateur principal. Et cette fonction va juste être une fonction qui ne retourne rien comme un, un objet vide. C' est très bien. Donc une chose qu'on a tout eu. Voyons donc, propriété delete user manque un type mais obligatoire dans l'utilisateur. Qu' est-ce que j'ai mis ici ? On a donc l'utilisateur principal. On a l'utilisateur principal. Alors, qu'est-ce qui manque ? Ligne 39. Donc, la propriété de l'utilisateur actuel supprimer l'utilisateur est manquant type, chaîne de nom, h, chaîne de travaux. Donc on a tout ça, non ? Donc, c'est quand nous mettons à jour l'état. Donc, lorsque nous mettons à jour l'état comme nous réinitialisons tout sur le formulaire de soumission. Nous devons aussi passer comme une fonction vide. Parce que nous sommes en train de réinitialiser, nous devons tout y mettre. Donc juste comme ça. Donc, l'utilisateur principal, une fonction qui ne retourne rien. Ok, donc on devrait être tous bons. Je pense que nous sommes tous bons maintenant, supprimons tout ce dont nous n'avons plus besoin. Je pense que nous sommes tous bons. Essayons. Je vais mettre Talmud, je vais mettre l'âge. Je vais mettre développeur de logiciels sont utilisateur, supprimer l'utilisateur et nous sommes tous bons. Ok, alors laissez-moi juste ajouter, ce sera des pilotes et je vais ajouter un autre utilisateur qui sera Peter. L' âge va avoir 18 ans et c'est un artiste. Ok, ajoutons l'utilisateur. Laissez-moi juste maintenant cliquer dans l'utilisateur principal ou quelque chose comme ça. Alors faisons juste le couvercle. C' est ça. Supprimer, c'est tout. Ok, juste une autre chose que j'aimerais couvrir avant de terminer cette vidéo, qui serait, vous pouvez en fait, vous savez, quand vous spécifiez toutes ces formes de champs, vous pourriez potentiellement en passer certains, par exemple, le h que nous avons ici en tant que champ facultatif. D' accord ? Donc, quand vous passez ici ce point d'interrogation après ce genre de type que vous dites. Donc, cela signifie que vous pouvez créer un objet avec toutes ces valeurs pour ressembler comme nom, âge, travail, et ainsi de suite. Par défaut, il vous faudra toutes ces valeurs. Mais quand vous passez ici, ce genre de point d'interrogation sera comme facultatif la valeur, d'accord ? Donc parce que nous avons ça comme ça, maintenant, il pourrait y avoir des choses que nous devons mettre à jour. Donc celui-là, par exemple ici, ceux-là de l'âge, ce qu'on veut faire, c'est si l'âge est défini, ok, donc je vais mettre fin. Et maintenant, je vais mettre entre parenthèses. Donc on peut faire ça comme ça. Donc si on a le H qui manque quelque chose, oui, je dois juste le dire comme ça et on devrait aller bien. Donc c'est le parent. Alors pourquoi ça ne marche pas ? Parce que j'ai besoin de fermer ces accolades. Donc je dis que si nous avons un H, nous voulons montrer cette partie ici, cette rangée qui dit l'âge et ainsi de suite. Sinon, on ne le montre pas. Voyons si je manque quelque chose d'autre d'ici maintenant. Je pense que nous devrions tous être bons. Donc ça devrait être comme facultatif, non ? Essayons encore une fois. Je vais passer ici sans le H, je vais mettre développeur de logiciel à l'utilisateur. Ecoute, on a le nom et le travail. Donc cela n'exigeait pas ça. Une autre chose que je veux passer avant d'oublier est que dans les forums, je veux mettre tous ces formulaires requis. Donc, c'est un attribut HTML que vous pouvez passer dans les forums comme celui-ci exige que fondamentalement lorsque vous essayez de soumettre ceci, il vous faudra le mettre je ne vais pas mettre sur l'âge parce que l'âge est facultatif. Mais regardez, si vous essayez de soumettre ceci, cela vous demandera une certaine valeur. Comme vous pouvez le voir, regardez, maintenant il se plaint de celui-là. D' accord. Alors c'est tout. Je mets juste ici les services soient Julius. Ce sera l'âge de 45 ans et ça va être un peintre et étrange. Donc, ces utilisateurs étaient sans âge, et c'est avec l'âge. Et nous pouvons les supprimer. Parfait. Ok, donc on est arrivés à la fin de ce projet, les gars. Je vais juste faire une vidéo de plus juste pour les coiffer parce que cela pourrait être potentiellement un bon projet à mettre sur votre site web de portfolio ou tout ce que vous voulez faire avec ces vraiment. C' est comme pour vous d'en apprendre un peu plus sur TypeScript et de réagir et ainsi de suite. Donc, la vidéo suivante, qui est la dernière que vous n'avez pas à faire, est simplement facultative. Mais si vous voulez rendre cette application agréable, Faisons-le. Bon, donc je te vois dans la dernière vidéo. 7. Ajouter un style CSS: Bon, donc bienvenue. Alors faisons ça. Comme commencer à les coiffer. Ça ne devrait pas prendre trop de temps maintenant. Donc la première chose que je vais faire ici, c'est que j'ai quelques styling ici sur le côté, donc je vais juste les attraper et vous pouvez juste suivre. Donc, je vais supprimer tout ce que j'ai obtenu dans mon application dot css. Et la première chose que je vais faire est d'appliquer à l'arrière-plan, ce genre de couleur verte. Bon, donc je peux même me débarrasser de ce que nous avons ici. Donc on a celui-là ici. Maintenant sur mon application point TSX. Donc, mon composant principal, j'ai ces nom de classe de conteneur. Donc ce que je veux faire là-dedans, c'est que je vais juste copier ça. Vous pouvez simplement fondamentalement, je ne vais pas aimer taper chacun d'eux parce que vous pouvez juste mettre la vidéo en pause et juste la copier. Donc, nous avons un conteneur avec ces marges de largeur maximale 0 auto et ainsi de suite. Donc ça va juste centrer ces choses ici sur la page. Ensuite, je vais aligner mon H1 sur la page. Donc nous avons eu ces H1 avec un titre. Donc il suffit de l'aligner ici sur la page. Et puis on a des cartes comme ça. Alors j'ai raté quelque chose ? Je crois que j'avais la carte quelque part ici. Laisse-moi vérifier. Donc, sur mon app.js x, laissez-moi juste vérifier. Nous avons attrapé contenant nous avons nos quatre. Oui, mon formulaire. Je veux lui passer un nom de classe de carte. D' accord. Et ce que cela fait est comme dans notre forme, il suffit de lui donner cette belle couleur de fond de blanc avec ce genre de rayon de frontière et ainsi de suite. C'est ce qu'on a fait. Ok, qu'est-ce qu'on manque d'autre ? Nous voulions cibler l'étiquette à l'intérieur de notre formulaire. Donc je vais faire ici, voiture de l'étiquette. Et nous voulons cibler aussi, les entrées, juste pour lui donner un style agréable aussi. Ok, entrée de carte. Enfin, nous avons le bouton Soumettre. C' est le dernier que nous avons besoin de sélectionner. Donc je vais juste l'attraper. Je vais juste aller ici, le copier. Et c'est juste un simple silence. Cette, cette vidéo n'est vraiment pas à propos. Donc, je vais passer le bouton ville n. Donc nom de classe de BTN si soigné. Ok, donc juste pour avoir l'air un peu mieux que juste réinitialiser mon Zoom que j'avais sur la page. Donc, tout ça va mieux. Donc si j'allais mettre ici, alors c'est l'annonce d'emploi. Ecoute, ça en soi est juste beaucoup mieux maintenant. Donc nous avons juste disparu si je ne me trompe pas, celui-là. Ok, alors faisons-le. Allons ici. Je vais faire mon CSS dont j'ai besoin pour ça. Donc, nous avons, allons dans l'utilisateur TSX. Laisse-moi juste voir, ai-je un conteneur utilisateur là-dedans ? Je n'en ai pas pour le moment, non. Droit. Alors faisons ça. Faisons ça. Je vais juste prendre une rangée qu'ils ont ici. Mettons la rangée ici. C' est ce dont nous avons besoin. Nous voulons saisir à l'intérieur de la rangée et le H2 aussi. D' accord, donc on a celui-là. Donc on a nos rangs, on a notre H2S. Nous voulons maintenant cibler les paragraphes, qui est celui-ci. Alors ajoutons un peu de style là-dedans, un peu de marge dix. Et enfin, on va juste styler le bouton. Alors faisons ça. Copiez ça. Va ici. Et on devrait aller bien. Il est là. Ecoute, je vais juste passer un autre utilisateur. Alors ça va être, dites-moi, ce sera l'âge et ce sera le pilote. Oups, je vais ajouter celui-là. Donc Peter, l'âge, je ne vais pas mettre NEH et je vais mettre ici ça va être médecin. Donc Dr. ajouter l'utilisateur et il est là. Écoutez, vous étiez tous des utilisateurs. Celui-ci est facultatif pour le H. Je peux supprimer et ajouter tout. Très bien, nous sommes arrivés à la fin de ce projet avec React et TypeScript. Donc, bien sûr, ce n'était pas comme un vaste où vous pouvez utiliser tout ce que vous pouvez faire avec TypeScript, mais je pense que c'est un bon projet pour vous de commencer à voir comment vous pouvez utiliser TypeScript et juste vous familiariser un peu plus. Bon, donc j'espère que vous apprécierez ce cours et je vous verrai dans le prochain. 8. Corrections finales: Ou je peux donc avant que nous finissions ces, il n'y a qu'une petite chose que nous devons ajouter ici parce que sinon nous ne verrons pas ici les valeurs dynamiques. Donc, si j'ajoute ici deux utilisateurs différents comme vous le verrez. Donc si j'ajoute par exemple, John, 25 ans, développeur de logiciels, Luke va venir John, 23 ans et chauffeur, nous n'avons pas mis ça. Et si nous essayons d'ajouter un autre utilisateur, par exemple, comme Peter, et que ce sera 18 ans et que le travail sera le look d'un pilote, ce qui va se passer. Ça arrive tout le temps, les mêmes valeurs. Donc on ne veut pas ça. Nous voulons vraiment mettre ici dans nos composants utilisateur, le nom, l'âge et le travail qui vient ici des accessoires. Alors mettons-les à jour rapidement là où nous avons John, nous ne voulons pas que ces valeurs soient tout le temps les mêmes. Mais maintenant mettons des accolades et injectons le nom. Alors passons ici le nom ici où nous avons, si nous avons un certain âge, nous voulions passer un agent qui n'aura pas 23 ans, mais il sera la propriété de l'âge lui-même. Et enfin là où nous avons du travail, ne mettons pas juste chauffeur. Eh bien, mettons ici le travail lui-même qui devrait venir ici de ces propriétés. Ok, avec ça, maintenant, nos projets devraient être complètement terminés. Maintenant, actualisons la page et essayons de s'assurer qu'elle fonctionne. Donc je vais mettre John, je vais mettre 28, par exemple. Et ça va être un développeur de logiciels. Je vais cliquer sur Ajouter un utilisateur. Et comme vous pouvez le voir, John, n'importe quel développeur de logiciels d'aide. Donc je vais juste mettre un nouveau nom maintenant. Je vais juste donner par exemple Jessica. Et l'âge sera 20 ans et le travail sera, par exemple, infirmière, je vais cliquer sur Ajouter un utilisateur. Et puis on a Jessica 20 et elle est infirmière. Essayons de supprimer l'un des utilisateurs. Assurez-vous que cela fonctionne. Essayons John, et que ce sont les gars. Maintenant, notre application est complètement terminée, notre projet est complètement terminé. J' espère vraiment que vous avez apprécié ça et je vous verrai dans la prochaine.