1
00:00:02,190 --> 00:00:08,190
Ho creato il componente separato, A, ovviamente, per esercitarmi nella creazione dei tuoi componenti, ma B, anche perché

2
00:00:08,220 --> 00:00:14,160
è davvero la filosofia di base della reazione a dividere la tua app in pezzi più piccoli.

3
00:00:14,310 --> 00:00:17,120
Certo, dipende da te quanto piccolo vuoi dividerlo.

4
00:00:17,670 --> 00:00:22,140
Ogni elemento dell'elenco, ad esempio, potrebbe anche essere il suo vecchio componente e non ci sarebbe nulla di sbagliato in

5
00:00:22,140 --> 00:00:22,380
questo.

6
00:00:23,040 --> 00:00:26,520
L'idea è semplicemente quella di avere file di codice piccoli e gestibili.

7
00:00:26,910 --> 00:00:31,140
E più tardi, una volta aggiunta più logica all'app in modo da poter interagire anche con essa.

8
00:00:31,170 --> 00:00:35,730
E abbiamo cambiato una serie di obiettivi, ad esempio, facendo clic su un pulsante e così via.

9
00:00:36,390 --> 00:00:41,370
Ovviamente, vogliamo essere in grado di gestire molta della logica nel componente dell'elenco obiettivi e non un

10
00:00:41,370 --> 00:00:42,150
componente ovvio.

11
00:00:42,390 --> 00:00:49,470
Quindi dividerlo davvero in componenti ha l'idea di separare le preoccupazioni di mantenere i tuoi file piccoli, focalizzati e gestibili,

12
00:00:49,500 --> 00:00:55,830
che, se lavori in progetti più grandi, è una grande vittoria perché rende molto più facile gestire e

13
00:00:55,830 --> 00:00:58,930
lavorare in un modo così progetto più grande.

14
00:01:00,000 --> 00:01:03,420
Ora, finora, tutto nella nostra app è hardcoded, però.

15
00:01:04,290 --> 00:01:10,880
Ora, più realistico sarebbe che diciamo che il nostro elenco di obiettivi è gestito qui in app.

16
00:01:10,970 --> 00:01:12,660
Sì, come dati.

17
00:01:13,170 --> 00:01:20,160
E vogliamo eseguire il rendering dell'elenco Digo H elementi Timal o J come elementi X in base a tali dati.

18
00:01:20,640 --> 00:01:27,120
Ora lo gestirò qui in Abcess semplicemente perché in seguito aggiungerò qui un altro componente che ci aiuta a

19
00:01:27,120 --> 00:01:28,230
creare nuovi obiettivi.

20
00:01:28,530 --> 00:01:31,590
Ma per ora, aggiungiamo solo una costante normale qui.

21
00:01:31,830 --> 00:01:35,760
Componente funzionale di Tudor perché è una normale funzione JavaScript.

22
00:01:35,940 --> 00:01:40,140
Ovviamente puoi fare di più che semplicemente restituire J's X e il contenuto del disco qui.

23
00:01:40,520 --> 00:01:43,140
Avremo gli obiettivi del mio corso.

24
00:01:43,200 --> 00:01:47,010
Puoi nominarlo come vuoi e questo sarà un array e lo farà array.

25
00:01:47,340 --> 00:01:52,350
Ogni obiettivo può essere un oggetto JavaScript creato qui con la notazione letterale dell'oggetto.

26
00:01:52,560 --> 00:01:58,500
Ovviamente potresti anche creare la tua classe o funzione di costruzione e creare un'istanza per creare un

27
00:01:58,500 --> 00:01:59,220
tale oggetto.

28
00:02:00,030 --> 00:02:01,530
Ora diciamo che ogni obiettivo ha un'idea.

29
00:02:02,650 --> 00:02:06,880
C. G. uno per chorus chorus, chiamane uno e poi ha del testo, diciamo.

30
00:02:07,210 --> 00:02:10,030
E il testo qui è semplicemente il testo.

31
00:02:10,060 --> 00:02:12,880
Ho codificato qui, finisco il corso.

32
00:02:12,920 --> 00:02:13,960
Quindi lo copio.

33
00:02:14,440 --> 00:02:20,560
E qui e dividerò su più righe per rendere più facile la lettura perché non avrò solo un

