Table of Contents

لماذا هيكل محلي نموذجي للرد الفعل هو أساسي للقابلية للتقسيم

فبناء تطبيق وطني ذي أثر يتطلّب ببراعة أكثر من مجرد كتابة مدونة نظيفة، حيث إن تطبيقك ينمو في السمات، وحجم الفريق، وقاعدة المستعملين، يمكن أن يصبح ترتيب الملفات الأولية إما عقبة أو حفازاً على سرعة التنمية المستدامة، بل إن هيكلاً نموذجياً يقسم إلى وحدات مستقلة ذاتية الاحتواء، يعالج مباشرةً النزاعات التي تنشأ بحجم متعمد، حتى في منتصف المدة.

  • ] In dependent development] - يمكن أن تعمل الأفرقة على وحدات منفصلة دون أن تخطو على أصابع قدم كل منها الآخر.
  • Reusability across screens and apps] - Shared components, hooks, and facilities live in dedicated places.
  • Isolated testing] - Each module can be tested in isolation, reducing the blast radius of regressions.
  • Gradual adoption of new patterns] — Refactoring or migrating a single module is far less risky than rewriting the whole app.
  • ]] Clear mental models] – New engineers onboard faster when they can reason about the app’s parts without reading the entire codebase.

وفي هذه المادة، سنسير من خلال هيكل مشروع مجرب الإنتاج، ونشرح مسؤولية كل دليل، ونناقش الأنماط التي تبقي تطبيقك الأصلي على رد الفعل قابلا للاستمرار بينما ينمو بعد بضعة شاشات.

المبادئ الأساسية لتركيب موحّد للنشاط

وقبل أن ننطلق من مخطط الملف، من المفيد وضع بعض المبادئ التوجيهية، وينبغي لهذه المبادئ أن تسترشد بكل قرار تتخذه بشأن مكان وضع ملف وكيفية كشفه عن وظائفه.

الفصل بين الشواغل

وينبغي أن يكون لكل وحدة وظيفة واحدة محددة جيداً، فعلى سبيل المثال، ينبغي أن تقتصر على معالجة المكالمات الهاتفية وتحويل البيانات المتعلقة بنقاط النهاية ذات الصلة بالمستعملين؛ وينبغي ألا تجعل وحدة التنفيذ الموحد على الإطلاق، وبالمثل، ينبغي أن يقتصر عنصر على معالجة العرض والتصميم، وليس جلب البيانات من الخادم، وهذا الفصل يجعل من الثلاثي أن يتبادل بين عناصر تنفيذ الخدمات أو يعيد تصميم عنصر دون وجود آثار جانبية.

القدرات

وينبغي أن تعرض النماذج حدا أدنى من المساحة العامة، وينبغي أن تظل وظائف المساعدة الداخلية، أو العناصر الفرعية، أو أنماط إدارة الدولة ذات الصلة داخل وحدة نموذجية، خاصة (مثلا، بوضعها في ملف فرعي أو تسميتها باتفاقية للتأكيد)، مما يقلل من الانقلابات ويتيح لك تغيير التفاصيل الداخلية دون كسر المستهلكين.

الإعالة المتوقعة

فبدلاً من الاعتماد على الواردات العالمية أو الضمنية (مثل " الاستيراد فقط من أي مكان " )، يشجع الهيكل النموذجي على الحقن الصريح للأعال - سواء من خلال " " ، أو متجر " ريدكس " ، أو معايير عمل بسيطة، مما يجعل من السهل اختبار هذا الرمز والسبب بشأنه.

الاتساق على الاتفاقية

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

هيكل المشروع الموصى به:

وقد جرت تجربة الهيكل التالي في تطبيقات الإنتاج الأصلي المتفاعلة التي تتراوح بين حفنة من الشاشات ووحدات من ثلاثة نماذج خاصة بالرقم القياسي، وهي تتوازن مع القدرة على المقياس، وسنفترض قاعدة شفرة من النوع Script - إذا استخدمتم الجاسوسية، تطبق المبادئ نفسها.

my-react-native-app/
├── assets/
│ ├── fonts/
│ ├── images/
│ └── lottie/
├── src/
│ ├── components/ # Reusable UI primitives
│ ├── screens/ # Top-level route components
│ ├── navigation/ # Navigation configuration & linking
│ ├── services/ # API clients, data-fetching logic
│ ├── state/ # Global state (Redux, Zustand, etc.)
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Pure utility functions & constants
│ ├── types/ # TypeScript interfaces & enums
│ ├── config/ # Environment variables, feature flags
│ └── theme/ # Colors, typography, spacing tokens
├── tests/ # Integration & end-to-end tests
├── app.json
├── package.json
└── tsconfig.json

فلنبحث هدف كل دليل وما هو موجود في الداخل.

