1
00:00:02,380 --> 00:00:07,720
Quindi abbiamo appreso che dobbiamo indicare Transvaal e posso dirti che questo file alla fine include Decode, che

2
00:00:07,720 --> 00:00:09,280
viene eseguito per primo.

3
00:00:09,310 --> 00:00:16,300
Quando iniziamo la nostra app e questo rende questa strana cosa al posto di questo d'Hiv qui.

4
00:00:16,780 --> 00:00:19,480
Ora cos'è quella strana cosa app qui.

5
00:00:20,170 --> 00:00:24,920
Reimportazione dell'app da questo file dell'app Indiano dal file Shreyas dell'app.

6
00:00:24,970 --> 00:00:27,640
Perché le estensioni vengono aggiunte automaticamente alle importazioni.

7
00:00:28,410 --> 00:00:31,360
Caro, alla fine abbiamo una funzione JavaScript.

8
00:00:31,510 --> 00:00:35,200
Questa è una funzione regolare, una funzione freccia memorizzata ed è costante.

9
00:00:35,620 --> 00:00:40,330
E quindi esportiamo questa costante e quindi è una funzione piuttosto semplice.

10
00:00:40,540 --> 00:00:43,120
Ma la cosa all'interno della funzione non è semplice.

11
00:00:43,530 --> 00:00:50,770
Quello che restituiamo qui sembra age, Timal, proprio come questo sembra age html, ma è in un file

12
00:00:50,770 --> 00:00:51,250
JavaScript.

13
00:00:51,250 --> 00:00:52,480
Non può essere h html.

14
00:00:52,540 --> 00:00:52,750
Giusto.

15
00:00:52,780 --> 00:00:55,330
Non è possibile aggiungere h html in un file JavaScript.

16
00:00:56,230 --> 00:00:59,330
Questa è una sintassi speciale inventata dal team di React.

17
00:00:59,350 --> 00:01:01,090
Si chiama J come X ..

18
00:01:01,480 --> 00:01:08,530
E ci consente di inviare email cercando codice nei file JavaScript sotto il cofano.

19
00:01:08,560 --> 00:01:14,350
Questo sarà tradotto in istruzioni reagire capisce in dettaglio.

20
00:01:14,380 --> 00:01:24,160
Quest'anno è simile a un elemento di reazione, un metodo fornito su questo oggetto di reazione qui e poi qui.

21
00:01:25,480 --> 00:01:26,320
Età uno

22
00:01:27,100 --> 00:01:27,970
E poi qui.

23
00:01:30,190 --> 00:01:30,760
No.

24
00:01:31,130 --> 00:01:32,390
O un oggetto vuoto.

25
00:01:32,750 --> 00:01:36,860
E poi c'è un terzo argomento, il tuo testo qui, per esempio.

26
00:01:36,950 --> 00:01:37,520
Ciao.

27
00:01:38,510 --> 00:01:40,020
Questo è reagire.

28
00:01:42,050 --> 00:01:45,650
Testo diverso da prima, ma renderà qualcosa di simile sullo schermo.

29
00:01:46,220 --> 00:01:49,040
Ciò produrrà lo stesso risultato e te lo posso dimostrare.

30
00:01:49,400 --> 00:01:55,430
Se semplicemente avviamo il nostro server di sviluppo e proviamo a vedere questa app e l'azione per avviarlo e il pacchetto per

31
00:01:55,430 --> 00:01:59,480
inseguire il file, troviamo uno script per avviare lo script, che esiste già lì.

32
00:01:59,870 --> 00:02:02,000
E questo, alla fine, utilizzerà tale strumento.

33
00:02:02,030 --> 00:02:07,310
Ho accennato in precedenza per poi trasformare il nostro codice e avviare un server di sviluppo

34
00:02:07,310 --> 00:02:10,640
che ricarichi o inietti automaticamente le modifiche quando cambiamo qualcosa.

35
00:02:11,210 --> 00:02:15,710
Quindi qui possiamo aprire un nuovo terminale integrato in queste idee.

36
00:02:17,040 --> 00:02:20,110
E sono su NPM che iniziano a far apparire quel server di sviluppo.

37
00:02:20,500 --> 00:02:25,510
E dovresti mantenere quel server attivo e funzionante finché lavori sul tuo codice, perché quando lo chiudi

38
00:02:25,510 --> 00:02:29,050
non puoi più visualizzare l'anteprima della tua pagina, più la tua app.

39
00:02:29,980 --> 00:02:34,750
Ora, quando avvii questo server, quando esegui npm start, dovrebbe aprire automaticamente una nuova

40
00:02:34,750 --> 00:02:36,910
scheda nel browser su localhost 3000.

41
00:02:37,150 --> 00:02:41,320
Se non lo fa semplicemente da solo, visitato e caro, dovresti vedere hide.

42
00:02:41,350 --> 00:02:44,560
Questa è reazione, che è chiaramente il testo che ho inserito qui.

43
00:02:45,430 --> 00:02:51,970
Quindi alla fine di quest'anno è React Syntex e potremmo scrivere la nostra intera app con questa sintassi.

