1
00:00:02,340 --> 00:00:06,210
Quindi si è parlato molto, sono state fatte molte cose, ora

2
00:00:06,210 --> 00:00:10,680
è davvero il momento di far funzionare questo pulsante e di aggiungere un

3
00:00:10,680 --> 00:00:11,780
obiettivo qui,

4
00:00:11,850 --> 00:00:17,040
giusto e per questo dobbiamo scoprire cosa ha inserito l'utente e, successivamente, ovviamente ascoltare un tocco

5
00:00:17,040 --> 00:00:23,850
sul pulsante e quindi aggiungere l'obiettivo immesso a una serie di obiettivi che dobbiamo gestire da qualche parte, che quindi possiamo

6
00:00:23,850 --> 00:00:26,850
produrre laggiù in questa vista dal basso, giusto, è

7
00:00:26,850 --> 00:00:29,630
quello che dobbiamo fare. Ora, in questo corso,

8
00:00:29,670 --> 00:00:35,600
userò i componenti funzionali solo con la funzione di hook di React, che è relativamente nuova, quindi

9
00:00:35,640 --> 00:00:41,550
nel caso in cui non conoscessi ancora hook di React, sicuramente prima imparerai su di essi, ad

10
00:00:41,550 --> 00:00:42,120
esempio

11
00:00:42,120 --> 00:00:47,250
nella mia guida completa di React, tratterò a fondo ma, in allegato, troverai anche alcune

12
00:00:47,250 --> 00:00:54,000
altre risorse per iniziare con gli hook di React perché avremo bisogno degli hook di React per ottenere l'input dell'utente.

13
00:00:54,000 --> 00:01:00,280
Abbiamo usato l'hook useState per quello che importiamo da React, non da React Native ma

14
00:01:00,300 --> 00:01:02,070
da React, è una

15
00:01:02,220 --> 00:01:10,620
caratteristica principale di React e quindi qui in questo componente funzionale, in questo componente dell'app, possiamo ottenere l'obiettivo inserito e anche

16
00:01:10,620 --> 00:01:19,110
ottenere il set funzione obiettivo inserita per aggiornare lo stato con l'aiuto di useState e per impostazione predefinita, abbiamo uno stato

17
00:01:19,110 --> 00:01:24,840
iniziale che è una stringa vuota perché l'utente non ha inserito nulla all'inizio.

18
00:01:24,870 --> 00:01:27,330
Ora possiamo associarlo all'input di

19
00:01:27,330 --> 00:01:33,870
testo, ciò significa che quando l'utente digita un carattere, vogliamo aggiornare il nostro stato e salvare

20
00:01:33,870 --> 00:01:39,240
il testo inserito nello stato qui a cui possiamo accedere attraverso l'obiettivo inserito

21
00:01:39,240 --> 00:01:46,680
e passeremo l'obiettivo inserito di nuovo nell'inserimento del testo. Questo è questo legame a due vie, è un cosiddetto componente controllato che conosci

22
00:01:46,680 --> 00:01:50,380
anche da React per il web con normali elementi di input HTML.

23
00:01:50,430 --> 00:01:57,340
Quindi qui possiamo ascoltare onChangeText, un supporto fornito dall'input di testo che accetta una funzione che verrà

24
00:01:57,430 --> 00:01:59,930
eseguita per ogni sequenza di tasti.

25
00:01:59,970 --> 00:02:04,660
Ora potremmo fornire una funzione in linea qui, ma possiamo anche impostare una funzione separata

26
00:02:04,660 --> 00:02:09,850
per avere un po 'di un codice più pulito e puoi avere una funzione in una funzione

27
00:02:09,850 --> 00:02:17,770
e dobbiamo averla qui, così possiamo usare il nostro stato o imposta qui la funzione obiettivo inserita, semplicemente aggiungendo una nuova funzione qui, il gestore input

28
00:02:18,990 --> 00:02:26,400
obiettivo potrebbe essere un nome, ma il nome dipende da te. In quella funzione, otterremo automaticamente il testo inserito,

