1
00:00:02,620 --> 00:00:08,140
Aby przeglądać i edytować nasz kod, potrzebujemy edytora i polecam korzystanie z Visual Studio Code, który

2
00:00:08,140 --> 00:00:13,480
jest darmowym, bardzo wydajnym IDE, który jest świetny do programowania JavaScript, co robimy tutaj na

3
00:00:13,480 --> 00:00:14,210
końcu.

4
00:00:14,290 --> 00:00:16,680
Możesz go pobrać z kodu. visualstudio. tam znajdziesz

5
00:00:16,720 --> 00:00:21,490
wersje dla komputerów Mac, Windows i Linux, wystarczy pobrać wersję dla systemu operacyjnego

6
00:00:21,790 --> 00:00:28,070
i przejść przez instalator, który ci to daje. Po zainstalowaniu otwórz program Visual Studio

7
00:00:28,070 --> 00:00:34,390
Code, a tam otwórz projekt, otwierając plik, a następnie po prostu wybierz

8
00:00:34,390 --> 00:00:40,200
projekt, w moim przypadku rn-first-app. Kliknij tutaj otwórz, a to

9
00:00:40,220 --> 00:00:47,080
otworzy projekt w Visual Studio Code. Teraz mój Visual Studio Code wygląda tak, jak tutaj wygląda, ponieważ

10
00:00:47,380 --> 00:00:51,950
mam włączony specjalny motyw, który możesz zmienić w preferencjach, kolorze i tam używam motywu ciemnego plus.

11
00:00:51,970 --> 00:00:54,420
Więc jeśli chcesz mieć ten sam

12
00:00:54,670 --> 00:01:00,680
wygląd, którego możesz użyć, a ja również zainstalowałem specjalne rozszerzenie, które możesz zrobić pod rozszerzeniami

13
00:01:00,760 --> 00:01:08,230
widoku, tam mam zainstalowany motyw ikony materiału, ten tutaj, który jest całkowicie opcjonalny, ale możesz go zainstalować z

14
00:01:08,230 --> 00:01:09,550
tam również,

15
00:01:09,580 --> 00:01:13,480
a następnie wróć do przeglądania eksploratora, aby ponownie zobaczyć twoje

16
00:01:13,510 --> 00:01:16,060
pliki, aby uzyskać te same ikony

17
00:01:16,060 --> 00:01:24,290
plików, co ja tutaj, znowu jest to całkowicie opcjonalne, a poza tym jest to nasza aplikacja React Native zarządzana przez expo.

18
00:01:24,300 --> 00:01:28,920
Teraz pozwól mi szybko przejść przez to, co mamy tutaj, a następnie pokażę, co możesz zmienić w

19
00:01:29,190 --> 00:01:31,470
kodzie, aby zmienić coś w swojej aplikacji.

20
00:01:31,470 --> 00:01:34,350
Teraz mamy tutaj kilka folderów

21
00:01:34,380 --> 00:01:37,570
i plików. folder expo po prostu

22
00:01:37,590 --> 00:01:43,500
przechowuj konfigurację dla expo, nie musisz tego dotykać. W tym przypadku znajduje się folder zasobów, który zawiera niektóre obrazy,

23
00:01:43,500 --> 00:01:49,470
takie jak ikona Twojej aplikacji i obraz ekranu powitalnego, a my zajmiemy się tym, jak możesz to dostosować pod koniec kursu, a my użyjemy innych

24
00:01:49,470 --> 00:01:55,470
zasobów, takich jak obrazy w ogólnie rzecz biorąc przez cały ten kurs. Folder modułów węzłów zawiera wszystkie zależności tego

25
00:01:55,470 --> 00:02:01,120
projektu, na przykład React i React Native, ale także zależności zależności i ten

26
00:02:01,120 --> 00:02:05,740
folder jest zarządzany automatycznie, więc nie musisz go dotykać i

27
00:02:05,790 --> 00:02:11,460
nie powinieneś go dotykać . gitignore to plik, który pomaga nam w git,

28
00:02:11,460 --> 00:02:16,920
który jest systemem zarządzania kodem źródłowym lub narzędziem do zarządzania kodem źródłowym i nie musisz używać

29
00:02:16,920 --> 00:02:22,860
git, jeśli tak, prawdopodobnie wiesz, co robi gitignore, a jeśli nie wiesz co git jest, po tym

