1
00:00:02,410 --> 00:00:05,440
Quindi quali sono le nostre alternative al flusso di lavoro gestito?

2
00:00:05,440 --> 00:00:08,450
Un'alternativa è utilizzare l'interfaccia della riga di comando di React

3
00:00:08,470 --> 00:00:10,950
Native, puoi saperne di più sulla pagina ufficiale

4
00:00:10,960 --> 00:00:15,430
di React Native se la visiti, puoi semplicemente cercare su Google React Native per trovarla e

5
00:00:15,880 --> 00:00:22,120
lì se fai clic su per iniziare, in realtà sei accolto con due modi diversi di iniziare e i modi preselezionati per

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

7
00:00:23,080 --> 00:00:24,960
è l'approccio che abbiamo usato, giusto?

8
00:00:24,970 --> 00:00:30,220
Quindi non c'è niente di troppo fantastico in questo, questo ti dà un'app React Native usando expo, è quello che

9
00:00:30,220 --> 00:00:31,720
abbiamo usato in questo corso.

10
00:00:31,750 --> 00:00:35,410
Puoi anche fare clic tuttavia sull'avvio rapido di

11
00:00:35,410 --> 00:00:41,170
React Native CLI e ora qui devi innanzitutto impostare il tuo sistema in un certo

12
00:00:41,170 --> 00:00:47,530
modo e quindi puoi installare un pacchetto separato, React Native CLI di cui ora hai bisogno

13
00:00:47,530 --> 00:00:55,060
per creare un progetto e per eseguirlo e così via. Ora importante, qui troverai le istruzioni di installazione dettagliate per i diversi sistemi

14
00:00:55,300 --> 00:00:57,070
operativi e app che desideri creare.

15
00:00:57,100 --> 00:01:02,680
Ora tieni presente che su Windows come dice qui, non puoi creare app iOS, lo stesso su Linux, puoi

16
00:01:02,680 --> 00:01:07,870
solo creare app Android lì e troverai le istruzioni di installazione se selezioni le opzioni specifiche.

17
00:01:08,590 --> 00:01:09,730
Su macOS puoi

18
00:01:09,760 --> 00:01:14,170
creare iOS e Android e dovrai anche seguire queste istruzioni di installazione.

19
00:01:14,170 --> 00:01:19,030
Ora non lo farò in dettaglio qui perché li troverai tutti scritti qui ovviamente se vuoi

20
00:01:19,030 --> 00:01:20,110
seguire, alla fine

21
00:01:20,110 --> 00:01:25,960
dovrai installare un paio di pacchetti, non pacchetti npm ma pacchetti a livello di sistema e il il processo

22
00:01:25,960 --> 00:01:30,490
esatto di installazione differisce per quanto riguarda la piattaforma su cui si sta eseguendo.

23
00:01:30,580 --> 00:01:36,670
Dovrai installare Android Studio o Xcode, quindi Xcode per app iOS, app Android Studio per Android e devi

24
00:01:36,670 --> 00:01:39,130
installarlo ora, in precedenza era facoltativo, l'ho

25
00:01:39,160 --> 00:01:40,610
appena fatto per

26
00:01:40,630 --> 00:01:42,840
ottenere un simulatore, ora ne hai bisogno

27
00:01:42,850 --> 00:01:47,020
perché ora questi gli strumenti verranno utilizzati per creare la tua app.

28
00:01:47,080 --> 00:01:52,750
In precedenza ciò non era necessario perché il wrapper expo in sostanza leggeva il nostro codice e lo

29
00:01:52,750 --> 00:01:56,780
ospitava e puoi anche creare un'app standalone con expo nel flusso di

30
00:01:56,810 --> 00:01:59,030
lavoro gestito, che accadrà nel cloud.

31
00:01:59,320 --> 00:02:04,780
Ora che tutto accade localmente, dovrai installare Android Studio e così via e installarlo

32
00:02:04,780 --> 00:02:07,540
con tutte le opzioni che trovi qui.

33
00:02:07,550 --> 00:02:14,130
Ora anche tu non importa per quale piattaforma stai lavorando, devi anche installare la CLI React Native, puoi farlo

34
00:02:14,140 --> 00:02:22,420
nel tuo normale prompt dei comandi o terminale, su Mac o Linux potresti dover aggiungere sudo davanti a questo per ottenere le autorizzazioni giuste

