Lekce 1Zpracování formulářů a validace (řízené vs neregulované, knihovny: Formik, React Hook Form, VeeValidate)Implementujte robustní zpracování formulářů a validaci. Porovnejte řízené a neregulované vstupy, používejte knihovny jako Formik, React Hook Form a VeeValidate a navrhněte validaci, chybové zprávy a toky odesílání pro složité formuláře.
Strategie řízených vs neregulovaných vstupůFormik a React Hook Form v praxiVeeValidate a vzory formulářů VueSynchronní a asynchronní validační pravidlaChybové zprávy, UX a přístupnostLekce 2Knihovny UI komponent a postupy přístupnosti (Tailwind, Material, Chakra, ARIA role, navigace klávesnicí)Naučte se používat moderní knihovny UI při zachování silné přístupnosti. Prozkoumejte Tailwind, Material UI a Chakra, aplikujte ARIA role, správu zaměření a vzory navigace klávesnicí pro vytvoření inkluzivních, produkčních rozhraní.
Designové systémy s Tailwind a utility třídamiVzory komponent Material UI a ChakraSémantické HTML a strategie ARIA rolíSpráva zaměření a navigace klávesnicíKontrast barev, témata a snížený pohybLekce 3Výběr frontendu frameworku a odůvodnění (React, Vue, Svelte) a kompromisy ekosystémuVyhodnoťte a odůvodněte svůj výběr frontendu frameworku. Porovnejte architektury React, Vue a Svelte, zralost ekosystému, výkon a křivky učení, abyste mohli vybrat a obhájit nejlepší volbu pro každý kontext projektu.
Základní koncepty React, Vue a SvelteZralost ekosystému a podpora komunityKompromisy výkonu a velikosti balíčkuIntegrace TypeScriptu a nástrojůRámce rozhodování pro reálné projektyLekce 4Sestavení, balení a optimalizace: Webpack/Vite/Rollup, dělení kódu, tree-shaking, zpracování aktivOvládněte moderní nástroje pro sestavování výkonných frontendů. Porovnejte Webpack, Vite a Rollup, nastavte dělení kódu a tree-shaking a optimalizujte zpracování aktiv, cachování a source maps pro rychlé, udržitelné produkční balíčky.
Porovnání nastavení Webpack, Vite a RollupDělení kódu a dynamické importyTree-shaking a eliminace mrtvého kóduOptimalizace obrázků, fontů a statických aktivStratégie cachování, hašů a source mapLekce 5Klientové testy: unit testování komponent, integrační testy, výběr testovací knihovny a příkladyVyvíjejte robustní strategii testování na straně klienta. Naučte se unit testování komponent, integrační testy napříč trasami a API a jak volit mezi Jest, Vitest, Cypress a Testing Library pro spolehlivé, udržitelné testovací sady.
Unit testování UI komponent izolovaněIntegrační testy pro toky a směrováníPoužití Testing Library pro testy zaměřené na uživateleVýběr Jest, Vitest, Cypress nebo PlaywrightMockování API a řešení nespolehlivých testůLekce 6Lokální vývoj a konfigurace prostředí: proměnné prostředí, .env soubory, feature flags pro frontendNastavte spolehlivá frontendová prostředí pro lokální a cloudové nasazení. Naučte se spravovat proměnné prostředí, .env soubory, injekci v době sestavení a feature flags pro bezpečné přepínání funkcionality napříč vývojem, stagingem a produkcí.
Správa .env souborů a proměnných v době sestaveníOddělení konfigurací dev, staging a produkceKonfigurace za běhu a bezpečnost prostředíImplementace feature flags na frontenduZpracování tajemství a chyby konfiguraceLekce 7Struktura projektu a konvence složek pro single-page aplikace (komponenty, stránky, služby, hooky)Navrhněte škálovatelné struktury projektů pro single-page aplikace. Naučte se konvence složek pro komponenty, stránky, služby a hooky a jak organizovat sdílené utility, testy a styly pro udržovatelnost velkých kódových základen.
Organizace komponent, stránek a layoutůSlužby, hooky a vrstvy přístupu k datůmSdílené utility, typy a konstantyStruktura testů a story souborůRefaktoring k modulárním hranicímLekce 8Vzory integrace API: REST vs GraphQL klienti, zpracování chyb, opakování požadavků, timeoutyImplementujte robustní vzory integrace API na straně klienta. Porovnejte REST a GraphQL klienty, nastavte Axios nebo Fetch, zpracovávejte chyby a opakování a navrhněte timeouty, zrušení a normalizaci pro odolné vrstvy načítání dat.
Nastavení REST klientů s Axios nebo FetchPoužití GraphQL klientů jako Apollo nebo URQLGlobální zpracování chyb a zprávy pro uživateleOpakování požadavků, backoff a timeoutyZrušení, abort controllery a cachováníLekce 9Autentizace na frontendu: ukládání tokenů, refresh toky a bezpečné přístupy k cookiesPochopte bezpečné vzory autentizace na frontendu. Porovnejte localStorage, sessionStorage a cookies, navrhněte toky refresh tokenů a implementujte HttpOnly cookies, obranu proti CSRF a strategie odhlášení chránící uživatele v reálných aplikacích.
Ukládání tokenů: localStorage vs cookiesBezpečné implementace refresh token tokůHttpOnly cookies a ochrana proti CSRFZpracování odhlášení, revokace a rotaceZpracování autentizačních chyb a zpětné vazbyLekce 10Možnosti a vzory správy stavu (lokální stav komponenty, Context, Redux/Pinia/MobX, React Query)Porovnejte možnosti správy stavu pro složité frontendy. Prozkoumejte lokální stav, Context, Redux, Pinia, MobX a React Query a naučte se vzory pro cachování, normalizaci a vyhýbání se zbytečným překreslením ve velkých aplikacích.
Lokální stav komponenty a vzory zvedáníContext API pro křížové zájmyDesign úložišť Redux, Pinia a MobXStav serveru s React Query nebo SWRLadění výkonu a vzory selektorůLekce 11Směrování a chráněné trasy: směrování na straně klienta, strážci tras, lazy loadingVytvořte spolehlivé směrování na straně klienta s chráněnými trasami. Naučte se konfiguraci tras, vnořené trasy, lazy loading a strážce tras vynucující autentizaci a autorizaci při zachování rychlosti a přístupnosti navigace.
Nastavení směrovačů a tras na straně klientaVnořené trasy a hierarchie layoutůImplementace lazy loading a dělení kóduStrážci tras na základě autentizace a přesměrováníZpracování stránek 404 a fallback tras
