Kurz React Native

Lekce 1 • Vývojářské nástroje a základy ladění

Představuje React Native debugger, Flipper a vývojářské menu v aplikaci. Poskytuje studentům nástroje pro okamžitou zpětnou vazbu, na které se budou spoléhat během celého kurzu.

Lekce 2 • Co je React Native

Pokrývá roli React Native v multiplatformním mobilním vývoji a jak se liší od Reactu pro web. Stanovuje koncepční základ pro všechny následující kapitoly.

Lekce 3 • Vytvoření prvního projektu

Používá React Native CLI a Expo k vytvoření nové aplikace a prozkoumání vygenerované struktury souborů. Propojuje znalosti nástrojů s praktickým vytvářením projektu.

Lekce 4 • Nastavení vývojového prostředí

Instaluje a konfiguruje všechny potřebné nástroje pro vývoj pro iOS a Android. Zajišťuje, aby každý student měl reprodukovatelné a funkční lokální prostředí.

Lekce 1 • Komponenty Text, View a Image

Pokrývá tři nejzákladnější komponenty React Native a jejich základní vlastnosti. Studenti vytvářejí statické rozvržení kombinující text, kontejnery a obrázky.

Lekce 2 • Vstupní a formulářové komponenty

Pokrývá TextInput, Switch a Picker pro zachycování uživatelského vstupu. Stanovuje znalost komponent potřebnou před zavedením správy stavu.

Lekce 3 • Základy JSX v React Native

Vysvětluje syntaxi JSX, vkládání výrazů a jak se JSX kompiluje do nativních volání uživatelského rozhraní. Poskytuje syntaktický základ pro veškerou nadcházející práci s komponentami.

Lekce 4 • Komponenty Touchable a Pressable

Představuje komponenty pro zpracování dotyku a jejich chování zpětné vazby. Propojuje statická rozvržení s interaktivními prvky, které studenti použijí v každé aplikaci.

Lekce 1 • API StyleSheet a inline styly

Porovnává StyleSheet.create s inline objekty stylů a vysvětluje dopady na výkon. Stanovuje konzistentní vzory stylování používané v celém kurzu.

Lekce 2 • Model rozvržení Flexbox

Vysvětluje, jak se model Flexbox v React Native liší od CSS a jak ovládat zarovnání os. Studenti získávají základní dovednost rozvržení používanou na každé obrazovce.

Lekce 3 • Tématizace a znovupoužitelné vzory stylů

Představuje objekty témat, konstanty stylů a zapouzdření stylů na úrovni komponent. Připravuje studenty na udržování konzistentních návrhových systémů napříč rozsáhlými aplikacemi.

Lekce 4 • Odsazení, ohraničení a stíny

Aplikuje vlastnosti margin, padding, border a shadow pro zpřesnění vizuální hierarchie. Propojuje znalost rozvržení s vyleštěným vzhledem komponent v produkční kvalitě.

Lekce 1 • useState pro lokální stav

Představuje hook useState pro správu stavu na úrovni komponent a spouštění překreslení. Umožňuje studentům vytvářet interaktivní, stavové prvky uživatelského rozhraní.

Lekce 2 • useEffect a vedlejší efekty

Pokrývá useEffect pro načítání dat, odběry a úklid při odpojení komponenty. Propojuje koncepty životního cyklu komponent s praktickými asynchronními operacemi.

Lekce 3 • Vzory komponent a osvědčené postupy

Pokrývá kontejnerové vs. prezentační komponenty, memoizaci a předcházení zbytečným překreslením. Připravuje studenty na psaní výkonných a udržovatelných stromů komponent.

Lekce 4 • Vlastnosti a komunikace mezi komponentami

Vysvětluje, jak vlastnosti předávají data a zpětná volání mezi nadřazenými a podřazenými komponentami. Stanovuje vzor jednosměrného toku dat, který je pro aplikace React Native klíčový.

