1
00:00:02,260 --> 00:00:08,440
Ora, in questo corso di aggiornamento, Module Yeater non scriverà un'app di reazione complessa perché semplicemente non è

2
00:00:08,440 --> 00:00:10,120
l'idea di questo modulo.

3
00:00:10,630 --> 00:00:17,260
Scriveremo un'app realistica nel modulo principale più avanti in questo corso dopo questo modulo qui dove lavoreremo al

4
00:00:17,260 --> 00:00:18,730
progetto del corso.

5
00:00:18,880 --> 00:00:20,890
Quindi è solo un aggiornamento qui.

6
00:00:21,070 --> 00:00:25,840
E mi concentro sugli elementi di reazione principali, Stael, per e non sulla creazione di un'applicazione straordinaria.

7
00:00:26,530 --> 00:00:31,870
Quindi REACT riguarda i componenti e quindi in genere dividiamo la nostra app in componenti.

8
00:00:32,080 --> 00:00:34,300
Ora iniziamo senza dividerlo, però.

9
00:00:34,390 --> 00:00:41,320
E invece di presentare una tecnologia H qui, un'app, userò un div, diciamo in quel div.

10
00:00:41,710 --> 00:00:43,840
Aggiungiamo altro codice html.

11
00:00:44,050 --> 00:00:50,420
Sto dicendo che h html qui ovviamente è J is X ma è ancora tradotto in due note HCM Altidore.

12
00:00:50,500 --> 00:00:50,700
Giusto.

13
00:00:50,980 --> 00:00:52,120
Ma è J è X.

14
00:00:53,020 --> 00:01:00,830
Quindi qui potremmo avere H per taggare dove diciamo obiettivi di causa e sotto che vogliamo avere un elenco o aggiungere un elenco

15
00:01:00,830 --> 00:01:02,950
dei nostri obiettivi del corso.

16
00:01:03,180 --> 00:01:04,150
E sono un obiettivo.

17
00:01:04,180 --> 00:01:04,840
Potrebbe essere.

18
00:01:05,260 --> 00:01:09,460
Papà, vogliamo finire il corso.

19
00:01:10,350 --> 00:01:13,560
Che vogliamo imparare tutto sul corso.

20
00:01:17,240 --> 00:01:21,230
Argomento principale e che vogliamo, diciamo, aiutare.

21
00:01:22,920 --> 00:01:25,950
I nostri studenti nel corso, CU e.

22
00:01:28,030 --> 00:01:31,890
Una sezione, e potrebbe essere dell'oro.

23
00:01:32,260 --> 00:01:34,060
Ora, un'applicazione molto banale.

24
00:01:34,240 --> 00:01:39,850
Ora, non ho uno stile spettacolare speciale qui, motivo per cui lo salviamo e lo tiriamo fuori.

25
00:01:39,880 --> 00:01:47,050
Ma ora aggiungerò un po 'di stile e per questo aggiungerò un'app, il file di Sears qui e importerò Deadfall

26
00:01:47,110 --> 00:01:48,370
nel file JavaScript.

27
00:01:48,400 --> 00:01:53,710
Questo, ovviamente, non è possibile a Manila, JavaScript, ma a causa di ciò sotto gli strumenti del cofano, che

28
00:01:53,710 --> 00:01:56,860
Nien analizza i nostri file e quindi trasforma il codice.

29
00:01:57,310 --> 00:02:02,740
Questo è possibile e questo viene semplicemente trasformato per iniettare questo codice CSX in H.

30
00:02:02,740 --> 00:02:03,790
Anche il file temporale.

31
00:02:04,660 --> 00:02:07,580
Ora qui, darò una C in classe.

32
00:02:07,600 --> 00:02:09,370
E c'è una cosa speciale.

33
00:02:10,080 --> 00:02:16,500
L'attributo class come questo non esiste e J è X perché class è una parola chiave in JavaScript.

34
00:02:16,840 --> 00:02:18,160
Quindi è il nome della classe.

35
00:02:18,190 --> 00:02:21,870
Ed è così che aggiungi le classi di siesta agli elementi e J è X.

36
00:02:22,240 --> 00:02:28,400
Tutto questo, ovviamente, è una specie di prova o ti ricorda il fatto che non si tratta di H Tim.

37
00:02:28,660 --> 00:02:29,320
Ma H Tim.