34
00:02:20,560 --> 00:02:21,790
obiettivo ma libero.

35
00:02:22,000 --> 00:02:25,480
Quindi le idee sono C. G. a NCG gratis, diciamo.

36
00:02:25,900 --> 00:02:29,560
E ora copierò tutto quel testo qui.

37
00:02:31,540 --> 00:02:34,010
Nei miei oggetti qui in Abcess.

38
00:02:34,780 --> 00:02:36,550
Inoltre, quell'ultimo testo.

39
00:02:37,820 --> 00:02:44,030
In questo modo, e lì ora posso anche sbarazzarmi di quella cosa e commerciale qui, non ne abbiamo bisogno qui.

40
00:02:44,120 --> 00:02:47,480
Tutti possiamo mettere il testo in questo modo e reagire lo renderà correttamente.

41
00:02:48,410 --> 00:02:50,630
Quindi ora dobbiamo afferrare l'array Scholes alla mia idea.

42
00:02:50,660 --> 00:02:54,050
Ora, è nella lista degli obiettivi componente di questi obiettivi?

43
00:02:54,080 --> 00:02:56,660
I dati qui dovrebbero alla fine essere emessi.

44
00:02:56,870 --> 00:03:02,080
Quindi dovrebbe essere emesso dinamicamente in questo componente, nel componente dell'elenco degli obiettivi invece di essere difficile.

45
00:03:02,450 --> 00:03:03,800
Quindi possiamo rimuovere questo codice qui.

46
00:03:04,220 --> 00:03:06,050
No, questo ci lascia con due problemi.

47
00:03:06,350 --> 00:03:10,810
Numero uno, come possiamo generare dinamicamente un elenco di dati in J come X?

48
00:03:11,270 --> 00:03:13,130
Ma più importante di quello al momento.

49
00:03:13,400 --> 00:03:18,950
Come possiamo ottenere quell'elenco di dati definito nel componente app nel componente Gollust?

50
00:03:19,460 --> 00:03:23,300
Bene, concentriamoci prima su quello, perché senza quello, non possiamo concentrarci sull'altro problema.

51
00:03:24,170 --> 00:03:31,820
Possiamo passare i dati da un componente all'altro con un concetto chiamato props abbreviazione di proprietà.

52
00:03:32,450 --> 00:03:34,100
Possiamo definire il nostro.

53
00:03:34,130 --> 00:03:39,800
Potresti dire attributi che sono questi oggetti di scena sui nostri componenti.

54
00:03:40,250 --> 00:03:46,090
Quindi, ad esempio, qui nella lista degli obiettivi, potresti dire che abbiamo articoli, attributi o obiettivi, attributi totalmente

55
00:03:46,160 --> 00:03:47,120
a te.

56
00:03:47,630 --> 00:03:48,710
Vado con obiettivi qui.

57
00:03:49,680 --> 00:03:53,340
E quell'attributo o puntello d'oro è il termine comune.

58
00:03:53,370 --> 00:03:57,870
Quindi il sostegno di Gold passa quindi questi dati a quel componente?

59
00:03:58,380 --> 00:04:02,280
Ora, per questo, non uso una stringa qui, che voglio tramandare, ma invece

60
00:04:02,280 --> 00:04:08,250
voglio tramandare la mia struttura di dati JavaScript D array qui e per papà qui, in realtà usiamo un numero

61
00:04:08,250 --> 00:04:12,210
speciale Syntex e J come X. Usiamo le parentesi graffe singole di apertura e chiusura.

62
00:04:12,780 --> 00:04:15,780
Sembra che stiamo creando un oggetto job qui, ma non lo siamo.

63
00:04:16,080 --> 00:04:19,420
Se lo fai all'interno di J è X, che sto facendo qui.

64
00:04:19,500 --> 00:04:29,190
Questo è J is X quindi questo significa che vuoi unire il tuo codice J is X con qualche espressione JavaScript alla fine.

65
00:04:29,460 --> 00:04:31,370
E qui possiamo indicare le competenze di base.

66
00:04:31,410 --> 00:04:32,970
Questa è un'espressione JavaScript valida.

