Rozdělení projektu na komponenty 📦
Říkali jsme, že jeden z hlavních úkolů, které React vývojář dělá je rozdělit stránku na komponenty.
Dostaneš návrh aplikace (např. PSD designu nebo ve Figmě) a teď chceš rozdělit stránku na komponenty, abys mohl začít vyvíjet.
V této části si prakticky vyzkoušíme, jak správně rozdělit složitou aplikaci na menší, znovupoužitelné komponenty. Vytvoříme aplikaci seznamu zaměstnanců.
❓ Proč to děláme?
- Znovupoužitelnost: Komponenty lze použít na více místech, což znamená, že když něco změníme, tak se to projeví na všech místech, kde je komponenta použita. Taky tím můžeme ušetřit práci, že… :)
- Čitelnost: Menší kusy kódu jsou lépe čitelné a přehledné.
- Údržitelnost: Jednotlivé malé součástky lze snadněji upravovat a rozšiřovat.
- Testovatelnost: Můžeme použít testovací frameworky jako Jest nebo React Testing Library, které po změně otestují, že všechno stále funguje, jak předpokládáme.
- Dokumentace: Dokumentace pomáhá při vývoji a udržování aplikce.
Postup při rozdělování stránky na komponenty
Když se podíváš na návrh (nápad) stránky, můžeš z ní vyčíst tyto zásadní úkoly:
Identifikuj jednotlivé logické celky a co je jejich účel. Zobrazujeme uživatelský avatar, přihlašovací tlačítko nebo seznam článků?
Identifikuj jednotlivé stavy, ve kterých se aplikace (a jednotlivé komponenty) může nacházet a které komponenty jej budou potřebovat. Nahrávání dat, chyba, úspěch, zobrazení seznamu článků, zobrazení článku, editace článku, atd.
Podívej se, jestli jej náhodou nepotřebují i další komponenty. Stav ve stromu komponent umísti co nejvýš, aby byl definován jen jednou a šířil se do jednotlivých komponent.
Co je logický celek?
Logický celek je část stránky, která dává smysl, aby fungoval samostatně, čili bez závislosti na ostatních částech stránky a jejich stavech.
Např. seznam článků nemusí komunikovat s přihlašovacím tlačítkem.
Jak je rozdělím do souborů?
Komponenty jsou obvykle v souborech s příponou
.jsxnebo.tsx.Nezapomeň na slovíčka
exportneboexport default, abys je mohl importovat a použít v jiných souborech.
Obvykle jsou komponenty v adresáři components a stránky v adresáři pages a každá komponenta má svůj adresář, kde má zároveň i všechny soubory potřebné pro danou komponentu, jako CSS, definice typů, atd.
src/
├── components/
│ └── Button/
│ ├── Button.jsx
│ ├── Button.css
│ └── types.d.ts
└── pages/
└── Home/
├── Home.jsx
└── Home.cssMůžu někde pozorovat komponenty, propsy a stavy?
Ano. Existuje rozšíření pro prohlížeče React Dev Tools, které nám přidá dvě záložky do nástrojů pro vývojáře -
ComponentsaProfiler.Při vývoji v Reactu nás zajímají hlavně záložky
ConsoleaComponents, kterou najdeme vpravo od záložkyElements, kde jsou prvky DOMu.