30
00:02:22,860 --> 00:02:29,100
wykładzie, znajdziesz krótkie wprowadzenie do niego lub niektóre zasoby, które pomogą Ci zacząć z nim, ale nie musisz

31
00:02:29,130 --> 00:02:34,530
używać git do pracy z React Native. Watchmenconfig, to jest coś, co możesz zignorować, ponieważ widzisz, że jest tutaj puste,

32
00:02:34,530 --> 00:02:39,750
to narzędzie używane za kulisami przez expo na końcu i aplikację. plik js to plik

33
00:02:39,750 --> 00:02:45,930
zawierający kod odpowiedzialny za renderowanie tego, co widzimy tutaj na ekranie.

34
00:02:46,590 --> 00:02:52,350
Zajmiemy się tym za chwilę, aplikacja. json przechowuje konfigurację dla naszej aplikacji React Native opartej

35
00:02:52,350 --> 00:02:59,140
na expo i zajmiemy się tym również w tym kursie, zignorujmy to. Konfiguracja Babel konfiguruje sposób optymalizacji

36
00:02:59,140 --> 00:03:04,950
i kompilacji kodu JavaScript, możesz też pozostawić tutaj wartość

37
00:03:04,950 --> 00:03:10,380
domyślną i pakiet. Plik json zarządza twoimi zależnościami i tam

38
00:03:10,700 --> 00:03:17,970
widzisz, że używasz expo, ale także React, także React DOM, ponieważ expo faktycznie obsługuje także budowanie aplikacji React dla sieci,

39
00:03:17,970 --> 00:03:23,910
ale także React Native tutaj i React Native web, ponieważ ponownie expo daje ci opcję tworzenia

40
00:03:23,910 --> 00:03:28,710
aplikacji internetowych przy pomocy React Native, jednak nie skupimy się na tym kursie.

41
00:03:28,710 --> 00:03:30,600
Tak więc konfiguracja, którą mamy tutaj,

42
00:03:30,600 --> 00:03:35,520
ważnym plikiem dla nas w tej chwili jest aplikacja. plik js, ponieważ to w końcu odpowiada

43
00:03:35,790 --> 00:03:37,800
za przeniesienie czegoś na ekran.

44
00:03:37,800 --> 00:03:43,350
Teraz dokładna zawartość pliku, którą widzisz tutaj w swojej aplikacji. Plik js może się jednak zmieniać z

45
00:03:43,410 --> 00:03:48,390
czasem, ten początkowy projekt, który jest generowany automatycznie, po prostu czasem się zmienia.

46
00:03:48,570 --> 00:03:53,520
To oczywiście nie wpływa na to, co tu wyjaśniam ani na ten kurs, nie oznacza, że

47
00:03:53,520 --> 00:03:55,300
coś jest przestarzałe lub

48
00:03:55,350 --> 00:03:57,580
coś w tym stylu, to po prostu

49
00:03:57,720 --> 00:04:03,130
inny projekt początkowy i jeśli chcesz postępować zgodnie z dokładnie tym samym, który otrzymałem, Załączę go, więc

50
00:04:03,150 --> 00:04:07,320
możesz go również użyć, ale oczywiście możesz również kontynuować przeglądanie, jeśli wygląda nieco

51
00:04:07,320 --> 00:04:09,870
inaczej, ponieważ jak wspomniałem, to tylko projekt początkowy,

52
00:04:09,870 --> 00:04:14,250
który masz, React Native oczywiście nadal działa tak samo jak Wyjaśniłem to tutaj, dlatego

53
00:04:14,250 --> 00:04:19,770
możesz absolutnie śledzić to i dodać swoją aplikację. plik js w sposób, w jaki go dodałem,

54
00:04:19,770 --> 00:04:24,290
i tam widzimy, że importujemy React tak samo, jak robimy to w aplikacji internetowej React.

55
00:04:24,420 --> 00:04:30,630
Musimy zaimportować React, ponieważ tutaj możesz również zobaczyć, że używamy jsx, która jest specjalną składnią JavaScript,

56
00:04:30,630 --> 00:04:32,640
która wygląda jak HTML,

57
00:04:32,790 --> 00:04:35,390
ale w końcu jest to JavaScript, a

58
00:04:35,460 --> 00:04:42,120
na wypadek, gdybyś nigdy tego nie widział, zdecydowanie zagłęb się w aplikację React lub React samouczek po

59
00:04:42,270 --> 00:04:45,720
pierwsze, spodziewam się, że wiesz, jak React ogólnie działa.

