Aby przeglądać i edytować nasz kod, potrzebujemy edytora i polecam korzystanie z Visual Studio Code, który
jest darmowym, bardzo wydajnym IDE, który jest świetny do programowania JavaScript, co robimy tutaj na
końcu.
Możesz go pobrać z kodu. visualstudio. tam znajdziesz
wersje dla komputerów Mac, Windows i Linux, wystarczy pobrać wersję dla systemu operacyjnego
i przejść przez instalator, który ci to daje. Po zainstalowaniu otwórz program Visual Studio
Code, a tam otwórz projekt, otwierając plik, a następnie po prostu wybierz
projekt, w moim przypadku rn-first-app. Kliknij tutaj otwórz, a to
otworzy projekt w Visual Studio Code. Teraz mój Visual Studio Code wygląda tak, jak tutaj wygląda, ponieważ
mam włączony specjalny motyw, który możesz zmienić w preferencjach, kolorze i tam używam motywu ciemnego plus.
Więc jeśli chcesz mieć ten sam
wygląd, którego możesz użyć, a ja również zainstalowałem specjalne rozszerzenie, które możesz zrobić pod rozszerzeniami
widoku, tam mam zainstalowany motyw ikony materiału, ten tutaj, który jest całkowicie opcjonalny, ale możesz go zainstalować z
tam również,
a następnie wróć do przeglądania eksploratora, aby ponownie zobaczyć twoje
pliki, aby uzyskać te same ikony
plików, co ja tutaj, znowu jest to całkowicie opcjonalne, a poza tym jest to nasza aplikacja React Native zarządzana przez expo.
Teraz pozwól mi szybko przejść przez to, co mamy tutaj, a następnie pokażę, co możesz zmienić w
kodzie, aby zmienić coś w swojej aplikacji.
Teraz mamy tutaj kilka folderów
i plików. folder expo po prostu
przechowuj konfigurację dla expo, nie musisz tego dotykać. W tym przypadku znajduje się folder zasobów, który zawiera niektóre obrazy,
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
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
projektu, na przykład React i React Native, ale także zależności zależności i ten
folder jest zarządzany automatycznie, więc nie musisz go dotykać i
nie powinieneś go dotykać . gitignore to plik, który pomaga nam w git,
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ć
git, jeśli tak, prawdopodobnie wiesz, co robi gitignore, a jeśli nie wiesz co git jest, po tym
wykładzie, znajdziesz krótkie wprowadzenie do niego lub niektóre zasoby, które pomogą Ci zacząć z nim, ale nie musisz
używać git do pracy z React Native. Watchmenconfig, to jest coś, co możesz zignorować, ponieważ widzisz, że jest tutaj puste,
to narzędzie używane za kulisami przez expo na końcu i aplikację. plik js to plik
zawierający kod odpowiedzialny za renderowanie tego, co widzimy tutaj na ekranie.
Zajmiemy się tym za chwilę, aplikacja. json przechowuje konfigurację dla naszej aplikacji React Native opartej
na expo i zajmiemy się tym również w tym kursie, zignorujmy to. Konfiguracja Babel konfiguruje sposób optymalizacji
i kompilacji kodu JavaScript, możesz też pozostawić tutaj wartość
domyślną i pakiet. Plik json zarządza twoimi zależnościami i tam
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,
ale także React Native tutaj i React Native web, ponieważ ponownie expo daje ci opcję tworzenia
aplikacji internetowych przy pomocy React Native, jednak nie skupimy się na tym kursie.
Tak więc konfiguracja, którą mamy tutaj,
ważnym plikiem dla nas w tej chwili jest aplikacja. plik js, ponieważ to w końcu odpowiada
za przeniesienie czegoś na ekran.
Teraz dokładna zawartość pliku, którą widzisz tutaj w swojej aplikacji. Plik js może się jednak zmieniać z
czasem, ten początkowy projekt, który jest generowany automatycznie, po prostu czasem się zmienia.
To oczywiście nie wpływa na to, co tu wyjaśniam ani na ten kurs, nie oznacza, że
coś jest przestarzałe lub
coś w tym stylu, to po prostu
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
możesz go również użyć, ale oczywiście możesz również kontynuować przeglądanie, jeśli wygląda nieco
inaczej, ponieważ jak wspomniałem, to tylko projekt początkowy,
który masz, React Native oczywiście nadal działa tak samo jak Wyjaśniłem to tutaj, dlatego
możesz absolutnie śledzić to i dodać swoją aplikację. plik js w sposób, w jaki go dodałem,
i tam widzimy, że importujemy React tak samo, jak robimy to w aplikacji internetowej React.
Musimy zaimportować React, ponieważ tutaj możesz również zobaczyć, że używamy jsx, która jest specjalną składnią JavaScript,
która wygląda jak HTML,
ale w końcu jest to JavaScript, a
na wypadek, gdybyś nigdy tego nie widział, zdecydowanie zagłęb się w aplikację React lub React samouczek po
pierwsze, spodziewam się, że wiesz, jak React ogólnie działa.
Zawsze mamy tutaj kolejny import i jest to import React Native, w którym importujemy arkusz stylów, tekst
i widok z tego miejsca.
Teraz są to te specjalne komponenty i funkcje, o których mówiłem wcześniej, tekst i widok są
komponentami dostarczonymi przez React Native, które są skompilowane z natywnymi widżetami platformy, a arkusz stylów jest dodatkową funkcją
dostarczoną przez React Native, która pomaga w stylizacji.
Teraz mamy tutaj normalny komponent React, ponieważ budowalibyśmy go również w aplikacji React for web.
Mamy tutaj funkcjonalny komponent i za pomocą haków React możemy pracować z komponentami funkcjonalnymi tylko,
jak zapewne wiesz, i ten komponent funkcjonalny zwraca część kodu jsx, który jest renderowany na ekranie,
a tutaj
korzystamy z widżetu widoku lub komponent widoku dostarczony przez React Native oraz komponent tekstowy i komponent
widoku są jak div, jest to
dobre opakowanie, również dobre do zastosowania niektórych stylów w niektórych kontenerach i wykrywa, które jest następnie wykorzystywane do
generowania tekstu, który umieszczasz między jego otwarciem a zamykające tagi.
Tutaj mamy zdefiniowane pewne style, React Native nie używa CSS, ale używa składni stylizacji
opartej na CSS lub postępuje zgodnie z podobnymi konwencjami nazewnictwa, ale zagłębimy się w to, jak stylizować
aplikacje React Native podczas tego kursu oczywiście.
Dzięki temu zmieńmy to, co widzimy na ekranie i dodajmy przycisk tutaj.
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
dodać ten import, a następnie użyć przycisku na dole. Jednak nie używamy go z otwierającym
i zamykającym
znacznikiem, ale jako element samozamykający, a następnie możemy dodać tutaj propozycję tytułu, aby ustawić
tekst widoczny na przycisku, na przykład zmienić tekst.
Teraz, kiedy stukamy ten przycisk, możemy chcieć zmienić ten tekst tutaj i w tym
celu musimy zarządzać niektórymi stanami tutaj, ponieważ chcę zmienić niektóre dane, które powinny doprowadzić do ponownego
renderowania tego komponentu i do tego potrzebny jest stan .
Teraz przed React 16. 8, który jest tutaj obsługiwany, od React 16 musiałbyś przekonwertować go na
komponent oparty na klasie, aby użyć useState. 8, możemy użyć haczyków
React, a jeśli nie wiesz, co to
są haczyki, zdecydowanie powinieneś zagłębić się w podstawy haków, w których
znajdziesz zasoby, od których możesz zacząć. Haki są importowane z React i tutaj potrzebujemy haka useState,
który pozwala nam zarządzać stanem w komponencie funkcjonalnym.
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
od dołu i
dodajmy tutaj jako ciąg, a następnie tutaj możemy użyć destrukcji tablicy, aby uzyskać nasz wynik tekst
i uzyskaj funkcję do zmiany, zresetowania lub zastąpienia tego tekstu wyjściowego, i tak właśnie działa hook
useState, daje tablicę z dokładnie dwoma
elementami, gdzie pierwszy element jest migawką bieżącego stanu, więc albo stan początkowy, albo
później dla kolejnych cykli ponownego renderowania, cokolwiek ustawimy nasz stan, a druga to funkcja,
która
pozwala ustawić stan na nową wartość, a wywołanie tej funkcji spowoduje ponowne
renderowanie całego komponentu, a tekst wyjściowy będzie odnosił się do najnowszych nowy stan.
Tak więc pomiędzy tekstem chcę wydrukować tekst wyjściowy i po naciśnięciu tego przycisku
chcę to zmienić.
Tak więc na przycisku możemy zarejestrować onPress, który jest w zasadzie odpowiednikiem onClick, który
mielibyśmy w
sieci, tutaj jest onPress, a następnie musimy powiązać to z funkcją, na przykład z anonimową
funkcją wbudowaną tutaj za pomocą tej składni gdzie nazywamy set tekst wyjściowy i ustawiamy go na zmieniony tekst.
To wywoła tę funkcję tutaj, zastąpi nasz stan, dlatego ponownie renderuj ten komponent,
zostanie on zaktualizowany w następnym cyklu renderowania i dlatego, ponieważ tam wyprowadzamy tekst wyjściowy,
to się zmieni. Jeśli teraz wszystko
to zapiszemy, fajną rzeczą jest to, że aplikacja, którą powinieneś otworzyć na telefonie, powinna zostać automatycznie
ponownie załadowana, nie musisz
jej ponownie uruchamiać, nie musisz ponownie skanować tego kodu tutaj, po prostu zmieniając kod i zapisując
ten plik, należy go automatycznie ponownie załadować tutaj. A teraz, jeśli stukamy teraz tutaj zmień tekst, zobaczysz tekst
zmieniony i to twoja pierwsza aplikacja React Native wykonująca swoje zadanie w
oparciu o expo, ale ponownie możesz zbudować i opublikować to jako samodzielną aplikację, a my zrobimy to
do końca kurs i dlatego jest to niesamowity sposób na rozpoczęcie, a program React Native może być
tak prosty.
Teraz zakończmy ten pierwszy moduł, zanim zanurzymy się głębiej w React Native i
piszemy kod React Native od drugiego modułu kursu.