Kurz React Native + Hooks

Lekce 1 • JSX a virtuální DOM

Vysvětluje kompilaci JSX, sesouhlasení klíčových vlastností (key prop reconciliation) a jak rozdílový algoritmus Reactu minimalizuje nativní aktualizace. Propojuje chování virtuálního DOMu s výkonem.

Lekce 2 • Hluboký ponor do funkcionálních komponent

Srovnává třídní komponenty s funkcionálními a vysvětluje, proč hooks vyžadují funkcionální komponenty. Vytváří mentální model pro bezstavové UI funkce.

Lekce 3 • Přehled moderní syntaxe JavaScriptu

Pokrývá destructuring, spread/rest, arrow funkce a async/await tak, jak se používají v kódových základnách React Native. Snižuje zmatení syntaxe v pozdějších příkladech s hooks.

Lekce 1 • Co je React Native

Vysvětluje architekturu bridge, vlákno JavaScriptu a systém nativních modulů. Umisťuje React Native ve vztahu k webovému Reactu a nativnímu vývoji.

Lekce 2 • Vytvoření prvního projektu

Používá React Native CLI k vytvoření projektu a vysvětluje vygenerovanou strukturu souborů. Propojuje rozložení složek s nasazovací pipeline.

Lekce 3 • Základní vestavěné komponenty

Představuje View, Text, Image, ScrollView a TextInput jako primitivní stavební bloky UI. Ukazuje, jak se každá mapuje na nativní widget.

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

Instaluje Node, Watchman, Xcode a Android Studio se správnými verzemi SDK. Ověřuje toolchain spuštěním prázdného projektu na obou platformách.

Lekce 1 • Správa stavu pomocí useState

Představuje signaturu useState, inicializaci stavu a vzory aktualizačních funkcí. Pokrývá běžné problémy, jako jsou zastaralé uzávěry (stale closures) a dávkované aktualizace.

Lekce 2 • Vytvoření aplikace čítač a časovač

Aplikuje useState a useEffect společně v praktickém čítači a odpočítávacím časovači. Upevňuje aktualizace stavu, intervaly a úklid ve skutečné komponentě.

Lekce 3 • Vedlejší efekty pomocí useEffect

Vysvětluje pole závislostí, úklidové funkce a načasování provádění vzhledem k vykreslení. Nahrazuje všechny tři metody životního cyklu třídy jediným hookem.

Lekce 4 • Načítání vzdálených dat pomocí hooks

Vytváří vzor pro načítání dat pomocí useState pro stavy data/načítání/chyba a useEffect pro volání fetch. Představuje stavy UI pro načítání a chybu.

Lekce 1 • Výkonové hooks: useMemo a useCallback

Memoizuje náročné výpočty pomocí useMemo a stabilizuje reference funkcí pomocí useCallback, aby se zabránilo zbytečným překreslením potomků.

Lekce 2 • Imperativní API pomocí useImperativeHandle

Odhaluje řízené imperativní API z podřízené komponenty do rodičovské reference pomocí useImperativeHandle a forwardRef. Užitečné pro vlastní vstupní komponenty.

Lekce 3 • Odkazování na hodnoty pomocí useRef

Používá useRef k uchování měnitelných hodnot napříč vykresleními bez spouštění překreslení a k přístupu k instancím nativních komponent. Porovnává s useState pro data mimo UI.

Lekce 4 • Složitý stav pomocí useReducer

Implementuje funkci reducer a vzor dispatch pro stavové automaty s více akcemi. Porovnává useReducer s useState pro scénáře formulářů a košíku.

Lekce 1 • useForm: Hook pro správu stavu formuláře

Vytváří hook useForm, který spravuje hodnoty polí, validační chyby a stav odeslání. Nahrazuje opakující se logiku formuláře na více obrazovkách.

Lekce 2 • Testování vlastních hooks

Používá React Native Testing Library a renderHook k jednotkovému testování vlastních hooks izolovaně. Pokrývá act, async act a mockování externích závislostí.

Lekce 3 • useFetch: Hook pro načítání dat

Extrahuje vzor načítání-načítání-chyba do znovupoužitelného hooku useFetch s konfigurovatelnou URL a možnostmi. Ukazuje, jak vlastní hooks snižují nadbytečný kód komponent.

Lekce 4 • useLocalStorage a useAsyncStorage

Obaluje AsyncStorage do hooku, který zrcadlí API useState pro perzistentní data klíč-hodnota. Obsluhuje serializaci, deserializaci a chybové stavy.

Lekce 1 • Vzory Stack Navigatoru

Vytváří nativní stack navigátor s přechody push, pop a replace. Předává parametry mezi obrazovkami a čte je pomocí useRoute.

Lekce 2 • Tab a Drawer navigátory

Přidává bottom tab a drawer navigátory a vnořuje je do stacku. Přizpůsobuje ikony tabů a obsah draweru pomocí stavu řízeného hooky.

Lekce 3 • Autentizační tok s navigací

Implementuje podmíněný navigátor, který přepíná mezi autentizačním a aplikačním stackem na základě stavu tokenu uloženého v kontextu. Ukazuje skutečné chráněné směrování.

Lekce 4 • Navigační hooks do hloubky

Používá useNavigation, useRoute, useFocusEffect a useIsFocused k řízení chování navigace z komponent. Nahrazuje prop-drilling navigačních objektů.

Lekce 1 • Stav serveru pomocí React Query

Používá hooky useQuery a useMutation z React Query ke správě stavu serveru, kešování a obnovování na pozadí. Eliminuje ruční správu stavů načítání a chyb.

Lekce 2 • Integrace Redux Toolkit

Konfiguruje Redux store pomocí createSlice, RTK Query pro načítání dat a obalu Provider. Propojuje komponenty pomocí useSelector a useDispatch.

Lekce 3 • Vzory Context API ve velkém měřítku

Rozděluje kontext na poskytovatele stavu a dispatch, aby se zabránilo zbytečným překreslením ve velkých stromech. Kombinuje useReducer s kontextem pro vzor podobný Reduxu.

Lekce 4 • Globální stav pomocí Zustand

Vytváří Zustand store s akcemi a selektory, poté jej konzumuje jediným voláním hooku. Porovnává minimální API Zustand s nadbytečným kódem Contextu.

Lekce 1 • Profilování a diagnostika výkonu

Používá Flipper, profilovač React DevTools a Monitor výkonu k identifikaci pomalých vykreslení a záseků JS vlákna. Vytváří pracovní postup optimalizace založený na měření.

Lekce 2 • Optimalizace seznamů a obrázků

Aplikuje optimalizační vlastnosti FlatList, kešování obrázků a líné načítání k odstranění záseků při posouvání. Pokrývá windowSize, initialNumToRender a getItemLayout.

Lekce 3 • Testování komponent a hooks

Píše jednotkové a integrační testy pomocí Jest a React Native Testing Library, pokrývající uživatelské interakce a asynchronní chování. Dosahuje smysluplného pokrytí bez testování implementačních detailů.

Lekce 4 • Animace pomocí Animated a Reanimated

Vytváří plynulé animace pomocí Animated API a přechází na Reanimated 2 pro animace na UI vlákně. Pokrývá spring, timing a gesty řízený pohyb.