1
00:00:02,620 --> 00:00:08,140
Pour visualiser et éditer notre code, nous avons besoin d'un éditeur et je recommande d'utiliser Visual Studio Code qui est

2
00:00:08,140 --> 00:00:13,480
un IDE très puissant et gratuit qui est idéal pour le développement Javascript, ce que nous faisons ici à

3
00:00:13,480 --> 00:00:14,210
la fin.

4
00:00:14,290 --> 00:00:16,680
Vous pouvez l'obtenir à partir du code. Visual Studio. com vous

5
00:00:16,720 --> 00:00:21,490
y trouverez des versions pour Mac, Windows et Linux, téléchargez simplement celle de votre système

6
00:00:21,790 --> 00:00:28,070
d'exploitation et parcourez le programme d'installation que cela vous donne. Une fois que vous l'avez installé, ouvrez Visual

7
00:00:28,070 --> 00:00:34,390
Studio Code et là-dedans, ouvrez votre projet en allant dans le fichier ouvert, puis choisissez simplement

8
00:00:34,390 --> 00:00:40,200
votre projet, dans mon cas, rn-first-app. Cliquez sur ouvrir ici et cela

9
00:00:40,220 --> 00:00:47,080
ouvrira maintenant le projet ici dans Visual Studio Code. Maintenant, mon code Visual Studio ressemble à cela, car j'ai un thème spécial

10
00:00:47,380 --> 00:00:51,950
activé que vous pouvez modifier dans les préférences, le thème de couleur et là j'utilise le thème dark plus.

11
00:00:51,970 --> 00:00:54,420
Donc, si vous voulez avoir le même

12
00:00:54,670 --> 00:01:00,680
aspect, vous pouvez l'utiliser et j'ai également installé une extension spéciale que vous pouvez faire sous les extensions

13
00:01:00,760 --> 00:01:08,230
de vue, là j'ai fait installer le thème d'icône de matériau, celui-ci ici qui est totalement facultatif mais vous pouvez l'installer à

14
00:01:08,230 --> 00:01:09,550
partir de là

15
00:01:09,580 --> 00:01:13,480
aussi et ensuite revenir à l'explorateur pour voir à nouveau vos fichiers

16
00:01:13,510 --> 00:01:16,060
afin que vous obteniez les mêmes icônes

17
00:01:16,060 --> 00:01:24,290
de fichiers que moi ici, encore une fois, c'est totalement facultatif et avec cela à l'écart, c'est notre application React Native gérée par expo.

18
00:01:24,300 --> 00:01:28,920
Maintenant, laissez-moi vous expliquer rapidement ce que nous avons ici, puis vous montrer ce que vous pouvez changer dans

19
00:01:29,190 --> 00:01:31,470
le code pour changer quelque chose dans votre application.

20
00:01:31,470 --> 00:01:34,350
Nous avons maintenant quelques dossiers et

21
00:01:34,380 --> 00:01:37,570
fichiers ici, le. Le dossier expo contient simplement

22
00:01:37,590 --> 00:01:43,500
une configuration pour l'expo, vous n'avez pas besoin de toucher à cela. Le dossier des ressources, qui contient des images dans ce cas, comme

23
00:01:43,500 --> 00:01:49,470
l'icône de votre application et l'image de l'écran de démarrage et nous allons explorer comment vous pouvez personnaliser cela vers la fin du cours et nous utiliserons d'autres

24
00:01:49,470 --> 00:01:55,470
ressources comme des images dans général tout au long de ce cours bien sûr. Le dossier des modules de nœuds contient toutes les

25
00:01:55,470 --> 00:02:01,120
dépendances de ce projet, c'est-à-dire React et React Native, mais aussi les dépendances des dépendances et ce dossier

26
00:02:01,120 --> 00:02:05,740
est géré automatiquement pour vous, vous n'avez donc pas besoin de le toucher et vous

27
00:02:05,790 --> 00:02:11,460
ne devriez pas le toucher en effet . gitignore est un fichier qui nous aide avec git qui

28
00:02:11,460 --> 00:02:16,920
est un système de gestion de code source ou un outil de gestion de code source et vous n'avez

29
00:02:16,920 --> 00:02:22,860
pas besoin d'utiliser git, si vous le faites, vous savez probablement ce que fait gitignore et si vous ne savez pas

