Перейти к основному содержанию
Header
In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty. Следуя этому соглашению об архитектуре папок, легче находить файлы, связанные с конкретными функциями, и обеспечивать масштабируемость и поддерживаемость приложения. 
front
└───modules
│   └───module1
│   │   └───submodule1
│   └───module2
│   └───ui
│   │   └───display
│   │   └───inputs
│   │   │   └───buttons
│   │   └───...
└───pages
└───...

​
Pages

Включает компоненты высокого уровня, определенные маршрутами приложения. Они импортируют более низкоуровневые компоненты из папки модулей (подробности ниже).

​
Модули

Каждый модуль представляет собой функционал или группу функций, содержащий свои специфические компоненты, состояния и операционную логику. Все они должны следовать структуре ниже. Вы можете вложить модули в модули (называются подмодулями), и те же правила будут применяться. 
module1
  └───components
  │   └───component1
  │   └───component2
  └───constants
  └───contexts
  └───graphql
  │   └───fragments
  │   └───queries
  │   └───mutations
  └───hooks
  │   └───internal
  └───states
  │   └───selectors
  └───types
  └───utils

​
Контексты

Контекст — это способ передачи данных через дерево компонентов без необходимости передавать props вручную на каждом уровне. См. React Context для более подробной информации.

​
GraphQL

Включает фрагменты, запросы и мутации. См. GraphQL для более подробной информации.
  • Фрагменты
Фрагмент — это переиспользуемая часть запроса, которую можно использовать в разных местах. Используя фрагменты, легче избежать дублирования кода. См. GraphQL Fragments для более подробной информации.
  • Запросы
См. GraphQL Queries для более подробной информации.
  • Мутации
См. GraphQL Mutations для более подробной информации.

​
Хуки

См. Hooks для более подробной информации.

​
Состояния

Содержит логику управления состоянием. RecoilJS этим управляет.
  • Селекторы: См. RecoilJS Selectors для более подробной информации.
Встроенное управление состоянием в React все еще управляет состоянием внутри компонента.

​
Утилиты

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

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

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

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

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

​
Внутренний

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