29
00:02:26,580 --> 00:02:34,170
che verrà passato da React o da React Native qui e possiamo quindi chiamare l'obiettivo impostato e passare il

30
00:02:34,200 --> 00:02:40,770
testo inserito come valore perché il testo inserito qui sarà già un stringa perché colleghiamo il

31
00:02:41,100 --> 00:02:48,630
gestore di input dell'obiettivo a onChangeText semplicemente puntandolo qui. Ora è importante, non aggiungere parentesi lì perché questo

32
00:02:48,900 --> 00:02:54,300
eseguirà questa funzione quando questo codice viene analizzato, quindi quando l'interfaccia utente viene

33
00:02:54,330 --> 00:02:59,880
visualizzata per la prima volta. Tuttavia, non vuoi eseguirlo immediatamente, vuoi eseguirlo

34
00:02:59,880 --> 00:03:05,940
ad ogni sequenza di tasti e quindi, prendi semplicemente il nome della funzione, passi il nome della funzione

35
00:03:05,940 --> 00:03:12,210
a onChangeText e che effettivamente dice a React Native, hey, questo è il funzione che dovrei eseguire per

36
00:03:12,210 --> 00:03:19,260
ogni sequenza di tasti, quindi non aggiungere parentesi qui in modo che questo possa essere eseguito su ogni sequenza di tasti.

37
00:03:20,010 --> 00:03:25,170
Ora invece di questa sintassi di funzione, tu puoi anche usare una sintassi diversa che è

38
00:03:25,170 --> 00:03:31,080
quella che userò durante il corso, dove crei una costante con quel nome qui e quindi il valore di

39
00:03:31,080 --> 00:03:38,190
quella costante dopo il segno di uguale è semplicemente un utilizzando la sintassi della funzione freccia, quindi questo è il tuo elenco

40
00:03:38,180 --> 00:03:44,490
di argomenti e questo è il corpo della funzione. Questa è la normale sintassi Javascript, è supportata dal

41
00:03:44,490 --> 00:03:49,470
codice Javascript che React Native è in grado di eseguire e quindi questa è la sintassi

42
00:03:49,470 --> 00:03:56,820
che userò, la connetti a onChangeText esattamente allo stesso modo di prima. Ok, quindi ora abbiamo questa funzione connessa, aggiorniamo il

43
00:03:57,090 --> 00:04:01,050
nostro stato con qualunque cosa l'utente abbia inserito ad ogni sequenza

44
00:04:01,050 --> 00:04:07,800
di tasti, ora dobbiamo anche restituire quel testo nell'input di testo, in modo che sia visualizzato correttamente legando semplicemente

45
00:04:07,800 --> 00:04:14,190
la proprietà value a obiettivo inserito, quindi al nostro stato che cambierà ad ogni pressione di un tasto.

46
00:04:14,870 --> 00:04:20,400
E con ciò, stiamo ottenendo l'accesso all'input dell'utente perché ora sarà

47
00:04:20,400 --> 00:04:27,010
sempre memorizzato in un obiettivo inserito. Ora quando l'utente preme il pulsante, vogliamo usare quell'obiettivo

48
00:04:27,040 --> 00:04:33,730
inserito, quindi per questo aggiungerò un'altra funzione qui, aggiungerò il gestore dell'obiettivo e questa è solo una convenzione di denominazione che

49
00:04:33,940 --> 00:04:39,310
sto usando per queste funzioni qui, puoi nominarli come vuoi, qualunque cosa tu sia abituato dalle

50
00:04:39,310 --> 00:04:45,820
tue app React, alla fine il nome della funzione dovrebbe semplicemente descrivere cosa sta per succedere e che qui gestirà

51
00:04:45,820 --> 00:04:52,920
una pressione su quel pulsante che alla fine aggiungerà un obiettivo. Qui la funzione non accetterà alcun argomento ma nel corpo della funzione, voglio

52
00:04:52,920 --> 00:04:58,150
aggiungere il mio obiettivo inserito a un elenco di obiettivi e non abbiamo ancora un elenco, quindi per ora

