Kurs podstaw React Native

Lekcja 1 • Czym jest React Native

Definiuje React Native, jego związek z React i jego model wieloplatformowy. Ustala kontekst, dlaczego jest używany zamiast podejść natywnych lub wyłącznie webowych.

Lekcja 2 • Konfiguracja środowiska programistycznego

Przewodnik instalacji wszystkich wymaganych narzędzi do tworzenia aplikacji na iOS i Androida. Zapewnia, że każdy uczestnik ma zweryfikowane, gotowe do uruchomienia środowisko przed rozpoczęciem pisania kodu.

Lekcja 3 • Podstawy JavaScript i wymagania wstępne ES6

Przegląd składni JavaScript i funkcji ES6 niezbędnych w React Native. Wypełnia ewentualne luki w wiedzy przed zapoznaniem uczestników ze wzorcami komponentów.

Lekcja 1 • Zarządzanie stanem za pomocą useState

Omawia hook useState do zarządzania lokalnym stanem komponentu. Uczestnicy tworzą interaktywne elementy UI, które reagują na dane wejściowe użytkownika i poprawnie się przerenderują.

Lekcja 2 • Listy i renderowanie warunkowe

Uczy renderowania dynamicznych list i warunkowego wyświetlania elementów UI. Te wzorce pojawiają się w prawie każdym rzeczywistym ekranie React Native.

Lekcja 3 • Zrozumienie składni JSX

Wyjaśnia, jak JSX kompiluje się do JavaScriptu i czym różni się od HTML. Łączy zasady JSX bezpośrednio z komponentami, które uczestnicy będą budować w React Native.

Lekcja 4 • Komponenty funkcyjne i właściwości (props)

Wprowadza komponenty funkcyjne jako podstawowy budulec interfejsów React Native. Uczy przekazywania właściwości, typowania i wartości domyślnych dla projektowania wielokrotnego użytku.

Lekcja 1 • TextInput i komponenty formularzy

Uczy przechwytywania danych wejściowych użytkownika za pomocą TextInput i powiązanych wzorców formularzy. Uczestnicy tworzą kontrolowane formularze z informacją zwrotną dotyczącą walidacji przed wysłaniem.

Lekcja 2 • API i komponenty specyficzne dla platformy

Wprowadza moduł Platform i rozszerzenia plików specyficzne dla platformy w celu uzyskania rozbieżnego zachowania. Uczestnicy piszą kod, który dostosowuje się do różnic między iOS a Androidem.

Lekcja 3 • Interakcje Touchable i Pressable

Obejmuje wszystkie komponenty obsługi dotyku i ich różnice w zachowaniu. Uczestnicy wybierają odpowiedni komponent dla każdego wzorca interakcji w swoich aplikacjach.

Lekcja 4 • Komponenty View, Text i Image

Wprowadza trzy najbardziej podstawowe komponenty React Native i ich właściwości. Uczestnicy rozumieją, dlaczego zastępują one div, p i img z programowania webowego.

Lekcja 1 • Wymiary i projektowanie responsywne

Uczy korzystania z API Dimensions i rozmiarów procentowych do responsywnych układów. Uczestnicy tworzą interfejsy dostosowujące się do telefonów, tabletów i zmian orientacji.

Lekcja 2 • Podstawy układu Flexbox

Omawia Flexbox jako główny silnik układu w React Native, zwracając uwagę na różnice w stosunku do Flexbox w webie. Uczestnicy rozmieszczają komponenty za pomocą kierunku, wyrównania i zawijania.

Lekcja 3 • API StyleSheet i style inline

Wyjaśnia, jak style w React Native różnią się od CSS i jak działa StyleSheet.create. Uczestnicy przyjmują najlepsze praktyki organizacji stylów i wydajności.

Lekcja 4 • Systemy typografii i kolorów

Omawia stylowanie czcionek, niestandardowe czcionki i budowanie spójnej palety kolorów. Uczestnicy tworzą wzorzec tokenów projektu wielokrotnego użytku w całej aplikacji.

Lekcja 1 • Hooki nawigacyjne i sterowanie programowe

Omawia hooki useNavigation, useFocusEffect i useRoute do elastycznej logiki nawigacji. Uczestnicy wywołują nawigację spoza komponentów ekranowych i reagują na zdarzenia fokusu.