Lekce 1 • Stack Navigator pro toky obrazovek

Vytváří toky obrazovek push a pop pomocí nativního stack navigátoru. Pokrývá nejběžnější navigační vzor v mobilních aplikacích.

Lekce 2 • Tab a Drawer navigátory

Přidává navigátory spodních karet a postranních panelů pro sekce aplikace na nejvyšší úrovni. Umožňuje studentům vytvářet primární navigační struktury používané ve většině aplikací.

Lekce 3 • Autentizační toky a chráněné cesty

Implementuje podmíněnou navigaci na základě stavu autentizace pomocí přepínání navigátorů. Připravuje studenty na tvorbu bezpečné navigace aplikace s ohledem na role.

Lekce 4 • Nastavení a koncepty React Navigation

Instaluje React Navigation a vysvětluje model navigátoru, obrazovky a cesty. Poskytuje koncepční mapu, kterou studenti potřebují před vytvářením jakéhokoli navigačního toku.

Lekce 1 • Fetch API a asynchronní vzory

Používá vestavěné Fetch API s async/await k provádění HTTP požadavků z React Native. Stanovuje vzor asynchronního načítání dat používaný ve všech následujících částech.

Lekce 2 • React Query pro stav serveru

Používá React Query k ukládání do mezipaměti, opětovnému načítání a automatické synchronizaci dat serveru. Snižuje nadbytečný kód a zlepšuje aktuálnost dat v celé aplikaci.

Lekce 3 • Axios pro HTTP požadavky

Představuje Axios pro čistší syntaxi požadavků, interceptory a konfiguraci základní URL. Posouvá studenty k HTTP klientovi nejpoužívanějšímu v produkčních aplikacích React Native.

Lekce 4 • Lokální úložiště pomocí AsyncStorage

Trvale ukládá data klíč-hodnota lokálně pomocí AsyncStorage pro funkce s offline přístupem. Připravuje studenty na ukládání tokenů, preferencí a odpovědí uložených v mezipaměti na zařízení.

Lekce 1 • Fotoaparát a výběr obrázků

Zachycuje fotografie a vybírá obrázky z galerie pomocí react-native-image-picker. Umožňuje studentům vytvářet funkce bohaté na média, běžné v sociálních a utilitních aplikacích.

Lekce 2 • Správa oprávnění

Vyžaduje a kontroluje běhová oprávnění pro citlivé funkce zařízení na iOS a Androidu. Stanovuje vzor oprávnění vyžadovaný před přístupem k jakémukoli nativnímu API.

Lekce 3 • Geolokace a mapy

Získává polohu zařízení a vykresluje interaktivní mapy pomocí react-native-maps. Propojuje data o poloze s vizuálními mapovými zážitky, které mohou studenti nasadit ve skutečných aplikacích.

Lekce 4 • Push notifikace

Konfiguruje lokální a vzdálené push notifikace pomocí Expo Notifications nebo Firebase. Učí celý životní cyklus notifikací od plánování po interakci uživatele.

Lekce 1 • Jednotkové a integrační testování

Píše testy komponent a hooků pomocí Jest a React Native Testing Library. Stanovuje základní úroveň testování, která zachytí regrese před nasazením.

Lekce 2 • Sestavení a vydání do obchodů s aplikacemi

Generuje podepsané sestavení pro Android a iOS a odesílá je do příslušných obchodů. Dokončuje celý životní cyklus od vývoje k produkci pro studenty.

Lekce 3 • Profilování a optimalizace výkonu

Používá Flipper a Monitor výkonu k identifikaci úzkých míst ve vlákně JS a vykreslování. Vybavuje studenty k diagnostice a opravě nejběžnějších problémů s výkonem React Native.

Lekce 4 • End-to-end testování s Detox

Automatizuje kompletní uživatelské toky na simulátorech a zařízeních pomocí Detox. Ověřuje kritické cesty, jako je přihlášení a pokladna, před každým vydáním.