- مبانٍ مُعاد استخدامها للمبنى UI

ويحتوي هذا الملف على عناصر غير مرتبطة بشاشة أو سمة محددة، ومن الأمثلة على ذلك ، ، ، ، ، ، [FLT]، [يجعل] المكوّنات العامة غير واضحة:

الخطأ المشترك هو إغراق كل القطع المحتملة من اليورانيوم إلى مطوّر مسطح ، بالنظر إلى نمو المكتبة، النظر في تجميع المكونات ذات الصلة في الملفات الفرعية:

  • - نظارات عالمية حقا.
  • - حقول المدخلات، صناديق التفتيش، الأزرار الإذاعية.
  • - مكونات تصوير البيانات.

وينبغي أن يكون لكل عنصر ملف اختبار خاص به (مثلاً، [(FLT:17]) وربما قصة قصة قصة قصة قصة قصة عن التراجع البصري.

- العناصر الرفيعة المستوى في الصفحة

(ب) الشاشات هي المكونات التي ترسم مباشرة على مسارات في كومة الملاحة الخاصة بك، وتتكون كل شاشة من مزيج من المكونات القابلة لإعادة الاستخدام والعناصر الخاصة التي تعيش داخل ملف الشاشة (أو دليل مشترك ) وينبغي أن تكون الشاشة ذاتها رقيقة: بل تُصدر البيانات، وتُدير خدمات الشاشة.

اتفاقية تسمية: ، ، . وإذا كان لديك العديد من الشاشات، يمكنك تجميعها حسب المجال:

  • - LoginScreen, RegisterScreen, ForgotPasswordsScreen
  • - MainScreen, AnalyticsScreen, ReportsScreen

- Routing & Deep Linking

هنا قمت بتجهيز كومة الملاحة و الطبق و الدرج وربط التشكيلات و إبقاء الملاحة منفصلة عن الشاشات والعناصر يسمح لك بتغيير تدفق الملاحة بالكامل (مثلاً، تبادل ملاح للخراطيم من أجل ملاح للعارضات) دون لمس أي رمز للشاشة

  • - الملاح الأعلى مستوى الذي يقرر أي مجموعة من المسافرين (auth vs main).
  • - حانة التابوت السفلية
  • - الجسم الخاص بتشكيل الربط العميق لإحياء الملاحة.
  • - نهب إلى حاوية الملاحة لاستخدامها في المكونات الخارجية (مثلا في الخدمات).

إذا كان تطبيقك يدعم الربط العميق من الإخطارات بالدفع أو الروابط العالمية، هذا الملف هو المصدر الوحيد للحقيقة لرسم خرائط الطريق.

- API calls & Business Logic

وتشمل الخدمات جميع الاتصالات بالنظم الخارجية: تطبيقات نظم المعلومات الإدارية الخاصة، وقاعدة البيانات، والتخزين المحلي، وتسجيل الإخطارات، وما إلى ذلك.

  • - لوج، لوج، لوجست، ظبي.
  • - الموكب، تحديث المعمل، تحميل Avatar.
  • - تعقب، تحديد الهوية.

وينبغي ألا تستورد الخدمات رد الفعل أو أي مدونة للمرافق، بيد أنها تستطيع استخدام وظائف المساعدة من وأنواع من ، مما يجعلها قابلة للاختبار باختبارات وحدة نقية ويسهل عليها التلاعب في اختبارات التكامل.

وفيما يتعلق بجلب البيانات، يفضل العديد من الأفرقة الآن استخدام " رد الفعل " أو " SWR " ، التي تدير التنظيف وإعادة فتح الخلفية، وفي هذه الحالات، قد تضع الخطافات في الداخل ، ولكن المكالمات الأساسية التي يطلقها مركز البحوث والتدريب لا تزال تعيش في .

- الإدارة العالمية للدولة

هذا الدليل يحمل حلاً عالمياً مختاراً من الدولة: متجر (ريدوكس) أو شرائح (ريدوكس) أو متاجر (زيك) أو ذرات (ركور)

  • - configureStore, root reducer.
  • - البرمجيات المتوسطة (مثل قطع الأشجار، والمحللين).

إذا استخدمتِ (ريك كونتيكست) ضعي مقدميكِ وخطاف السياق هنا، إبقاء الولاية العالمية معزولة يمنع الخلط بين المنطق المتعمد

- هوكسات العهود

:: تحديد منطق الدولة الذي يمكن استخدامه في العواطف التقليدية، أمثلة على ذلك:

  • [التتبع ما إذا كان التطبيق في المعالم/المناطق الخلفية]
  • [الصفوف في الولايات والمكالمات في الخدمة]

وينبغي أن تعيش الهوكات التي تُعنى بشاشة واحدة في موقع مشترك مع تلك الشاشة، وليس في الملف العالمي .

- المرافق المحظورة والمواثيق

ويتضمن هذا الملف وظائف أو ثباتات نقية أو عديمة الجنسية ولا تعتمد على رد الفعل أو أي دولة من الدول التي تقدم طلبات، على سبيل المثال:

  • (قاعدة بيانات مؤشرات الأداء، قيم التوقيت، مفاتيح العلم الرئيسية)

حافظ على هذه الملفات الصغيرة والمتعمدة، فتجنباً لملفات " مغسلة المطبخ " التي تحتوي على مرافق غير متصلة، وإذا وجدت أكثر من حفنة من المساعدين، فإخترقت ملفات منفصلة.

- تعريفات النوع المكشوف

تُركزُ واجهتكَ الكاتبةِ، نوع المستعارات، وضِعَة هنا.

  • - قوائم البارامترات لكل ملاح.
  • - مستعمل، مُنتج، مُستعمل، أنواع المُستقصات.
  • - الظرف العام للاستجابة في إطار تطبيقات الحد الأدنى، أنواع المهرج.
  • - أنواع محددة من العلامات التجارية.

واستخدام مصدر واحد للحقيقة في الأنواع يحول دون التناقضات ويجعل من إعادة التصنيع أسهل بكثير عندما تتغير الكيماويات الخلفية.

- البيئة والعلامات المؤثرة

وكثيراً ما تحتاج التطبيقات الأصلية إلى تشكيلة مختلفة لكل بيئة (التنمية، والتصنيع، والإنتاج) وتبقي هذا المنطق هنا، وكثيراً ما تستخدم أو متغيرات البيئة.

  • - خريطة لأعلام البوولية للتمكين من سمات التنمية/القابلة للتأثر بها.

- رموز تصميم

(ب) تُصدر ملفات مواضيعية ثابتة للألوان، والطباعة، والمباعدة، والظل، ونقاط التفتيش، وتستخدم أفرقة كثيرة مكتبة مثل أو تستهلك هذه الرموز، وتوفر، فيما يتعلق بإمكانية الوصول، ملفاً لموضوع الضوء والظلام على حد سواء.

  • - الموضوع الرئيسي غير المقصود.

- الموارد الثابتة

تخزين جميع الملفات الثابتة المستوردة بشروط أو في وقت البناء، ويشمل ذلك النوافذ والصور والصور المتحركة وملفات لوتي وسوون وما شابه ذلك، ويساعد التكوين حسب نوع الموارد على حلها بشكل صحيح.

- اختبارات التكامل والإنبعاثات

While unit tests should live next to the code they test (e.g. ), integration and endto-link test files belong here. Use Detox or Appium for E2E, and create test profiles for different user trips. Keep test data and fixtures in sub-folders for reusability.

تنفيذ الهيكل العملي

الآن بعد أن تفهم النظرية، هنا نهج عملي خطوة خطوة نحو إنشاء هذا الهيكل في مشروع جديد أو قائم من مشاريع الاسترداد.

الخطوة 1: بدء شجرة الفولدر

(ج) إنشاء هيكل الدليل باستخدام محطتك الطرفية أو المعهد الدولي لبحوث الاقتصاد، وللاطلاع على مشروع جديد، استخدم أولاً، ثم حذف التخلف وإعادة دمجه كنقطة دخول تستورد .

الخطوة 2: وضع نظام الملاحة في مرحلة مبكرة

Install React Navigation] and create a in . Define your initial screen routes. Even if you have only one screen today, the navigation skeleton will accommodate growth.