38
00:02:29,320 --> 00:02:37,630
Sintassi dall'aspetto gufo, tutti nominati come lista degli obiettivi di classe qui e ora qui possiamo.

39
00:02:39,040 --> 00:02:46,300
Definisce alcuni stili per Gollust qui, e imposterò semplicemente la lista su style su non qui, rimuoverò un margine o

40
00:02:46,300 --> 00:02:52,660
gli darò un margine di due ram in alto e in basso e un'imbottitura di zero.

41
00:02:53,350 --> 00:03:00,040
E su ogni voce dell'elenco degli obiettivi, aggiungerò un margine di una stanza in alto e in basso a zero due a sinistra e a destra,

42
00:03:00,460 --> 00:03:03,020
e quindi semplicemente un bordo di un pixel solido.

43
00:03:03,040 --> 00:03:07,460
E poi questo colore grigiastro qui e un'imbottitura di un montone.

44
00:03:07,550 --> 00:03:12,460
Questo è uno stile molto, molto semplice perché non voglio passare molto tempo a scrivere visto come

45
00:03:12,520 --> 00:03:13,150
stili qui.

46
00:03:13,930 --> 00:03:15,820
Ora, forse una regolazione.

47
00:03:16,420 --> 00:03:19,810
Diamo effettivamente all'elenco un margine di due nastri in tutte le direzioni.

48
00:03:20,230 --> 00:03:24,310
Ora abbiamo questo elenco dei nostri obiettivi per adattare gli obiettivi del corso qui in alto.

49
00:03:24,640 --> 00:03:25,990
Lo farò anche io.

50
00:03:27,750 --> 00:03:30,420
Dai a questo d'Hiv un nome di classe, ovviamente, teschi.

51
00:03:31,460 --> 00:03:33,050
E poi in D. C. come file USA.

52
00:03:34,390 --> 00:03:41,410
Forse in cima, possiamo bloccare gli obiettivi del corso e la loro d. h per taggare per essere allineati al centro.

53
00:03:41,620 --> 00:03:42,220
Proprio così.

54
00:03:43,060 --> 00:03:45,160
Ora di nuovo obiettivi molto grandi.

55
00:03:45,190 --> 00:03:47,470
Ma va bene per il discorso qui.

56
00:03:47,650 --> 00:03:49,270
Stiamo solo esercitando la reazione.

57
00:03:49,780 --> 00:03:51,070
Quindi abbiamo questi obiettivi del corso qui.

58
00:03:51,430 --> 00:03:51,880
Eccezionale.

59
00:03:52,450 --> 00:03:54,860
Questo, ovviamente, è un markup molto semplice.

60
00:03:55,450 --> 00:04:00,940
Ora, ciò che reagisci spesso a ciò che fai mentre lo dividi in più

61
00:04:00,940 --> 00:04:07,570
componenti, ad esempio, esternalizzi questo elenco in un componente separato per mantenere ogni componente da solo relativamente snello

62
00:04:07,570 --> 00:04:09,640
e concentrato su un compito.

63
00:04:10,180 --> 00:04:14,560
Per questo, possiamo aggiungere una cartella sup componenti qui nella cartella sorgente.

64
00:04:15,400 --> 00:04:20,650
E lì aggiungerò un elenco di obiettivi J. S. File.

65
00:04:20,830 --> 00:04:22,960
Questo conterrà il mio componente dell'elenco obiettivi.

66
00:04:23,620 --> 00:04:27,880
Ora, per creare un componente così nuovo, dobbiamo prima di tutto importare, reagire da reagire.

67
00:04:27,940 --> 00:04:30,450
Altrimenti non possiamo usare questo J come X Syntex.

68
00:04:31,000 --> 00:04:32,290
E poi ho parlato di morto.

69
00:04:32,290 --> 00:04:33,760
Un componente è una funzione.

70
00:04:33,880 --> 00:04:37,660
E a proposito, puoi anche creare con la parola chiave funzione o.

71
00:04:38,710 --> 00:04:42,280
Con un'espressione di funzione o.

72
00:04:43,490 --> 00:04:47,480
Con la funzione Freccia presto testo che ho usato prima, era solo un somatico che userò qui,

73
00:04:47,480 --> 00:04:48,680
ma non è un must.

74
00:04:49,430 --> 00:04:52,430
E poi qui esporto la mia lista di obiettivi in questo modo.

