1
00:00:02,460 --> 00:00:04,290
Quindi ora che sappiamo cos'è

2
00:00:04,290 --> 00:00:07,370
React Native, diamo una breve occhiata dietro le quinte.

3
00:00:07,530 --> 00:00:13,080
Ora, come ho già detto, con React e React Native, costruiamo un'app e il nostro codice in genere è simile

4
00:00:13,080 --> 00:00:13,700
a questo.

5
00:00:13,710 --> 00:00:19,260
Costruiamo normali componenti di React come lo conosci dal web con Javascript perché Javascript è il

6
00:00:19,260 --> 00:00:21,650
linguaggio che usiamo per costruire app

7
00:00:21,810 --> 00:00:26,290
React Native ma qui, usiamo componenti speciali come visualizzazione e testo qui.

8
00:00:26,310 --> 00:00:31,130
Questi non sono i tuoi normali elementi HTML perché i normali elementi HTML

9
00:00:31,680 --> 00:00:37,230
non sono supportati, le piattaforme native non sanno come usarli, quindi usi componenti speciali forniti

10
00:00:37,230 --> 00:00:42,600
da React Native per i quali React Native è in grado di tradurli in istruzioni

11
00:00:42,630 --> 00:00:46,380
le piattaforme native capiscono, quindi è così che funziona.

12
00:00:46,380 --> 00:00:51,150
Ora è importante capire che le tue viste, quindi i componenti con cui stai lavorando, quindi sono alla fine

13
00:00:51,150 --> 00:00:58,440
compilati in veri widget nativi, in veri elementi nativi, in vero codice nativo. Il tuo codice Javascript in cui gestisci la tua logica

14
00:00:58,470 --> 00:01:03,480
aziendale non verrà compilato ma le tue opinioni lo saranno e questo ovviamente significa anche

15
00:01:03,750 --> 00:01:09,190
che in genere ottieni grandi prestazioni quando crei app React Native perché il risultato è una vera

16
00:01:09,190 --> 00:01:14,310
app nativa in cui una grande porzione del il codice è un vero codice nativo.

17
00:01:14,310 --> 00:01:19,300
Ora, se diamo un'occhiata più da vicino a questa componente, è importante capire che puoi ovviamente

18
00:01:19,320 --> 00:01:25,640
usare React per la creazione di app Web ma che puoi anche creare app native per Android e iOS con

19
00:01:25,650 --> 00:01:31,530
codice nativo, quindi senza React Native o che tu può utilizzare React Native, quindi questi sono quattro modi diversi

20
00:01:31,530 --> 00:01:37,410
di creare app in cui ovviamente React per il Web non ci fornirà un'app nativa ma solo per

21
00:01:37,410 --> 00:01:40,260
confrontare il modo in cui ciò sarebbe correlato.

22
00:01:40,260 --> 00:01:45,630
Quindi, se stai usando React per il web, di solito lavori con diciamo un div per strutturare i tuoi contenuti.

23
00:01:46,260 --> 00:01:48,540
Se dovessi lavorare direttamente con

24
00:01:48,540 --> 00:01:54,780
Android, quindi costruiresti la tua app in Android Studio senza React Native, ad esempio lavoreresti con una

25
00:01:54,780 --> 00:02:00,600
vista Android, che sarebbe un widget che puoi usare lì nell'interfaccia utente che stai costruendo direttamente

26
00:02:00,600 --> 00:02:08,970
con le funzionalità della piattaforma nativa per strutturare i tuoi contenuti. Su iOS, quello sarebbe il widget di visualizzazione dell'interfaccia utente e non

27
00:02:08,970 --> 00:02:10,780
è necessario memorizzare questi

28
00:02:10,830 --> 00:02:16,020
termini, voglio solo spiegare come React Native traduce le cose per te perché nelle app

29
00:02:16,020 --> 00:02:18,180
React Native usi effettivamente l'elemento view.

30
00:02:18,180 --> 00:02:22,950
Ora, se dai un'occhiata a quell'elemento vista, ovviamente vedi che è molto simile all'elemento

31
00:02:23,010 --> 00:02:24,830
div, sembra un tag

32
00:02:24,840 --> 00:02:30,510
HTML, la differenza ovviamente è che inizia con un carattere maiuscolo e che la vista non è

33
00:02:30,690 --> 00:02:36,180
un tag HTML , il browser non saprebbe cosa fare con una vista ma React Native lo

34
00:02:36,240 --> 00:02:42,990
fa e React Native tradurrà quella vista nella vista Android o nella vista dell'interfaccia utente per te e lo fa ovviamente

35
00:02:43,050 --> 00:02:49,260
non solo per questa vista componente generale del wrapper ma ad esempio, se stai recuperando l'input dell'utente, sul Web

36
00:02:49,260 --> 00:02:54,210
lo faresti con l'elemento di input, se costruissi un'app Android nativa, utilizzi il testo di

37
00:02:54,210 --> 00:02:59,850
modifica, per un'app iOS nativa, utilizzeresti il campo di testo dell'interfaccia utente e in React Native, c'è

38
00:03:00,090 --> 00:03:06,240
il componente di input di testo, di nuovo React Native lo compila nei widget nativi per te ed è

39
00:03:06,240 --> 00:03:11,520
così che React Native lavora dietro le quinte. Ovviamente non ci interessa il web in questo

