كيف يتم هيكلة مشروع React Native؟

Question

Accepted Answer

يحتوي مشروع React Native على هيكل يجمع بين **كود JavaScript/TypeScript** و**مشاريع iOS/Android الأصلية** والتكوين. يساعد فهم الهيكل والملفات الرئيسية في التنقل وبناء تطبيقات React Native.

## الأجزاء الرئيسية للهيكل

```text
my-app/
  App.js / App.tsx       → the root component (app entry point)
  src/ (or app/)         → your JS/TS code (components, screens, etc.) — organize here
  package.json           → dependencies and scripts (npm/yarn) — like any JS project
  node_modules/          → installed npm dependencies
  ios/                   → the native iOS project (Xcode) — for bare RN
  android/               → the native Android project (Gradle) — for bare RN
  index.js               → registers the root component
  app.json / app.config  → app config (name, icon) — especially in Expo
  (Expo projects hide ios/android; managed by Expo)
```

## نظام JavaScript البيئي

```text
→ package.json → dependencies (React Native, navigation, libraries) + scripts
→ npm / yarn → install packages (npm install); the huge npm ecosystem is available
→ Metro → React Native's JavaScript bundler (bundles your JS for the app)
→ Babel → transpiles modern JS/JSX/TypeScript
```

## تنظيم الكود الخاص بك

```text
→ Organize src/ into folders (common):
  src/components/ (reusable UI), src/screens/ (screen components),
  src/navigation/, src/services/ (API), src/hooks/, src/utils/, src/store/ (state)
→ Keep code organized as the app grows (separation by feature or type).
```

## لماذا هذا مهم

فهم كيفية هيكلة مشروع React Native هو معرفة عملية ضرورية للتنقل وبناء وتنظيم تطبيقات React Native، لذا فهو معرفة أساسية مفيدة.

معرفة **الأجزاء الرئيسية** — أن **App.js/App.tsx هو المكون الجذر** (نقطة الدخول)، و**كود JS/TS الخاص بك يوجد في `src/`** (حيث تقضي معظم وقتك)، و**package.json** يدير التبعيات والنصوص (مثل أي مشروع JavaScript)، و**مشاريع iOS/ و android/ الأصلية** موجودة (بالنسبة لـ React Native البسيط، بينما Expo تديرها) — ضروري للتنقل في مشروع React Native، الذي يجمع بين كود JavaScript والمشاريع الأصلية.

فهم جانب **نظام JavaScript البيئي** مهم: تستخدم مشاريع React Native **package.json و npm/yarn** للتبعيات (مع توفر نظام npm الضخم — ميزة كبرى)، **Metro** (bundler React Native)، و Babel — مما يعكس أن تطوير React Native هو تطوير JavaScript باستخدام أدوات مألوفة، قيمة لمطوري الويب.

فهم كيفية **تنظيم الكود** (هيكلة `src/` في مجلدات حسب الميزة أو النوع — مكونات، شاشات، навigation، خدمات، hooks، utils، store) يعكس ممارسة جيدة للمشاريع القابلة للصيانة مع نموها.

بما أن العمل مع React Native يتطلب التنقل في هيكل المشروع (كود JS بالإضافة إلى المشاريع الأصلية)، وإدارة التبعيات عبر package.json و npm، وفهم bundler، وتنظيم الكود، وبما أن هذه المعرفة ضرورية كأساس عملي لأي تطوير React Native، فإن فهم كيفية هيكلة مشروع React Native — الملفات الرئيسية، ونظام JavaScript البيئي، وتنظيم الكود — معرفة عملية أساسية قيمة للعمل مع مشاريع React Native، ضرورية لبناء وصيانة التطبيقات وكفاءة أساسية يمكن الوصول إليها بسهولة خاصة لمطوري JavaScript/npm البيئي.