53
00:04:58,230 --> 00:05:04,830
quello che faccio qui è il log della console, che è supportato in React Obiettivo nativo inserito in modo che almeno vediamo che questo

54
00:05:04,830 --> 00:05:10,710
è stato salvato correttamente e che questa funzione viene eseguita. Affinché ciò avvenga, dobbiamo collegarlo al

55
00:05:10,710 --> 00:05:16,680
pulsante, lì possiamo aggiungere il puntello onPress e puntare al gestore degli obiettivi di aggiunta,

56
00:05:16,680 --> 00:05:24,160
di nuovo senza parentesi in modo che questo non venga eseguito immediatamente ma solo quando si verifica una stampa.

57
00:05:24,540 --> 00:05:33,720
E ora salviamo tutto questo e torniamo indietro e forse entriamo per imparare React Native e la cosa buona è che puoi usare la tua vera

58
00:05:33,720 --> 00:05:41,560
tastiera qui e premere aggiungi e dovresti vedere qui nel tuo terminale questo registro, vedrai anche questo a proposito nei tuoi strumenti

59
00:05:41,560 --> 00:05:48,130
di sviluppo expo qui nella scheda del browser. Lì, se fai clic su uno dei

60
00:05:48,150 --> 00:05:52,670
dispositivi collegati, quello in cui fai semplicemente clic sul pulsante nel mio

61
00:05:52,670 --> 00:05:57,730
caso, il dispositivo Android, quindi lì in basso vedrai anche Learn React Native.

62
00:05:57,730 --> 00:06:05,350
E ovviamente funziona anche su iOS, scopri tutto su React Native, se entriamo qui e facciamo clic su Aggiungi, allora vediamo anche

63
00:06:05,350 --> 00:06:12,840
che si è registrati qui e vediamo anche che negli strumenti di sviluppo expo, se facciamo clic su iPhone in molto

64
00:06:12,840 --> 00:06:16,810
in basso, vediamo questo registro. Va bene, quindi stiamo

65
00:06:16,910 --> 00:06:21,530
ricevendo l'input dell'utente, lo stiamo memorizzando, lo stiamo registrando su console, ovviamente

66
00:06:21,530 --> 00:06:27,530
non vogliamo consolarlo registrandolo, vogliamo invece inviarlo sotto il nostro input qui, vogliamo un elenco dei

67
00:06:27,530 --> 00:06:35,000
nostri obiettivi al di sotto di questa area di input. Quindi, per questo, abbiamo bisogno di quella seconda vista qui che dovrebbe produrre il nostro elenco di articoli.

68
00:06:35,030 --> 00:06:40,250
Quindi qui tra i tag di apertura e chiusura, voglio produrre tutti gli elementi che abbiamo

69
00:06:40,280 --> 00:06:45,740
aggiunto, tutti gli obiettivi che abbiamo aggiunto. Per questo dobbiamo prima di tutto gestire i

70
00:06:46,400 --> 00:06:51,780
nostri obiettivi e possiamo impostare un altro stato per quello che inizialmente è un array vuoto, quindi passo

71
00:06:51,860 --> 00:06:58,010
un array vuoto come valore per usareState e lì abbiamo i nostri obiettivi di corso e obiettivi di corso stabiliti funzione.

72
00:06:58,010 --> 00:07:03,070
Ora questi nomi dipendono sempre da te ma dovrebbero descrivere cosa c'è nel tuo stato e

73
00:07:03,070 --> 00:07:04,230
come puoi aggiornarlo.

74
00:07:04,240 --> 00:07:10,330
Quindi ora qui quando aggiungiamo un obiettivo, voglio aggiornare i miei obiettivi del corso per aggiungere il nuovo obiettivo

75
00:07:10,330 --> 00:07:20,840
e per questo, posso chiamare gli obiettivi del corso impostati e ora impostare gli obiettivi del corso su un nuovo array in cui prendo i miei vecchi obiettivi del corso e aggiungo

76
00:07:20,840 --> 00:07:21,740
un nuovo.

77
00:07:21,740 --> 00:07:25,100
Ora questa è la sintassi che potresti non conoscere, è il