الخطوة 3: إنشاء الموضوع و القنصل

قبل كتابة أي مكونات، وضع رموز تصميمك في والثبات في ، وهذا يضمن لكل مطور استخدام قيم متسقة اعتبارا من اليوم الأول.

الخطوة 4: بناء عنصر واحد قابل للاستعمال

اختر عنصر بسيط مثل ووضعه في . أكتب ملفه الاختباري، وصادره واستخدامه في شاشات المسكنات، وهذا يؤكد أن خط أنابيب البناء الخاص بك يعمل مع هيكل الملف.

الخطوة 5: إنشاء وظيفة خدمة

إذا كان تطبيقك يتصل بمؤشر للاجراءات الاختراعية، فإنه ينشئ في التي تشكل ] أو مع معترضات القاعدة، ثم تضاف خدمة محددة (مثلاً، ).

الخطوة 6: إضافة إدارة الدولة

Decide on a state tool (Redux Toolkit, Zustand, etc.) and set it up in . Connect it to the app in .

الخطوة 7: القانون الساري على المفاعلات

إذا كنت تهاجر مشروعاً قائماً، تحرك ملفات دليل واحد في وقت واحد، بدءاً بأقوى الأجزاء استقراراً (الموضوع، والثبات، والخدمات)، وتستخدم أدوات مثل وتبقي اختباراتك خضراء، ومن الأفضل أن تمضي أسبوعاً في إعادة التصنيع بدلاً من العيش مع قاعدة شفرة مزودة بأشهر.

