1
00:00:02,250 --> 00:00:09,030
W tym celu w celu znalezienia projektu początkowego ten projekt początkowy został utworzony za pomocą aplikacji Create

2
00:00:09,150 --> 00:00:11,820
React, narzędzia stworzonego przez zespół React.

3
00:00:11,880 --> 00:00:18,510
Na koniec, co ułatwia tworzenie nowych reagujących projektów i daje nam taką strukturę projektu.

4
00:00:18,630 --> 00:00:22,980
Trochę go poprawiłem, ale ogólnie jest to dokładnie to samo, co można uzyskać z tego narzędzia.

5
00:00:23,460 --> 00:00:25,550
Dlaczego potrzebujemy takiego narzędzia?

6
00:00:25,560 --> 00:00:28,020
Dlaczego po prostu nie importujemy skryptu do naszego H.

7
00:00:28,020 --> 00:00:29,580
Plik HTML i zacząć?

8
00:00:30,120 --> 00:00:33,660
Ponieważ React jest nieco bardziej złożony niż waniliowy JavaScript.

9
00:00:33,840 --> 00:00:39,660
Ostatecznie wysyłamy waniliowy kod JavaScript, ale sposób, w jaki piszemy do kodu jest nieco wygodniejszy dla nas

10
00:00:39,690 --> 00:00:40,770
jako programistów.

11
00:00:41,070 --> 00:00:46,620
Możemy korzystać z niektórych funkcji, które nie działałyby w przeglądarce, dlatego też niniejsza konfiguracja

12
00:00:46,620 --> 00:00:52,680
projektu zawiera kilka narzędzi, które pobierają kod, który piszemy jako programista, i faktycznie przekształcają go w

13
00:00:52,680 --> 00:00:54,480
kod działający w przeglądarce.

14
00:00:54,570 --> 00:00:57,960
Więc czy mieliśmy Neuroma, kod wykonywany w przeglądarce?

15
00:00:58,320 --> 00:01:01,710
Ale łatwiej jest nam napisać ten kod jako programista.

16
00:01:02,220 --> 00:01:07,800
Ponadto otrzymujemy serwer programistyczny, który jest prostym serwerem, który obsługuje naszą aplikację front-end, więc nie ma zaplecza

17
00:01:07,860 --> 00:01:13,020
i służy tylko temu frontowi tej aplikacji i który automatycznie ładuje lub wstrzykuje zmiany za

18
00:01:13,020 --> 00:01:18,060
każdym razem, gdy zmieniamy i zapisujemy coś w jednym z naszych źródeł pliki kodu.

19
00:01:18,780 --> 00:01:23,950
Ponadto, tutaj dzięki REACT, budujemy aplikację na jednej stronie.

20
00:01:24,060 --> 00:01:29,040
To nie jest konieczne, ale jest to powszechny wybór w aplikacji na jednej stronie.

21
00:01:29,370 --> 00:01:34,710
Masz tylko jeden plik H Timal, który na końcu jest zwracany przez serwer obsługujący tę aplikację.

22
00:01:34,890 --> 00:01:39,360
W tym przypadku ten plik Timmo wieku, który sam jest względnie pusty.

23
00:01:39,930 --> 00:01:44,490
Ale ten plik będzie później zawierał import skryptów.

24
00:01:44,620 --> 00:01:50,370
Zostaną one dodane automatycznie przez narzędzia, o których wspomniałem wcześniej, które na końcu hostują i

25
00:01:50,430 --> 00:01:56,280
uruchamiają naszą aplikację reagującą, którą z kolei mamy tutaj w folderze źródłowym z naszymi plikami, które

26
00:01:57,000 --> 00:02:03,420
tam mamy, dzięki czemu ostatecznie mamy aplikację internetową Front End, który składa się z jednego pliku HTML, w

27
00:02:03,420 --> 00:02:09,450
którym Denn JavaScript służy do renderowania czegoś na ekranie i ponownego renderowania tego na ekranie, gdy jest

