1
00:00:02,620 --> 00:00:08,140
Per visualizzare e modificare il nostro codice, abbiamo bisogno di un editor e ti consiglio di utilizzare Visual Studio Code che

2
00:00:08,140 --> 00:00:13,480
è un IDE gratuito e molto potente, ottimo per lo sviluppo di Javascript, che è quello che stiamo facendo qui

3
00:00:13,480 --> 00:00:14,210
alla fine.

4
00:00:14,290 --> 00:00:16,680
Puoi ottenerlo dal codice. VisualStudio. da lì

5
00:00:16,720 --> 00:00:21,490
trovi le versioni per Mac, Windows e Linux, scarica semplicemente quella per il tuo sistema

6
00:00:21,790 --> 00:00:28,070
operativo e segui il programma di installazione che ti dà. Una volta installato, apri Visual Studio Code

7
00:00:28,070 --> 00:00:34,390
e, lì dentro, apri il tuo progetto andando su file, quindi scegli semplicemente il

8
00:00:34,390 --> 00:00:40,200
tuo progetto, nel mio caso, rn-first-app. Fai clic su Apri qui e questo

9
00:00:40,220 --> 00:00:47,080
ora aprirà il progetto qui in Visual Studio Code. Ora il mio codice di Visual Studio appare come appare qui perché ho

10
00:00:47,380 --> 00:00:51,950
un tema speciale abilitato che puoi modificare in preferenze, tema colore e lì sto usando il tema dark plus.

11
00:00:51,970 --> 00:00:54,420
Quindi, se vuoi avere lo stesso

12
00:00:54,670 --> 00:01:00,680
aspetto, puoi usarlo e ho anche installato un'estensione speciale che puoi fare sotto le estensioni di visualizzazione,

13
00:01:00,760 --> 00:01:08,230
lì ho installato il tema dell'icona materiale, questo qui che è totalmente opzionale ma puoi installarlo da anche lì e, successivamente,

14
00:01:08,230 --> 00:01:09,550
torna a visualizzare

15
00:01:09,580 --> 00:01:13,480
Explorer per vedere di nuovo i tuoi file in modo da

16
00:01:13,510 --> 00:01:16,060
ottenere le stesse icone di file che

17
00:01:16,060 --> 00:01:24,290
ho qui, di nuovo è del tutto facoltativo e con quello fuori mano, questa è la nostra app React Native gestita da expo.

18
00:01:24,300 --> 00:01:28,920
Ora lascia che ti guidi rapidamente attraverso ciò che abbiamo qui e poi ti mostri cosa puoi cambiare

19
00:01:29,190 --> 00:01:31,470
nel codice per cambiare qualcosa nella tua app.

20
00:01:31,470 --> 00:01:34,350
Ora abbiamo un paio di cartelle e

21
00:01:34,380 --> 00:01:37,570
file qui, il. la cartella expo contiene

22
00:01:37,590 --> 00:01:43,500
solo una configurazione per expo, non è necessario toccarla. La cartella delle risorse, che contiene alcune immagini in questo caso,

23
00:01:43,500 --> 00:01:49,470
come l'icona della tua app e l'immagine della schermata iniziale e ci immergeremo nel modo in cui puoi personalizzarla verso la fine del corso e

24
00:01:49,470 --> 00:01:55,470
useremo altre risorse come le immagini in generale durante questo corso ovviamente. La cartella dei moduli del nodo contiene tutte

25
00:01:55,470 --> 00:02:01,120
le dipendenze di questo progetto, ad esempio React and React Native ma anche le dipendenze delle

26
00:02:01,120 --> 00:02:05,740
dipendenze e questa cartella viene gestita automaticamente per te, quindi non è

27
00:02:05,790 --> 00:02:11,460
necessario toccarla e non dovresti toccarla . gitignore è un file che ci aiuta con git

28
00:02:11,460 --> 00:02:16,920
che è un sistema di gestione del codice sorgente o uno strumento di gestione del codice sorgente e

29
00:02:16,920 --> 00:02:22,860
non è necessario usare git, se lo fai, probabilmente sai cosa fa gitignore e se non sai cosa git è,