60
00:04:45,720 --> 00:04:51,270
Zawsze mamy tutaj kolejny import i jest to import React Native, w którym importujemy arkusz stylów, tekst

61
00:04:51,360 --> 00:04:53,220
i widok z tego miejsca.

62
00:04:53,220 --> 00:04:59,640
Teraz są to te specjalne komponenty i funkcje, o których mówiłem wcześniej, tekst i widok są

63
00:04:59,640 --> 00:05:06,720
komponentami dostarczonymi przez React Native, które są skompilowane z natywnymi widżetami platformy, a arkusz stylów jest dodatkową funkcją

64
00:05:06,720 --> 00:05:10,290
dostarczoną przez React Native, która pomaga w stylizacji.

65
00:05:10,290 --> 00:05:15,820
Teraz mamy tutaj normalny komponent React, ponieważ budowalibyśmy go również w aplikacji React for web.

66
00:05:16,120 --> 00:05:21,960
Mamy tutaj funkcjonalny komponent i za pomocą haków React możemy pracować z komponentami funkcjonalnymi tylko,

67
00:05:21,960 --> 00:05:28,110
jak zapewne wiesz, i ten komponent funkcjonalny zwraca część kodu jsx, który jest renderowany na ekranie,

68
00:05:28,200 --> 00:05:29,270
a tutaj

69
00:05:29,400 --> 00:05:35,550
korzystamy z widżetu widoku lub komponent widoku dostarczony przez React Native oraz komponent tekstowy i komponent

70
00:05:36,270 --> 00:05:38,790
widoku są jak div, jest to

71
00:05:38,790 --> 00:05:45,720
dobre opakowanie, również dobre do zastosowania niektórych stylów w niektórych kontenerach i wykrywa, które jest następnie wykorzystywane do

72
00:05:45,870 --> 00:05:50,030
generowania tekstu, który umieszczasz między jego otwarciem a zamykające tagi.

73
00:05:50,270 --> 00:05:57,090
Tutaj mamy zdefiniowane pewne style, React Native nie używa CSS, ale używa składni stylizacji

74
00:05:57,090 --> 00:06:04,890
opartej na CSS lub postępuje zgodnie z podobnymi konwencjami nazewnictwa, ale zagłębimy się w to, jak stylizować

75
00:06:04,890 --> 00:06:08,550
aplikacje React Native podczas tego kursu oczywiście.

76
00:06:08,550 --> 00:06:14,490
Dzięki temu zmieńmy to, co widzimy na ekranie i dodajmy przycisk tutaj.

77
00:06:14,490 --> 00:06:20,730
Dobrą rzeczą jest to, że możemy zaimportować przycisk z React Native, to kolejny podstawowy składnik dostarczony przez React Native, więc możemy

78
00:06:20,730 --> 00:06:26,140
dodać ten import, a następnie użyć przycisku na dole. Jednak nie używamy go z otwierającym

79
00:06:26,140 --> 00:06:27,280
i zamykającym

80
00:06:27,280 --> 00:06:33,190
znacznikiem, ale jako element samozamykający, a następnie możemy dodać tutaj propozycję tytułu, aby ustawić

81
00:06:33,460 --> 00:06:36,620
tekst widoczny na przycisku, na przykład zmienić tekst.

82
00:06:36,850 --> 00:06:41,010
Teraz, kiedy stukamy ten przycisk, możemy chcieć zmienić ten tekst tutaj i w tym

83
00:06:41,200 --> 00:06:45,970
celu musimy zarządzać niektórymi stanami tutaj, ponieważ chcę zmienić niektóre dane, które powinny doprowadzić do ponownego

84
00:06:46,180 --> 00:06:49,680
renderowania tego komponentu i do tego potrzebny jest stan .

85
00:06:49,900 --> 00:06:56,110
Teraz przed React 16. 8, który jest tutaj obsługiwany, od React 16 musiałbyś przekonwertować go na

86
00:06:56,110 --> 00:07:00,270
komponent oparty na klasie, aby użyć useState. 8, możemy użyć haczyków

87
00:07:00,310 --> 00:07:03,710
React, a jeśli nie wiesz, co to

88
00:07:03,820 --> 00:07:08,620
są haczyki, zdecydowanie powinieneś zagłębić się w podstawy haków, w których

89
00:07:08,620 --> 00:07:14,800
znajdziesz zasoby, od których możesz zacząć. Haki są importowane z React i tutaj potrzebujemy haka useState,

