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
4.0 KiB
Plaintext
115 lines
4.0 KiB
Plaintext
---
|
|
title: Architektura folderów
|
|
info: Szczegółowe spojrzenie na naszą architekturę folderów
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.
|
|
|
|
Przy przestrzeganiu tej konwencji architektury folderów łatwiej jest znaleźć pliki związane z określonymi funkcjami i zapewnić, że aplikacja jest skalowalna i łatwa w utrzymaniu.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Strony
|
|
|
|
Zawiera komponenty najwyższego poziomu definiowane przez trasy aplikacji. Importują bardziej niskopoziomowe komponenty z folderu modułów (więcej szczegółów poniżej).
|
|
|
|
## Moduły
|
|
|
|
Każdy moduł reprezentuje funkcję lub grupę funkcji, obejmując swoje specyficzne komponenty, stany i logikę operacyjną.
|
|
Wszystkie powinny przestrzegać poniższej struktury. Możesz zagnieżdżać moduły w modułach (nazywane podmodułami) i te same zasady będą miały zastosowanie.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Konteksty
|
|
|
|
Kontekst to sposób przekazywania danych przez drzewo komponentów bez konieczności ręcznego przekazywania propów na każdym poziomie.
|
|
|
|
Zobacz [React Context](https://react.dev/reference/react#context-hooks) dla więcej szczegółów.
|
|
|
|
### GraphQL
|
|
|
|
Zawiera fragmenty, zapytania i mutacje.
|
|
|
|
Zobacz [GraphQL](https://graphql.org/learn/) dla więcej szczegółów.
|
|
|
|
- Fragmenty
|
|
|
|
A fragment is a reusable piece of a query, which you can use in different places. Dzięki używaniu fragmentów łatwiej jest unikać duplikowania kodu.
|
|
|
|
Zobacz [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) dla więcej szczegółów.
|
|
|
|
- Zapytania
|
|
|
|
Zobacz [GraphQL Queries](https://graphql.org/learn/queries/) dla więcej szczegółów.
|
|
|
|
- Mutacje
|
|
|
|
Zobacz [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) dla więcej szczegółów.
|
|
|
|
### Hooki
|
|
|
|
Zobacz [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) dla więcej szczegółów.
|
|
|
|
### Stany
|
|
|
|
Zawiera logikę zarządzania stanem. [RecoilJS](https://recoiljs.org) zajmuje się tym.
|
|
|
|
- Selektory: Zobacz [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) dla więcej szczegółów.
|
|
|
|
Wbudowane zarządzanie stanem w React wciąż obsługuje stan wewnątrz komponentu.
|
|
|
|
### Utils
|
|
|
|
Should just contain reusable pure functions. W przeciwnym razie utwórz niestandardowe hooki w folderze `hooks`.
|
|
|
|
## UI
|
|
|
|
Contains all the reusable UI components used in the application.
|
|
|
|
Ten folder może zawierać podfoldery, takie jak `data`, `display`, `feedback`, i `input` dla specyficznych typów komponentów. Każdy komponent powinien być samodzielny i wielokrotnie używalny, tak aby można go było używać w różnych częściach aplikacji.
|
|
|
|
Oddzielając komponenty interfejsu użytkownika od innych komponentów w folderze `modules`, łatwiej jest utrzymać spójny design i wprowadzać zmiany w interfejsie bez wpływania na inne części (logika biznesowa) kodu.
|
|
|
|
## Interfejs i zależności
|
|
|
|
Można importować kod innego modułu z dowolnego modułu z wyjątkiem folderu `ui`. To zapewni, że kod będzie łatwy do testowania.
|
|
|
|
### Wewnętrzne
|
|
|
|
Każda część (hooki, stany, ...) modułu może mieć folder `internal`, który zawiera części używane tylko wewnątrz modułu.
|