React Native: Struktura projektu Expo

0.62.2+

0:00Dobra na poprzedniej lekcji udało nam się uruchomić naszą aplikację fajnie a zobaczmy

0:04jak to wygląda w kodzie uruchommy sobie nasz edytor

0:11i co my tutaj mamy mamy parę plików expo które nas raczej nie będą interesować mamy nasz folder z assets'ami

0:16jak widać jest to ikonka która jest użyta podczas ładowania tego

0:20teraz nie widać ale jeśli byśmy odpalili sobie Expo raz jeszcze

0:26to widzieliście że podczas ładowania samej aplikacji wyskakiwała nam dokładnie ta ikonka

0:30tutaj ważne jest to że czy jeśli korzystamy zarówno

0:34jak korzystamy z emulatora czy jesli korzystamy z aplikacji Expo to poprzez gest

0:39potrząśnięcia telefonem możemy wywołać takie menu na

0:43macbooku jest to skrót control command z który nam coś takiego wywoła i mamy tutaj parę

0:48innych opcji które możemy użyć nas najbardziej interesuje opcja reload

0:52która nam przeładowuje cały projekt i jak widać te

0:56grafiki są ładowane podczas startu tutaj będziemy wrzucać wszystkie swoje assets'y które będziemy chcieli użyć

1:01w aplikacji mamy nasz node modules który powinien być znany wszystkim z

1:05react'a i tak tam pakiet json w którym trzymamy wszystkie informacje o naszych

1:09zależnościach i konfiguracjach i skryptach startowych

1:13jak widać te skrypty mamy predefiniowane w tym miejscu czyli mamy nasz yarn start

1:19albo npm run start jak kto woli który uruchamia nam nasz

1:23serwer który będzie nam powiedzmy hostować naszą aplikację

1:27możemy mamy też predefiniowane instrukcje do androida i iOS-a

1:32i co ciekawe od niedawna mamy również opcję uruchomienia tego w wersji webowej

1:37i sprawdźmy jak to wygląda tak zobaczmy

1:48że nasz projekt możemy w takim wypadku uruchomić zarówno w przeglądarce jak i

1:52na telefonie i to jest zasługa technologii która się

1:56nazywa react native web ona pozwala nam właśnie kod który jest jakby wykonywany

2:03który tworzy jest stworzony do uruchomienia w aplikacji

2:07mobilnej możemy go również uruchomić w aplikacji webowej co jest naprawdę fajneym featurem jest

2:11to dość wczesny w dość wczesnej wersji ale jak widać Expo jako takie już to wspiera

2:15i mamy tutaj również poza tymi opcjami o których powiedziałem mam również opcję

2:19ejecta o której też wspominałem czyli możliwość we jakby zejścia wyjścia z

2:24tego predefiniowanego gotowego configu na

2:28React Native CLI o którym później sobie jeszcze powiemy z innych rzeczy które mamy dostępne

2:33w naszym naszym projekcie to poza plikami konfiguracyjnymi

2:38takim jak właśnie app json gdzie mamy ogólne informacje o tym o naszym projekcie czyli

2:42jakie platformy wspieramy jak się nasz projekt nazywa w jakiej jest wersji jaką

2:46wspiera orientację jaką ma ikonkę jaki

2:50jakie właśnie grafiki są użyte w przypadku splash screena splash screen to jest właśnie ten ekran który jest

2:55uruchamiany podczas ładowania aplikacji pamiętajmy o tym że

2:59to może chwilę potrwać w przypadku dużych aplikacji ładowanie całego

3:04naszego zbundlowanego JS-a może chwilę potrwać dlatego warto zadbać o to żeby ta grafika nie

3:08odstraszała nie żeby nie był to pusty biały ekran który może spowodować

3:13że użytkownik nie będzie wiedzieć o co chodzi jeśli przejdziemy naszego kodu

3:17źródłowego to zobaczymy tutaj bardzo podobną do reacta strukturę

3:22czyli mamy naszą aplikację i zmieńmy sobie

3:26coś zobaczmy jak to wygląda w tej chwili jeśli zmienimy sobie tutaj tekst na na przykład

3:33hello zapiszemy oczywiście

3:38nie zmieniło się to w tej chwili w symulatorze dlatego że nasz serwer jest podpięty pod warsję webową jeśli

3:43sobie to zamkniemy przeładujemy sobie naszą aplikację wystartujemy

3:51sobie jeszcze raz naszą aplikację iOS-ową

4:03mam nasz splash screen i mamy nasze hello zauważcie że w

4:07tej chwili poprawimy tutaj hello again wystarczy że zapiszę

4:11i nasza aplikacja jest automatycznie przeładowywana to

4:15znaczy to jest tak zwany hot reload który działa na tej zasadzie że

4:19każda zmiana w pliku każdy zapis jak widzicie tutaj mam

4:23indykator mówiący o tym że co się w tym pliku zmieniło każde zapisanie powoduje przeładowanie

4:27projektu ale nie całego tylko tych mniej więcej tych rzeczy które zostały zmienione co jest

4:31bardzo fajne możemy sobie dla przykład tutaj też zmienić kolor na tła

4:36na czerwony i od razu podejrzeć jak to wygląda i to

4:40jest bardzo fajne i warto z tego korzystać zwłaszcza w przypadku w

4:45przypadku zmian UI-owych które nie wymagają jakby większej ingerencji w stan

4:51naszej aplikacji gdzie coś mogłoby pójść nie tak myślę

4:56że w tej lekcji to wszystko w następnej opowiemy sobie o tym czemu

5:01właściwie z Expo nie korzystać