1
00:00:02,380 --> 00:00:07,720
Dowiedzieliśmy się więc, że musimy wskazać Transvaal i mogę powiedzieć, że ten plik zawiera Dekodowanie, które

2
00:00:07,720 --> 00:00:09,280
wykonuje się jako pierwsze.

3
00:00:09,310 --> 00:00:16,300
Kiedy uruchamiamy naszą aplikację, a to czyni tę dziwną rzecz w miejscu tego d'Hiv tutaj.

4
00:00:16,780 --> 00:00:19,480
Co to za dziwna aplikacja tutaj.

5
00:00:20,170 --> 00:00:24,920
Ponowne importowanie aplikacji z tego pliku aplikacji Indian z pliku Shreyas aplikacji.

6
00:00:24,970 --> 00:00:27,640
Ponieważ rozszerzenia są dodawane automatycznie przy imporcie.

7
00:00:28,410 --> 00:00:31,360
Drogi, w końcu mamy funkcję JavaScript.

8
00:00:31,510 --> 00:00:35,200
Jest to zwykła funkcja, zapisana funkcja strzałki i jest stała.

9
00:00:35,620 --> 00:00:40,330
A następnie eksportujemy tę stałą, dlatego funkcja jest dość prosta.

10
00:00:40,540 --> 00:00:43,120
Ale funkcja wewnątrz funkcji nie jest prosta.

11
00:00:43,530 --> 00:00:50,770
To, co tu wracamy, wygląda jak wiek, Timal, tak jak ten wygląda na wiek HTML, ale jest w pliku

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

13
00:00:51,250 --> 00:00:52,480
To nie może być HTML.

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

15
00:00:52,780 --> 00:00:55,330
Nie można dodać h html w pliku JavaScript.

16
00:00:56,230 --> 00:00:59,330
To specjalna składnia wymyślona przez zespół React.

17
00:00:59,350 --> 00:01:01,090
Nazywa się J jako X ..

18
00:01:01,480 --> 00:01:08,530
I pozwala nam przesłać kodem E-mailem szukający kod w plikach JavaScript pod maską.

19
00:01:08,560 --> 00:01:14,350
Zostanie to przetłumaczone na instrukcje, które szczegółowo rozumie reakcja.

20
00:01:14,380 --> 00:01:24,160
Ten rok jest podobny do reagowania na tworzenie elementu, metody podanej na tym obiekcie reagowania tu i potem tutaj.

21
00:01:25,480 --> 00:01:26,320
Wiek pierwszy

22
00:01:27,100 --> 00:01:27,970
A potem tutaj.

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

24
00:01:31,130 --> 00:01:32,390
Lub pusty przedmiot.

25
00:01:32,750 --> 00:01:36,860
Jest też trzeci argument, na przykład twój tekst tutaj.

26
00:01:36,950 --> 00:01:37,520
Cześć.

27
00:01:38,510 --> 00:01:40,020
To jest reakcja.

28
00:01:42,050 --> 00:01:45,650
Inny tekst niż wcześniej, ale wyświetli coś podobnego na ekranie.

29
00:01:46,220 --> 00:01:49,040
To da ten sam rezultat i mogę ci to udowodnić.

30
00:01:49,400 --> 00:01:55,430
Jeśli po prostu uruchomimy nasz serwer programistyczny i spróbujemy zobaczyć tę aplikację i akcję, aby go uruchomić, oraz pakiet

31
00:01:55,430 --> 00:01:59,480
do ścigania pliku, znajdziemy skrypt do uruchomienia skryptu, który już tam istnieje.

32
00:01:59,870 --> 00:02:02,000
I to ostatecznie wykorzysta to narzędzie.

33
00:02:02,030 --> 00:02:07,310
Wspomniałem wcześniej, aby następnie przekształcić nasz kod i uruchomić serwer programistyczny, który automatycznie

34
00:02:07,310 --> 00:02:10,640
przeładowuje lub wprowadza zmiany, gdy coś zmieniamy.

35
00:02:11,210 --> 00:02:15,710
Więc tutaj możemy otworzyć nowy terminal zintegrowany z tym pomysłem.

36
00:02:17,040 --> 00:02:20,110
I są na NPM, aby uruchomić ten serwer programistyczny.

37
00:02:20,500 --> 00:02:25,510
I powinieneś utrzymywać ten serwer tak długo, jak pracujesz nad kodem, ponieważ kiedy go zamkniesz,

38
00:02:25,510 --> 00:02:29,050
nie będziesz już mógł wyświetlić podglądu swojej strony, ani aplikacji.

39
00:02:29,980 --> 00:02:34,750
Teraz, kiedy uruchomisz ten serwer, kiedy uruchomisz npm start, powinien on automatycznie otworzyć nową

40
00:02:34,750 --> 00:02:36,910
kartę w przeglądarce na localhost 3000.

41
00:02:37,150 --> 00:02:41,320
Jeśli nie zrobi tego po prostu sam i odwiedził cię, kochanie, powinieneś zobaczyć hide.

42
00:02:41,350 --> 00:02:44,560
To jest reakcja, co wyraźnie jest tekstem, który tu wpisałem.

43
00:02:45,430 --> 00:02:51,970
Na koniec tego roku jest React Syntex i moglibyśmy napisać całą naszą aplikację przy użyciu tej składni.