30
00:02:22,860 --> 00:02:29,100
quoi git est, après cette conférence, vous y trouverez une brève introduction ou quelques ressources qui vous aideront à démarrer, mais vous n'avez

31
00:02:29,130 --> 00:02:34,530
pas besoin d'utiliser git pour travailler avec React Native. Watchmenconfig, c'est quelque chose que vous pouvez ignorer car vous voyez qu'il est vide ici,

32
00:02:34,530 --> 00:02:39,750
c'est un outil utilisé en arrière-plan par expo à la fin et l'application. fichier js puis le fichier qui

33
00:02:39,750 --> 00:02:45,930
contient le code qui est responsable du rendu de ce que nous voyons ici à l'écran.

34
00:02:46,590 --> 00:02:52,350
Nous y plongerons dans une seconde, l'application. json détient une configuration pour notre application React Native alimentée par expo

35
00:02:52,350 --> 00:02:59,140
et nous allons nous y plonger tout au long de ce cours pour le moment, ignorons-le. Babel config configure comment le code Javascript

36
00:02:59,140 --> 00:03:04,950
est optimisé et compilé, vous pouvez également laisser la valeur par défaut

37
00:03:04,950 --> 00:03:10,380
ici et le package. Le fichier json gère vos dépendances et là vous

38
00:03:10,700 --> 00:03:17,970
voyez que vous utilisez expo mais aussi React, aussi React DOM car expo prend également en charge la construction d'applications React pour le web mais aussi React

39
00:03:17,970 --> 00:03:23,910
Native ici et React Native web car encore une fois, expo vous donne la possibilité de créer également des applications Web avec

40
00:03:23,910 --> 00:03:28,710
l'aide de React Native, ce n'est pas quelque chose sur lequel nous nous concentrerons dans ce cours.

41
00:03:28,710 --> 00:03:30,600
C'est donc la configuration que nous avons

42
00:03:30,600 --> 00:03:35,520
ici, le fichier important pour nous en ce moment est l'application. fichier js parce que c'est à la fin responsable

43
00:03:35,790 --> 00:03:37,800
de mettre quelque chose à l'écran.

44
00:03:37,800 --> 00:03:43,350
Maintenant, le contenu exact du fichier que vous voyez ici dans votre application. Le fichier js pourrait changer au fil

45
00:03:43,410 --> 00:03:48,390
du temps, ce projet de démarrage qui est généré automatiquement est parfois simplement modifié.

46
00:03:48,570 --> 00:03:53,520
Cela n'affecte bien sûr pas ce que j'explique ici ou ce cours, cela ne signifie pas que quelque chose est

47
00:03:53,520 --> 00:03:55,300
obsolète ou quelque chose comme ça,

48
00:03:55,350 --> 00:03:57,580
c'est juste un projet de démarrage différent et

49
00:03:57,720 --> 00:04:03,130
si vous voulez suivre exactement le même que j'ai, vous '' Je le trouverai attaché, vous pouvez donc également l'utiliser, mais

50
00:04:03,150 --> 00:04:07,320
bien sûr, vous pouvez également continuer avec les téléspectateurs s'il a l'air légèrement différent, car comme

51
00:04:07,320 --> 00:04:09,870
je l'ai mentionné, ce n'est qu'un projet de démarrage que

52
00:04:09,870 --> 00:04:14,250
vous avez, React Native fonctionne bien sûr toujours de la même manière que Je l'ai expliqué ici

53
00:04:14,250 --> 00:04:19,770
et vous pouvez donc absolument suivre cela et ajouter votre application. fichier js exactement comme je l'ai ajouté et là-bas,

54
00:04:19,770 --> 00:04:24,290
nous voyons que nous importons React comme nous le ferions dans une application Web React.

55
00:04:24,420 --> 00:04:30,630
Nous devons importer React car ici, vous pouvez également voir que nous utilisons jsx qui est cette syntaxe

56
00:04:30,630 --> 00:04:32,640
Javascript spéciale qui ressemble à

57
00:04:32,790 --> 00:04:35,390
HTML mais à la fin est juste Javascript

58
00:04:35,460 --> 00:04:42,120
et au cas où vous ne l'auriez jamais vu, plongez certainement dans une application React ou React premier tutoriel, je

59
00:04:42,270 --> 00:04:45,720
m'attends à ce que vous sachiez comment React fonctionne généralement.