Lekcja 2 • Nawigator stosu dla przepływów ekranów

Buduje liniowe przepływy ekranów za pomocą natywnego nawigatora stosu i animacji przejść. Uczestnicy przekazują parametry między ekranami i zarządzają stosem wstecz.

Lekcja 3 • Nawigatory kart i szuflady

Dodaje dolny nawigator kart i boczny nawigator szuflady dla sekcji najwyższego poziomu aplikacji. Uczestnicy zagnieżdżają nawigatory, aby tworzyć złożone, rzeczywiste struktury nawigacji.

Lekcja 4 • Głębokie linkowanie i przepływy uwierzytelniania

Konfiguruje głębokie linkowanie oparte na URL i buduje wzorce chronionych tras uwierzytelniania. Uczestnicy implementują nawigację ograniczoną logowaniem, która utrzymuje się po ponownym uruchomieniu aplikacji.

Lekcja 1 • Context API dla stanu globalnego

Buduje wzorzec dostawcy i konsumenta kontekstu dla stanu na poziomie całej aplikacji bez bibliotek zewnętrznych. Uczestnicy implementują kontekst motywu i uwierzytelniania jako praktyczne przykłady.

Lekcja 2 • Utrwalanie stanu za pomocą AsyncStorage

Integruje AsyncStorage do utrwalania danych użytkownika między sesjami aplikacji. Uczestnicy łączą utrwalanie z Redux lub Context, aby przywrócić stan przy uruchomieniu aplikacji.

Lekcja 3 • Podstawy Redux Toolkit

Wprowadza model slice, store i dispatch Redux Toolkit dla przewidywalnego stanu. Uczestnicy migrują funkcję opartą na Context do Redux, aby porównać oba podejścia.

Lekcja 4 • Podnoszenie stanu i przeciąganie właściwości (prop drilling)

Wyjaśnia, kiedy stan lokalny musi zostać podniesiony i jakie problemy stwarza przeciąganie właściwości. Uczestnicy rozpoznają próg, przy którym konieczne staje się globalne rozwiązanie stanu.

Lekcja 1 • Paginacja i nieskończone przewijanie

Implementuje paginację opartą na kursorach i stronach za pomocą onEndReached z FlatList. Uczestnicy ładują dodatkowe dane bez zakłócania pozycji przewijania użytkownika.

Lekcja 2 • Stany ładowania, błędu i pustego ekranu

Projektuje stany UI dla wskaźników ładowania, komunikatów o błędach i scenariuszy pustych danych. Uczestnicy tworzą komponent opakowujący do pobierania danych wielokrotnego użytku używany na różnych ekranach.

Lekcja 3 • API Fetch i podstawy HTTP

Używa wbudowanego API Fetch do wykonywania żądań GET i POST oraz parsowania odpowiedzi JSON. Uczestnicy obsługują kody stanu i błędy sieciowe w spójny sposób.

Lekcja 4 • Obsługa offline i wykrywanie sieci

Wykrywa zmiany łączności sieciowej i udostępnia buforowane dane w trybie offline. Uczestnicy implementują kolejkę dla nieudanych żądań, która ponawia próbę po przywróceniu łączności.

Lekcja 1 • Testy end-to-end z Detox

Automatyzuje pełne przepływy użytkownika na prawdziwych symulatorach za pomocą Detox. Uczestnicy piszą testy E2E, które walidują krytyczne ścieżki przed każdą kompilacją wydaniową.

Lekcja 2 • Testy jednostkowe i integracyjne

Pisze testy jednostkowe z Jest i testy komponentów z React Native Testing Library. Uczestnicy testują interakcje użytkownika, asynchroniczne zmiany stanu i przepływy nawigacji.

Lekcja 3 • Budowanie i przesyłanie do sklepów z aplikacjami

Konfiguruje kompilacje wydaniowe, certyfikaty podpisywania i metadane sklepu z aplikacjami dla obu platform. Uczestnicy produkują podpisane pliki APK/AAB i IPA gotowe do weryfikacji w sklepie.

Lekcja 4 • Animacje z Animated API i Reanimated

Buduje płynne animacje za pomocą Animated API i wprowadza React Native Reanimated do złożonych gestów. Uczestnicy animują przezroczystość, pozycję i skalę na wątku UI.