Kurz ReactuPochop React, ne jen jeho syntaxi
Interaktivní kurz s živými ukázkami a výzvami přímo v prohlížeči – od JavaScriptu, který React potřebuje, po routování, načítání dat a správu stavu.
- ✓ Celý kurz je zdarma
- ✓ Nic se neinstaluje
- ✓ React 19 a TypeScript
Vyzkoušej si to hned
Změň text na tlačítku nebo ať počítá po desítkách – výsledek se mění, jak píšeš.
Načítám interaktivní část…
Co tě čeká
Živé ukázkyKaždý koncept si proklikáš a podíváš se do jeho kódu.
Výzvy přímo v prohlížečiPíšeš skutečný React, výsledek vidíš hned a testy ti řeknou, co funguje.
Přirovnání místo suché teorieKomponenta je jako recept: podle jednoho receptu uvaříš jídlo pro každého hosta zvlášť. Takový obrázek si zapamatuješ líp než definici.
JavaScript, který React potřebujeKapitola 0 doplní mezery: pole, objekty, asynchronní kód a reference.
Kvízy a postupOvěř si porozumění, sbírej odznaky a drž sérii dnů.
Moderní ReactReact 19, TypeScript, React Router, TanStack Query, Zustand a Redux Toolkit.
Pro koho je kurz
- Znáš trochu JavaScript a chceš začít s Reactem – začni kapitolou 0.
- V Reactu už píšeš, ale občas nevíš, proč něco (ne)funguje – test ti ukáže, kde máš mezery.
- Chystáš se na pohovor nebo první práci – pomůžou výzvy a principy z lekce 17.
Jak kurz funguje
- Čti a zkoušej. Každá lekce vysvětluje koncept, proč existuje a kde ho použít. Živé ukázky si můžeš proklikat a podívat se na jejich kód tlačítkem
</> Kód. - Řeš výzvy přímo na stránce. Každá výzva má editor kódu; výsledek se ukazuje průběžně a tvoje řešení se ukládá v prohlížeči. Testy ti řeknou, které kroky už máš hotové.
- Porovnej se vzorem. Záložka Vzorové řešení ukáže, jak se má výsledek chovat. Kód řešení je schovaný, dokud si ho sám nerozbalíš.
- Kontroluj typy. Spusť
npm run typecheck– TypeScript ti často řekne, co je špatně, dřív než prohlížeč.
Obsah
0JavaScriptVšechno z JavaScriptu, co React potřebuje: od proměnných po async a vzory, které v Reactu potkáš všude.1Rychlé opakování základůJSX, komponenty, props, children, podmínky, seznamy a proč na key záleží.2Stav a události (useState)Immutabilita, updater funkce, batching, lifting state up a odvozený stav.3Efekty (useEffect)Synchronizace s okolním světem, cleanup, race conditions a kdy efekt NEpotřebuješ.4Refy (useRef)Přístup k DOM, hodnoty bez překreslení, ref jako prop a useImperativeHandle.5Složitější stav (useReducer)Kdy místo useState sáhnout po reduceru a jak ho psát čistě a typově bezpečně.6ContextKonec prop drillingu, vzor Provider + hook a výkonnostní pasti.7Vlastní hookyJak vytáhnout a znovu použít logiku: useLocalStorage, useMediaQuery, useDebounce…8Formuláře a React 19 ActionsControlled vs. uncontrolled, useActionState, useFormStatus a useOptimistic.9Výkon a renderováníKdy se komponenta překresluje, memo, useMemo, useCallback, useTransition, useDeferredValue.10Návrhové vzory komponentKompozice, compound components, render props, portály a error boundaries.11Kam napsat typ (syntaxe TypeScriptu)Kdy dvojtečka, kdy <…>, kdy nic. Anatomie zápisu, tahák situací a doplňovačka.12TypeScript s ReactemTypování props, událostí, hooků, generické komponenty a discriminated unions.13Routování (React Router)Stránky, parametry, vnořené layouty, stav v URL, loadery a chráněné cesty.14Načítání datProč fetch v useEffect nestačí, TanStack Query, Suspense a use().15Správa stavu aplikaceDruhy stavu a jak vybrat: Context vs. Zustand vs. Redux Toolkit.16Závěrečný projekt: KanbanPoskládej všechno dohromady do jedné aplikace.17Shrnutí: principy Reactu15 principů celého kurzu s vysvětlením a příklady „takhle ne / takhle ano“.
Odznaky (0/10)
První lekceDočti lekci až do konce.
První výzvaVyřeš a odškrtni první výzvu.
RozcvičenýSplň pět rozcviček.
Bystrá hlavaOdpověz správně na deset kvízů hned napoprvé.
Tři dny v řaděUč se tři dny po sobě.
JavaScript zvládnutýPřečti všechny lekce kapitoly 0.
Deset výzevSplň deset výzev.
Celý týdenUč se sedm dní po sobě.
V půlce cestyPřečti polovinu všech lekcí.
AbsolventPřečti všechny lekce kurzu.