Front-end developer

• Co je to destrukturování polí a objektů
• Rozšířené vlastnosti objektových literálů
• Map a Set a jak se liší od klasických objektů

Výstupy z lekce: Umím techniku destrukturování polí i objektů, což zjednodušuje přiřazování proměnných. Používám objektové literály, čímž jsem zvýšil*a úroveň strukturování a přístupu k datům v rámci objektů. Rozumím praktickému využití a výhodám funkcí Map a Set v JavaScriptu a dokážu efektivně spravovat jedinečné kolekce dat a dvojice klíč-hodnota.

• Třídy JavaScriptu ES6: Pochopení deklarace tříd, konstruktorů, metod a dědičnosti.
• Objektově orientované principy: Základní principy, jako je zapouzdření, dědičnost a polymorfismus.

Výstupy z lekce: Umím implementovat koncepty tříd v JavaScriptu a chápu jejich úlohu při strukturování kódu. Aplikuji základní principy OOP i pokročilejší programovací paradigmata.

Praktické cvičení: Vytvoř základní projekt v OOP.

• Co je TypeScript a proč ho používat?
• Základní typy v TypeScriptu: číslo, řetězec, boolean, any, void
• Union & intersection v TypeScriptu
• Aliasy typů
• Interface: Definování a rozšiřování interfaců

Výstupy z lekce: Umím základy TypeScriptu a rozumím jeho roli při zlepšování vývoje v JavaScriptu. Definuji a používám základní typy pro zajištění typové bezpečnosti kódu. Nastavím projekt v TypeScriptu a začlením ho do svého vývojového postupu. Tvořím funkce s přesnými parametry a návratovými typy. Navrhuji a implementuji interfaců pro konzistentní objektové struktury.

• Porozumění asynchronnímu JavaScriptu
• Úvod do Promise
• Fetch API pro požadavky HTTP
• Async/Await pro čistší asynchronní kód

Výstupy z lekce: Dokážu implementovat asynchronní programování v JavaScriptu pro zlepšení odezvy aplikací. Umím využívat Promise, API Fetch a syntaxe Async/Await pro efektivní načítání a zpracování dat. Mám schopnost integrovat externí zdroje dat do projektů pro zajištění dynamického obsahu a interaktivity.

• Ošetření chyb pomocí try…catch
• Běžné techniky ladění
• Porozumění call stacku

Výstupy z lekce: Umím řešit neočekávané scénáře a zvýšit odolnost svých aplikací. Využívám mechanismus try…catch pro bezproblémové fungování aplikace i při chybách. Mám zlepšené ladicí dovednosti, které mi umožňují efektivně sledovat a odstraňovat problémy v kódu.

Praktické cvičení: Prozkoumej asynchronní operace v TypeScriptu.

• Oblíbené knihovny: Představení široce používaných knihoven v JavaScriptu, jako jsou Lodash, Moment.js a další, které mohou usnadnit různé úlohy.
• Nástroje jazyka TypeScript: Zkoumání nástrojů, jako jsou ESLint, Prettier, TypeScript Playground a DefinitelyTyped, pro usnadnění vývoje.
• Komunita a zdroje: Objevování platforem, jako jsou MDN Web Docs, Stack Overflow atd.

Výstupy z lekce: Znám populární knihovny JavaScriptu a umím je integrovat do projektů pro rozšíření funkčnosti. Seznámil*a jsem se se základními nástroji TypeScriptu, které zefektivňují můj vývojový proces a zlepšují kvalitu kódu. Mám povědomí o komunitách a zdrojích kolem JavaScriptu a TypeScriptu, což mi poskytuje další vzdělávání a podporu.

• Co je React a proč ho používat?
• Pochopení virtuálního DOM
• Nastavení React prostředí
• Úvod do funkcionálních komponent
• Základy JSX/TSX
• Vykreslování prvků

Výstupy z lekce: Rozumím hlavnímu účelu a výhodám Reactu, včetně optimalizace vykreslování pomocí virtuálního DOMu. Umím nastavit vývojové prostředí React a popsat funkcionální komponenty a jejich použití. Rozumím syntaxi JSX/TSX a umím ji implementovat pro vykreslování jednotlivých prvků a komponent v Reactu.

• React props
• Správa statu s pomocí hooku useState
• Rozlišení mezi statem a props

Výstupy z lekce: Umím vysvětlit účel a použití props v komponentách a spravovat local state pomocí hooku useState. Taky rozumím rozdílu mezi props a statem.

Praktické cvičení: Vytvoř základní aplikace React.

• Úvod k hooku useEffect
• Vedlejší efekty ve funkcionálních komponentách
• Cleanup a závislosti v useEffect