35
00:02:22,420 --> 00:02:27,670
e questo ora installerà globalmente la CLI React Native, per questo è necessario anche installare

36
00:02:27,670 --> 00:02:32,860
NodeJS perché utilizza npm che è il gestore dei pacchetti del nodo, quindi assicurati

37
00:02:32,860 --> 00:02:34,450
di avere anche quello.

38
00:02:35,540 --> 00:02:38,330
Ora con la CLI nativa di React

39
00:02:38,330 --> 00:02:44,990
installata, possiamo iniziare a creare un progetto totalmente senza expo e per questo creerò un progetto nuovo

40
00:02:44,990 --> 00:02:49,110
di zecca e ho selezionato una cartella per quello eseguendo

41
00:02:49,130 --> 00:02:53,120
init nativo di reazione e ora qualsiasi nome di tua

42
00:02:56,120 --> 00:02:59,950
scelta, per esempio RNWithoutExpo. Per il nome, è importante che sia

43
00:02:59,990 --> 00:03:03,380
scritto in questo modo, senza trattini o caratteri di sottolineatura ma solo una parola.

44
00:03:03,890 --> 00:03:08,780
Quindi RNWithoutExpo è il nome che sceglierò e questo creerà ora un nuovissimo progetto React Native

45
00:03:08,810 --> 00:03:14,450
usando la CLI React Native in questo posto dove hai eseguito questo comando e ti darà questa nuova cartella

46
00:03:14,450 --> 00:03:16,870
che contiene questo nuovo progetto React Native.

47
00:03:16,970 --> 00:03:18,260
Ora di nuovo

48
00:03:18,260 --> 00:03:24,800
importante, ora devi avere Android Studio e Xcode installati e configurati come menzionato nei documenti ufficiali qui, altrimenti ciò

49
00:03:24,800 --> 00:03:25,690
che sto

50
00:03:25,700 --> 00:03:28,520
per mostrare che ora non funzionerà, è necessario

51
00:03:28,520 --> 00:03:34,100
che sia installato perché ora questi strumenti saranno sfruttati da l'interfaccia della riga di comando nativa

52
00:03:34,100 --> 00:03:40,820
di React per creare ed eseguire la tua app. Anche far girare alcuni emulatori o simulatori, possono essere gli stessi usati

53
00:03:40,820 --> 00:03:46,060
prima nel corso ma devi averli in esecuzione in modo che possiamo vedere la nostra app React Native in esecuzione lì.

54
00:03:46,560 --> 00:03:52,830
Quindi ora aspettiamo che questa configurazione finisca qui e una volta fatto questo e questo processo può richiedere del tempo, puoi

55
00:03:52,860 --> 00:03:59,900
seguire le istruzioni qui alla fine per eseguire la tua app. Consentitemi quindi di navigare in questa cartella appena creata

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

57
00:04:01,640 --> 00:04:04,670
ed eseguire run-ios di reattivo nativo, ad

58
00:04:04,750 --> 00:04:12,260
esempio, per eseguirlo sul simulatore iOS che ho ottenuto. Ora questo dietro le quinte usa Xcode per creare questa

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

60
00:04:13,070 --> 00:04:19,180
non usa più expo, puoi disinstallare qui il client expo, puoi disinstallare la CLI expo

61
00:04:19,220 --> 00:04:20,390
dal tuo sistema,

62
00:04:20,390 --> 00:04:26,510
questo non sfrutta affatto expo, usa solo Xcode dietro le scene per costruire la tua app,

63
00:04:26,540 --> 00:04:33,020
quindi questo strumento di sviluppo nativo di Apple. Quindi aspettiamo che questa build finisca e la prima volta che la costruisci,

64
00:04:33,020 --> 00:04:34,260
ci vorrà un po

65
00:04:34,280 --> 00:04:38,960
'più di tempo, le ricostruzioni successive saranno più veloci. Quindi aspettiamo che questo finisca.

66
00:04:39,870 --> 00:04:43,980
Ora, durante questo processo di compilazione, verrà aperta una nuova scheda o una nuova finestra

67
00:04:43,980 --> 00:04:47,430
nel tuo terminale, manterrai quel processo in esecuzione e manterrai naturalmente il

68
00:04:47,430 --> 00:04:48,080
processo

69
00:04:48,090 --> 00:04:53,610
di compilazione, non uscire da questo, quindi mantieni entrambi questi processi attivi e funzionanti qui e ora questo installa l'app

