Multiplatformní aplikace v React Native

• Seznámení s konceptem komponent v React Native
• Základy JSX: syntaktický cukr pro psaní komponent
• Props: předávání dat mezi komponentami
• State: práce s vnitřním stavem komponent
• Psaní funkčních komponentů

Praktické cvičení: Vytvoř jednoduchý komponent, který přijímá props a umožňuje jejich změnu pomocí state.

Výstupy z lekce: Rozumíš konceptu komponent a víš, jak je používat, umíš použít props pro předávání dat mezi komponentami a zvládáš spravovat stav komponent pomocí state a dynamicky aktualizovat uživatelské rozhraní.

• Základní principy Flexboxu: rozložení prvků v kontejnerech
• Použití StyleSheet pro stylování komponent
• Přidávání rozvržení a responzivního designu v React Native

Praktické cvičení: Na základě předchozího komponentu aplikuj stylování pomocí Flexboxu.

Výstupy z lekce: Rozumíš principům Flexboxu pro rozložení prvků, umíš používat StyleSheet pro stylování komponent v React Native a dokážeš vytvořit responzivní a vizuálně atraktivní uživatelské rozhraní.

• Seznámení s hlavními komponentami: Text, View, Image, TextInput, Button
• Použití ScrollView a FlatList pro zobrazení více prvků
• Práce s komponentami v rámci vizuální hierarchie

Praktické cvičení: Vytvoř obrazovku obsahující alespoň tři základní komponenty.

Výstupy z lekce: Umíš používat základní komponenty React Native, rozumíš, jak zpracovat a zobrazit více prvků pomocí ScrollView a FlatList, dokážeš efektivně pracovat s vizuální hierarchií komponent v aplikaci a umíš najít potřebnou dokumentaci a API.

• Použití useState pro správu stavu komponent
• Použití useRef pro uložení a přímý přístup k elementům
• Tvorba a správa formulářů: práce s TextInput, validace dat
• Zpracování odesílání formulářů

Praktické cvičení: Vytvoř login obrazovku a funkci pro odeslání dat z TextInput.

Výstupy z lekce: Umíš spravovat stav komponent pomocí useState, rozumíš použití useRef pro přístup k DOM prvkům a dokážeš vytvořit formuláře a zpracovávat jejich odeslání a validaci dat.

• Základní principy navigace v aplikaci pomocí React Navigation
• Stack Navigation: přechody mezi obrazovkami
• Předávání dat mezi obrazovkami v rámci navigace

Praktické cvičení: Použij login obrazovku z předchozí lekce a zobraz data na další obrazovce pomocí React Navigation.

Výstupy z lekce: Umíš integrovat navigaci mezi obrazovkami pomocí React Navigation, dokážeš předávat data mezi obrazovkami a rozumíš rozdílům mezi různými typy navigace v React Native.

• Použití Fetch API pro volání externích API
• Práce s JSON daty a jejich parsování
• Zobrazování externích dat v komponentách

Praktické cvičení: Stáhni data o počasí z veřejného API a zobraz je na obrazovce.

Výstupy z lekce: Umíš volat externí API pomocí Fetch API, rozumíš práci s JSON daty a jejich zobrazením a dokážeš zobrazit externí data v aplikaci React Native.

• Seznámení s AsyncStorage: ukládání a načítání dat
• Použití AsyncStorage pro ukládání uživatelských dat
• Správa dat mezi relacemi aplikace

Praktické cvičení: Ulož uživatelské jméno z předchozích lekcí a při dalším spuštění aplikace ho zobraz místo login obrazovky.

Výstupy z lekce: Umíš ukládat a načítat data pomocí AsyncStorage, dokážeš spravovat uživatelská data mezi různými sezeními aplikace a umíš používat uložená data pro změnu chování aplikace.

• Knihovny třetích stran – instlaace, použití i konfigurace
• Přístup k funkcím zařízení Expo a React Native moduly pro přístup k funkcím zařízení (kamera, GPS, senzory)

Praktické cvičení: Nainstaluj knihovnu expo-camera, pořiď fotografii a ulož ji pomocí dříve naučených technik.

Výstupy z lekce: Umíš instalovat a používat knihovny třetích stran, rozumíš, kdy je vhodné využít komunitní knihovny, a dokážeš konfigurovat a používat knihovny pro rozšíření funkcionality aplikace.

• Testování a ladění aplikací v Ract Native Debugger pro optimalizaci výkonu
• Nasazení aplikace do obchodů (Google Play Store a Apple App Store)

Výstupy z lekce: Umíš pracovat s funkcemi zařízení v React Native, efektivně testovat a ladit aplikace a také připravit a nasadit aplikaci do produkčního prostředí, jako je Google Play Store nebo Apple App Store.

• Plánování aplikace TODO list: základní funkčnost
• Implementace přidávání úkolů a jejich zobrazení
• Struktura aplikace a organizace kódu

Praktické cvičení: Práce na závěrečném projektu

Výstupy z lekce: Umíš navrhnout strukturu jednoduché aplikace, dokážeš implementovat přidávání a zobrazování úkolů a rozumíš tomu, jak organizovat kód pro větší aplikace.

• Dokončení aplikace: úprava a mazání úkolů
• Vylepšení aplikace: použití navigace, ukládání úkolů do AsyncStorage
• Další možnosti rozšíření aplikace: animace, profily, nastavení

Dobrovolné praktické cvičení: Přepni mezi Auth a Home navigátorem, přidej dolní tabulátorovou navigaci nebo obrazovku s nastavením či profilem. Můžeš zkusit ukládat úlohy do AsyncStorage či vyzkoušet animace.

Výstupy z lekce: Umíš dokončit plně funkční aplikaci, dokážeš přidat další funkcionality jako navigaci a ukládání dat, a máš kompletní aplikaci, kterou můžeš použít jako referenci pro prezentaci svých dovedností.