Architektura složek

V tomto průvodci prozkoumáte detaily struktury projektového adresáře a jak přispívá k organizaci a udržovatelnosti Twenty. Následováním této konvence architektury složek je snazší najít soubory související s konkrétními funkcemi a zajistit rozšiřitelnost a udržovatelnost aplikace.

front
└───modules
│   └───module1
│   │   └───submodule1
│   └───module2
│   └───ui
│   │   └───display
│   │   └───inputs
│   │   │   └───buttons
│   │   └───...
└───pages
└───...

Stránky

Zahrnuje komponenty nejvyšší úrovně definované aplikačními trasami. Importují více nízkoúrovňových komponent ze složky modulů (více podrobností níže).

Moduly

Každý modul představuje funkci nebo skupinu funkcí s jejich specifickými komponenty, stavy a provozní logikou. Všechny by měly dodržovat strukturu níže. Moduly můžete vnořovat do sebe (tzv. podmoduly) a platí pro ně stejná pravidla.

module1
  └───components
  │   └───component1
  │   └───component2
  └───constants
  └───contexts
  └───graphql
  │   └───fragments
  │   └───queries
  │   └───mutations
  └───hooks
  │   └───internal
  └───states
  │   └───selectors
  └───types
  └───utils

Kontexty

Kontext je způsob, jak předávat data skrz strom komponent, aniž by se musely na každé úrovni ručně předávat props. Více podrobností naleznete v React Context.

GraphQL

Zahrnuje fragmenty, dotazy a mutace. Více podrobností naleznete v GraphQL.

Fragmenty

Fragment je znovupoužitelný kus dotazu, který můžete použít na různých místech. Pomocí fragmentů je snazší vyhnout se duplikaci kódu. Více podrobností naleznete v GraphQL Fragments.

Dotazy

Více podrobností naleznete v GraphQL Queries.

Mutace

Více podrobností naleznete v GraphQL Mutations.

Hooky

Více podrobností naleznete v Hooks.

Stavy

Obsahuje logiku správy stavů. To řeší Jotai.

Selektory: Odvozené atomy (pomocí createAtomSelector) odvozují hodnoty z jiných atomů a jsou automaticky memoizovány.

Vestavěná správa stavů v Reactu stále spravuje stav uvnitř komponenty.

Pomocné funkce

Měly by obsahovat pouze znovupoužitelné čisté funkce. V opačném případě vytvořte vlastní hooky ve složce hooks.

UI

Obsahuje všechny znovupoužitelné komponenty UI použité v aplikaci. Tato složka může obsahovat podsložky, jako jsou data, display, feedback a input pro specifické typy komponent. Každá komponenta by měla být samostatná a znovupoužitelná, takže ji můžete použít v různých částech aplikace. Oddělením komponent UI od ostatních komponent ve složce modules je snazší udržovat konzistentní design a provádět změny v rozhraní, aniž by to ovlivnilo jiné části (obchodní logiku) kódové základny.

Rozhraní a závislosti

Můžete importovat kód jiných modulů z jakéhokoliv modulu kromě složky ui. Díky tomu zůstane jeho kód snadno testovatelný.

Interní

Každá část (hooky, stavy, …) modulu může mít složku internal, která obsahuje části používané pouze v rámci modulu.

Welcome

Core Concepts

Stránky

Moduly

Kontexty

GraphQL

Hooky

Stavy

Pomocné funkce

UI

Rozhraní a závislosti

Interní

​Stránky

​Moduly

​Kontexty

​GraphQL

​Hooky

​Stavy

​Pomocné funkce

​UI

​Rozhraní a závislosti

​Interní

Stránky

Moduly

Kontexty

GraphQL

Hooky

Stavy

Pomocné funkce

UI

Rozhraní a závislosti

Interní