1 00:00:02,340 --> 00:00:06,210 Il y a donc eu beaucoup de discussions, beaucoup de choses se font, 2 00:00:06,210 --> 00:00:10,680 maintenant il est vraiment temps de faire fonctionner ce bouton et ajoutons un objectif ici, 3 00:00:10,680 --> 00:00:11,780 à droite et 4 00:00:11,850 --> 00:00:17,040 pour cela, nous devons découvrir ce que l'utilisateur a entré et par la suite, bien sûr écoutez un 5 00:00:17,040 --> 00:00:23,850 clic sur le bouton, puis ajoutez l'objectif entré à un tableau d'objectifs que nous devons gérer quelque part, que nous pouvons ensuite afficher 6 00:00:23,850 --> 00:00:26,460 là-bas dans cette vue de dessous, à droite, c'est 7 00:00:26,460 --> 00:00:26,850 ce 8 00:00:26,850 --> 00:00:29,630 que nous devons faire. Maintenant, dans ce cours, 9 00:00:29,670 --> 00:00:35,600 je n'utiliserai des composants fonctionnels qu'avec la fonction React hooks qui est relativement nouvelle, donc si 10 00:00:35,640 --> 00:00:41,550 vous ne connaissez pas encore React hooks, apprenez-en tout d'abord, par exemple dans mon React Complete 11 00:00:41,550 --> 00:00:42,120 Guide, 12 00:00:42,120 --> 00:00:47,250 je couvre en détail mais vous trouverez ci-joint quelques autres ressources qui vous permettront 13 00:00:47,250 --> 00:00:54,000 de démarrer avec les hooks React, car nous aurons besoin des hooks React pour, par exemple, obtenir l'entrée utilisateur. 14 00:00:54,000 --> 00:01:00,280 Nous avons utilisé le crochet useState pour ce que nous importons de React, non pas de 15 00:01:00,300 --> 00:01:02,070 React Native mais de 16 00:01:02,220 --> 00:01:10,620 React, c'est une fonctionnalité principale de React et puis ici dans ce composant fonctionnel, dans ce composant d'application, nous pouvons obtenir l'objectif 17 00:01:10,620 --> 00:01:19,110 entré et également obtenir l'ensemble fonction d'objectif entrée pour mettre à jour l'état à l'aide de useState et par défaut, nous avons 18 00:01:19,110 --> 00:01:24,840 un état initial qui est une chaîne vide car l'utilisateur n'a rien entré au début. 19 00:01:24,870 --> 00:01:27,330 Maintenant, nous pouvons le lier à 20 00:01:27,330 --> 00:01:33,870 la saisie de texte, ce qui signifie que lorsque l'utilisateur tape un caractère, nous voulons mettre à jour notre état 21 00:01:33,870 --> 00:01:39,240 et enregistrer le texte entré dans l'état ici auquel nous pouvons ensuite accéder via l'objectif entré 22 00:01:39,240 --> 00:01:46,680 et nous passerons l'objectif entré retour dans la saisie de texte. C'est cette liaison bidirectionnelle, c'est un soi-disant composant contrôlé que vous connaissez également 23 00:01:46,680 --> 00:01:50,380 de React pour le Web avec des éléments d'entrée HTML normaux. 24 00:01:50,430 --> 00:01:57,340 Nous pouvons donc ici écouter onChangeText, un accessoire fourni par la saisie de texte qui prend une 25 00:01:57,430 --> 00:01:59,930 fonction qui s'exécutera pour chaque frappe. 26 00:01:59,970 --> 00:02:04,660 Maintenant, nous pourrions fournir une fonction en ligne ici, mais nous pouvons également configurer une fonction 27 00:02:04,660 --> 00:02:09,850 distincte pour avoir un peu de code plus propre et vous pouvez avoir une fonction dans une fonction 28 00:02:09,850 --> 00:02:17,770 et nous devons l'avoir ici, afin que nous puissions utiliser notre état ou définissez la fonction d'objectif entrée ici, en ajoutant simplement une nouvelle fonction ici, le gestionnaire 29 00:02:18,990 --> 00:02:26,400 d'entrée d'objectif pourrait être un nom, mais le nom dépend de vous. Dans cette fonction, nous obtiendrons automatiquement le texte saisi, 30 00:02:26,580 --> 00:02:34,170 qui sera transmis par React ou par React Native ici et nous pouvons alors appeler définir l'objectif saisi et transmettre le 31 00:02:34,200 --> 00:02:40,770 texte saisi en tant que valeur car le texte saisi ici sera déjà un chaîne car nous connectons 32 00:02:41,100 --> 00:02:48,630 le gestionnaire d'entrée d'objectif à onChangeText en le pointant simplement ici. Maintenant, c'est important, n'ajoutez pas de parenthèses là-bas, car 33 00:02:48,900 --> 00:02:54,300 cela exécuterait cette fonction lorsque ce code serait analysé, donc lorsque l'interface utilisateur 34 00:02:54,330 --> 00:02:59,880 serait rendue pour la première fois. Cependant, vous ne voulez pas l'exécuter immédiatement, 35 00:02:59,880 --> 00:03:05,940 vous voulez l'exécuter à chaque frappe et par conséquent, vous prenez simplement le nom de la fonction, vous 36 00:03:05,940 --> 00:03:12,210 passez ce nom de la fonction à onChangeText et cela indique effectivement à React Native, hé c'est le Je 37 00:03:12,210 --> 00:03:19,260 devrais exécuter la fonction pour chaque frappe, donc n'ajoutez pas de parenthèses ici pour que cela puisse fonctionner à chaque frappe. 38 00:03:20,010 --> 00:03:25,170 Maintenant, au lieu de cette syntaxe de fonction, vous pouvez également utiliser une syntaxe différente qui 39 00:03:25,170 --> 00:03:31,080 est celle que j'utiliserai tout au long du cours, où vous créez une constante avec ce nom ici, puis 40 00:03:31,080 --> 00:03:38,190 la valeur de cette constante après le signe égal est simplement un fonction en utilisant cette syntaxe de fonction flèche, alors voici votre 41 00:03:38,180 --> 00:03:44,490 liste d'arguments et voici le corps de la fonction. C'est la syntaxe Javascript normale, elle est supportée par 42 00:03:44,490 --> 00:03:49,470 le code Javascript React Native est capable de s'exécuter et donc c'est la syntaxe que j'utiliserai, 43 00:03:49,470 --> 00:03:56,820 vous la connectez à onChangeText exactement de la même manière qu'auparavant. Bon, maintenant nous avons cette fonction connectée, nous mettons 44 00:03:57,090 --> 00:04:01,050 à jour notre état avec tout ce que l'utilisateur a entré 45 00:04:01,050 --> 00:04:07,800 à chaque frappe, maintenant nous devons également retransmettre ce texte dans la saisie de texte, afin qu'il s'affiche correctement 46 00:04:07,800 --> 00:04:14,190 en liant simplement la propriété value à objectif entré, donc à notre état qui changera à chaque frappe. 47 00:04:14,870 --> 00:04:20,400 Et avec cela, nous avons accès à l'entrée utilisateur, car elle sera 48 00:04:20,400 --> 00:04:27,010 désormais toujours stockée dans un objectif entré. Maintenant, lorsque l'utilisateur appuie sur le bouton, nous voulons utiliser cet 49 00:04:27,040 --> 00:04:33,730 objectif entré, donc pour cela je vais ajouter une autre fonction ici, ajouter un gestionnaire d'objectif et c'est juste une convention de dénomination que j'utilise 50 00:04:33,940 --> 00:04:39,310 pour ces fonctions ici, vous pouvez les nommer comme bon vous semble vous voulez, quoi que vous soyez habitué 51 00:04:39,310 --> 00:04:45,820 à partir de vos applications React, à la fin, le nom de la fonction devrait simplement décrire ce qui va se passer et qu'ici, 52 00:04:45,820 --> 00:04:52,920 il faudra appuyer sur ce bouton qui, à la fin, ajoutera un objectif. Ici, la fonction ne prendra aucun argument mais dans le corps de la fonction, 53 00:04:52,920 --> 00:04:58,150 je veux ajouter mon objectif entré à une liste d'objectifs et nous n'avons pas encore de liste, donc pour l'instant ce 54 00:04:58,230 --> 00:05:04,830 que je fais ici est le journal de la console, qui est pris en charge dans React Native, entrée d'objectif pour qu'au moins nous voyions que 55 00:05:04,830 --> 00:05:10,710 cela a été enregistré correctement et que cette fonction est exécutée. Pour que cela s'exécute, nous devons 56 00:05:10,710 --> 00:05:16,680 le connecter au bouton, là, nous pouvons ajouter l'accessoire onPress et pointer vers le gestionnaire 57 00:05:16,680 --> 00:05:24,160 d'ajout d'objectifs, à nouveau sans parenthèses, afin que cela ne s'exécute pas immédiatement, mais uniquement lorsqu'une pression se produit. 58 00:05:24,540 --> 00:05:33,720 Et maintenant, sauvegardons tout cela et revenons en arrière et entrons peut-être pour apprendre React Native et la bonne chose est que vous pouvez utiliser votre vrai 59 00:05:33,720 --> 00:05:41,560 clavier ici et appuyer sur ajouter et vous devriez voir ici dans votre terminal ce journal, vous verrez également ceci d'ailleurs dans 60 00:05:41,560 --> 00:05:48,130 vos outils de développement expo ici dans l'onglet navigateur. Là, si vous cliquez sur l'un des 61 00:05:48,150 --> 00:05:52,670 appareils connectés, celui où vous cliquez simplement sur le bouton dans 62 00:05:52,670 --> 00:05:57,730 mon cas, l'appareil Android, puis en bas, vous verrez également Learn React Native. 63 00:05:57,730 --> 00:06:05,350 Et bien sûr, cela fonctionne également sur iOS, apprenez tout sur React Native, si nous saisissons cela ici et cliquez sur ajouter, nous voyons 64 00:06:05,350 --> 00:06:12,840 également que vous êtes connecté ici et que dans les outils de développement expo, si nous cliquons sur l'iPhone à la tout en 65 00:06:12,840 --> 00:06:16,810 bas, nous voyons ce journal. D'accord, nous obtenons l'entrée utilisateur, 66 00:06:16,910 --> 00:06:21,530 nous la stockons, nous la consignons dans la console, bien sûr, nous ne voulons 67 00:06:21,530 --> 00:06:27,530 pas la consigner dans le journal, nous voulons la produire sous notre entrée ici à la place, nous 68 00:06:27,530 --> 00:06:35,000 voulons un liste de nos objectifs sous cette zone de saisie. Donc, pour cela, nous avons besoin de cette deuxième vue ici qui devrait produire notre liste d'articles. 69 00:06:35,030 --> 00:06:40,250 Donc ici entre les balises d'ouverture et de fermeture, je veux sortir tous les éléments que nous avons 70 00:06:40,280 --> 00:06:45,740 ajoutés, tous les objectifs que nous avons ajoutés. Pour cela, nous devons d'abord gérer nos objectifs et 71 00:06:46,400 --> 00:06:51,780 nous pouvons configurer un autre état pour celui qui est initialement un tableau vide, donc je passe un tableau 72 00:06:51,860 --> 00:06:58,010 vide comme valeur à utiliser State et là, nous avons nos objectifs de cours et un ensemble d'objectifs de cours une fonction. 73 00:06:58,010 --> 00:07:03,070 Maintenant, ces noms sont toujours à vous, mais ils devraient décrire ce qui est dans votre état et comment vous pouvez 74 00:07:03,070 --> 00:07:04,230 le mettre à jour. 75 00:07:04,240 --> 00:07:10,330 Alors maintenant, ici, lorsque nous ajoutons un objectif, je veux mettre à jour mes objectifs de cours pour ajouter le 76 00:07:10,330 --> 00:07:20,840 nouvel objectif et pour cela, je peux appeler définir des objectifs de cours et maintenant définir des objectifs de cours dans un nouveau tableau où je prends mes anciens objectifs de cours et ajoute 77 00:07:20,840 --> 00:07:21,740 un nouveau. 78 00:07:21,740 --> 00:07:25,100 Maintenant, c'est la syntaxe que vous ne connaissez peut-être pas, c'est 79 00:07:25,100 --> 00:07:30,470 ce que l'on appelle l'opérateur de propagation, c'est une fonctionnalité Javascript qui prend un tableau existant et les objectifs 80 00:07:30,470 --> 00:07:38,030 du cours est un tableau, c'est notre instantané de l'état actuel avant la mise à jour et en extrait tous les éléments tableau, puis les ajoute 81 00:07:38,030 --> 00:07:43,280 ici à un nouveau tableau, c'est pourquoi j'ai les crochets environnants, sans ces crochets environnants, cela ne fonctionnerait 82 00:07:43,280 --> 00:07:43,840 pas, 83 00:07:43,850 --> 00:07:49,310 mais maintenant nous créons un nouveau tableau et nous ajoutons tous les éléments de l'ancien tableau et maintenant nous 84 00:07:49,310 --> 00:07:51,100 pouvons ajoutez également un nouvel élément. 85 00:07:51,110 --> 00:07:53,370 Donc ici, j'ajoute une virgule pour ajouter 86 00:07:53,390 --> 00:08:00,310 un élément supplémentaire après tous les éléments que je retire ici et l'élément que j'ajoute ici est bien sûr mon objectif entré. 87 00:08:00,320 --> 00:08:04,680 Alors maintenant, nous mettons à jour notre liste d'objectifs avec l'ancienne liste 88 00:08:04,730 --> 00:08:10,250 d'objectifs, initialement une liste vide, mais cela augmentera au fil du temps car nous ajoutons également 89 00:08:10,250 --> 00:08:17,380 un nouvel objectif lorsque nous appuyons sur ce bouton. Maintenant, une petite note latérale, lorsque vous travaillez avec des objectifs 90 00:08:17,380 --> 00:08:21,410 de cours définis, les objectifs de cours sont notre état précédent et la 91 00:08:21,460 --> 00:08:28,210 façon dont React met à jour l'état, cela devrait toujours être votre instantané d'état le plus récent mais ce n'est pas garanti 92 00:08:28,360 --> 00:08:32,750 à 100%, pour avoir cette garantie à 100% , lorsque vous mettez à jour 93 00:08:32,920 --> 00:08:39,250 votre état sur la base de l'ancien état, vous pouvez utiliser la forme de fonction de cette fonction définie où vous 94 00:08:39,250 --> 00:08:39,950 ne 95 00:08:40,060 --> 00:08:46,870 transmettez pas la valeur de votre nouvel état ici mais à la place, vous la transmettez dans une fonction, généralement une fonction 96 00:08:46,990 --> 00:08:53,850 anonyme où vous obtenir votre état actuel ou vos objectifs actuels, donc votre instantané d'état actuel, puis vous retournez votre valeur mise 97 00:08:53,860 --> 00:09:01,240 à jour, alors ici je renvoie mon tableau mis à jour avec cette syntaxe de fonction de flèche en ligne où si vous n'avez 98 00:09:01,240 --> 00:09:06,640 qu'une seule expression, vous pouvez omettre les accolades et les accolades déclaration de retour et entrez simplement la 99 00:09:06,640 --> 00:09:08,650 valeur que vous souhaitez retourner et 100 00:09:08,680 --> 00:09:13,310 elle sera retournée et c'est tout Javascript normal ici, rien de spécifique à React Native. 101 00:09:13,450 --> 00:09:21,070 Alors ici, je prends ensuite mes objectifs actuels, puis j'ajoute mon objectif entré. Cette syntaxe est un peu meilleure, l'autre syntaxe aurait 102 00:09:21,070 --> 00:09:26,170 également fonctionné mais cela est garanti de toujours fonctionner car React Native 103 00:09:26,200 --> 00:09:33,520 ira toujours de l'avant et vous donnera la garantie, le dernier instantané d'état avant d'appliquer ensuite votre 104 00:09:33,550 --> 00:09:35,050 changement d'état ici. 105 00:09:35,260 --> 00:09:42,410 Maintenant, c'est très bien, nous allons maintenant avoir une liste, un éventail d'objectifs gérés ici. Comment pouvons-nous maintenant produire cela?