1
00:00:02,230 --> 00:00:06,820
Et pour cela, il est logique de commencer ici dans l'application. fichier js.

2
00:00:06,820 --> 00:00:10,370
Maintenant, laissez ce terminal ouvert ici et ce processus en cours,

3
00:00:10,390 --> 00:00:15,280
bien sûr, afin que les modifications de votre code soient automatiquement répercutées sur les émulateurs

4
00:00:15,340 --> 00:00:18,420
et voyons maintenant comment nous pouvons commencer avec cela.

5
00:00:18,460 --> 00:00:23,590
J'ai déjà mentionné dans le premier module de cours que React Native est tout au sujet de ces composants

6
00:00:23,590 --> 00:00:28,870
de base intégrés comme le texte et la vue. Une vue serait votre div du développement web au

7
00:00:28,870 --> 00:00:32,920
cas où vous êtes un développeur web que vous êtes probablement si vous connaissez React.

8
00:00:32,920 --> 00:00:34,790
C'est donc un excellent composant de

9
00:00:34,810 --> 00:00:40,050
conteneur, vous pouvez le styler comme vous le voyez ici et vous pouvez envelopper d'autres contenus avec.

10
00:00:40,240 --> 00:00:44,930
Maintenant, un texte, d'autre part, est un composant central pour la sortie de texte,

11
00:00:44,930 --> 00:00:49,870
c'est son objectif, pas là pour sortir une image mais là pour sortir du texte.

12
00:00:49,870 --> 00:00:55,540
Maintenant, ce que vous ne pouvez pas faire dans React Native et c'est la première chose importante, vous ne pouvez pas par exemple

13
00:00:55,540 --> 00:00:57,810
sortir du texte entre une vue comme celle-ci.

14
00:00:57,910 --> 00:01:04,120
Si nous essayons de l'enregistrer sans ce wrapper de texte, vous voyez que nous obtenons une erreur. C'est par la façon dont un écran que vous

15
00:01:04,120 --> 00:01:09,880
verrez de temps en temps lorsque vous travaillez avec React Native, cela vous donne une erreur,

16
00:01:09,880 --> 00:01:15,910
il explique ce qui n'a pas fonctionné. Voici par exemple un message d'erreur assez clair nous disant que les chaînes

17
00:01:15,910 --> 00:01:17,800
de texte doivent être rendues dans le composant texte

18
00:01:17,950 --> 00:01:19,330
et pourquoi est-ce si important?

19
00:01:19,330 --> 00:01:21,100
Pourquoi est-ce que j'insiste là-dessus?

20
00:01:21,220 --> 00:01:24,590
Parce que c'est une différence importante pour le développement Web, vous pouvez y

21
00:01:24,610 --> 00:01:27,850
mettre du texte n'importe où. Dans le développement Web,

22
00:01:27,970 --> 00:01:35,800
vous pouvez avoir un div et entre les balises d'ouverture et de fermeture du div, vous pouvez avoir n'importe quel texte et cela ne fonctionnera pas

23
00:01:35,800 --> 00:01:41,500
sur React Native, non seulement parce que nous utilisons un div qui n'est pas pris en charge mais

24
00:01:41,650 --> 00:01:49,810
bien sûr parce que sur React Native, vous ne pouvez vraiment sortir du texte qu'entre balises de texte, vous devez donc utiliser ce composant de texte fourni

25
00:01:49,810 --> 00:01:56,530
par React Native pour sortir du texte et c'est une différence cruciale sur le Web où vous pouvez lancer votre texte n'importe où

26
00:01:56,530 --> 00:02:02,560
et dans React Native, c'est la manière il est plus important d'utiliser le bon composant intégré pour le travail que

27
00:02:02,560 --> 00:02:09,070
vous souhaitez effectuer et pour le style, pour configurer un conteneur dans lequel vous structurez un contenu différent, ce serait une vue,

28
00:02:09,070 --> 00:02:15,070
pour la sortie de texte, qui pourrait être un texte. Pour sortir une image par exemple,

29
00:02:15,070 --> 00:02:20,460
vous aurez un composant image. C'est ainsi que React Native fonctionne et en parlant

30
00:02:20,860 --> 00:02:28,180
de style, de mise en page, la vue a cela comme tâche principale, elle est principalement là pour appliquer des styles et pour mettre en

