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
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
aux objectifs du cours, qui
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
comme dans React normal, qui est
une différenciation que je n'aime pas vraiment parce que nous utilisons React normal ici à la fin, donc comme
vous le savez
dans React pour les projets Web, vous pouvez maintenant mappez ce tableau de données dans un tableau de composants avec
la méthode map qui est une méthode Javascript normale. La méthode map prend une fonction qui s'exécute sur chaque
élément du tableau, donc ici
nous obtenons
notre objectif et elle doit ensuite retourner un nouveau composant ici. Encore une fois, j'utiliserai cette syntaxe de fonction de flèche
en ligne où au lieu d'avoir des accolades et de renvoyer quelque chose, j'omets les accolades et
j'omets l'instruction de retour, c'est une syntaxe Javascript valide, cela retournera
aussi tout ce que j'entre ici.
Ce que je veux retourner est un composant texte, donc ce composant
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
parce que ce que nous ajoutons aux objectifs du cours est le objectif entré et l'objectif entré est ce que
nous obtenons de la saisie de texte et ce n'est que du texte.
Donc ici, nous ne faisons maintenant que sortir du texte et je mappe tous mes objectifs de cours
en composants de texte qui seront affichés dans cette vue ici. Et avec cela, si nous enregistrons cela, nous devrions
déjà pouvoir commencer
à ajouter des objectifs, alors apprendre React Native est une chose que je peux entrer ici, appuyez sur ajouter et
le voici, apprenez-le pour
de vrai et nous l'obtenons aussi et si vous voulez aussi faire des
crêpes, vous pouvez le faire aussi et bien sûr, cela fonctionne aussi sur
iOS, apprendre React Native pour de vrai et bien sûr, je veux toujours faire des crêpes.
Donc, cela fonctionne et c'est ainsi que nous pouvons produire ici une liste d'éléments simple et très triviale.
Maintenant, bien sûr, ces articles ont l'air plutôt ennuyeux, alors nous pouvons peut-être y appliquer un style pour
les rendre plus beaux. Avant de faire cela,
veuillez noter que nous avons une erreur ici dans notre terminal.
Maintenant, notre application fonctionne clairement, mais l'erreur que nous obtenons ici est que chaque enfant dans une liste
doit avoir un accessoire de clé unique et c'est une règle React normale, rien de spécifique à React Native.
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
mettre à jour efficacement cette liste en arrière-plan si nécessaire. Vous faites cela en ajoutant un accessoire de clé ici,
puis la clé doit être un identifiant unique, pour
l'instant, allons-y avec l'objectif lui-même qui n'est pas strictement unique, vous pouvez entrer deux fois
le même objectif avec le même texte, ce qui vous donnerait un erreur mais pour
l'instant supposons que vous ne faites pas cela,
donc nous pouvons utiliser objectif comme clé et si nous le faisons, nous nous débarrassons de cet avertissement.
Si j'ai maintenant appris React Native, je peux l'ajouter sans erreur.
Encore une fois, si j'ajoute le même texte deux fois, techniquement, je n'ai même pas d'erreur ici, mais ce
serait
faux, la voici, voici l'erreur parce que j'ai deux enfants avec la même clé.
Donc, pour l'instant, nous supposerons simplement que vous ne le
faites pas, c'est la règle clé normale que vous avez également dans React normal.
Supposons donc simplement que vous n'entrez pas deux fois le même objectif et continuons à styliser ces éléments car
pour le moment, ils ne sont pas trop excitants.