Výstupy z lekce: Umím popsat význam a použití hooku useEffect a zacházet s vedlejšími jevy ve funkcionálních komponentách. Umím implementovat cleanup a rozumím závislostem v rámci useEffect.

Praktické cvičení: Vylepši svou aplikaci o dynamická data.

• Zpracování eventů v Reactu
• Kontrolované komponenty s hookem useState
• Zpracování odeslání formuláře

Výstupy z lekce: Umím zpracovat události jako onClick a onChange v Reactu. Ukládám vstupy formuláře pomocí useState a obsluhuji odesílání formulářů a zpracování dat.

• Úvod do React Context, jeho principy a užití
• Použití hooku useContext
• Praktické příklady kontextu pro správu statu

Výstupy z lekce: Znám principy React Context a jejich užití. Využívám hook useContext pro přístup k hodnotám kontextu a implementuji praktickou správu stavu pomocí kontextu.

• Úvod do React Routeru, jeho principy a využití v aplikaci
• Nastavení linkování pro React aplikaci
• Parametry routy a navigace v aplikaci

Výstupy z lekce: Ovládám základy React Routeru a umím ho využít k vytvoření multistránkové webové aplikace. Dokážu konfigurovat routy pro aplikaci v Reactu a vykreslovat různé části aplikace podle jejich parametrů. Umím se také programově pohybovat mezi stránkami.

• CSS v React
• Styled Components
• Správa theme a stylů s kontextem a hooky

Výstupy z lekce: Umím implementovat klasické CSS v komponentách React. Umím stylovat komponenty pomocí CSS-in-JS s knihovnou Styled Components. Dokážu spravovat themes a dynamické styly pomocí kontextu a hooků.

Praktické cvičení: Implementuj přepínače themes pomocí kontextu.

• Vykreslování vlastností (krátké představení)
• Higher-order components (krátké představení)
• Složené komponenty pomocí funkcionálních komponent

Výstupy z lekce: Chápu vzory, jako jsou render props a Higher-order components, a vím, kdy je použít. Umím implementovat složené komponenty a popsat pokročilé vzory a jejich výhody.

• Optimalizace výkonu ve funkcionálních komponentách
• Použití hooků useMemo a useCallback
• Profiling s React DevTools

Výstupy z lekce: Umím rozpoznat úzká místa ve výkonu funkčních komponent a optimalizovat je pomocí useMemo a useCallback. Znám profilování pomocí nástroje React DevTools.

Praktické cvičení: Stránkování a optimalizace v UserListu.

• Vlastní hooky
• Další důležité hooky (useRef, useReducer atd.)
• Vytváření vlastního hooku v praxi

Výstupy z lekce: Umím vytvořit vlastní hook pro opakovaně použitelnou logiku. Používám další hooky Reactu, jako jsou useRef a useReducer.

Praktické cvičení: Pokročilý state a vylepšování aplikace.

• Úvod k testování React funkcionálních komponent
• Použití testovacích knihoven a Jest
• Mockování a simulace uživatelských událostí

Výstupy z lekce: Umím provést základní testování v Reactu a vysvětlit jeho význam. Implementuji unit testy pomocí populárních knihoven, jako je Jest. Zvládám mockovat funkce a simulovat uživatelské události pro testování.

Praktické cvičení: Otestuji aplikaci pomocí knihovny Jest.

• Koncepty server-side rendering (SSR)
• Výhody SSR
• Implementace SSR ve funkcionálních React aplikacích
• NextJS

Výstupy z lekce: Umím vysvětlit principy a výhody SSR a rozpoznat, kdy je třeba jej zavést. Dokážu převést funkcionální aplikace Reactu na podporu SSR.

• Nasazení React aplikace
• Kontinuální integrace & kontinuální dodání
• Hosting React aplikací na platformách jako Firebase

Výstupy z lekce: Umím nasadit aplikaci v Reactu do produkce a znám základy CI/CD pro React aplikace. Dokážu hostovat React aplikace na platformách, jako je Firebase.

Praktické cvičení: Spuštění živého provozu aplikace.

• Populární knihovny pro zrychlení vývoje v Reactu
• Integrace s API a backend službami
• Přidání funkcí jako notifikace, modální okna atd.

Výstupy z lekce: Znám další populární knihovny, které doplňují React, a umím je nainstalovat. Dokážu napojit React aplikaci na různá API a backendové služby. Zvládnu vylepšit uživatelské rozhraní pomocí pokročilých funkcí, jako jsou notifikace a modály.

• Shrnutí obsahu kurzu
• Budoucnost React a co očekávat
• Otevřená diskuze, zpětná vazba a otázky a odpovědi

Výstupy z lekce: Mám přehled, jakým směrem se ubírá React a kde sledovat trendy Reactu a front-endového vývoje.