---
title: 資料夾架構
info: 深入了解我們的資料夾架構
image: /images/user-guide/fields/field.png
---
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 上下文](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/)。
- Mutations
更多詳情請參閱 [GraphQL 變更](https://graphql.org/learn/queries/#mutations)。
### 鉤子
詳情請參閱 [鉤子](https://react.dev/learn/reusing-logic-with-custom-hooks)。
### 狀態
包含狀態管理邏輯。 [RecoilJS](https://recoiljs.org) 負責。
- 選擇器: 更多詳情請參閱 [RecoilJS 選擇器](https://recoiljs.org/docs/basic-tutorial/selectors)。
React 的內建狀態管理仍然在組件內部處理狀態。
### 實用工具
應只包含可重用的純函數。 否則，請在 `hooks` 資料夾中創建自定義鉤子。
## UI
包含應用程序中使用的所有可重用用戶介面組件。
此資料夾可以包含子資料夾，例如 `data`、`display`、`feedback` 和 `input` 針對特定組件類型。 每個組件應該是自成一體且可重用的，以便在應用程序的不同部分重複使用。
透過將用戶介面組件與模組資料夾中的其他組件分開，可以更容易維持一致的設計，且在不影響代碼庫其他部分（業務邏輯）的情況下進行用戶介面變更。
## 介面和相依
您可以從任何模組導入其他模組代碼，但 `ui` 資料夾除外。 這將使其代碼易於測試。
### 內部
每個部分（鉤子、狀態等） 模組可以有一個 `internal` 資料夾，其中包含僅在模組內使用的部分。