1
00:00:02,380 --> 00:00:08,210
Nous avons donc déjà examiné un ensemble solide de bases dont vous avez besoin pour créer des applications React Native, pour travailler avec ces

2
00:00:08,210 --> 00:00:10,050
blocs de construction de base, même si

3
00:00:10,190 --> 00:00:13,460
bien sûr beaucoup de choses ne sont toujours pas claires, nous n'avons pas vraiment

4
00:00:13,460 --> 00:00:17,660
examiné de plus près le style et la mise en page et ainsi de suite, mais une

5
00:00:17,780 --> 00:00:22,820
chose que nous devrions certainement faire maintenant est également d'explorer comment vous pouvez créer vos propres composants, car jusqu'à présent, nous

6
00:00:23,030 --> 00:00:25,780
avons toujours travaillé dans l'application. fichier js et vous

7
00:00:26,000 --> 00:00:28,820
ne construirez certainement pas de plus grandes applications dans

8
00:00:28,820 --> 00:00:31,360
un seul fichier, ce fichier deviendrait super gros

9
00:00:31,430 --> 00:00:37,190
après tout et si vous avez un composant personnalisé que vous prévoyez de répéter, nous devrons maintenant copier et

10
00:00:37,190 --> 00:00:38,420
coller notre code.

11
00:00:38,660 --> 00:00:44,060
Créons donc de nouveaux composants et donc ici dans le projet, je vais ajouter un nouveau dossier nommé composants, le

12
00:00:44,060 --> 00:00:49,020
nom dépend de vous, mais comme je prévois de stocker certains composants là-dedans, le nom a du sens

13
00:00:49,710 --> 00:00:55,250
pour moi et là-dedans, je souhaitez créer un composant pour l'élément de liste et également un pour notre zone de saisie.

14
00:00:55,340 --> 00:01:00,320
Créons donc deux nouveaux fichiers là-dedans et j'aurai une convention de dénomination pour les

15
00:01:00,320 --> 00:01:09,440
fichiers où je commence par des majuscules et j'aurai mon GoalItem. js, c'est un fichier Javascript bien sûr

16
00:01:09,440 --> 00:01:16,100
et mon GoalInput. fichier js. Maintenant, les deux contiendront le composant React normal,

17
00:01:16,100 --> 00:01:21,830
alors commençons par l'élément d'objectif et importons donc React de React, tout comme vous devez le faire dans un projet React for web.

18
00:01:21,830 --> 00:01:29,570
Ensuite, ici, je vais créer mon composant fonctionnel, élément d'objectif qui obtient des accessoires et qui

19
00:01:29,570 --> 00:01:36,000
doit ensuite renvoyer du jsx ici et je l'exporterai par défaut, comme ça.

20
00:01:36,090 --> 00:01:42,030
Maintenant, le jsx que je veux y rendre doit utiliser des composants React Native ou d'autres composants personnalisés qui à leur tour

21
00:01:42,060 --> 00:01:44,570
utilisent des composants React Native et ici je vais

22
00:01:44,730 --> 00:01:51,180
aller avec ce contenu que j'avais ici. Je vais donc le couper de l'application. fichier js et retournez-le

23
00:01:51,180 --> 00:01:51,790
ici.

24
00:01:52,450 --> 00:01:57,100
Maintenant, pour utiliser ceci ici, nous devons importer la vue et le texte, donc

25
00:01:57,100 --> 00:01:59,970
ces deux composants, à partir de React Native.

26
00:01:59,980 --> 00:02:05,760
Importons donc la vue et le texte de React-Native ici.

27
00:02:05,790 --> 00:02:10,410
De plus, je configure des styles et je veux utiliser la feuille

28
00:02:10,410 --> 00:02:20,110
de style, je vais donc l'importer ici aussi, puis configurer ma constante de styles que vous pourriez nommer différemment bien sûr avec la création de la

29
00:02:20,380 --> 00:02:26,990
feuille de style et je reviendrai à l'application. Fichier js et saisissez mon style d'élément de liste ici, coupez-le à partir de là et accédez à

30
00:02:26,990 --> 00:02:32,960
l'élément d'objectif et ajoutez-le ici à cet objet que je passe à la feuille de style. créer.

31
00:02:33,020 --> 00:02:39,140
Maintenant, cela devrait fonctionner, mais bien sûr, ce que je produis ici ne sera plus sur les données de l'article, attendons

32
00:02:39,500 --> 00:02:46,550
plutôt que nous obtenions simplement cela en tant qu'accessoires, donc soit les accessoires les enfants afin qu'ils puissent être passés entre les balises d'ouverture

33
00:02:46,550 --> 00:02:53,210
et de fermeture de notre composant personnalisé ou peut-être des accessoires. titre, tout ce que vous voulez, un

34
00:02:53,210 --> 00:02:59,770
nom d'accessoire de votre choix. Nous pouvons maintenant utiliser notre composant

35
00:02:59,770 --> 00:03:06,580
personnalisé, l'élément d'objectif en revenant à l'application. fichier js et ici j'ajouterai l'importation à l'élément d'objectif avec un G majuscule, afin

36
00:03:06,580 --> 00:03:15,370
que React le reconnaisse comme un composant personnalisé à partir de. / components / GoalItem, vous pouvez omettre le. js et maintenant nous pouvons utiliser

37
00:03:15,370 --> 00:03:24,550
l'élément d'objectif ici dans l'élément de rendu en tant que composant personnalisé, dans ce cas, un composant à fermeture automatique parce que puisque

38
00:03:24,610 --> 00:03:30,220
j'utilise le titre des accessoires et non les accessoires, je n'attends rien entre l'ouverture

39
00:03:30,220 --> 00:03:37,660
et la fermeture les balises de mon composant personnalisé. Je m'attends à un accessoire de titre, alors définissons cela ici avec

40
00:03:37,660 --> 00:03:43,360
le titre, puis ici, nous pouvons pointer sur les données de l'élément, puis accéder à l'élément qui est un

41
00:03:44,480 --> 00:03:53,210
objet où nous avons une clé de valeur et avec cela, nous devrions toujours voir comme avant si nous entrons dans certains objectifs ici, apprenez tout sur rn, oui

42
00:03:54,870 --> 00:04:01,230
ça a l'air bien, maintenant avec notre composant personnalisé. Maintenant, voici une bonne pratique pour vous de mettre également la

43
00:04:01,260 --> 00:04:07,320
saisie de texte et le bouton ou cette vue entière ici réellement dans notre composant de saisie d'objectif et bien sûr pour

44
00:04:07,320 --> 00:04:12,810
cela, vous devrez également câbler la communication entre l'application. Le fichier js et le composant d'entrée d'objectif pour

45
00:04:13,170 --> 00:04:18,930
être informés lorsque les utilisateurs appuient sur ce bouton dans le composant d'entrée d'objectif, puis ajoutent des données ici dans

46
00:04:18,930 --> 00:04:19,730
l'application. fichier js.

47
00:04:20,280 --> 00:04:25,260
C'est comme ça que vous le feriez dans un projet React for web aussi, donc si vous avez de l'expérience avec

48
00:04:25,260 --> 00:04:30,860
ça, ça ne devrait pas poser de problème, sinon nous le ferons ensemble dans la prochaine leçon mais si vous savez comment le faire,

49
00:04:30,860 --> 00:04:32,250
essayez certainement maintenant par vous-même.