Komponensben gondolkodj, ne oldalban
Day 16 of 30 · The Playbook 2026 – Mesterkurzus Designereknek
Oldalak helyett komponens-API-ban gondolkodsz: állapotok, felelősségi határ, használati korlát.
Tanulási cél
- Komponens API: props, állapot, események.
- Felelősségi határ: mit tud és mit nem.
- Használati szabály: hol tilos használni.
- Dokumentálsz jó/rossz példát.
Miért fontos
- Oldal-fókuszú munka duplikációhoz vezet.
- Komponens = újrahasznosítás + konzisztencia.
- Világos API nélkül instabil lesz a rendszer.
Magyarázat
- API: kötelező/opcionális propok, események, állapotok.
- Felelősség: mit nem csinál (pl. a kártya nem fetch-el adatot).
- Dokumentáció: használati példák + tiltások.
Példák
Rossz: Minden oldal egyedi kártyát épít.
Jó: Kártya komponens API-val, állapotokkal, dokumentált korlátokkal.
Gyakorlat (vezetett)
- Válassz egy UI-t (kártya, input-csoport), írd le az API-t.
- Listázd az állapotokat (hover, focus, error, loading).
- Írd le a tiltásokat (hol nem használható).
Gyakorlat (önálló)
Dokumentáld a komponens API-t a Playbookban, linkkel Figma/Storybookra.
Önellenőrzés
- API leírva.
- Állapotok feltérképezve.
- Tiltási lista megvan.
Opcionális mélyítés
- Atomic design: https://bradfrost.com/blog/post/atomic-web-design/