78
00:07:25,100 --> 00:07:30,470
cosiddetto operatore spread, è una funzione Javascript che prende un array esistente e gli obiettivi del corso

79
00:07:30,470 --> 00:07:38,030
è un array, è la nostra istantanea dello stato attuale prima dell'aggiornamento e ne estrae tutti gli elementi array e quindi li aggiunge qui a

80
00:07:38,030 --> 00:07:43,280
un nuovo array, motivo per cui ho le parentesi quadre circostanti, senza queste parentesi quadre circostanti questo

81
00:07:43,280 --> 00:07:43,840
non

82
00:07:43,850 --> 00:07:49,310
funzionerebbe ma ora creiamo un nuovo array e aggiungiamo tutti gli elementi del vecchio array e ora possiamo

83
00:07:49,310 --> 00:07:51,100
aggiungi anche un nuovo elemento.

84
00:07:51,110 --> 00:07:53,370
Quindi qui, aggiungo una virgola per aggiungere

85
00:07:53,390 --> 00:08:00,310
un ulteriore elemento dopo tutti gli elementi che sto estraendo qui e l'elemento che aggiungo qui è il mio obiettivo inserito, ovviamente.

86
00:08:00,320 --> 00:08:04,680
Quindi ora aggiorniamo il nostro elenco di obiettivi con il vecchio elenco

87
00:08:04,730 --> 00:08:10,250
di obiettivi, inizialmente un elenco vuoto ma poi questo aumenterà nel tempo perché aggiungiamo

88
00:08:10,250 --> 00:08:17,380
anche un nuovo obiettivo quando premiamo quel pulsante. Ora una piccola nota a margine, quando si lavora con

89
00:08:17,380 --> 00:08:21,410
gli obiettivi del corso impostati, gli obiettivi del corso qui sono il

90
00:08:21,460 --> 00:08:28,210
nostro stato precedente e il modo in cui React aggiorna lo stato, questa dovrebbe essere sempre la tua istantanea dello

91
00:08:28,360 --> 00:08:32,750
stato più attuale ma non è garantita al 100%, per avere quella garanzia

92
00:08:32,920 --> 00:08:39,250
al 100% , quando aggiorni il tuo stato in base al vecchio stato, puoi utilizzare il modulo funzione di

93
00:08:39,250 --> 00:08:39,950
questa

94
00:08:40,060 --> 00:08:46,870
funzione set in cui non passi qui il valore del tuo nuovo stato ma invece lo passi in una funzione, in

95
00:08:46,990 --> 00:08:53,850
genere una funzione anonima in cui ottieni il tuo stato attuale o gli obiettivi attuali, quindi l'istantanea dello stato corrente e

96
00:08:53,860 --> 00:09:01,240
quindi restituisci il valore aggiornato, quindi qui restituisco il mio array aggiornato con quella sintassi della funzione freccia in linea in cui se

97
00:09:01,240 --> 00:09:06,640
hai solo un'espressione, puoi omettere le parentesi graffe e il dichiarazione di ritorno e inserisci semplicemente

98
00:09:06,640 --> 00:09:08,650
il valore che vuoi restituire e

99
00:09:08,680 --> 00:09:13,310
verrà restituito e qui è tutto normale Javascript, niente di specifico di React Native.

100
00:09:13,450 --> 00:09:21,070
Quindi qui prendo i miei obiettivi attuali e quindi aggiungo l'obiettivo inserito. Questa sintassi è un po 'migliore, anche l'altra sintassi

101
00:09:21,070 --> 00:09:26,170
avrebbe funzionato, ma questo è garantito per funzionare sempre perché React Native andrà

102
00:09:26,200 --> 00:09:33,520
sempre avanti e ti darà la garanzia, l'ultima istantanea dello stato prima che poi applichi il tuo cambio

103
00:09:33,550 --> 00:09:35,050
di stato qui.

104
00:09:35,260 --> 00:09:42,410
Ora è tutto carino, ora avremo un elenco, una serie di obiettivi gestiti qui. Come possiamo ora generare questo però?