Lekce 16 · Projekt

Závěrečný projekt: Kanban

Poskládej všechno dohromady do jedné aplikace.

Než začneme: dům se staví od základů

Nikdo nestaví dům tak, že nejdřív pověsí záclony a pak hledá, kam by postavil zdi. Postup je opačný: plán (kde budou místnosti), základy, hrubá stavba, pak rozvody elektřiny a vody – a vybavení až nakonec. Každá fáze stojí na té předchozí, a když se základy udělají dobře, další patra drží sama.

Aplikace se staví stejně:

Plán = typy. Jaká data existují a jak vypadají? Karta, sloupec, priorita, akce.
Základy = logika bez UI. Reducer, který umí přidat, upravit, přesunout a smazat kartu. Dá se vyzkoušet i bez jediné komponenty.
Hrubá stavba = statické UI. Sloupce a karty, které jen zobrazují data – zatím bez klikání.
Rozvody = interaktivita. Handlery, formuláře, modal, ukládání.
Vybavení = vylepšení. Drag & drop, undo, výkon – jen když základ stojí.

Teď je čas poskládat všechno dohromady. Postav Kanban tabuli – malou, ale skutečnou aplikaci, ve které použiješ většinu toho, co ses naučil. Postupuj po milnících a každý si odškrtni.

Rozcvička

Výzva

Karta úkolu

Rozcvička

Než se pustíš do celého kanbanu, rozehřej se na jeho nejmenší části – jedné kartě.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Karta úkolu

Seznam úkolů i funkce pro smazání jsou hotové. Komponenta TaskCard zatím nic neukazuje.

1. V TaskCard vykresli název úkolu: {task.title}
2. Tlačítko „×“ ať zavolá onDelete(task.id)

Tohle je nejmenší kousek kanbanu, který stavíš v projektu níže.

🧩 Odkud se berou věci, které tu nejsou definované

CSS třídy jako row, stack, card, list, btn, input nebo muted jsou hotové styly kurzu v src/styles.css (row = prvky vedle sebe, stack = pod sebou, card = rámeček, muted = šedý text).

Načítám interaktivní část…

Mám hotovo

Milníky

Architektonická rozhodnutí

Než začneš psát, zamysli se nad těmito otázkami. Každá odpovídá jedné představě z kurzu: sešit (stav), bankovní účet (reducer), rozhlas (Context), šuplík (ref), světlo v místnosti (efekt). Vzorové řešení volí odpovědi v pravém sloupci – tvoje mohou být jiné.

Otázka	Vzorové řešení	Proč
Kde žijí karty?	useReducer + Context	Mnoho různých akcí nad stejnými daty (bankovní účet) a potřebuje je víc komponent (rozhlas). Stav a dispatch v oddělených kontextech.
Ukládám sloupec do karty, nebo karty do sloupců?	column v kartě, ploché pole	Přesun = změna jedné hodnoty, žádné kopírování mezi poli. Počty karet ve sloupcích se jen spočítají.
Kde je text hledání?	Lokální useState v Board	Věc v kapse jedné komponenty. V aplikaci s routerem by patřil do adresy (přání k pokoji).
Rozpracovaná úprava karty?	Lokální koncept v modalu	Papíry na pracovním stole: do „banky“ jde až po Uložit, takže Zrušit nemusí nic vracet.
Jak funguje undo?	Historie v reduceru	Reducer je jediné místo, kde vznikají změny – výpis z účtu je zadarmo.
Ukládání?	Efekt synchronizuje cards → localStorage	localStorage je okolní svět (světlo v místnosti); líná inicializace reduceru ho při startu načte.

Jak rozdělím kód do víc souborů?

Co má být vidět v jiném souboru, označ export. V druhém souboru si to vezmeš přes import s cestou relativní k aktuálnímu souboru (bez přípony):

// kanban/types.ts
export type ColumnId = 'todo' | 'doing' | 'done'
export interface Card { id: string; title: string; column: ColumnId }

// kanban/boardReducer.ts
import type { Card } from './types'          // "import type" = jen typ, po kompilaci zmizí
export function boardReducer(…) { … }

// Kanban.tsx (o složku výš)
import { boardReducer } from './kanban/boardReducer'

Pojmenovaný export (export function X) se importuje ve složených závorkách a se stejným jménem. export default může mít soubor jen jeden a importuje se bez závorek pod libovolným jménem. Tak to dělají soubory výzev, které importuje lekce. Jedna komponenta na soubor je dobré pravidlo, typy a reducer mají svoje soubory.

Jak funguje nativní drag & drop (bonusový milník)?

Prohlížeč umí přetahování sám, stačí mu říct tři věci:

// 1) CO se táhne: prvek musí mít draggable a při startu si „zabalí“ data
<li draggable onDragStart={(e) => e.dataTransfer.setData('text/plain', card.id)}>

// 2) KAM se smí pustit: bez preventDefault prohlížeč puštění zakáže
<section onDragOver={(e) => e.preventDefault()}

// 3) CO se stane po puštění: vybal data a pošli akci
         onDrop={(e) => {
           const id = e.dataTransfer.getData('text/plain')
           dispatch({ type: 'card_moved', id, column: 'done' })
         }}>

dataTransfer je „krabice“, která cestuje s taženým prvkem. Ukládá se do ní jen text, proto do ní dáváš ID karty, ne celý objekt. Reducer pak přesun provede stejně jako u tlačítek ← →, mění se jen to, kdo akci pošle.

Výzva

Kanban tabule

Těžká Bonusová výzva

Vzorové řešení si vyzkoušej v záložce „Vzorové řešení“ – ukládá se do localStorage, takže přežije reload.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Kam dál

Next.js nebo React Router (framework mode) – Server Components, Server Actions, SSR a routování podle souborů.
Testování – Vitest + React Testing Library; reducery a hooky se testují nejsnáz.
Přístupnost – React Aria nebo Radix pro komponenty, které fungují s klávesnicí a čtečkou.
React Compiler – zapni ho v projektu a sleduj, kolik ručních memo můžeš smazat.
react.dev – oficiální dokumentace je výborná; sekce „Learn“ a „Escape Hatches“ si přečti celé.

Shrnutí

Aplikace se staví od základů: typy (plán) → reducer (základy) → statické UI (hrubá stavba) → interaktivita (rozvody).
Každý kus stavu dej tam, kam patří: reducer/Context, lokální stav, URL, localStorage.
Odvozuj, co jde spočítat; efekty jen pro externí systémy.
Gratuluji – prošel jsi celý kurz! 🎉

Načítám lekci…

💬 Našel jsi chybu, něco ti není jasné, nebo máš nápad? Napiš mi.