90
00:07:14,800 --> 00:07:17,290
który pozwala nam zarządzać stanem w komponencie funkcjonalnym.

91
00:07:17,290 --> 00:07:26,230
Dzięki temu możemy użyć tego haka, wywołując tutaj useState i nadając mu domyślną wartość, którą może być tutaj ten tekst, wytnijmy go

92
00:07:26,230 --> 00:07:27,910
od dołu i

93
00:07:27,910 --> 00:07:34,420
dodajmy tutaj jako ciąg, a następnie tutaj możemy użyć destrukcji tablicy, aby uzyskać nasz wynik tekst

94
00:07:34,420 --> 00:07:41,040
i uzyskaj funkcję do zmiany, zresetowania lub zastąpienia tego tekstu wyjściowego, i tak właśnie działa hook

95
00:07:41,110 --> 00:07:43,800
useState, daje tablicę z dokładnie dwoma

96
00:07:43,840 --> 00:07:49,620
elementami, gdzie pierwszy element jest migawką bieżącego stanu, więc albo stan początkowy, albo

97
00:07:49,660 --> 00:07:55,510
później dla kolejnych cykli ponownego renderowania, cokolwiek ustawimy nasz stan, a druga to funkcja,

98
00:07:55,510 --> 00:07:56,120
która

99
00:07:56,220 --> 00:08:01,300
pozwala ustawić stan na nową wartość, a wywołanie tej funkcji spowoduje ponowne

100
00:08:01,530 --> 00:08:07,150
renderowanie całego komponentu, a tekst wyjściowy będzie odnosił się do najnowszych nowy stan.

101
00:08:07,180 --> 00:08:13,670
Tak więc pomiędzy tekstem chcę wydrukować tekst wyjściowy i po naciśnięciu tego przycisku

102
00:08:13,680 --> 00:08:15,400
chcę to zmienić.

103
00:08:15,400 --> 00:08:21,250
Tak więc na przycisku możemy zarejestrować onPress, który jest w zasadzie odpowiednikiem onClick, który

104
00:08:21,310 --> 00:08:22,640
mielibyśmy w

105
00:08:22,660 --> 00:08:29,020
sieci, tutaj jest onPress, a następnie musimy powiązać to z funkcją, na przykład z anonimową

106
00:08:29,020 --> 00:08:36,740
funkcją wbudowaną tutaj za pomocą tej składni gdzie nazywamy set tekst wyjściowy i ustawiamy go na zmieniony tekst.

107
00:08:36,820 --> 00:08:42,340
To wywoła tę funkcję tutaj, zastąpi nasz stan, dlatego ponownie renderuj ten komponent,

108
00:08:42,340 --> 00:08:48,100
zostanie on zaktualizowany w następnym cyklu renderowania i dlatego, ponieważ tam wyprowadzamy tekst wyjściowy,

109
00:08:48,100 --> 00:08:51,520
to się zmieni. Jeśli teraz wszystko

110
00:08:51,520 --> 00:08:58,840
to zapiszemy, fajną rzeczą jest to, że aplikacja, którą powinieneś otworzyć na telefonie, powinna zostać automatycznie

111
00:08:58,850 --> 00:09:00,830
ponownie załadowana, nie musisz

112
00:09:00,920 --> 00:09:08,090
jej ponownie uruchamiać, nie musisz ponownie skanować tego kodu tutaj, po prostu zmieniając kod i zapisując

113
00:09:08,150 --> 00:09:15,320
ten plik, należy go automatycznie ponownie załadować tutaj. A teraz, jeśli stukamy teraz tutaj zmień tekst, zobaczysz tekst

114
00:09:15,320 --> 00:09:19,020
zmieniony i to twoja pierwsza aplikacja React Native wykonująca swoje zadanie w

115
00:09:19,040 --> 00:09:24,590
oparciu o expo, ale ponownie możesz zbudować i opublikować to jako samodzielną aplikację, a my zrobimy to

116
00:09:24,740 --> 00:09:30,110
do końca kurs i dlatego jest to niesamowity sposób na rozpoczęcie, a program React Native może być

117
00:09:30,110 --> 00:09:30,850
tak prosty.

118
00:09:31,150 --> 00:09:36,510
Teraz zakończmy ten pierwszy moduł, zanim zanurzymy się głębiej w React Native i

119
00:09:36,590 --> 00:09:40,130
piszemy kod React Native od drugiego modułu kursu.