31
00:02:28,450 --> 00:02:31,070
page le contenu que vous avez là-bas et

32
00:02:31,180 --> 00:02:34,050
en parlant de cela, commençons par la mise en page.

33
00:02:34,360 --> 00:02:39,580
Disons que dans notre application, nous voulons avoir deux zones principales ici sur cet écran. En haut, je veux permettre à l'utilisateur d'entrer

34
00:02:39,580 --> 00:02:45,850
du texte et à droite, je veux avoir un bouton pour confirmer ce choix et en dessous, donc c'est

35
00:02:45,850 --> 00:02:46,720
la première

36
00:02:46,720 --> 00:02:47,640
partie, la zone

37
00:02:47,650 --> 00:02:53,110
de saisie et en dessous, nous avons le deuxième partie et c'est la liste des objectifs

38
00:02:53,110 --> 00:02:54,530
que l'utilisateur a entré.

39
00:02:54,550 --> 00:03:00,640
Donc donc ici dans l'application. js, nous pouvons commencer par avoir une vue d'habillage parce

40
00:03:00,640 --> 00:03:06,280
que, tout comme dans React normal, vous devez avoir un composant parent et ce sera généralement une vue dans React

41
00:03:06,280 --> 00:03:10,590
Native car cela vous donne la plupart des options de mise en page et de style

42
00:03:10,780 --> 00:03:17,910
et à l'intérieur de cette vue, nous pourrions avoir une autre vue pour la zone de saisie où nous ajoutons ensuite notre entrée et en dessous,

43
00:03:17,970 --> 00:03:23,860
encore une autre vue pour avoir notre liste d'objectifs et je vais me débarrasser de ce texte et c'est assez normal

44
00:03:23,860 --> 00:03:31,350
dans React Native que vous en avez beaucoup de vues imbriquées les unes dans les autres, afin que vous puissiez créer la mise en page de votre choix.

45
00:03:31,380 --> 00:03:38,150
Maintenant, débarrassons-nous de ce conteneur là-bas et de cette affectation de style et commençons avec tout cela

46
00:03:38,150 --> 00:03:40,230
à partir de zéro.

47
00:03:40,250 --> 00:03:46,100
À retenir en ce moment, chaque composant fourni par React Native a son propre travail, il n'y a pas beaucoup de

48
00:03:46,100 --> 00:03:51,560
composants mais ceux qui y sont ont des rôles clairement définis et vous créez ensuite votre interface utilisateur en imbriquant

49
00:03:51,560 --> 00:03:56,510
ces composants les uns dans les autres en fonction de ce que vous voulez réaliser, par exemple

50
00:03:56,510 --> 00:04:01,550
si vous voulez construire une mise en page, vous commencez par imbriquer quelques vues, puis une fois que

51
00:04:01,910 --> 00:04:07,040
vous êtes à la partie où vous voulez sortir du contenu, vous commencerez à ajouter des textes et ainsi

52
00:04:07,250 --> 00:04:14,960
de suite et nous Je ferai tout cela au cours des prochaines conférences. Vous pouvez également toujours consulter les documents officiels React Native et si vous cliquez sur Guides,

53
00:04:14,960 --> 00:04:21,740
Composants et API, vous obtiendrez un aperçu de ces blocs de construction de base. Vous trouverez la vue ici, le texte, l'image, la saisie de texte

54
00:04:21,740 --> 00:04:27,320
que j'ai déjà mentionnée plus tôt et quelques autres composants de base et vous verrez à peu près tous ceux-ci

55
00:04:27,350 --> 00:04:32,720
ou la plupart de ceux-ci tout au long de ce cours et ceci est un un excellent endroit pour

56
00:04:32,720 --> 00:04:37,370
plonger plus profondément et en savoir plus à leur sujet et comme vous pouvez déjà le voir

57
00:04:37,370 --> 00:04:44,360
si vous omettez ceux spécifiques à la plate-forme qui sont plus axés sur des créneaux, il n'y a pas beaucoup de composants de base, seulement environ

58
00:04:44,390 --> 00:04:51,110
10 composants de base et c'est ainsi que React Native fonctionne. Néanmoins, vous pourrez créer n'importe quelle application

59
00:04:51,110 --> 00:04:53,690
comme vous le verrez.