---
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&nbsp;Контекст](https://react.dev/reference/react#context-hooks) для докладніших відомостей.

### GraphQL

Включає фрагменти, запити та мутації.

Див. [GraphQL](https://graphql.org/learn/) для докладніших відомостей.

- Фрагменти

Фрагмент - це повторно використовуваний шматок запиту, який можна використовувати в різних місцях. Використовуючи фрагменти, легше уникнути дублювання коду.

Див. [GraphQL&nbsp;Фрагменти](https://graphql.org/learn/queries/#fragments) для докладніших відомостей.

- Запити

Див. [GraphQL&nbsp;Запити](https://graphql.org/learn/queries/) для докладніших відомостей.

- Мутації

Див. [GraphQL&nbsp;Мутації](https://graphql.org/learn/queries/#mutations) для докладніших відомостей.

### Хуки

Див. [Хуки](https://react.dev/learn/reusing-logic-with-custom-hooks) для докладніших відомостей.

### States

Містить логіку управління станами. [RecoilJS](https://recoiljs.org) обробляє це.

- Селектори: Див. [RecoilJS&nbsp;Селектори](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.