44
00:02:52,180 --> 00:02:57,760
Ale staje się to bardzo uciążliwe, zwłaszcza jeśli zaczniemy zagnieżdżać elementy w sobie.

45
00:02:58,270 --> 00:03:05,170
Dlatego React daje nam tę alternatywę J. S. Składnia X, która ostatecznie została przetłumaczona, aby

46
00:03:05,170 --> 00:03:07,930
zareagować, utworzyć element, a następnie to, co właśnie pokazałem.

47
00:03:08,380 --> 00:03:13,420
Dlatego też musimy zaimportować reakcję tutaj, nawet jeśli wygląda na to, że nie używamy tego obiektu

48
00:03:13,450 --> 00:03:15,070
reagowania nigdzie w tym pliku.

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

50
00:03:15,430 --> 00:03:18,280
Tutaj musimy zareagować na tekst, ale to coś innego.

51
00:03:18,610 --> 00:03:20,470
Więc nie używamy go nigdzie w tym pliku.

52
00:03:20,710 --> 00:03:24,820
Cóż, używa się go domyślnie, ponieważ jest to tylko cukier składniowy.

53
00:03:24,940 --> 00:03:28,090
Ostatecznie jest to przetłumaczone na tę oczywistą składnię.

54
00:03:28,180 --> 00:03:28,780
Pokazałem ci.

55
00:03:29,230 --> 00:03:31,060
I o to właśnie chodzi w reaktorze.

56
00:03:31,450 --> 00:03:34,090
Mówimy reagować, które elementy powinien renderować.

57
00:03:34,420 --> 00:03:40,300
I pod maską to przetłumaczymy to na polecenia, które DOM rozumie, a przeglądarka rozumie

58
00:03:40,300 --> 00:03:43,270
je, aby renderować prawdziwe elementy DOM.

59
00:03:43,900 --> 00:03:49,840
Teraz, na przykład, jeśli dodam tutaj tytuł, który daje nam podpowiedź wbudowaną w

60
00:03:49,840 --> 00:03:50,320
przeglądarkę.

61
00:03:51,580 --> 00:03:54,130
To działa i zapisuję to.

62
00:03:54,550 --> 00:03:55,540
To automatycznie przeładowuje.

63
00:03:55,570 --> 00:03:58,360
Nie musisz tego robić na własną rękę i powinieneś teraz najechać na to kursorem.

64
00:03:58,570 --> 00:03:59,590
Widzisz tę etykietkę.

65
00:03:59,740 --> 00:04:04,000
Działa to tutaj bardzo mało, ale możesz to zobaczyć, jeśli przetestujesz to na własnym systemie.

66
00:04:04,940 --> 00:04:11,600
Teraz to działa, ponieważ tata w końcu jest tłumaczony, aby zareagować, stworzyć element.

67
00:04:13,650 --> 00:04:17,750
Wiek pierwszy, a następnie sprzeciwia się, które, jak nam się wydaje, pozostawiliśmy puste.

68
00:04:18,150 --> 00:04:24,090
Ustawiamy atrybuty lub właściwości, które chcemy ustawić w tym węźle DOM, który jest tworzony tutaj w tym

69
00:04:24,090 --> 00:04:26,310
przypadku, tytuł drugi, to działa.

70
00:04:26,520 --> 00:04:28,380
A potem mamy tekst.

71
00:04:28,740 --> 00:04:30,270
Tak to działa i reaguje.

72
00:04:30,270 --> 00:04:31,510
Zrobimy wszystko, co trzeba.

73
00:04:31,530 --> 00:04:32,820
Stworzy ten element.

74
00:04:33,210 --> 00:04:36,180
Tutaj ustawi wszystkie te właściwości lub atrybuty.

75
00:04:36,540 --> 00:04:38,950
I wyświetli ostatni argument tutaj.

76
00:04:39,270 --> 00:04:40,890
Wewnątrz tego utworzonego elementu.

77
00:04:41,310 --> 00:04:47,340
I to także część, w której jest J, pomaga nam kod X, ponieważ jeśli tutaj mamy,

78
00:04:47,430 --> 00:04:49,290
powiedzmy, inny element HTML.

79
00:04:49,620 --> 00:04:56,010
Musielibyśmy zagnieżdżać wiele reakcji, tworzyć ze sobą wywołania elementów, co szybko staje się bardzo trudne

80
00:04:56,340 --> 00:04:57,510
do zarządzania.

81
00:04:57,540 --> 00:05:00,200
Właśnie dlatego J jest indeksem X.

82
00:05:00,210 --> 00:05:02,460
Oto świetny pomysł, świetny wynalazek.

83
00:05:03,000 --> 00:05:05,980
Wykorzystamy więc składnię i użyliśmy również tutaj w indeksie J.

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

85
00:05:06,570 --> 00:05:10,640
Różnica polega jednak na tym, że tutaj nie używamy go z normalnym H.

86
00:05:10,690 --> 00:05:11,850
Element Timal Dom.

87
00:05:12,180 --> 00:05:20,520
Zamiast tego tutaj używamy funkcji niestandardowej, ponieważ używamy tego, co jest eksportowane do apertury jako plik.

88
00:05:21,060 --> 00:05:24,180
A my eksportujemy tam normalną funkcję JavaScript.

89
00:05:24,840 --> 00:05:29,060
To jedna z najważniejszych koncepcji reagowania komponentów.