30
00:02:22,860 --> 00:02:29,100
dopo questa lezione, troverai una breve introduzione ad esso o alcune risorse che ti aiuteranno a iniziare con esso, ma non

31
00:02:29,130 --> 00:02:34,530
devi usare git per lavorare con React Native. Watchmenconfig, è qualcosa che puoi ignorare quando vedi che è vuoto qui, è

32
00:02:34,530 --> 00:02:39,750
uno strumento utilizzato dietro le quinte dall'esposizione alla fine e dall'app. js file quindi il file che

33
00:02:39,750 --> 00:02:45,930
contiene il codice che è responsabile del rendering di ciò che vediamo qui sullo schermo.

34
00:02:46,590 --> 00:02:52,350
Ci approfondiremo in una seconda app. json manterremo alcune configurazioni per la nostra app React Native

35
00:02:52,350 --> 00:02:59,140
alimentata da expo e ci immergeremo anche in questo corso per ora, ignoriamolo. Babel config configura come il codice

36
00:02:59,140 --> 00:03:04,950
Javascript è ottimizzato e compilato, puoi lasciare anche qui il valore

37
00:03:04,950 --> 00:03:10,380
predefinito e il pacchetto. json file gestisce le tue dipendenze e lì vedi

38
00:03:10,700 --> 00:03:17,970
che stai usando expo ma anche React, anche React DOM perché expo in realtà supporta anche la creazione di app React per il web ma

39
00:03:17,970 --> 00:03:23,910
poi anche React Native qui e React Native web perché, di nuovo, expo ti dà la possibilità di creare anche app

40
00:03:23,910 --> 00:03:28,710
Web con l'aiuto di React Native, non è qualcosa su cui ci concentreremo in questo corso.

41
00:03:28,710 --> 00:03:30,600
Quindi questa è la configurazione che abbiamo

42
00:03:30,600 --> 00:03:35,520
qui, il file importante per noi al momento è l'app. file js perché è alla fine responsabile

43
00:03:35,790 --> 00:03:37,800
di ottenere qualcosa sullo schermo.

44
00:03:37,800 --> 00:03:43,350
Ora il contenuto esatto del file che vedi qui nella tua app. Tuttavia, il file js potrebbe cambiare nel

45
00:03:43,410 --> 00:03:48,390
tempo, questo progetto di avvio che viene generato automaticamente semplicemente a volte viene modificato.

46
00:03:48,570 --> 00:03:53,520
Ciò ovviamente non influisce su ciò che spiego qui o su questo corso, non significa che nulla

47
00:03:53,520 --> 00:03:55,300
sia obsoleto o qualcosa del

48
00:03:55,350 --> 00:03:57,580
genere, è solo un progetto di partenza

49
00:03:57,720 --> 00:04:03,130
diverso e se vuoi seguire esattamente lo stesso che ho, tu ' Lo troverò allegato, quindi puoi anche

50
00:04:03,150 --> 00:04:07,320
usarlo ma, naturalmente, potresti anche continuare con gli spettatori se sembra leggermente diverso perché,

51
00:04:07,320 --> 00:04:09,870
come ho già detto, è solo un progetto

52
00:04:09,870 --> 00:04:14,250
di partenza che hai, React Native ovviamente funziona ancora come L'ho spiegato qui e

53
00:04:14,250 --> 00:04:19,770
quindi puoi assolutamente seguirlo e aggiungere la tua app. File js nel modo in cui l'ho aggiunto

54
00:04:19,770 --> 00:04:24,290
e qui vediamo che importiamo React proprio come lo faremmo in un'app web React.

55
00:04:24,420 --> 00:04:30,630
Dobbiamo importare React perché qui, puoi anche vedere che stiamo usando jsx che è questa speciale sintassi

56
00:04:30,630 --> 00:04:32,640
Javascript che assomiglia a

57
00:04:32,790 --> 00:04:35,390
HTML ma alla fine è solo Javascript

58
00:04:35,460 --> 00:04:42,120
e nel caso in cui non l'avessi mai visto, tuffati sicuramente in un'app React o React tutorial prima,

59
00:04:42,270 --> 00:04:45,720
mi aspetto che tu sappia come funziona generalmente React.