النظر في الطلبات المقدمة من جهات كبيرة

ومع نمو فريقك وقاعدة البيانات إلى ما بعد 20-30 مطوراً، قد يحتاج الهيكل الأساسي القائم على الطبقة إلى زيادة، وهنا الأنماط المستخدمة في تطبيقات محلية رد الفعل الكبيرة.

عقيدات مزودة بقاعدة (المولودون المميزون)

بدلاً من فصلك عن طريق الدور التقني (الوحدة، الخدمة، الشاشة)، تجمع كل ملف يتعلق بمجال عمل في ملف واحد رفيع المستوى.

src/
 features/
 auth/
 components/
 screens/
 services/
 state/
 hooks/
 types/
 profile/
 components/
 screens/
 services/
 state/
 hooks/
 types/
 shared/
 components/
 utils/
 hooks/

ويبقي هذا النهج كل سمة كاملة في متناولها ويسهل تفسيرها، ويصلح الأمر عندما تكون السمات مستقلة حقا ويمكن أن تتطور من قبل أفرقة منفصلة، والجانب السلبي هو أنه يمكن أن يؤدي إلى بعض الازدواجية في العناصر العامة إذا لم يكن منضبطاً بشأن نقل أجزاء مشتركة إلى .

Monorepos with Shared Libraries

إذا حافظت على عدة أجهزة أصلية رد الفعل (المزدحمة، الإسمن، العلام الأبيض)، اعتبر أن الاحتكار الذي يدار مع نكس أو توربوربو، وأن المكان المشترك بين عناصر السكان الأصليين، والصنابير، والمرافق في مكتبة التي يمكن أن تستهلك، وهذا يُعزز الهيكل النموذجي عبر الأجهزة ويُنفّذ مصدر واحد للحقيقة فيما يتعلق بنظام التصاميم الرئيسي.

Code Splitting & Lazy Loading

لا يدعم شركة (ريدك نين) الواردات الدينامية خارج الصندوق لكن المكتبات مثل ودعم هيرميز يمكن أن تساعد في ذلك، فهيّز شاشاتكم بحيث تكون كل شاشة وحدة منفصلة محميّة، وهذا يقلل حجم الحزمة الأولية ويحسن وقت البدء في تطبيقات كبيرة.

أفضل الممارسات في مجال الحفاظ على طول المدة

حتى أفضل هيكل للملفات سيفشل بدون عادات مُنضبطة، وسيدمج هذه الممارسات في سير عملك اليومي.

  • Enforce with linting] – Use rules like ] to prevent accidental crossmodule imports, e.g., a service should never import a component. Use for predictable function signatures.
  • طقوس اختبارات إلى جانب الرمز ] - ينبغي أن يكون لكل ملف نموذجي ] [ملف فرعي أو ملف محصور معاً، وخدمات الاختبار في عزلة، وعوامة اختبار مع ، وشاشات اختبار مع متجر للجرائم.
  • Keep dependencies explicit] – Avoid relying on implicit global providers. If a screen needs the auth state, pass it via props or through a context that is clearly documented. This makes refactoring easier later.
  • Usese TypeScript strict mode] – Set ] in tsconfig. This catches null —safety issues and encourages proper typing of module boundaries.
  • Review the health of the structure quarterly] - As features are added, you may notice folders growing too large. Budget time to divide a single component folder into sub —folders or extract a new feature module.
  • Document your conventions] – Create a that explains the folder structure, naming conventions, and import rules. New team members will appreciate it.

For further reading, the React Native structure documentation] provides guidance on threading, bridge, and Turbo Modules — while not directly about project structure, understanding the underlying platform helps make more modularity decisions. Also check the ]Redux Toolkit documentation for struring state

خاتمة

إن هيكل مشروع " رد الفعل " النموذجي ليس من قبيل الرصاص الفضي، بل يتطلب بذل جهد مدروس للتصميم والاستمرار، ولكن الدفع هائل: سرعة الركب، وإعادة التصنيع الأكثر أمانا، وقلة النزاعات الدمج، والقدرة على توسيع نطاق تطبيقك دون إعادة كتابة هذا المشروع من الخدش، وابتداء من التصميم الأساسي الذي ورد وصفه أعلاه، وإنفاذ الفصل بين الشواغل مع الانحراف والاختبار، والتطور نحو وضع أنماط للتعبير عن احتياجاتكم في المستقبل.