1
00:00:02,410 --> 00:00:05,440
Quelles sont donc nos alternatives au workflow géré?

2
00:00:05,440 --> 00:00:08,450
Une alternative consiste à utiliser la CLI React Native, vous pouvez

3
00:00:08,470 --> 00:00:10,950
en apprendre davantage à ce sujet sur la page

4
00:00:10,960 --> 00:00:15,430
officielle React Native si vous visitez cela, vous pouvez simplement rechercher Google React Native pour le

5
00:00:15,880 --> 00:00:22,120
trouver et là, si vous cliquez sur démarrer, vous êtes réellement accueilli avec deux façons différentes de démarrer et les façons présélectionnées d'utiliser

6
00:00:22,130 --> 00:00:23,080
l'Expo CLI, c'est

7
00:00:23,080 --> 00:00:24,960
l'approche que nous avons utilisée, non?

8
00:00:24,970 --> 00:00:30,220
Il n'y a donc rien de trop sophistiqué à cela, cela vous donne une application React Native utilisant expo, c'est ce que

9
00:00:30,220 --> 00:00:31,720
nous avons utilisé dans ce cours.

10
00:00:31,750 --> 00:00:35,410
Vous pouvez également cliquer sur le démarrage rapide de

11
00:00:35,410 --> 00:00:41,170
React Native CLI et maintenant ici, vous devez d'abord configurer votre système d'une certaine manière,

12
00:00:41,170 --> 00:00:47,530
puis vous pouvez installer un package séparé, le React Native CLI dont vous avez maintenant besoin pour

13
00:00:47,530 --> 00:00:55,060
créer un projet et pour l'exécuter et ainsi de suite. Maintenant important, vous trouverez ici les instructions d'installation détaillées pour les différents systèmes d'exploitation

14
00:00:55,300 --> 00:00:57,070
et applications que vous souhaitez créer.

15
00:00:57,100 --> 00:01:02,680
Maintenant, sachez que sous Windows, comme il est dit ici, vous ne pouvez pas créer d'applications iOS, de même sous Linux, vous

16
00:01:02,680 --> 00:01:07,870
ne pouvez y créer que des applications Android et vous trouverez des instructions d'installation si vous sélectionnez les options spécifiques.

17
00:01:08,590 --> 00:01:09,730
Sur macOS, vous

18
00:01:09,760 --> 00:01:14,170
pouvez créer iOS et Android et vous devrez également suivre ces instructions d'installation.

19
00:01:14,170 --> 00:01:19,030
Maintenant, je ne vais pas le faire en détail ici parce que vous les trouverez tous écrits ici

20
00:01:19,030 --> 00:01:20,110
bien sûr si

21
00:01:20,110 --> 00:01:25,960
vous voulez suivre, à la fin, vous devrez installer quelques packages, pas des packages npm mais des packages à l'échelle du système

22
00:01:25,960 --> 00:01:30,490
et le le processus d'installation exact diffère en fonction de la plate-forme sur laquelle vous exécutez.

23
00:01:30,580 --> 00:01:36,670
Vous devrez installer Android Studio ou Xcode, donc Xcode pour les applications iOS, Android Studio pour les applications Android et

24
00:01:36,670 --> 00:01:39,130
vous devez l'installer maintenant, auparavant c'était facultatif, je

25
00:01:39,160 --> 00:01:40,610
l'ai juste fait pour

26
00:01:40,630 --> 00:01:42,840
obtenir un simulateur, maintenant vous en avez

27
00:01:42,850 --> 00:01:47,020
besoin parce que maintenant ces des outils seront utilisés pour créer votre application.

28
00:01:47,080 --> 00:01:52,750
Auparavant, cela n'était pas nécessaire, car le wrapper expo a en quelque sorte lu notre code et l'a hébergé et

29
00:01:52,750 --> 00:01:56,780
vous pouvez également créer une application autonome avec expo dans le flux de travail géré,

30
00:01:56,810 --> 00:01:59,030
ce qui se produira dans le cloud.

31
00:01:59,320 --> 00:02:04,780
Maintenant que tout se passe localement, vous devrez donc installer Android Studio et ainsi de suite et l'installer

32
00:02:04,780 --> 00:02:07,540
avec toutes les options que vous trouverez ici.

33
00:02:07,550 --> 00:02:14,130
Maintenant, vous aussi, peu importe la plate-forme sur laquelle vous travaillez, vous devez également installer la CLI React Native, vous

