1
00:00:02,250 --> 00:00:09,030
Per questo allegato per trovare un progetto di partenza, questo progetto di partenza è stato creato con l'app Create React,

2
00:00:09,150 --> 00:00:11,820
uno strumento creato dal team di React.

3
00:00:11,880 --> 00:00:18,510
Alla fine, il che rende facile creare nuovi progetti di reazione e darci una struttura di progetto come questa.

4
00:00:18,630 --> 00:00:22,980
L'ho modificato un po ', ma generalmente è esattamente lo stesso che otterresti da questo strumento.

5
00:00:23,460 --> 00:00:25,550
Ora, perché abbiamo bisogno di un tale strumento?

6
00:00:25,560 --> 00:00:28,020
Perché non importiamo solo uno script nel nostro H.

7
00:00:28,020 --> 00:00:29,580
File HTML e iniziare?

8
00:00:30,120 --> 00:00:33,660
Perché React è un po 'più complesso di JavaScript vaniglia.

9
00:00:33,840 --> 00:00:39,660
Alla fine, spediamo il codice JavaScript vaniglia, ma il modo in cui scriviamo al codice è un po 'più conveniente per

10
00:00:39,690 --> 00:00:40,770
noi come sviluppatore.

11
00:00:41,070 --> 00:00:46,620
Possiamo utilizzare alcune funzionalità che non potrebbero essere eseguite nel browser e quindi questa configurazione del progetto qui

12
00:00:46,620 --> 00:00:52,680
include un paio di strumenti che prendono il codice che scriviamo come sviluppatore e lo convertono effettivamente in codice che

13
00:00:52,680 --> 00:00:54,480
viene eseguito in un browser.

14
00:00:54,570 --> 00:00:57,960
Quindi abbiamo avuto Neuroma, il codice che viene eseguito nel browser?

15
00:00:58,320 --> 00:01:01,710
Ma è più facile scrivere quel codice come sviluppatore.

16
00:01:02,220 --> 00:01:07,800
Inoltre, otteniamo un server di sviluppo, che è un server semplice che serve la nostra applicazione front-end in modo

17
00:01:07,860 --> 00:01:13,020
che non abbia back e serva solo quel front-quell'applicazione e che ricarichi o inietti automaticamente le modifiche

18
00:01:13,020 --> 00:01:18,060
ogni volta che cambiamo e salviamo qualcosa in una delle nostre fonti file di codice.

19
00:01:18,780 --> 00:01:23,950
Inoltre, qui con REACT, stiamo creando un'applicazione a pagina singola.

20
00:01:24,060 --> 00:01:29,040
Questo non è un must, ma è una scelta comune in un'applicazione a pagina singola.

21
00:01:29,370 --> 00:01:34,710
Hai solo un file temporale H, che alla fine viene restituito dal server che serve quell'applicazione.

22
00:01:34,890 --> 00:01:39,360
In questo caso, questo file Timmo di età, che a sua volta è relativamente vuoto.

23
00:01:39,930 --> 00:01:44,490
Ma questo file includerà successivamente le importazioni di script.

24
00:01:44,620 --> 00:01:50,370
Verranno aggiunti automaticamente da questi strumenti che ho menzionato in precedenza, che alla fine ospitano ed eseguono

25
00:01:50,430 --> 00:01:56,280
la nostra applicazione di reazione, che a nostra volta qui nella cartella di origine con i nostri file

26
00:01:57,000 --> 00:02:03,420
ci siamo arrivati in modo che alla fine abbiamo un'applicazione web di Front End, che consiste in un file html

27
00:02:03,420 --> 00:02:09,450
in cui Denn JavaScript viene utilizzato per eseguire il rendering di qualcosa sullo schermo e ri-renderlo sullo schermo quando

28
00:02:09,750 --> 00:02:10,740
è necessario.

29
00:02:11,250 --> 00:02:17,910
E ciò ci consente di costruire interfacce utente moderne altamente reattive in cui tutto accade istantaneamente perché JavaScript

30
00:02:18,030 --> 00:02:21,480
viene eseguito sul browser, le cose accadono all'istante.

31
00:02:21,570 --> 00:02:25,530
Non è necessario attendere che un nuovo file L venga scaricato da un server.

32
00:02:25,950 --> 00:02:27,510
È che tutto è già lì.

33
00:02:27,570 --> 00:02:33,270
Quindi quando un utente fa clic su un pulsante e vogliamo mostrare una casella sullo schermo in risposta a quel boom di

34
00:02:33,540 --> 00:02:35,730
clic, ciò accade istantaneamente a causa di JavaScript.

35
00:02:36,090 --> 00:02:37,530
Questa è la sensazione che vogliamo fornire.

36
00:02:37,900 --> 00:02:40,110
Possiamo farlo ora con reagire.

37
00:02:40,200 --> 00:02:41,700
Basta parlare della teoria.

38
00:02:42,030 --> 00:02:42,990
Scriviamo un po 'di codice.

39
00:02:43,350 --> 00:02:47,940
Come ho già detto, lo facciamo qui nella cartella sorgente dove troviamo un indicizzato al suo file

40
00:02:47,940 --> 00:02:50,370
nel file Chase dell'app, entrambi file molto semplici.

41
00:02:50,970 --> 00:02:53,100
Ora diamo un'occhiata al telefono di caso indicizzato.

42
00:02:53,340 --> 00:02:56,010
Ecco, abbiamo un paio di importazioni in cima.

43
00:02:56,310 --> 00:02:59,610
Questo è, comunque, il modo in cui importi il codice sul front-end.

44
00:03:00,150 --> 00:03:05,550
Importa qualcosa da e poi aiva un percorso relativo al tuo file.

45
00:03:05,700 --> 00:03:08,820
O se è un pacchetto di terze parti, solo un nome di pacchetto.

46
00:03:09,780 --> 00:03:13,080
E poi qui abbiamo importazioni dai nostri file con un percorso relativo.

47
00:03:13,170 --> 00:03:16,800
Come ho già detto, qui stiamo eseguendo un comando alla fine.

48
00:03:16,980 --> 00:03:18,660
Rendering React Dom.

49
00:03:19,740 --> 00:03:24,990
Ora, questo proviene dall'oggetto React Dom qui alla fine, che stiamo importando

50
00:03:24,990 --> 00:03:31,110
dalla libreria React Arm, e questo rende questa cosa strana, che non è JavaScript normale.

51
00:03:31,490 --> 00:03:31,760
Sei tu.

52
00:03:31,800 --> 00:03:33,900
Questo gioca sul nostro H. M. pagina.

53
00:03:34,290 --> 00:03:35,900
Questo è JavaScript regolare.

54
00:03:35,910 --> 00:03:39,110
E qui stiamo selezionando l'elemento con un'idea di root.

55
00:03:39,510 --> 00:03:42,990
Se diamo un'occhiata al nostro singolo file HGL, questo è Dave qui.

56
00:03:43,110 --> 00:03:48,270
Quindi i dati sono alla fine in cui la nostra applicazione a pagina singola di reazione sarà ospitata su due.

57
00:03:48,600 --> 00:03:52,710
E sono pronti a reagire, prenderanno il controllo e renderanno tutto in quel posto.

58
00:03:53,940 --> 00:03:55,230
Quindi è quello che stiamo facendo qui.

59
00:03:55,260 --> 00:03:58,290
Ma cos'è questa strana cosa per papà?

60
00:03:58,310 --> 00:04:01,500
Dobbiamo capire quali sono i componenti e come funziona la reazione.