60
00:04:45,720 --> 00:04:51,270
Abbiamo sempre un'altra importazione qui e questa è l'importazione React Native in cui importiamo foglio di stile,

61
00:04:51,360 --> 00:04:53,220
testo e vista da lì.

62
00:04:53,220 --> 00:04:59,640
Ora questi sono questi componenti e caratteristiche speciali di cui stavo parlando in precedenza, il testo e la vista sono

63
00:04:59,640 --> 00:05:06,720
componenti forniti da React Native che vengono compilati in widget della piattaforma nativa e il foglio di stile è una funzionalità aggiuntiva

64
00:05:06,720 --> 00:05:10,290
fornita da React Native che ti aiuta con lo stile.

65
00:05:10,290 --> 00:05:15,820
Ora, qui, abbiamo un normale componente React come lo costruiremmo anche in un'app web React for.

66
00:05:16,120 --> 00:05:21,960
Qui abbiamo un componente funzionale e con l'aiuto degli hook di React, possiamo lavorare con componenti funzionali

67
00:05:21,960 --> 00:05:28,110
solo come probabilmente saprai e questo componente funzionale restituisce un codice jsx che viene visualizzato sullo schermo e qui

68
00:05:28,200 --> 00:05:29,270
stiamo usando

69
00:05:29,400 --> 00:05:35,550
il widget di visualizzazione o il componente di visualizzazione fornito da React Native e il componente di testo e

70
00:05:36,270 --> 00:05:38,790
il componente di visualizzazione è come un div,

71
00:05:38,790 --> 00:05:45,720
è un buon wrapper, buono anche per applicare alcuni stili per alcuni contenitori e rileva viene quindi utilizzato per produrre del

72
00:05:45,870 --> 00:05:50,030
testo che si inserisce tra la sua apertura e tag di chiusura.

73
00:05:50,270 --> 00:05:57,090
E quaggiù, abbiamo alcuni stili definiti, React Native non usa CSS ma usa una sintassi

74
00:05:57,090 --> 00:06:04,890
di stile basata su CSS o segue convenzioni di denominazione simili ma approfondiremo come modellare le tue

75
00:06:04,890 --> 00:06:08,550
app React Native in questo corso ovviamente.

76
00:06:08,550 --> 00:06:14,490
Quindi, cambiamo ciò che vediamo sullo schermo e aggiungiamo effettivamente un pulsante qui.

77
00:06:14,490 --> 00:06:20,730
Ora il bello è che possiamo importare un pulsante da React Native, che è un altro componente fondamentale fornito da React Native, quindi possiamo

78
00:06:20,730 --> 00:06:26,140
aggiungere questa importazione e quindi usare un pulsante lì sotto. Tuttavia non lo usiamo con un tag di

79
00:06:26,140 --> 00:06:27,280
apertura e chiusura

80
00:06:27,280 --> 00:06:33,190
ma come elemento a chiusura automatica e quindi possiamo aggiungere qui un supporto per il titolo per impostare il

81
00:06:33,460 --> 00:06:36,620
testo che vediamo su un pulsante, ad esempio cambiare testo.

82
00:06:36,850 --> 00:06:41,010
Ora quando tocchiamo questo pulsante, potremmo voler cambiare questo testo qui e per questo,

83
00:06:41,200 --> 00:06:45,970
dobbiamo gestire un po 'di stato qui perché voglio cambiare alcuni dati che dovrebbero portare al

84
00:06:46,180 --> 00:06:49,680
rendering di questo componente e per questo, è necessario stato .

85
00:06:49,900 --> 00:06:56,110
Ora prima di React 16. 8, che è supportato qui, però, dovresti convertirlo in un componente basato

86
00:06:56,110 --> 00:07:00,270
su classi per utilizzare State, dal React 16. 8, possiamo usare gli

87
00:07:00,310 --> 00:07:03,710
hook di React e, nel caso in cui

88
00:07:03,820 --> 00:07:08,620
non sapessi cosa siano gli hook, dovresti assolutamente immergerti nelle basi degli