34
00:02:14,140 --> 00:02:22,420
pouvez le faire dans votre invite de commande ou terminal normal, sur Mac ou Linux, vous devrez peut-être ajouter sudo devant obtenir les bonnes autorisations et

35
00:02:22,420 --> 00:02:27,670
cela va maintenant installer globalement la React Native CLI, pour cela vous avez également besoin que

36
00:02:27,670 --> 00:02:32,860
NodeJS soit installé car il utilise npm qui est le gestionnaire de paquets du nœud, alors

37
00:02:32,860 --> 00:02:34,450
assurez-vous de l'avoir également.

38
00:02:35,540 --> 00:02:38,330
Maintenant que React Native CLI est installé,

39
00:02:38,330 --> 00:02:44,990
nous pouvons commencer à créer un projet totalement sans expo et pour cela je vais créer un

40
00:02:44,990 --> 00:02:49,110
tout nouveau projet et j'ai sélectionné un dossier pour cela en

41
00:02:49,130 --> 00:02:53,120
exécutant react-native init et maintenant n'importe quel nom de votre

42
00:02:56,120 --> 00:02:59,950
choix, pour exemple RNWithoutExpo. Pour le nom, il est important qu'il

43
00:02:59,990 --> 00:03:03,380
soit écrit comme ceci, pas de tirets ou de soulignements mais juste un mot.

44
00:03:03,890 --> 00:03:08,780
Donc, RNWithoutExpo est le nom que je vais choisir et cela va maintenant créer un tout nouveau projet React

45
00:03:08,810 --> 00:03:14,450
Native en utilisant la CLI React Native à cet endroit où vous avez exécuté cette commande et il vous donnera ce nouveau

46
00:03:14,450 --> 00:03:16,870
dossier qui contient ce nouveau projet React Native.

47
00:03:16,970 --> 00:03:18,260
Maintenant important à

48
00:03:18,260 --> 00:03:24,800
nouveau, vous devez maintenant avoir Android Studio et Xcode installés et configurés comme mentionné dans les documents officiels

49
00:03:24,800 --> 00:03:25,690
ici, sinon

50
00:03:25,700 --> 00:03:28,520
ce que je vais vous montrer ne fonctionnera

51
00:03:28,520 --> 00:03:34,100
plus, vous avez besoin que cela soit installé car maintenant ces outils seront exploités par la

52
00:03:34,100 --> 00:03:40,820
React Native CLI pour créer et exécuter votre application. Faites également tourner certains émulateurs ou simulateurs, qui peuvent être les mêmes que ceux

53
00:03:40,820 --> 00:03:46,060
utilisés auparavant dans le cours, mais vous devez les faire fonctionner afin que nous puissions y voir notre application React Native en cours d'exécution.

54
00:03:46,560 --> 00:03:52,830
Alors maintenant, attendons que cette configuration se termine ici et une fois que cela est fait et que ce processus peut prendre un certain

55
00:03:52,860 --> 00:03:59,900
temps, vous pouvez suivre les instructions ici pour finalement exécuter votre application. Alors laissez-moi naviguer dans ce dossier nouvellement créé

56
00:03:59,900 --> 00:04:00,560
ici

57
00:04:01,640 --> 00:04:04,670
et exécutez run-ios réactif natif par exemple

58
00:04:04,750 --> 00:04:12,260
pour l'exécuter sur le simulateur iOS que j'ai obtenu. Maintenant, dans les coulisses, Xcode est utilisé pour construire cette

59
00:04:12,260 --> 00:04:13,070
application,

60
00:04:13,070 --> 00:04:19,180
il n'utilise plus expo, vous pouvez désinstaller le client expo ici, vous pouvez désinstaller l'expo CLI

61
00:04:19,220 --> 00:04:20,390
de votre système,

62
00:04:20,390 --> 00:04:26,510
cela ne tire pas parti du tout expo, il utilise simplement Xcode derrière les scènes pour construire

63
00:04:26,540 --> 00:04:33,020
votre application, donc cet outil de développement natif Apple. Attendons donc que cette version se termine et la première fois que vous la

64
00:04:33,020 --> 00:04:34,260
créez, cela prend un

65
00:04:34,280 --> 00:04:38,960
peu plus de temps, les reconstructions suivantes seront plus rapides. Attendons donc que cela se termine.

66
00:04:39,870 --> 00:04:43,980
Maintenant, tout au long de ce processus de construction, un nouvel onglet sera ouvert ou une

67
00:04:43,980 --> 00:04:47,430
nouvelle fenêtre dans votre terminal, gardez ce processus en cours d'exécution et maintenez également

