111 lines
5.1 KiB
Plaintext
111 lines
5.1 KiB
Plaintext
---
|
|
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
|
|
```
|
|
|
|
### السياقات
|
|
|
|
السياق هو وسيلة لتمرير البيانات عبر شجرة المكوّنات دون الحاجة إلى تمرير الخصائص يدويًا في كل مستوى.
|
|
|
|
انظر [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) لمزيد من التفاصيل.
|
|
|
|
### الحالات
|
|
|
|
تشمل منطق إدارة الحالة. [Jotai](https://jotai.org) يتولّى ذلك.
|
|
|
|
* المحددات: الذرات المشتقة (باستخدام `createAtomSelector`) تحسب قيماً من ذرات أخرى وتخزن نتائجها في الذاكرة مؤقتاً تلقائياً.
|
|
|
|
لا تزال إدارة الحالة المدمجة في React تتولّى الحالة داخل المكوّن.
|
|
|
|
### الأدوات
|
|
|
|
يجب أن تحتوي فقط على دوال نقية قابلة لإعادة الاستخدام. بخلاف ذلك، أنشئ خطافات مخصصة في مجلد `hooks`.
|
|
|
|
## واجهة المستخدم
|
|
|
|
تحتوي على جميع مكونات واجهة المستخدم القابلة لإعادة الاستخدام المستخدمة في التطبيق.
|
|
|
|
يمكن أن يحتوي هذا المجلد على مجلّدات فرعية، مثل `data`، `display`، `feedback`، و `input` لأنواع معينة من المكوّنات. يجب أن يكون كل مكون مستقلًا وقابلًا لإعادة الاستخدام، حتى تتمكن من استخدامه في أجزاء مختلفة من التطبيق.
|
|
|
|
من خلال فصل مكونات واجهة المستخدم عن المكونات الأخرى في مجلد `modules`، يسهل الحفاظ على تصميم متسق وإجراء تغييرات على واجهة المستخدم دون التأثير على الأجزاء الأخرى (منطق الأعمال) من قاعدة الشيفرة.
|
|
|
|
## الواجهة والتبعيات
|
|
|
|
يمكنك استيراد شيفرة وحدة أخرى من أي وحدة باستثناء مجلد `ui`. سيجعل هذا شيفرته سهلة الاختبار.
|
|
|
|
### داخلي
|
|
|
|
كل جزء (خطافات، حالات، ...) من الممكن أن يحتوي جزء من الوحدة على مجلد `internal`، والذي يحتوي على الأجزاء التي تُستخدم فقط داخل الوحدة.
|