75
00:04:52,790 --> 00:04:54,860
E ora qui, torno.

76
00:04:55,920 --> 00:05:01,530
Questo elenco non ordinato, salt, lo taglia qui e poi viene aggiunto, qui c'è un valore di ritorno e se

77
00:05:01,530 --> 00:05:07,500
una riforma a questo, vedi automaticamente queste parentesi vengono aggiunte attorno ad esso in modo che questo possa essere formattato in modo

78
00:05:07,680 --> 00:05:08,910
corretto su più righe.

79
00:05:08,940 --> 00:05:10,890
Altrimenti, questo non sarebbe JavaScript valido.

80
00:05:11,280 --> 00:05:13,350
Lo stesso vale per le parentesi.

81
00:05:13,350 --> 00:05:16,920
È perché allora JavaScript sa che questo blocco appartiene insieme.

82
00:05:17,730 --> 00:05:20,170
Quindi ora abbiamo l'elenco degli obiettivi qui e un'app.

83
00:05:20,430 --> 00:05:24,630
Sì, ora possiamo importare il nostro componente elenco obiettivi.

84
00:05:24,930 --> 00:05:26,520
Puoi nominarlo qui come vuoi.

85
00:05:26,790 --> 00:05:29,990
Non deve essere lo stesso nome con cui lo esporti qui.

86
00:05:30,450 --> 00:05:36,720
L'unica cosa importante è che deve iniziare con un carattere maiuscolo qui in Abcess e un'importazione dalla cartella

87
00:05:36,720 --> 00:05:39,510
dei componenti e provengono dall'elenco degli obiettivi.

88
00:05:39,780 --> 00:05:43,430
E come ho detto prima, puoi omettere D. estensione del file qui.

89
00:05:43,620 --> 00:05:44,460
Non è richiesto

90
00:05:45,210 --> 00:05:52,710
E poi qui usi go list come un normale J. S. L'elemento X, come un normale elemento H tim L, si potrebbe

91
00:05:52,710 --> 00:05:53,040
dire.

92
00:05:53,310 --> 00:05:58,890
Ma poiché non abbiamo contenuti tra il tag di apertura e di chiusura, possiamo e dobbiamo scrivere qui un tag di

93
00:05:58,890 --> 00:05:59,460
chiusura automatica.

94
00:05:59,760 --> 00:06:00,960
Questo non sarebbe permesso.

95
00:06:01,050 --> 00:06:03,280
Devi sempre chiudere tax e jazz x.

96
00:06:03,990 --> 00:06:06,240
Quindi questo sarebbe ora il mio componente dell'elenco obiettivi.

97
00:06:06,630 --> 00:06:10,230
E quindi, se siamo sicuri, vediamo lo stesso risultato di prima.

98
00:06:10,980 --> 00:06:17,520
Otteniamo anche lo stesso stile perché gli stili qui vengono sempre applicati a livello globale, anche se li importi in

99
00:06:17,520 --> 00:06:19,140
un file componente specifico.

100
00:06:19,590 --> 00:06:26,250
Tuttavia, è buona norma impostare gli stili nel file CSX accanto al componente a cui appartengono.

101
00:06:26,520 --> 00:06:28,610
Quindi, aggiungerò un elenco di obiettivi C come file s.

102
00:06:29,040 --> 00:06:33,210
Aggiungi il mio elenco di obiettivi Stollsteimer e importa tale elenco di obiettivi.

103
00:06:33,300 --> 00:06:36,450
CSX rientra nel file JavaScript dell'elenco obiettivi.

104
00:06:36,720 --> 00:06:41,580
Questo non è un must, ma rende facile trovare gli stili che appartengono a questo componente.

105
00:06:41,880 --> 00:06:47,160
Tieni presente che gli stili non vengono automaticamente applicati a un componente, anche se vengono applicate

106
00:06:47,220 --> 00:06:52,860
le normali regole s poiché tutte queste C sono le seguenti, indipendentemente da dove le importi, vengono applicate

107
00:06:52,890 --> 00:06:54,120
globalmente all'intera pagina.

108
00:06:54,960 --> 00:06:57,540
Con ciò, però, torniamo allo stesso risultato di prima.

109
00:06:58,020 --> 00:06:59,220
Allora perché l'abbiamo fatto?

110
00:06:59,290 --> 00:07:02,280
E perché lo dividiamo se abbiamo lo stesso risultato di prima?