Storybook

Reconciliace je algoritmus Reactu pro porovnání předchozího a aktuálního stromu virtuálního DOM za účelem určení minimálního počtu změn potřebných k aktualizaci skutečného DOM. React používá heuristiky jako porovnání typu elementu a prop `key` k efektivnímu rozhodnutí, zda DOM uzly aktualizovat, nahradit nebo odstranit. Pochopení reconciliace vysvětluje, proč záleží na unikátních `key` propech u položek seznamu — bez nich React nedokáže spolehlivě sledovat, které položky se změnily.

Headless UI označuje knihovny komponent, které poskytují chování, správu stavu a logiku přístupnosti bez jakéhokoliv předdefinovaného stylování nebo markupu. Knihovny jako Radix Primitives, Headless UI od Tailwind Labs a React Aria dávají vývojářům plnou kontrolu nad vizuální prezentací a zároveň řeší složité vzory jako správu fokusu, klávesovou navigaci a ARIA atributy. Tento přístup odděluje funkcionalitu od designu, což je ideální pro vlastní designové systémy.

Atomický design je metodologie Brada Frosta pro tvorbu designových systémů rozdělením rozhraní do pěti hierarchických úrovní: atomy (základní HTML elementy), molekuly (jednoduché skupiny komponent), organismy (složité UI sekce), šablony (rozvržení na úrovni stránky) a stránky (konkrétní instance se skutečným obsahem). Tento přístup poskytuje konzistentní mentální model pro organizaci knihoven komponent v React, React Native nebo Flutter projektech a zajišťuje systematickou škálovatelnost UI.

Drobečková navigace je sekundární navigační vzor, který ukazuje aktuální pozici uživatele v hierarchii webu jako řetězec odkazů (např. Domů > Produkty > Boty). Pomáhá uživatelům pochopit, kde se nacházejí, a rychle se vrátit na nadřazené stránky bez použití tlačítka Zpět v prohlížeči. Správná implementace využívá uspořádaný seznam v prvku `<nav>` s atributem `aria-label="Breadcrumb"` pro přístupnost.

Optimistické UI je vzor, při kterém rozhraní okamžitě zobrazí očekávaný výsledek akce uživatele, ještě než ji server potvrdí. Například tlačítko „lajk" okamžitě ukáže stav po liknutí, zatímco API požadavek probíhá na pozadí. Díky tomu aplikace působí výrazně rychleji a responzivněji. Pokud požadavek na server selže, UI se vrátí do předchozího stavu a uživatele upozorní.

CSS vlastní vlastnosti (také nazývané CSS proměnné) umožňují definovat znovupoužitelné hodnoty syntaxí `--my-variable` a odkazovat na ně kdekoli pomocí `var(--my-variable)`. Na rozdíl od proměnných v preprocesorech Sass nebo Less jsou živé v prohlížeči, kaskádují přes DOM a lze je dynamicky měnit JavaScriptem. Jsou nezbytné pro systémy motivů, implementaci tmavého režimu a udržování konzistentních designových tokenů v rozsáhlých stylech.