68
00:04:47,430 --> 00:04:48,080
le processus

69
00:04:48,090 --> 00:04:53,610
de construction en cours, ne quittez pas cela, alors gardez ces deux processus opérationnels ici et maintenant, cela installe l'application sur le

70
00:04:53,610 --> 00:04:58,650
simulateur, dans ce cas, si vous aviez un véritable appareil connecté, il l'installerait là et il lancerait l'application là-bas et

71
00:04:58,650 --> 00:05:00,490
donc ici, il a en fait

72
00:05:00,580 --> 00:05:03,060
créé un nouveau simulateur ici pour moi, n'est-ce pas importe

73
00:05:03,090 --> 00:05:07,830
cependant, il lance maintenant l'application ici dans ce simulateur. Encore une fois pour le premier lancement,

74
00:05:07,830 --> 00:05:14,030
cela télécharge maintenant l'application intégrée sur cet appareil et vous avez également de belles fonctionnalités de développement, le débogage à distance

75
00:05:14,030 --> 00:05:18,270
peut être activé, vous avez donc toutes ces belles fonctionnalités ici également, ce n'est pas

76
00:05:18,300 --> 00:05:22,750
exclusif à l'expo et ce premier lancement prendra un peu plus de temps comme mentionné.

77
00:05:22,770 --> 00:05:30,220
Attendons donc que ce téléchargement se termine ici pour que l'application se lance et qu'elle arrive. Maintenant, l'écran de démarrage exact que vous voyez ici,

78
00:05:30,250 --> 00:05:32,410
qui peut différer au fil

79
00:05:32,500 --> 00:05:37,450
du temps, car ce n'est que le code de départ que vous

80
00:05:37,450 --> 00:05:43,990
obtenez dans le projet que nous verrons dans une seconde, mais c'est maintenant l'application, une application native

81
00:05:44,080 --> 00:05:50,740
sans expo sinon le même, fonctionnant sur iOS. Nous pouvons également l'exécuter sur Android et pour cela, ce processus qui est maintenant terminé

82
00:05:50,740 --> 00:05:52,330
peut être effacé, l'autre doit continuer à

83
00:05:52,330 --> 00:05:57,360
fonctionner, c'est votre serveur de développement qui parle à l'appareil et qui surveille les modifications de fichiers et pousse le nouveau code

84
00:05:57,360 --> 00:05:58,270
vers l'appareil ,

85
00:05:58,270 --> 00:06:03,250
donc ce que vous savez de l'expo, ça marche aussi ici. Donc, gardez l'autre processus en cours,

86
00:06:03,250 --> 00:06:10,300
mais maintenant nous pouvons également exécuter run-android réactif pour créer également l'application pour Android et tirer parti de ce même

87
00:06:10,300 --> 00:06:16,260
serveur pour ensuite également créer et pousser l'application Android vers l'émulateur Android, puis le voir également.

88
00:06:16,270 --> 00:06:17,950
Attendons donc que cela se

89
00:06:17,950 --> 00:06:22,850
termine, encore une fois cette première version prendra plus de temps, les rechargements suivants seront beaucoup plus rapides.

90
00:06:22,930 --> 00:06:28,150
Ce processus de construction tire désormais parti d'Android Studio que vous devez également avoir

91
00:06:28,330 --> 00:06:34,130
installé et configuré comme décrit dans les documents officiels et, par conséquent, cela fonctionne bien sûr

92
00:06:34,140 --> 00:06:37,190
sans aucune expo, il utilise simplement Android Studio.

93
00:06:37,370 --> 00:06:44,030
Maintenant, cela lance également l'application Android ici sur mon émulateur Android, mais comme auparavant, ce lancement initial peut prendre un peu de temps,

94
00:06:44,030 --> 00:06:45,470
maintenant il se connecte à

95
00:06:45,470 --> 00:06:48,600
ce serveur de développement que vous devez donc ici aussi continuer

96
00:06:48,710 --> 00:06:53,900
à utiliser, non seulement pendant sa construction ce bundle mais tout le temps pour que les modifications

97
00:06:53,900 --> 00:06:59,180
apportées à vos fichiers, vous obtenez une reconstruction en direct et une fois cela fait, voyons l'application terminée

98
00:06:59,180 --> 00:07:00,530
s'exécuter sur Android.

99
00:07:00,530 --> 00:07:03,500
Voyons maintenant le code qui en est responsable, est-ce