60
00:04:45,720 --> 00:04:51,270
Nous avons toujours une autre importation ici et c'est l'importation React Native où nous importons la feuille de style, le texte

61
00:04:51,360 --> 00:04:53,220
et la vue à partir de là.

62
00:04:53,220 --> 00:04:59,640
Maintenant, ce sont ces composants et fonctionnalités spéciaux dont je parlais plus tôt, le texte et la vue sont des

63
00:04:59,640 --> 00:05:06,720
composants fournis par React Native qui sont compilés dans les widgets de la plateforme native et la feuille de style est une

64
00:05:06,720 --> 00:05:10,290
fonctionnalité supplémentaire fournie par React Native qui vous aide à styler.

65
00:05:10,290 --> 00:05:15,820
Maintenant, ici, nous avons un composant React normal comme nous le construirions également dans une application React for Web.

66
00:05:16,120 --> 00:05:21,960
Nous avons un composant fonctionnel ici et avec l'aide de hooks React, nous ne pouvons travailler avec des

67
00:05:21,960 --> 00:05:28,110
composants fonctionnels que comme vous le savez probablement et ce composant fonctionnel retourne du code jsx qui est rendu à

68
00:05:28,200 --> 00:05:29,270
l'écran et

69
00:05:29,400 --> 00:05:35,550
ici nous utilisons le widget de vue ou le composant de vue fourni par React Native et le composant

70
00:05:36,270 --> 00:05:38,790
de texte et le composant de vue sont

71
00:05:38,790 --> 00:05:45,720
comme un div, c'est un bon wrapper, également bon pour appliquer certains styles pour certains conteneurs et détecte est ensuite utilisé pour

72
00:05:45,870 --> 00:05:50,030
sortir du texte que vous mettez entre son ouverture et fermeture des balises.

73
00:05:50,270 --> 00:05:57,090
Et ici, nous avons certains styles définis, React Native n'utilise pas CSS mais il utilise une syntaxe de

74
00:05:57,090 --> 00:06:04,890
style basée sur CSS ou suit des conventions de dénomination similaires, mais nous approfondirons la façon de styliser vos applications React

75
00:06:04,890 --> 00:06:08,550
Native tout au long de ce cours bien sûr.

76
00:06:08,550 --> 00:06:14,490
Donc, avec cela, changeons ce que nous voyons à l'écran et ajoutons un bouton ici.

77
00:06:14,490 --> 00:06:20,730
Maintenant, la bonne chose est que nous pouvons importer un bouton à partir de React Native, c'est un autre composant principal fourni par React Native, nous

78
00:06:20,730 --> 00:06:26,140
pouvons donc ajouter cette importation puis utiliser un bouton là-bas. Cependant, nous ne l'utilisons pas avec une balise d'ouverture

79
00:06:26,140 --> 00:06:27,280
et de fermeture,

80
00:06:27,280 --> 00:06:33,190
mais comme un élément à fermeture automatique, puis nous pouvons ajouter un accessoire de titre ici pour définir le texte

81
00:06:33,460 --> 00:06:36,620
que nous voyons sur un bouton, par exemple changer de texte.

82
00:06:36,850 --> 00:06:41,010
Maintenant, lorsque nous tapons sur ce bouton, nous pourrions vouloir changer ce texte ici et pour cela,

83
00:06:41,200 --> 00:06:45,970
nous devons gérer un état ici parce que je veux changer certaines données qui devraient conduire à ce que ce

84
00:06:46,180 --> 00:06:49,680
composant soit rendu de nouveau et pour cela, vous avez besoin d'un état .

85
00:06:49,900 --> 00:06:56,110
Maintenant avant React 16. 8 qui est pris en charge ici cependant, vous devrez le convertir en un composant

86
00:06:56,110 --> 00:07:00,270
basé sur une classe pour utiliserState, depuis React 16. 8, nous pouvons utiliser des hooks

87
00:07:00,310 --> 00:07:03,710
React et au cas où vous ne savez pas ce que

88
00:07:03,820 --> 00:07:08,620
sont les hooks, vous devriez certainement plonger dans les bases des hooks, vous trouverez ci-joint

89
00:07:08,620 --> 00:07:14,800
des ressources qui vous permettront de démarrer avec cela. Les hooks sont importés de React et ici, nous avons besoin du hook useState

