Komponenty, routy a stav

Tři slova, která uslyšíš u každé aplikace.

Komponenta

Komponenta je znovupoužitelný kus stránky. Tlačítko, hlavička, karta produktu, formulář.

Proč tě to má zajímat, i když kód nepíšeš:

1. Určuje, jak rychle se dá měnit vzhled

   Když je hlavička komponenta, změníš ji na jednom místě. Když je zkopírovaná na deseti stránkách, měníš ji desetkrát a na jedné zapomeneš.

2. Je to jednotka, o které se bavíš s Claudem

   „Uprav komponentu s kartou produktu“ je přesnější zadání než „uprav ty kartičky“.

3. Poznáš podle ní kvalitu projektu

   Když v projektu vidíš pětkrát skoro stejný kód místo jedné komponenty, je to signál, že se to začíná zamotávat.

Projdi projekt a najdi místa, kde se stejný nebo skoro stejný kus
kódu opakuje na víc místech.

U každého mi napiš:
- kde se opakuje
- jestli se vyplatí z toho udělat komponentu
- co by se tím zjednodušilo

Zatím nic neměň.

Routy

Routa je pravidlo, které říká, jaká adresa zobrazí jakou stránku.

Ve frameworku typu Next.js vzniká routa ze struktury složek:

app/
├── page.tsx              → /
├── o-mne/
│   └── page.tsx          → /o-mne
├── blog/
│   ├── page.tsx          → /blog
│   └── [slug]/
│       └── page.tsx      → /blog/cokoliv

Hranaté závorky znamenají dynamickou část – jedna složka obslouží libovolnou adresu na tom místě. Jedna šablona pro všechny články.

Stav

Stav je informace, kterou si aplikace pamatuje a která se může měnit.

Příklady: je menu otevřené? Co je napsané ve vyhledávacím poli? Které položky jsou v košíku? Načítají se právě data?

Proč je stav zdrojem podivného chování

Většina záhadných chyb v aplikacích souvisí se stavem. Typické projevy:

1. Zobrazuje se stará hodnota

   Data se změnila, ale obrazovka ukazuje předchozí verzi. Někde chybí obnovení.

2. Po obnovení stránky je to pryč

   Stav v prohlížeči zmizí s obnovením. Když má něco přežít, musí se uložit – do databáze, do adresy nebo do úložiště prohlížeče.

3. Dvě místa ukazují něco jiného

   Ta samá informace je uložená dvakrát a jedna kopie se neaktualizovala.

4. Bliknutí při načtení

   Chvíli je vidět prázdný stav, pak data. Chybí stav „načítá se“.

Aplikace se chová divně:

Co dělám: [PŘESNÉ KROKY]
Co čekám: [CO BY SE MĚLO STÁT]
Co se stane: [CO SE OPRAVDU STANE]
Pomůže obnovení stránky? [ANO/NE]

Zjisti, kde je problém. Zajímá mě hlavně, jestli je to problém se stavem –
jestli se někde nedrží stará hodnota nebo není informace uložená dvakrát.

Nejdřív mi napiš příčinu, pak návrh opravy.

Ta otázka „pomůže obnovení stránky?“ je diagnostická: když ano, je to skoro jistě problém se stavem v prohlížeči. Když ne, problém je v datech na serveru.

Kdy o tom Claude bude mluvit

• „Vytáhnu z toho komponentu.“ → Opakující se kus dá na jedno místo.
• „Přidám dynamickou routu.“ → Jedna šablona pro víc adres.
• „Ten stav zvedneme výš.“ → Informace se přesune tam, kde na ni vidí víc částí aplikace.
• „Přidám loading state.“ → Doplní stav „načítá se“, aby uživatel nekoukal na prázdno.