67
00:04:33,060 --> 00:04:34,590
Stiamo solo indicando una costante.

68
00:04:34,990 --> 00:04:36,450
E ciò che Disneyland significa è morto.

69
00:04:36,870 --> 00:04:38,640
React passerà.

70
00:04:38,670 --> 00:04:39,870
Obiettivi del corso qui.

71
00:04:40,170 --> 00:04:44,700
Il valore memorizzato in questa costante in questo caso, questo array in questo posto di J è X.

72
00:04:44,880 --> 00:04:47,390
In questo caso, in questo prop, quindi.

73
00:04:47,940 --> 00:04:53,140
Quindi gli obiettivi saranno un sostegno che contiene un riferimento a questo array ora.

74
00:04:54,120 --> 00:04:58,370
Ora all'interno della lista degli obiettivi, ora possiamo ricevere il sostegno di quell'oro.

75
00:04:58,770 --> 00:05:02,340
Quindi andiamo all'elenco degli obiettivi e vediamo come funziona nell'elenco degli obiettivi.

76
00:05:02,370 --> 00:05:03,360
Abbiamo una funzione, giusto?

77
00:05:03,600 --> 00:05:04,830
Un componente funzionale.

78
00:05:05,610 --> 00:05:08,670
Ora, questa funzione in questo momento non ottiene alcun parametro.

79
00:05:09,090 --> 00:05:09,930
Possiamo cambiarlo.

80
00:05:10,170 --> 00:05:12,240
Possiamo ricevere un parametro di props qui.

81
00:05:12,900 --> 00:05:20,820
Ogni funzione che viene utilizzata come componente di reazione, il che significa che restituisce J è X, riceve anche oggetti di scena.

82
00:05:22,620 --> 00:05:28,160
Questo oggetto oltrepassa automaticamente il tuo componente funzionale reagendo per reagire?

83
00:05:28,580 --> 00:05:34,070
Ed è l'oggetto che raggruppa tutti gli oggetti di scena passati al componente.

84
00:05:34,190 --> 00:05:37,070
Quindi, nel nostro caso, l'obiettivo è quello di puntellare singolo che abbiamo.

85
00:05:37,400 --> 00:05:44,420
Quindi qui avremo un oggetto che ha una proprietà con il nome di obiettivi che detiene il valore passato a

86
00:05:44,420 --> 00:05:45,170
quel prop.

87
00:05:46,270 --> 00:05:53,110
Quindi, in altre parole, qui, potrei bloccare la console, puntare gli obiettivi di partenza, puntare gli obiettivi, perché qui ho nominato

88
00:05:53,110 --> 00:05:54,130
gli obiettivi Propp.

89
00:05:54,430 --> 00:05:59,680
Se hai scelto un nome diverso qui, il che è perfettamente bene, devi usare il nome diverso qui.

90
00:06:00,580 --> 00:06:03,640
Ora, se lo salviamo, al momento non vedremo più i nostri obiettivi.

91
00:06:04,090 --> 00:06:08,140
Ma se apriamo gli strumenti per sviluppatori, vediamo che questi Arae vengono bloccati qui.

92
00:06:08,230 --> 00:06:13,870
E il registro di papà proviene dalla riga sei della lista degli obiettivi, come vedi, che ovviamente è

93
00:06:13,870 --> 00:06:20,860
questo registro qua e là vediamo i nostri dati sugli obiettivi, il che significa che sì, arriva con successo all'interno del componente Gollust.

94
00:06:21,670 --> 00:06:28,420
Il concetto di oggetti di scena è un concetto estremamente importante per reagire, perché è ciò che consente di

95
00:06:28,420 --> 00:06:34,510
passare i dati dal componente A, il componente dell'app al componente B, il componente dell'elenco degli obiettivi.

96
00:06:34,540 --> 00:06:35,230
In questo caso.

97
00:06:35,830 --> 00:06:42,790
Ora diamo un'occhiata a come possiamo generare un elenco di dati in modo dinamico in J come X, perché qui abbiamo un

98
00:06:42,790 --> 00:06:48,940
elenco di obiettivi, una serie di obiettivi e vogliamo emetterlo come elementi di elenco qui nel nostro elenco non

99
00:06:48,940 --> 00:06:49,360
ordinato.