70
00:04:53,610 --> 00:04:58,650
sul simulatore, in questo caso, se avessi un dispositivo reale collegato, lo installerebbe lì e avvierà l'app lì

71
00:04:58,650 --> 00:05:00,490
e quindi qui, in realtà ha

72
00:05:00,580 --> 00:05:03,060
creato un nuovo simulatore qui per me, no importa

73
00:05:03,090 --> 00:05:07,830
però, ora avvia l'app qui in questo simulatore. Anche in questo caso per il primo

74
00:05:07,830 --> 00:05:14,030
lancio, questo ora scarica sostanzialmente l'app integrata su questo dispositivo e ci sono anche alcune belle funzionalità di sviluppo, il debug

75
00:05:14,030 --> 00:05:18,270
remoto può essere abilitato, quindi hai anche tutte queste belle funzionalità qui, che non

76
00:05:18,300 --> 00:05:22,750
è esclusivo dell'expo e questo primo lancio richiederà un po 'più di tempo come detto.

77
00:05:22,770 --> 00:05:30,220
Quindi aspettiamo che questo download finisca qui in modo che l'app si avvii e qui sta arrivando. Ora la schermata iniziale esatta che stai vedendo

78
00:05:30,250 --> 00:05:32,410
qui, che potrebbe differire

79
00:05:32,500 --> 00:05:37,450
nel tempo perché è solo il codice iniziale che ottieni nel

80
00:05:37,450 --> 00:05:43,990
progetto, che vedremo tra un secondo, ma questa è ora l'app, un'app nativa senza expo

81
00:05:44,080 --> 00:05:50,740
altrimenti lo stesso, in esecuzione su iOS. Possiamo anche eseguirlo su Android e per questo, questo processo che ora è finito può

82
00:05:50,740 --> 00:05:52,330
essere cancellato, l'altro dovrebbe essere mantenuto in

83
00:05:52,330 --> 00:05:57,360
esecuzione, è il tuo server di sviluppo che parla al dispositivo e che controlla le modifiche ai file e invia il nuovo

84
00:05:57,360 --> 00:05:58,270
codice al dispositivo

85
00:05:58,270 --> 00:06:03,250
, quindi quello che sai dall'Expo, che funziona anche qui. Quindi mantieni l'altro processo in esecuzione

86
00:06:03,250 --> 00:06:10,300
ma ora possiamo anche eseguire run-android reattivo nativo per creare anche l'app per Android e sfruttare lo stesso server

87
00:06:10,300 --> 00:06:16,260
per poi anche costruire e spingere l'app Android nell'emulatore Android e poi vedere anche quello.

88
00:06:16,270 --> 00:06:17,950
Quindi aspettiamo che finisca, ancora

89
00:06:17,950 --> 00:06:22,850
una volta questa prima build richiederà più tempo, i ricarichi successivi saranno molto più veloci.

90
00:06:22,930 --> 00:06:28,150
Questo processo di compilazione ora sfrutta Android Studio, che devi anche aver

91
00:06:28,330 --> 00:06:34,130
installato e configurato come descritto nei documenti ufficiali e quindi questo ovviamente ora funziona anche

92
00:06:34,140 --> 00:06:37,190
totalmente senza Expo, usa solo Android Studio.

93
00:06:37,370 --> 00:06:44,030
Ora questo avvia anche l'app per Android qui sul mio emulatore Android, ma proprio come prima, questo avvio iniziale può richiedere un po

94
00:06:44,030 --> 00:06:45,470
'di tempo, ora si sta

95
00:06:45,470 --> 00:06:48,600
connettendo a questo server di sviluppo che quindi qui ovviamente dovresti

96
00:06:48,710 --> 00:06:53,900
continuare a funzionare, non solo mentre costruisce questo bundle, ma per tutto il tempo in modo che fino

97
00:06:53,900 --> 00:06:59,180
alle modifiche nei tuoi file, ottieni una ricostruzione dal vivo e una volta fatto, vediamo l'app finita in

98
00:06:59,180 --> 00:07:00,530
esecuzione su Android.

99
00:07:00,530 --> 00:07:03,500
Ora diamo un'occhiata al codice che ne è

100
00:07:03,500 --> 00:07:07,420
responsabile, sembra ora totalmente diverso da quello che abbiamo visto finora?

