upstream-twenty/packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx

---
title: Архитектура папок
icon: folder-tree
info: Подробное рассмотрение нашей архитектуры папок
---

В этом руководстве вы изучите детали структуры каталога проекта и то, как она способствует организации и сопровождаемости 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
```

### Контексты

Контекст — это способ передачи данных через дерево компонентов без необходимости передавать props вручную на каждом уровне.

См. [React Context](https://react.dev/reference/react#context-hooks) для более подробной информации.

### GraphQL

Включает фрагменты, запросы и мутации.

См. [GraphQL](https://graphql.org/learn/) для более подробной информации.

* Фрагменты

Фрагмент — это переиспользуемая часть запроса, которую можно использовать в разных местах. Используя фрагменты, легче избежать дублирования кода.

См. [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) для более подробной информации.

* Запросы

См. [GraphQL Queries](https://graphql.org/learn/queries/) для более подробной информации.

* Мутации

См. [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) для более подробной информации.

### Хуки

См. [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) для более подробной информации.

### Состояния

Содержит логику управления состоянием. [Jotai](https://jotai.org) этим управляет.

* Селекторы: Производные атомы (с использованием `createAtomSelector`) вычисляют значения из других атомов и автоматически мемоизируются.

Встроенное управление состоянием в React все еще управляет состоянием внутри компонента.

### Утилиты

Должны содержать только переиспользуемые чистые функции. В противном случае создайте пользовательские хуки в папке `hooks`.

## Пользовательский интерфейс

Содержит все переиспользуемые компоненты пользовательского интерфейса, используемые в приложении.

Эта папка может содержать подкаталоги, такие как `data`, `display`, `feedback` и `input` для конкретных типов компонентов. Каждый компонент должен быть автономным и переиспользуемым, чтобы вы могли использовать его в разных частях приложения.

Разделяя компоненты пользовательского интерфейса от других компонентов в папке `modules`, легче поддерживать согласованность дизайна и вносить изменения в пользовательский интерфейс, не затрагивая другие части (бизнес-логику) кодовой базы.

## Интерфейс и зависимости

Вы можете импортировать код других модулей из любого модуля, кроме папки `ui`. Это позволит упростить тестирование его кода.

### Внутренний

Каждая часть (хуки, состояния, ...) модуля может иметь внутреннюю папку, содержащую части, которые используются только внутри модуля.