Komponenta
Také známo jako UI component, Komponenta rozhraní
Stručně
Znovupoužitelná část rozhraní, která má jednu úlohu — kartu produktu, cenovku, filtr — a svůj malý stav.
Komponenta je funkce, která dostane props (data a callbacky zvenčí) a vrátí markup. Její stav je to, co si pamatuje mezi rendery. Jednou větou: props přijdou od rodiče, stav patří komponentě.
Hranice rozhodují, jak drahá je změna
Dobrá komponenta má jeden důvod ke změně. Když marketing chce nový štítek na kartě produktu ve výpisu, ale ne v košíku, ProductCard s propem `badges` je práce na deset minut. Čtyřsetřádkový ProductTile, který vykresluje cenu, sklad, CTA, oblíbené i upsell, znamená den regresí, protože každá úprava se dotkne devíti věcí, které nikdo netestoval.
Špatné hranice jsou dražší než ošklivý kód. Dělte podle toho, co se mění společně, ne podle toho, jak vypadá CSS: cenový blok patří ke svým formátovacím pravidlům, galerie ke svým klávesovým zkratkám.
Kdy komponentu nedělat
Dvě podobně vypadající použití nejsou důvod na abstrakci. Tlačítko v hlavičce a tlačítko v patičce sdílí tři props a v pěti se liší; sdílený `<Button>` se sedmi boolean props se čte hůř než dva malé soubory. Vyčleňujte, až když přijde třetí skutečné použití, ne druhé vymyšlené.
To samé platí pro props. Komponenta s deseti volitelnými přepínači a podmínkou `isLoading || isEmpty || isError` uvnitř jsou většinou tři komponenty pod jedním jménem. Nikdo neodhadne, co vykreslí, a design review se zvrhne v kontrolní seznam kombinací.
Zdroje
Související pojmy
Správa stavu
Rozhodnutí, co si aplikace pamatuje, kde to žije a kdo to smí měnit — nejdřív lokálně, globálně jen když to sdílíte.
Design systém
Sdílené tokeny a komponenty, díky kterým vypadá každá nová stránka stejně — a které někdo musí udržovat.
Hydratace
JavaScript na klientovi převezme HTML ze serveru a navěsí události — obě strany přitom musí vykreslit stejný strom.