90
00:07:14,800 --> 00:07:17,290
qui nous permet de gérer l'état dans un composant fonctionnel.

91
00:07:17,290 --> 00:07:26,230
Avec cela, nous pouvons utiliser ce crochet en appelant useState ici et en lui donnant une valeur par défaut qui pourrait être ce texte ici, coupons-le de là-bas

92
00:07:26,230 --> 00:07:27,910
et l'ajoutons ici sous forme

93
00:07:27,910 --> 00:07:34,420
de chaîne, puis ici, nous pouvons utiliser la déstructuration des tableaux pour obtenir notre sortie texte et obtenir une fonction pour

94
00:07:34,420 --> 00:07:41,040
modifier ou réinitialiser ou remplacer ce texte de sortie et c'est exactement comme cela que fonctionne le hook useState, il vous

95
00:07:41,110 --> 00:07:43,800
donne un tableau avec exactement deux éléments, où

96
00:07:43,840 --> 00:07:49,620
le premier élément est votre instantané d'état actuel, donc soit notre état de départ, soit ensuite pour les

97
00:07:49,660 --> 00:07:55,510
cycles de restitution ultérieurs, tout ce que nous définissons notre état et la seconde est une fonction qui

98
00:07:55,510 --> 00:07:56,120
vous

99
00:07:56,220 --> 00:08:01,300
permet de définir votre état sur une nouvelle valeur et l'appel de cette fonction rendra à

100
00:08:01,530 --> 00:08:07,150
nouveau le composant entier et le texte de sortie se référera ensuite à la dernière nouvel état.

101
00:08:07,180 --> 00:08:13,670
Donc ici entre le texte, je veux sortir le texte de sortie et sur une pression sur ce bouton,

102
00:08:13,680 --> 00:08:15,400
je veux changer cela.

103
00:08:15,400 --> 00:08:21,250
Donc, sur le bouton, nous pouvons donc enregistrer onPress qui est fondamentalement l'équivalent d'OnClick que nous aurions

104
00:08:21,310 --> 00:08:22,640
sur le Web,

105
00:08:22,660 --> 00:08:29,020
ici c'est onPress et ensuite nous devons le lier à une fonction, par exemple à une fonction en

106
00:08:29,020 --> 00:08:36,740
ligne anonyme ici avec cette syntaxe où nous appelons définir le texte de sortie et nous le définissons sur le texte modifié.

107
00:08:36,820 --> 00:08:42,340
Donc, cela appellera cette fonction ici, remplacera notre état, donc restituera ce composant, cela sera mis

108
00:08:42,340 --> 00:08:48,100
à jour dans le prochain cycle de rendu et donc puisque nous éditons le texte de

109
00:08:48,100 --> 00:08:51,520
sortie là-bas, cela changera. Si nous sauvegardons maintenant tout

110
00:08:51,520 --> 00:08:58,840
cela, le plus intéressant est que votre application que vous devriez toujours ouvrir sur votre téléphone devrait avoir automatiquement rechargée,

111
00:08:58,850 --> 00:08:59,390
vous

112
00:08:59,390 --> 00:09:00,830
n'avez pas besoin

113
00:09:00,920 --> 00:09:08,090
de la redémarrer, vous n'avez pas besoin de scanner à nouveau ce code ici, juste en modifiant le code et

114
00:09:08,150 --> 00:09:15,320
en enregistrant ce fichier, il devrait se recharger automatiquement ici. Et maintenant, si nous tapons maintenant sur le changement de texte ici, vous voyez

115
00:09:15,320 --> 00:09:19,020
le texte modifié et c'est votre première application React Native qui fait son travail propulsé

116
00:09:19,040 --> 00:09:24,590
par expo, mais encore une fois, vous pouvez le créer et le publier en tant qu'application autonome et nous le ferons d'ici la

117
00:09:24,740 --> 00:09:30,110
fin de le cours et donc c'est une façon incroyable de commencer et le développement de React Native peut être aussi simple

118
00:09:30,110 --> 00:09:30,850
que cela.

119
00:09:31,150 --> 00:09:36,510
Maintenant, avec cela, finissons ce premier module avant de plonger plus profondément dans React Native et d'écrire

120
00:09:36,590 --> 00:09:40,130
du code React Native à partir du deuxième module de cours.