8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
115 lines
3.8 KiB
Plaintext
115 lines
3.8 KiB
Plaintext
---
|
|
title: Architektura složek
|
|
info: Podrobný pohled na naši architekturu složek
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
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 vrcholové komponenty 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. You can nest modules within modules (referred to as submodules) and the same rules will apply.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Kontexty
|
|
|
|
Kontext je způsob, jakým předávat data skrz strom komponent, aniž by se musely ručně předávat rekvizity na každé úrovni.
|
|
|
|
Více podrobností naleznete v [React Context](https://react.dev/reference/react#context-hooks).
|
|
|
|
### GraphQL
|
|
|
|
Zahrnuje fragmenty, dotazy a mutace.
|
|
|
|
Více podrobností naleznete v [GraphQL](https://graphql.org/learn/).
|
|
|
|
- Fragmenty
|
|
|
|
Fragment je znovupoužitelný kus dotazu, který můžete použít na různých místech. By using fragments, it's easier to avoid duplicating code.
|
|
|
|
Více podrobností naleznete v [GraphQL Fragments](https://graphql.org/learn/queries/#fragments).
|
|
|
|
- Dotazy
|
|
|
|
Více podrobností naleznete v [GraphQL Queries](https://graphql.org/learn/queries/).
|
|
|
|
- Mutace
|
|
|
|
Více podrobností naleznete v [GraphQL Mutations](https://graphql.org/learn/queries/#mutations).
|
|
|
|
### Hooks
|
|
|
|
Více podrobností naleznete v [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks).
|
|
|
|
### Stavy
|
|
|
|
Obsahuje logiku správy stavů. To řeší [RecoilJS](https://recoiljs.org).
|
|
|
|
- Selektory: Více podrobností naleznete v [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors).
|
|
|
|
Vestavěná správa stavů v Reactu stále spravuje stav uvnitř komponenty.
|
|
|
|
### Utils
|
|
|
|
Měly by obsahovat pouze znovupoužitelné čisté funkce. Otherwise, create custom hooks in the `hooks` folder.
|
|
|
|
## 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`. Tímto způsobem zůstane jeho kód snadný na testování.
|
|
|
|
### Interní
|
|
|
|
Každá část (háčky, stavy, ...) modulu může mít složku `internal`, která obsahuje části používané pouze v rámci modulu.
|