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
5.7 KiB
Plaintext
115 lines
5.7 KiB
Plaintext
---
|
||
title: Архітектура папок
|
||
info: Детальний огляд нашої архітектури папок
|
||
image: Неможливо перекласти
|
||
---
|
||
|
||
<Frame>
|
||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||
</Frame>
|
||
|
||
У цьому посібнику ви вивчите деталі структури директорії проекту і те, як це сприяє організації та підтримуваності Twenty.
|
||
|
||
Дотримуючись цієї конвенції архітектури папок, легше знаходити файли, пов'язані зі специфічними функціями, та забезпечувати масштабованість і підтримуваність застосунку.
|
||
|
||
```
|
||
front
|
||
└───modules
|
||
│ └───module1
|
||
│ │ └───submodule1
|
||
│ └───module2
|
||
│ └───ui
|
||
│ │ └───display
|
||
│ │ └───inputs
|
||
│ │ │ └───buttons
|
||
│ │ └───...
|
||
└───pages
|
||
└───...
|
||
```
|
||
|
||
## Сторінки
|
||
|
||
Містить компоненти верхнього рівня, визначені маршрутами застосунку. Вони імпортують більш низькорівневі компоненти з папки модулів (докладніше нижче).
|
||
|
||
## Модулі
|
||
|
||
Кожен модуль представляє функцію або групу функцій, що складається із специфічних компонентів, станів і логіки роботи.
|
||
Вони всі повинні дотримуватися наведеної нижче структури. Ви можете вкладати модулі в модулі (відомі як підмодулі) і ті ж самі правила будуть застосовуватися.
|
||
|
||
```
|
||
module1
|
||
└───components
|
||
│ └───component1
|
||
│ └───component2
|
||
└───constants
|
||
└───contexts
|
||
└───graphql
|
||
│ └───fragments
|
||
│ └───queries
|
||
│ └───mutations
|
||
└───hooks
|
||
│ └───internal
|
||
└───states
|
||
│ └───selectors
|
||
└───types
|
||
└───utils
|
||
```
|
||
|
||
### Контексти
|
||
|
||
Контекст - це спосіб передачі даних через дерево компонентів без необхідності передавати реквізити вручну на кожному рівні.
|
||
|
||
Див. [React Контекст](https://react.dev/reference/react#context-hooks) для докладніших відомостей.
|
||
|
||
### GraphQL
|
||
|
||
Включає фрагменти, запити та мутації.
|
||
|
||
Див. [GraphQL](https://graphql.org/learn/) для докладніших відомостей.
|
||
|
||
- Фрагменти
|
||
|
||
Фрагмент - це повторно використовуваний шматок запиту, який можна використовувати в різних місцях. Використовуючи фрагменти, легше уникнути дублювання коду.
|
||
|
||
Див. [GraphQL Фрагменти](https://graphql.org/learn/queries/#fragments) для докладніших відомостей.
|
||
|
||
- Запити
|
||
|
||
Див. [GraphQL Запити](https://graphql.org/learn/queries/) для докладніших відомостей.
|
||
|
||
- Мутації
|
||
|
||
Див. [GraphQL Мутації](https://graphql.org/learn/queries/#mutations) для докладніших відомостей.
|
||
|
||
### Хуки
|
||
|
||
Див. [Хуки](https://react.dev/learn/reusing-logic-with-custom-hooks) для докладніших відомостей.
|
||
|
||
### States
|
||
|
||
Містить логіку управління станами. [RecoilJS](https://recoiljs.org) обробляє це.
|
||
|
||
- Селектори: Див. [RecoilJS Селектори](https://recoiljs.org/docs/basic-tutorial/selectors) для докладніших відомостей.
|
||
|
||
Вбудоване управління станом React все ще обробляє стани в межах компоненту.
|
||
|
||
### Утиліти
|
||
|
||
Повинні містити лише повторно використовувані чисті функції. Інакше створіть власні хуки в папці `хуки`.
|
||
|
||
## Інтерфейс та залежності
|
||
|
||
Містить усі повторно використовувані компоненти UI, які використовуються в застосунку.
|
||
|
||
Ця папка може містити підпапки, такі як `data`, `display`, `feedback` і `input` для специфічних типів компонентів. Кожен компонент повинен бути самодостатнім і повторно використовуваним, щоб ви могли використовувати його в різних частинах застосунку.
|
||
|
||
Відділяючи UI компоненти від інших компонентів у папці `modules`, легше підтримувати послідовний дизайн і вносити зміни до UI без впливу на інші частини (бізнес-логіка) кодової бази.
|
||
|
||
## Інтерфейс і залежності
|
||
|
||
Ви можете імпортувати код інших модулів з будь-якого модуля, за винятком папки `ui`. Це полегшить тестування коду.
|
||
|
||
### Internal
|
||
|
||
Each part (hooks, states, ...) of a module can have an `internal` folder, which contains parts that are just used within the module.
|