Matyas.
SlužbyProjektyZkušenostiBlogKontakt
ENOzvěte se
Zpět na slovník
reactreact-nativeweb-dev

Styled Components

Styled Components je populární CSS-in-JS knihovna pro React a React Native, která využívá tagged template literals ke stylování komponent. Automaticky generuje unikátní názvy tříd, podporuje dynamické stylování na základě props, zajišťuje vendor prefixing a poskytuje plné možnosti themování. Knihovna umísťuje styly společně s komponentami, což usnadňuje pochopení vzhledu každé komponenty a bezpečné mazání stylů při odstraňování komponent.

#react#react-native#web-dev

Související pojmy

Storybook

Storybook je open-source nástroj pro vytváření a testování UI komponent izolovaně, mimo hlavní aplikaci. Vývojáři definují „stories" — různé stavy a varianty komponenty — které se vykreslují v samostatném prostředí v prohlížeči. Podporuje React, Vue, Angular a další frameworky, což z něj činí neocenitelný nástroj pro dokumentaci komponent, vizuální regresní testování a spolupráci designérů s vývojáři.

Blue-green nasazení

Blue-green nasazení je strategie vydávání, která udržuje dvě identická produkční prostředí — „blue" (aktuální) a „green" (nová verze). Provoz se přepne z blue na green až po úspěšném projití všech health checků, což umožňuje nasazení bez výpadků. Pokud se objeví problémy, provoz lze okamžitě přesměrovat zpět na blue prostředí, čímž se rollback stává triviálním a plně automatizovaným.

Správa fokusu

Správa fokusu je praxe řízení toho, který prvek přijímá klávesový fokus ve webové aplikaci, zejména při dynamických změnách obsahu. Když se otevře modální okno, fokus by se měl přesunout do něj; když se zavře, fokus by se měl vrátit na spouštěcí prvek. Správná správa fokusu je nezbytná pro uživatele klávesnice a čteček obrazovky a zahrnuje techniky jako focus trapping, roving tabindex a programatické nastavení fokusu pomocí `element.focus()`.

Tree shaking

Tree shaking je technika eliminace mrtvého kódu používaná moderními bundlery jako Webpack, Rollup a esbuild k odstranění nepoužitých exportů z výsledného JavaScriptového bundlu. Spoléhá na statickou strukturu syntaxe ES modulů `import`/`export` k určení, který kód je skutečně referencován, a bezpečně odstraní zbytek. Pro efektivní tree shaking musí knihovny používat formát ESM a vyhnout se vedlejším efektům při inicializaci modulu, proto je důležité pole `sideEffects` v `package.json`.

Progresivní vylepšování

Progresivní vylepšování je strategie webového vývoje, která začíná se základním funkčním HTML obsahem dostupným ve všech prohlížečích a poté přidává CSS styly a JavaScript interaktivitu pro schopnější prostředí. Tento přístup zajišťuje, že základní funkcionalita funguje všude, zatímco uživatelé s moderními prohlížeči získají bohatší zážitek. Kontrastuje s přístupem graceful degradation, který začíná plným zážitkem a řeší případné nedostatky zpětně.

Drobečková navigace

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.

Všechna slova

Máte v hlavě projekt?

Ať už potřebujete webovou appku, mobilní appku nebo automatizaci s AI — ozvěte se a probereme, jak vám můžu pomoct.

Ozvěte se
Matyas.

Weby, mobilní appky a automatizace s AI. Pomáhám firmám šetřit čas i peníze technologií, která opravdu funguje.

Odkazy

  • Služby
  • Projekty
  • Zkušenosti
  • Blog
  • Slovník
  • Kontakt

Připravuji

  • Případové studieBrzy
  • Zdroje

© 2026 Matyas Prochazka. Všechna práva vyhrazena.