40
00:03:11,520 --> 00:03:17,310
corso qui, solo per capire che ci sono alcune somiglianze, usiamo questi tag che assomigliano a tag HTML ma ovviamente, la

41
00:03:17,440 --> 00:03:24,660
differenza importante è che si tratta di componenti speciali compilati al codice nativo. Ora, come ho già detto, è importante capire che

42
00:03:24,660 --> 00:03:30,500
per l'interfaccia utente, React Native ti offre componenti speciali che vengono quindi compilati per l'uso

43
00:03:30,540 --> 00:03:33,000
nativo, per l'altra tua logica,

44
00:03:33,060 --> 00:03:38,760
quindi se stai utilizzando Redux o se hai una logica aziendale, quando invii richieste

45
00:03:38,760 --> 00:03:47,070
HTTP, stai trasformando dati, tutto il tuo altro codice Javascript non è compilato in codice nativo ma, invece, è in esecuzione

46
00:03:47,070 --> 00:03:52,980
su un thread speciale ospitato da React Native. Quindi puoi immaginare la tua app React Native che ottieni

47
00:03:52,980 --> 00:03:58,450
alla fine come una vera e propria app nativa perché è una, in cui tutte le visualizzazioni sono

48
00:03:58,450 --> 00:04:05,760
state compilate in widget nativi ma dove c'è una mini app in più all'interno della tua app, un mini Javascript app in esecuzione lì, ospitata

49
00:04:05,760 --> 00:04:12,690
e avviata da React Native per così dire, che esegue tutto il tuo codice Javascript e il tuo codice Javascript può quindi parlare con

50
00:04:12,690 --> 00:04:13,800
la piattaforma nativa.

51
00:04:14,160 --> 00:04:19,860
Puoi immaginarlo in questo modo qui, hai il tuo codice, la tua app e costruisci un'app nativa e che

52
00:04:19,860 --> 00:04:25,110
è in esecuzione su una piattaforma nativa e, naturalmente, ci sono alcune funzionalità della piattaforma disponibili come ad

53
00:04:25,110 --> 00:04:27,150
esempio l'utilizzo della fotocamera del dispositivo.

54
00:04:27,150 --> 00:04:32,520
Ora, come già accennato, il tuo codice può essere suddiviso in due cose qui: le tue opinioni

55
00:04:32,520 --> 00:04:38,430
e la tua logica aziendale, quindi l'altro codice Javascript. Ora, come già accennato più volte, le

56
00:04:38,490 --> 00:04:46,620
tue visualizzazioni sono compilate in visualizzazioni native, in widget nativi per queste piattaforme e il tuo codice è comunque conservato come codice Javascript e puoi

57
00:04:46,620 --> 00:04:53,090
sfruttare le funzionalità della piattaforma nativa come la fotocamera perché il tuo codice Javascript viene eseguito in uno speciale virtuale

58
00:04:53,100 --> 00:04:58,430
macchina alla fine, messa a punto e ospitata da React Native all'interno della tua app, quindi

59
00:04:58,440 --> 00:05:04,710
la parte giusta qui è tutta all'interno della nostra app nativa che spediamo negli app store e quel codice

60
00:05:04,710 --> 00:05:10,080
Javascript, questa macchina virtuale Javascript, sa parlare alle funzionalità della piattaforma nativa, quindi alla fine il

61
00:05:10,200 --> 00:05:14,340
sistema operativo su cui è in esecuzione la tua app attraverso un

62
00:05:14,340 --> 00:05:20,580
bridge speciale che potresti dire e quel bridge e quella macchina virtuale, il tutto automaticamente fornito da React Native.

63
00:05:20,580 --> 00:05:22,050
Non devi preoccuparti

64
00:05:22,170 --> 00:05:29,190
di questo, tutto ciò che fai è scrivere la tua app React Native con Javascript e con questi componenti speciali e questo è

65
00:05:29,190 --> 00:05:30,720
tutto ciò che devi sapere

66
00:05:30,720 --> 00:05:36,870
per ora, ecco come funziona un'app React Native dietro le quinte e io trova importante esserne consapevoli perché toglie un

67
00:05:37,170 --> 00:05:43,050
po 'di magia in senso positivo perché capisci cosa stai effettivamente scrivendo e cosa accadrà con il tuo codice

68
00:05:43,050 --> 00:05:47,020
e come questo codice finirà in un'app nativa e, naturalmente, capisci anche che

69
00:05:47,100 --> 00:05:51,960
hai una vera app nativa quindi alla fine. Non tutto il tuo codice è compilato, sarebbe

70
00:05:51,960 --> 00:05:52,980
piuttosto impossibile

71
00:05:52,980 --> 00:05:58,300
ma le tue viste sono compilate e, naturalmente, le viste, quindi la parte che l'utente vede, è la

72
00:05:58,320 --> 00:06:03,650
parte più importante quando si tratta di prestazioni per un'app perché esegue il rendering dell'interfaccia utente e tutto

73
00:06:03,650 --> 00:06:05,700
ciò, questa è in genere la parte

74
00:06:05,700 --> 00:06:10,620
ad alta intensità di prestazioni ed è quindi molto positivo che questo sia compilato ed è

75
00:06:10,620 --> 00:06:13,410
uno degli enormi punti di forza di React Native.