89
00:07:08,620 --> 00:07:14,800
hook, in allegato troverai le risorse per iniziare. I hook sono importati da React e qui abbiamo bisogno del hook useState che

90
00:07:14,800 --> 00:07:17,290
ci consente di gestire lo stato in un componente funzionale.

91
00:07:17,290 --> 00:07:26,230
Detto questo, possiamo usare quell'hook chiamando useState qui e dandogli un valore predefinito che potrebbe essere questo testo qui, tagliamolo da laggiù e aggiungiamolo qui

92
00:07:26,230 --> 00:07:27,910
come stringa e quindi

93
00:07:27,910 --> 00:07:34,420
qui possiamo usare l'array destructuring per ottenere il nostro output text e ottieni una funzione per modificare o

94
00:07:34,420 --> 00:07:41,040
ripristinare o sovrascrivere questo testo di output ed è proprio così che funziona l'hook useState, ti dà un array

95
00:07:41,110 --> 00:07:43,800
con esattamente due elementi, in cui il

96
00:07:43,840 --> 00:07:49,620
primo elemento è l'istantanea dello stato corrente, quindi o il nostro stato iniziale o successivo per

97
00:07:49,660 --> 00:07:55,510
i successivi cicli di ri-rendering, qualunque cosa impostiamo il nostro stato e la seconda è una

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

99
00:07:56,220 --> 00:08:01,300
che ti consente di impostare il tuo stato su un nuovo valore e chiamando

100
00:08:01,530 --> 00:08:07,150
tale funzione ritornierà l'intero componente e il testo di output farà quindi riferimento all'ultimo nuovo stato.

101
00:08:07,180 --> 00:08:13,670
Quindi qui tra il testo, voglio emettere il testo di output e premendo un

102
00:08:13,680 --> 00:08:15,400
pulsante, voglio cambiarlo.

103
00:08:15,400 --> 00:08:21,250
Quindi sul pulsante, possiamo quindi registrare onPress che è sostanzialmente l'equivalente di onClick che

104
00:08:21,310 --> 00:08:22,640
avremmo nel

105
00:08:22,660 --> 00:08:29,020
web, qui è onPress e quindi dobbiamo associarlo a una funzione, ad esempio una funzione

106
00:08:29,020 --> 00:08:36,740
in linea anonima qui con questa sintassi dove chiamiamo set output text e lo impostiamo sul testo modificato.

107
00:08:36,820 --> 00:08:42,340
Quindi questo chiamerà questa funzione qui, sovrascriverà il nostro stato, quindi eseguirai nuovamente il rendering di questo

108
00:08:42,340 --> 00:08:48,100
componente, questo verrà aggiornato nel prossimo ciclo di rendering e quindi, dato che abbiamo emesso un testo di

109
00:08:48,100 --> 00:08:51,520
output laggiù, questo cambierà. Se ora salviamo tutto

110
00:08:51,520 --> 00:08:58,840
ciò, la cosa bella è che la tua app che avresti ancora dovuto aprire sul telefono dovrebbe essere

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

112
00:08:59,390 --> 00:09:00,830
automaticamente, non è

113
00:09:00,920 --> 00:09:08,090
necessario riavviarla, non è necessario eseguire nuovamente la scansione di questo codice, solo modificando il codice e

114
00:09:08,150 --> 00:09:15,320
salvando questo file, dovrebbe essere ricaricato automaticamente qui. E ora se tocchiamo ora cambia testo qui, vedrai il testo modificato e

115
00:09:15,320 --> 00:09:19,020
questa è la tua prima app React Native che fa il suo lavoro

116
00:09:19,040 --> 00:09:24,590
con l'expo ma di nuovo puoi creare e pubblicare questo come app standalone e lo faremo entro la fine di

117
00:09:24,740 --> 00:09:30,110
il corso e quindi questo è un modo fantastico di iniziare e lo sviluppo di React Native può essere

118
00:09:30,110 --> 00:09:30,850
altrettanto semplice.

119
00:09:31,150 --> 00:09:36,510
Ora con questo, finiamo questo primo modulo prima di approfondire React Native e scrivere il codice

120
00:09:36,590 --> 00:09:40,130
React Native dal secondo modulo del corso in poi.