28
00:02:09,750 --> 00:02:10,740
to potrzebne.

29
00:02:11,250 --> 00:02:17,910
A to pozwala nam budować wysoce reaktywne nowoczesne interfejsy użytkownika, w których wszystko dzieje się natychmiast, ponieważ

30
00:02:18,030 --> 00:02:21,480
JavaScript działa w przeglądarce, wszystko dzieje się natychmiast.

31
00:02:21,570 --> 00:02:25,530
Nie musimy czekać na pobranie nowego pliku L z serwera.

32
00:02:25,950 --> 00:02:27,510
Po prostu wszystko już tam jest.

33
00:02:27,570 --> 00:02:33,270
Więc kiedy użytkownik kliknie przycisk i chcemy pokazać pole na ekranie w odpowiedzi na boom kliknięcia, dzieje

34
00:02:33,540 --> 00:02:35,730
się to natychmiast z powodu JavaScript.

35
00:02:36,090 --> 00:02:37,530
Właśnie takie uczucie chcemy zapewnić.

36
00:02:37,900 --> 00:02:40,110
Możemy to zrobić za pomocą reakcji teraz.

37
00:02:40,200 --> 00:02:41,700
Dość mówić o teorii.

38
00:02:42,030 --> 00:02:42,990
Napiszmy kod.

39
00:02:43,350 --> 00:02:47,940
Jak wspomniałem, robimy to tutaj, w folderze źródłowym, gdzie znajdujemy indeks do jego pliku w

40
00:02:47,940 --> 00:02:50,370
pliku Chase aplikacji, oba bardzo proste pliki.

41
00:02:50,970 --> 00:02:53,100
Teraz spójrzmy na zindeksowany telefon losowy.

42
00:02:53,340 --> 00:02:56,010
Widzisz, mamy kilka importów na górze.

43
00:02:56,310 --> 00:02:59,610
Tak przy okazji, importujesz kod z interfejsu.

44
00:03:00,150 --> 00:03:05,550
Zaimportuj coś, a następnie Śiva ścieżkę względną do własnego pliku.

45
00:03:05,700 --> 00:03:08,820
Lub jeśli jest to pakiet innej firmy, po prostu nazwa pakietu.

46
00:03:09,780 --> 00:03:13,080
A następnie tutaj mamy import z naszych własnych plików ze ścieżką względną.

47
00:03:13,170 --> 00:03:16,800
Jak już wspomniałem, tutaj w końcu wykonujemy jedno polecenie.

48
00:03:16,980 --> 00:03:18,660
Reakcja renderowania Dom.

49
00:03:19,740 --> 00:03:24,990
Teraz pochodzi on z obiektu React Dom tutaj, który importujemy z

50
00:03:24,990 --> 00:03:31,110
biblioteki React Arm, i który renderuje tę dziwną rzecz, która nie jest zwykłym JavaScript.

51
00:03:31,490 --> 00:03:31,760
To ty.

52
00:03:31,800 --> 00:03:33,900
To gra na naszym H. M. strona.

53
00:03:34,290 --> 00:03:35,900
To jest zwykły JavaScript.

54
00:03:35,910 --> 00:03:39,110
I tutaj wybieramy element z ideą rootowania.

55
00:03:39,510 --> 00:03:42,990
Jeśli spojrzymy na nasz pojedynczy plik HGL, to tutaj jest Dave.

56
00:03:43,110 --> 00:03:48,270
Tak więc dane są na końcu, gdzie nasza reagująca jednostronicowa aplikacja będzie hostowana o godzinie drugiej.

57
00:03:48,600 --> 00:03:52,710
I są gotowi zareagować, przejmie wszystko i wyrenderuje wszystko w tym miejscu.

58
00:03:53,940 --> 00:03:55,230
Więc to właśnie tutaj robimy.

59
00:03:55,260 --> 00:03:58,290
Ale czym jest to dziwne dla taty?

60
00:03:58,310 --> 00:04:01,500
Musimy zrozumieć, jakie są komponenty i jak działa reagowanie.