1 00:00:02,160 --> 00:00:08,820 Maintenant, pour afficher notre liste d'objectifs, ici dans la vue, je veux simplement afficher quelques composants de texte pour l'instant où j'imprime simplement 2 00:00:08,820 --> 00:00:16,290 mon objectif et pour ce faire, nous pouvons entrer une expression dynamique ici avec des accolades bouclées à ouverture et fermeture simples et maintenant nous nous référons 3 00:00:16,290 --> 00:00:17,910 aux objectifs du cours, qui 4 00:00:18,390 --> 00:00:25,860 est cette variable que nous avons obtenue ici avec la déstructuration des tableaux. Les objectifs du cours sont notre éventail d'objectifs et maintenant, tout 5 00:00:25,860 --> 00:00:27,890 comme dans React normal, qui est 6 00:00:28,110 --> 00:00:34,620 une différenciation que je n'aime pas vraiment parce que nous utilisons React normal ici à la fin, donc comme 7 00:00:34,800 --> 00:00:36,350 vous le savez 8 00:00:36,750 --> 00:00:43,590 dans React pour les projets Web, vous pouvez maintenant mappez ce tableau de données dans un tableau de composants avec 9 00:00:43,590 --> 00:00:50,280 la méthode map qui est une méthode Javascript normale. La méthode map prend une fonction qui s'exécute sur chaque 10 00:00:50,280 --> 00:00:52,230 élément du tableau, donc ici 11 00:00:52,230 --> 00:00:53,180 nous obtenons 12 00:00:53,190 --> 00:01:00,810 notre objectif et elle doit ensuite retourner un nouveau composant ici. Encore une fois, j'utiliserai cette syntaxe de fonction de flèche 13 00:01:00,810 --> 00:01:07,230 en ligne où au lieu d'avoir des accolades et de renvoyer quelque chose, j'omets les accolades et 14 00:01:07,230 --> 00:01:11,340 j'omets l'instruction de retour, c'est une syntaxe Javascript valide, cela retournera 15 00:01:11,370 --> 00:01:13,980 aussi tout ce que j'entre ici. 16 00:01:14,160 --> 00:01:17,740 Ce que je veux retourner est un composant texte, donc ce composant 17 00:01:17,880 --> 00:01:26,430 texte que nous avons importé de React Native et avec cela, nous pouvons maintenant afficher notre objectif ici car un objectif dans les objectifs du cours sera juste un texte 18 00:01:26,430 --> 00:01:32,280 parce que ce que nous ajoutons aux objectifs du cours est le objectif entré et l'objectif entré est ce que 19 00:01:32,280 --> 00:01:36,100 nous obtenons de la saisie de texte et ce n'est que du texte. 20 00:01:36,570 --> 00:01:42,210 Donc ici, nous ne faisons maintenant que sortir du texte et je mappe tous mes objectifs de cours 21 00:01:42,390 --> 00:01:49,630 en composants de texte qui seront affichés dans cette vue ici. Et avec cela, si nous enregistrons cela, nous devrions 22 00:01:49,720 --> 00:01:51,130 déjà pouvoir commencer 23 00:01:51,220 --> 00:01:59,260 à ajouter des objectifs, alors apprendre React Native est une chose que je peux entrer ici, appuyez sur ajouter et 24 00:01:59,260 --> 00:02:00,950 le voici, apprenez-le pour 25 00:02:01,050 --> 00:02:06,300 de vrai et nous l'obtenons aussi et si vous voulez aussi faire des 26 00:02:06,300 --> 00:02:11,610 crêpes, vous pouvez le faire aussi et bien sûr, cela fonctionne aussi sur 27 00:02:11,980 --> 00:02:18,480 iOS, apprendre React Native pour de vrai et bien sûr, je veux toujours faire des crêpes. 28 00:02:18,550 --> 00:02:23,960 Donc, cela fonctionne et c'est ainsi que nous pouvons produire ici une liste d'éléments simple et très triviale. 29 00:02:23,980 --> 00:02:29,830 Maintenant, bien sûr, ces articles ont l'air plutôt ennuyeux, alors nous pouvons peut-être y appliquer un style pour 30 00:02:29,830 --> 00:02:33,120 les rendre plus beaux. Avant de faire cela, 31 00:02:33,340 --> 00:02:36,680 veuillez noter que nous avons une erreur ici dans notre terminal. 32 00:02:36,730 --> 00:02:41,350 Maintenant, notre application fonctionne clairement, mais l'erreur que nous obtenons ici est que chaque enfant dans une liste 33 00:02:41,350 --> 00:02:46,190 doit avoir un accessoire de clé unique et c'est une règle React normale, rien de spécifique à React Native. 34 00:02:46,300 --> 00:02:52,930 En effet, vous devez toujours, lors du mappage de cela à une liste de widgets, attribuer une clé ici afin que React soit en mesure de 35 00:02:52,930 --> 00:02:58,750 mettre à jour efficacement cette liste en arrière-plan si nécessaire. Vous faites cela en ajoutant un accessoire de clé ici, 36 00:02:59,110 --> 00:03:01,730 puis la clé doit être un identifiant unique, pour 37 00:03:01,780 --> 00:03:05,890 l'instant, allons-y avec l'objectif lui-même qui n'est pas strictement unique, vous pouvez entrer deux fois 38 00:03:05,890 --> 00:03:09,970 le même objectif avec le même texte, ce qui vous donnerait un erreur mais pour 39 00:03:10,240 --> 00:03:12,650 l'instant supposons que vous ne faites pas cela, 40 00:03:12,670 --> 00:03:17,720 donc nous pouvons utiliser objectif comme clé et si nous le faisons, nous nous débarrassons de cet avertissement. 41 00:03:17,720 --> 00:03:21,850 Si j'ai maintenant appris React Native, je peux l'ajouter sans erreur. 42 00:03:21,850 --> 00:03:27,610 Encore une fois, si j'ajoute le même texte deux fois, techniquement, je n'ai même pas d'erreur ici, mais ce 43 00:03:27,610 --> 00:03:28,040 serait 44 00:03:28,040 --> 00:03:32,170 faux, la voici, voici l'erreur parce que j'ai deux enfants avec la même clé. 45 00:03:32,200 --> 00:03:35,650 Donc, pour l'instant, nous supposerons simplement que vous ne le 46 00:03:35,770 --> 00:03:40,580 faites pas, c'est la règle clé normale que vous avez également dans React normal. 47 00:03:40,780 --> 00:03:46,210 Supposons donc simplement que vous n'entrez pas deux fois le même objectif et continuons à styliser ces éléments car 48 00:03:46,210 --> 00:03:48,910 pour le moment, ils ne sont pas trop excitants.