Styled Components

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.

React Navigation je nejpoužívanější knihovna pro routing a navigaci v React Native aplikacích. Poskytuje stack, tab a drawer navigátory, které napodobují nativní navigační vzory na iOS i Androidu s plynulými přechody a podporou gest. Její přístup založený na JavaScriptu znamená, že navigační logika je plně přizpůsobitelná a knihovna integruje deep linking, autentizační flow a persistenci stavu přímo z balení.

Dělení kódu je optimalizační technika, která rozděluje JavaScriptový bundle na menší části načítané na vyžádání, místo aby se uživatelé museli stahovat celou aplikaci najednou. V Reactu se toho dosahuje pomocí `React.lazy()` a dynamických `import()` výrazů, které vytvářejí samostatné bundly načítané až při přístupu k odpovídající komponentě nebo cestě. To dramaticky zlepšuje počáteční načítací časy, zejména u velkých single-page aplikací s mnoha cestami.

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.

CSS animace využívají pravidla `@keyframes` a vlastnost `animation` k tvorbě složitých, vícekrokových animací čistě v CSS bez JavaScriptu. V kombinaci s CSS transitions pro jednoduché změny stavu pokrývají tyto nástroje většinu potřeb UI animací s dobrým výkonem, protože prohlížeče je mohou optimalizovat na GPU kompozičním vlákně. Vlastnosti jako `transform` a `opacity` jsou obzvláště efektivní k animování, protože nespouštějí přepočty rozvržení ani překreslování.

CSS Grid je dvourozměrný systém rozvržení, který umožňuje definovat řádky a sloupce současně, což jej činí ideálním pro složité rozvržení stránek. Na rozdíl od Flexboxu, který pracuje vždy v jedné ose, Grid umožňuje přesně umísťovat prvky jak horizontálně, tak vertikálně pomocí pojmenovaných oblastí nebo čísel řádků. Funkce jako `grid-template-areas`, `auto-fill` a `minmax()` umožňují vytvářet responzivní rozvržení s minimem kódu.