React Native: React Native CLI

0.62.2+

0:00To uruchomiliśmy naszą aplikację w Expo super polecam wam żebyście sobie odpalili

0:05tą aplikację również na waszych w aplikacji Expo na waszych telefonach bo to zawsze

0:09fajniej wygląda jeśli mamy tą aplikację fizyczną a nie tylko w symulatorze

0:13lub jeśli w ogóle nie macie skonfigurowanego symulatora nie musicie tak

0:17jak już mówiłem wcześniej może po prostu korzystać z aplikacji Expo natomiast tak

0:22jak wspominałem na starcie ja osobiście nie korzystam z Expo produkcyjnie

0:26i raczej to powinno być używane tylko i wyłącznie na starcie

0:30tak więc jeśli chcecie i nie chcecie się bawić w całą konfigurację która jest tutaj wypisana w

0:35React Native CLI to nie musicie w trakcie całego tego kursu praktycznie ani razu

0:39nie będzie to wymagane natomiast chciałbym wam pokazać najlepsze praktyki i

0:43to w jaki sposób ja robię aplikacje i uważam że nie

0:48ma w tej chwili sensu za bardzo poza

0:52tym właśnie startowym uruchomieniem żeby w ogóle złapać jakąś zajawkę na

0:56to że o moja aplikacja jest i działa korzystania z Expo więc będziemy korzystać z React Native CLI-a

1:01więc tak naprawdę cały nasz projekt możemy w tej chwili usunąć

1:05usuniemy sobie

1:12nasz projekt zamkniemy sobie nasz symulator tak

1:17jest i odpalimy sobie stworzymy sobie nowy

1:21projekt ale już taki docelowy na którym będziemy działać i który będzie oparty

1:26na React Native CLI pominę może tutaj kwestie wszystkich konfiguracji które

1:30są bardzo dobrze opisane właśnie na stronie reactnative.dev ponieważ one są różne dla

1:34różnego systemu różne dla różnych targetów czy chcemy mieć iOS-a czy androida poza

1:38tym jeśli chodzi o ogólną konfigurację takich rzeczy jak xcode to więcej szczegółów

1:42znajdziecie w kursach o podstawach iOS-a czy androida

1:47które są dostępne na platformie tak więc przejdziemy od razu do stworzenia nowej aplikacji

1:51i ją się tworzy poprzez komendę react-native

1:55react-native init

1:59i nazwijmy ją z powrotem TestProject

2:14okej nasz projekt został stworzony przejdźmy sobie do niego i

2:18odpalmy sobie w naszym edytorze zobaczmy jak to wygląda no i jak

2:24widać jest tu już trochę więcej rzeczy niż było w przypadku naszego projektu Expo i poza

2:29tymi rzeczami jak konfiguracja eslinta czy właśnie

2:33paroma innymi konfiguracyjnymi plikami mamy dwa najważniejsze foldery i to jest tak

2:37naprawdę to co tak praktycznie odróżnia Expo od naszego

2:41projektu CLI też mamy tu folder android w którym mamy w 100%

2:45natywny projekt androidowy i mamy projekt folder ios w którym mamy w 100%

2:50natywny projekt iOS-owy i to jest właśnie cała przewaga

2:54React Native CLI która polega na tym że możemy sobie do tego projektu

2:58dowolne rzeczy dorzucić czyli jeśli mamy jakiś natywny kod który

3:02na przykład który mieliśmy w innej aplikacji możemy go sobie tutaj wrzucić

3:06i wywołać z poziomu naszego projektu JS-owego i to

3:13jest bardzo ciekawe i to jest coś co mnie osobiście przekonuje z racji tego że ja

3:17mam dość duży background jeśli chodzi właśnie o aplikacje natywne to że nie muszę tego

3:21kodu który już raz został napisany porzucać tylko mogę go wykorzystać ponownie tak więc przejdziemy

3:26sobie zaraz jeszcze i opowiemy dokładnie jak wyglądają te projekty natywne ale zanim

3:30to to zobaczmy sobie jak wygląda nasz package json i jakie

3:34mamy tutaj skrypty startowe i mamy podobnie tak jak w przypadku Expo

3:38mamy możliwość uruchomienia tego na iOS-ie na androidzie czy uruchomienia po prostu

3:43naszego bundlera serwera który będzie hostować nam aplikację i ruchommy sobie

3:47może aplikację na iOS-ie ponieważ mi trochę łatwiej jest na tym

3:51pracować jak widać uruchomiony zostanie nasz wcześniej już uruchamiany

3:56symulator iphone'a 11

4:07okej nasz projekt się zbudował jak widzicie teraz to co się dzieje to nasza aplikacja ładuję

4:11sobie naszego bundle'a tutaj widzimy progres i

4:19mam nasza aplikację React Native'ową

4:23pierwszą postawioną dwie rzeczy które o których warto wspomnieć zauważcie że to

4:28pewnie zauważyliście że projekt budował się sporo dłużej niż w przypadku Expo

4:32dlaczego dlatego że jeśli zobaczymy sobie w logach zobaczymy że kompilowane

4:37są wszystkie pliki natywne tak rozszerzenie mm to

4:41są pliki pliki natywne pliki w objective-c które są wymagane

4:45do stworzenia projektu czyli budując nasz projekt React Native'owy wykonując polecenie react-native run-ios

4:50tak naprawdę najpierw budujemy projekt natywny iOS-a a dopiero później

4:54tworzę jakby stawiany jest nasz serwer bundler z naszą logiką

4:58JS-ową dlatego tyle to trwało na szczęście już podczas pracy

5:02React Nativem nie będziemy potrzebowali ponownego uruchomienia projektu

5:07ponieważ wystarczy będzie działał nasz bundler druga informacja która

5:11jest ciekawe i dość istotna to jesli zminimalizujemy sobie nasza aplikację to zauważymy że tak

5:15jak w przypadku Expo instalowaliśmy tak naprawdę aplikację Expo w której

5:19była uruchamiana nasza aplikacja tak tutaj mamy już pełnoprawną aplikację która

5:23jest w stu procentach normalną aplikacją natywną

5:27którą możemy sobie odpalić i uruchomić jak zwykłą aplikację zobaczmy

5:31sobie czy nasz co mamy w naszym pliku app.js jak

5:36wiesz mamy tutaj ten boilerplate'owy boilerplate'owa

5:41strukturę którą możemy sobie tutaj edytować na

5:47przykład zamiast step one to napiszemy sobie hello zapiszemy

5:51plik jak widać tutaj również działa nasz hot

5:56reload fast refresh tak w którym możemy sobie odświeżać

6:01w którym odświeżany jest nasz widok tylko dzięki temu że zapiszemy sobie plik i również

6:05możemy sobie jakby hard odświeżyć

6:09naszą aplikację przy pomocy gestu potrząśnięcia albo tak

6:14jak tutaj jest napisane command r i to nam przeładowuje całą aplikację od nowa zresztą co

6:18widzimy tutaj na naszym bundlerze