---
title: هيكلية المجلدات
info: نظرة مفصلة على هيكل المجلدات الخاصة بنا
image: /images/user-guide/fields/field.png
---

<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 Context](https://react.dev/reference/react#context-hooks) لمزيد من التفاصيل.

### جراف كيو إل

تشمل الأجزاء، الاستعلامات والتحويرات.

انظر [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) لمزيد من التفاصيل.

### الحالات

تشمل منطق إدارة الحالة. [RecoilJS](https://recoiljs.org) يتولى هذا.

- المحددات: انظر [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) لمزيد من التفاصيل.

لا يزال إدارة الحالة المدمجة في React تتولى الحالة داخل مكون.

### الأدوات

يجب أن تحتوي فقط على وظائف نقية قابلة لإعادة الاستخدام. بخلاف ذلك، أنشئ خطافات مخصصة في مجلد `hooks`.

## واجهة المستخدم

تحتوي على جميع مكونات واجهة المستخدم القابلة لإعادة الاستخدام المستخدمة في التطبيق.

يمكن أن يحتوي هذا المجلد على أدلة فرعية، مثل `data`، `display`، `feedback`، و `input` لأنواع معينة من المكونات. يجب أن يكون كل مكون مستقلًا وقابلًا لإعادة الاستخدام، حتى تتمكن من استخدامه في أجزاء مختلفة من التطبيق.

من خلال فصل مكونات واجهة المستخدم عن المكونات الأخرى في مجلد `modules`، يسهل الحفاظ على تصميم متسق وإجراء تغييرات على واجهة المستخدم دون التأثير على الأجزاء الأخرى (منطق الأعمال) من قاعدة الشيفرة.

## الواجهة والاعتمادات

يمكنك استيراد شيفرة وحدة أخرى من أي وحدة باستثناء مجلد `ui`. سيجعل هذا شيفرته سهلة الاختبار.

### داخلي

كل جزء (خطافات، حالات، ...) من الممكن أن يحتوي جزء من الوحدة على مجلد `internal`، والذي يحتوي على الأجزاء التي تُستخدم فقط داخل الوحدة.