44
00:02:52,180 --> 00:02:57,760
Ma questo diventa molto ingombrante, specialmente se iniziamo a nidificare gli elementi l'uno nell'altro.

45
00:02:58,270 --> 00:03:05,170
Ecco perché React ci offre questa alternativa J. S. La sintassi X, che alla fine è stata appena tradotta

46
00:03:05,170 --> 00:03:07,930
per reagire, crea elemento e poi quello che ti ho appena mostrato.

47
00:03:08,380 --> 00:03:13,420
Questo è anche il motivo per cui dobbiamo importare reagire qui, anche se sembra che non stiamo usando questo

48
00:03:13,450 --> 00:03:15,070
oggetto reagire ovunque in questo file.

49
00:03:15,150 --> 00:03:15,340
Giusto.

50
00:03:15,430 --> 00:03:18,280
Dobbiamo reagire qui al testo, ma è qualcosa di diverso.

51
00:03:18,610 --> 00:03:20,470
Quindi non lo stiamo usando da nessuna parte in questo file.

52
00:03:20,710 --> 00:03:24,820
Bene, viene usato implicitamente perché questo è solo zucchero sintattico.

53
00:03:24,940 --> 00:03:28,090
Alla fine, viene tradotto in quella sintassi ovvia.

54
00:03:28,180 --> 00:03:28,780
Ti ho mostrato.

55
00:03:29,230 --> 00:03:31,060
Ed è di questo che parla il reattore.

56
00:03:31,450 --> 00:03:34,090
Diciamo a reagire quali elementi dovrebbe rendere.

57
00:03:34,420 --> 00:03:40,300
E sotto il cofano lo tradurremo in comandi comprensibili al DOM, che il browser

58
00:03:40,300 --> 00:03:43,270
comprende per rendere reali elementi DOM.

59
00:03:43,900 --> 00:03:49,840
Ora, ad esempio, se aggiungo qui il titolo, che ci fornisce questo suggerimento integrato nel browser, in

60
00:03:49,840 --> 00:03:50,320
pratica.

61
00:03:51,580 --> 00:03:54,130
Funziona e lo salvo.

62
00:03:54,550 --> 00:03:55,540
Si ricarica automaticamente.

63
00:03:55,570 --> 00:03:58,360
Non è necessario farlo da soli e ora dovrebbe passare il mouse sopra questo.

64
00:03:58,570 --> 00:03:59,590
Vedi questo suggerimento.

65
00:03:59,740 --> 00:04:04,000
Qui funziona molto piccolo, ma puoi vederlo se lo provi sul tuo sistema.

66
00:04:04,940 --> 00:04:11,600
Ora, questo funziona perché papà, alla fine, è tradotto per reagire, creare elementi.

67
00:04:13,650 --> 00:04:17,750
All'età di un anno, poi fa obiezione, che prosegue lasciata vuota qui.

68
00:04:18,150 --> 00:04:24,090
Impostiamo gli attributi o le proprietà che vogliamo impostare su quel nodo DOM, che viene creato qui

69
00:04:24,090 --> 00:04:26,310
in questo caso, titolo due, funziona.

70
00:04:26,520 --> 00:04:28,380
E da allora in poi, abbiamo il testo.

71
00:04:28,740 --> 00:04:30,270
Ecco come funziona e reagisce.

72
00:04:30,270 --> 00:04:31,510
Faremo tutto il necessario.

73
00:04:31,530 --> 00:04:32,820
Creerà questo elemento.

74
00:04:33,210 --> 00:04:36,180
Imposta tutte queste proprietà o attributi qui.

75
00:04:36,540 --> 00:04:38,950
E renderà l'ultimo argomento qui.

76
00:04:39,270 --> 00:04:40,890
All'interno di quell'elemento creato.

77
00:04:41,310 --> 00:04:47,340
E questa è anche la parte in cui è J è il codice X ci aiuta, perché se qui abbiamo,

78
00:04:47,430 --> 00:04:49,290
diciamo, un altro elemento H html.

79
00:04:49,620 --> 00:04:56,010
Dovremmo nidificare più reazioni, creare chiamate di elementi l'una nell'altra, che diventa rapidamente molto difficile

80
00:04:56,340 --> 00:04:57,510
da gestire.

81
00:04:57,540 --> 00:05:00,200
Ecco perché è J è indice X.

82
00:05:00,210 --> 00:05:02,460
Ecco una grande idea, una grande invenzione.

83
00:05:03,000 --> 00:05:05,980
Quindi useremo la sintassi e abbiamo usato anche qui all'Indice J.

84
00:05:05,980 --> 00:05:06,320
S.

85
00:05:06,570 --> 00:05:10,640
La differenza è che qui non lo usiamo con un normale H.

86
00:05:10,690 --> 00:05:11,850
Elemento Dom temporale.

87
00:05:12,180 --> 00:05:20,520
Ma invece qui usiamo la funzione personalizzata perché stiamo usando ciò che viene esportato nell'apertura come file.

88
00:05:21,060 --> 00:05:24,180
E ciò che esportiamo è una normale funzione JavaScript.

89
00:05:24,840 --> 00:05:29,060
Bene, questo è uno dei concetti più importanti dei componenti di reazione.