100
00:07:03,500 --> 00:07:07,420
que cela semble totalement différent de ce que nous avons vu jusqu'à présent?

101
00:07:07,550 --> 00:07:12,620
Pour cela, j'ai chargé le projet ici à nouveau avec Visual Studio Code, donc la même configuration qu'avant et

102
00:07:12,620 --> 00:07:18,140
ce que vous voyez est un peu différent mais surtout, nous avons un tas de fichiers de configuration différents, assez bien

103
00:07:18,140 --> 00:07:22,040
mais cela ne change pas vraiment la façon dont nous écrivons notre code.

104
00:07:22,130 --> 00:07:24,960
Très important, nous avons un dossier Android et iOS,

105
00:07:24,980 --> 00:07:26,320
nous n'en avions pas

106
00:07:26,360 --> 00:07:31,270
auparavant, ces dossiers et sur Windows d'ailleurs, Linux vous n'avez pas iOS, vous avez seulement Android

107
00:07:31,460 --> 00:07:36,740
mais ces dossiers contiennent la vraie application native projets qui sont construits avec l'aide d'Android Studio et Xcode

108
00:07:36,740 --> 00:07:40,570
et votre code est en quelque sorte intégré dans ce que vous pourriez

109
00:07:40,570 --> 00:07:45,710
dire, React Native fait tout cela pour vous, le processus CLI React Native, mais si nous jetons

110
00:07:45,710 --> 00:07:51,230
un coup d'œil au code concret dans le app. fichier js, eh bien c'est exactement

111
00:07:51,230 --> 00:07:58,430
ce que nous avons utilisé dans ce cours, non? Là, nous avons quelques importations et quelques liens supplémentaires qui vous montrent quelques avertissements

112
00:07:58,430 --> 00:08:00,180
ici concernant le style de code.

113
00:08:00,230 --> 00:08:04,160
Ce ne sont pas des erreurs réelles, juste que je devrais utiliser des guillemets doubles

114
00:08:04,170 --> 00:08:08,570
au lieu de guillemets simples, oui une recommandation qui ne m'intéresse pas ici, mais si vous regardez ce

115
00:08:08,630 --> 00:08:13,560
qui est importé ici, réagissez, enregistrez la vue de la zone, la feuille de style, la vue de défilement ,

116
00:08:13,700 --> 00:08:18,520
view, text - ce sont toutes des choses avec lesquelles nous avons déjà travaillé, nous avons donc les composants

117
00:08:18,710 --> 00:08:26,690
normaux avec lesquels nous avons déjà travaillé et bien sûr nous le faisons parce que ce que j'ai dit tout au long de ce cours, React Native est React Native, expo est un

118
00:08:26,690 --> 00:08:27,780
mince emballage autour .

119
00:08:27,860 --> 00:08:34,580
Nous écrivons le même code, nous utilisons les mêmes composants, ils sont compilés en widgets natifs, que tout ne change pas lorsque

120
00:08:34,580 --> 00:08:36,920
nous utilisons expo, la seule différence est

121
00:08:36,920 --> 00:08:41,360
qu'avec expo, nous n'avons pas besoin d'en configurer autant, la construction est un peu

122
00:08:41,390 --> 00:08:48,220
plus rapide et l'ajout de modules natifs est super facile, les tests sur des appareils réels sont super faciles, c'est tout simplement

123
00:08:48,230 --> 00:08:49,580
plus facile, nous construisons

124
00:08:49,580 --> 00:08:54,110
l'application de la même manière et c'est quelque chose que vous pouvez voir ici également.

125
00:08:54,110 --> 00:08:56,920
Les styles sont configurés de la même manière avec la feuille de style. créer, c'est tout comme

126
00:08:56,990 --> 00:09:00,530
nous l'avons fait tout au long de ce cours et c'est

127
00:09:01,570 --> 00:09:02,960
important pour vous.

128
00:09:03,020 --> 00:09:05,870
Maintenant, une chose supplémentaire que vous trouverez ici est l'index. fichier js, nous n'avions

129
00:09:05,870 --> 00:09:11,780
pas cela dans expo, ce genre de fichier de configuration de base qui lance votre application, vous pourriez dire,

130
00:09:11,780 --> 00:09:16,150
qui s'assure que ce composant d'application est rendu à l'écran, c'est quelque chose que l'expo

131
00:09:16,160 --> 00:09:22,160
a fait pour vous dans React Application expo native mais à part ça, c'est vraiment la même chose et vous

132
00:09:22,160 --> 00:09:24,460
construisez une application de la même manière.