101
00:07:07,550 --> 00:07:12,620
Per questo, ho caricato di nuovo il progetto qui con Visual Studio Code, quindi la stessa configurazione di prima

102
00:07:12,620 --> 00:07:18,140
e quello che vedi sembra un po 'diverso ma soprattutto, abbiamo un sacco di file di configurazione diversi, abbastanza onesti

103
00:07:18,140 --> 00:07:22,040
ma che non cambia davvero il modo in cui scriviamo il nostro codice.

104
00:07:22,130 --> 00:07:24,960
Molto importante, abbiamo una cartella Android e una iOS,

105
00:07:24,980 --> 00:07:26,320
non ce l'avevamo

106
00:07:26,360 --> 00:07:31,270
prima, quelle cartelle e su Windows tra l'altro, Linux non hai iOS, hai solo Android lì

107
00:07:31,460 --> 00:07:36,740
ma quelle cartelle contengono la vera app nativa progetti che sono stati creati con l'aiuto di Android

108
00:07:36,740 --> 00:07:40,570
Studio e Xcode e che il tuo codice si integra in un

109
00:07:40,570 --> 00:07:45,710
modo che potresti dire, React Native fa tutto questo per te, il processo React Native CLI ma

110
00:07:45,710 --> 00:07:51,230
se diamo un'occhiata al codice concreto nella app. file js, beh, è proprio

111
00:07:51,230 --> 00:07:58,430
quello che abbiamo usato in questo corso, giusto? Lì abbiamo un paio di importazioni e alcuni collegamenti aggiuntivi che ti mostrano alcuni avvisi

112
00:07:58,430 --> 00:08:00,180
qui riguardo allo stile del codice.

113
00:08:00,230 --> 00:08:04,160
Questi non sono errori reali, solo che dovrei usare le virgolette doppie invece

114
00:08:04,170 --> 00:08:08,570
delle virgolette singole, sì qualche consiglio non mi interessa qui, ma se dai un'occhiata a

115
00:08:08,630 --> 00:08:13,560
ciò che viene importato qui, reagisci, salva la vista dell'area, il foglio di stile, la vista di

116
00:08:13,700 --> 00:08:18,520
scorrimento , view, text - queste sono tutte cose con cui abbiamo già lavorato, quindi abbiamo

117
00:08:18,710 --> 00:08:26,690
i componenti normali con cui abbiamo già lavorato e ovviamente lo facciamo perché ciò che ho detto durante questo corso, React Native è React Native, expo è un

118
00:08:26,690 --> 00:08:27,780
involucro sottile .

119
00:08:27,860 --> 00:08:34,580
Scriviamo lo stesso codice, utilizziamo gli stessi componenti, vengono compilati in widget nativi, tutto non cambia quando

120
00:08:34,580 --> 00:08:36,920
utilizziamo expo, l'unica differenza è che

121
00:08:36,920 --> 00:08:41,360
con expo non dobbiamo impostare tanto, la build è un po

122
00:08:41,390 --> 00:08:48,220
'più veloce e l'aggiunta di moduli nativi è semplicissima, testare su dispositivi reali è semplicissimo, è semplicemente più

123
00:08:48,230 --> 00:08:49,580
semplice, costruiamo l'app

124
00:08:49,580 --> 00:08:54,110
allo stesso modo e questo è qualcosa che puoi vedere anche qui.

125
00:08:54,110 --> 00:08:56,920
Gli stili sono impostati allo stesso modo con il foglio di stile. creare, è tutto proprio

126
00:08:56,990 --> 00:09:00,530
come abbiamo fatto durante questo corso ed è importante

127
00:09:01,570 --> 00:09:02,960
per te.

128
00:09:03,020 --> 00:09:05,870
Ora un'altra cosa che troverai qui è l'indice. js file, non lo

129
00:09:05,870 --> 00:09:11,780
avevamo in Expo, questo è il tipo di file di configurazione di base che avvia l'app che potresti

130
00:09:11,780 --> 00:09:16,150
dire, che assicura che questo componente dell'app venga visualizzato sullo schermo, è qualcosa

131
00:09:16,160 --> 00:09:22,160
che Expo ha fatto per te nel React App expo nativa ma a parte questo, è davvero la stessa

132
00:09:22,160 --> 00:09:24,460
cosa e costruiresti un'app allo stesso modo.