React Native پروجیکٹ کی ساخت کیسی ہوتی ہے؟

Question

Accepted Answer

ایک React Native پروجیکٹ میں **JavaScript/TypeScript کوڈ** کو **native iOS/Android پروجیکٹس** اور configuration کے ساتھ ملایا جاتا ہے۔ ساخت اور اہم فائلوں کو سمجھنا React Native ایپلیکیشنز کو navigate اور بنانے میں مدد دیتا ہے۔

## ساخت کے اہم حصے

```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 ecosystem

```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 ایپلیکیشنز کو navigate، بنانے اور منظم کرنے کے لیے ضروری عملی علم ہے، لہذا یہ مفید بنیادی علم ہے۔

**اہم حصوں** کو جاننا — کہ **App.js/App.tsx روٹ component** ہے (entry point)، آپ کا **JS/TS کوڈ `src/` میں رہتا ہے** (جہاں آپ زیادہ وقت گزارتے ہیں)، **package.json** dependencies اور scripts کو منیج کرتا ہے (کسی بھی JavaScript پروجیکٹ کی طرح)، اور **native `ios/` اور `android/` پروجیکٹس** موجود ہیں (bare React Native کے لیے، جبکہ Expo انہیں منیج کرتا ہے) — React Native پروجیکٹ میں اپنا راستہ تلاش کرنے کے لیے ضروری ہے، جو JavaScript کوڈ کو native پروجیکٹس کے ساتھ جوڑتا ہے۔

**JavaScript ecosystem** کو سمجھنا اہم ہے: React Native پروجیکٹس **package.json اور npm/yarn** استعمال کرتے ہیں dependencies کے لیے (بہت بڑے npm ecosystem کے ساتھ — ایک بڑا فائدہ)، **Metro** (React Native کا bundler)، اور Babel — یہ ظاہر کرتا ہے کہ React Native development JavaScript development ہے familiar tooling کے ساتھ، web developers کے لیے قیمتی۔

کوڈ کو **منظم کرنے** کا طریقہ سمجھنا (`src/` کو folders میں structure کریں feature یا type کے لحاظ سے — components، screens، navigation، services، hooks، utils، store) بڑھتے ہوئے منظم پروجیکٹس کے لیے اچھی practice ہے۔

چونکہ React Native کے ساتھ کام کرنے کے لیے پروجیکٹ کی ساخت کو navigate کرنا ضروری ہے (JS کوڈ اور native پروجیکٹس)، package.json کے ذریعے dependencies کو منیج کرنا، bundler کو سمجھنا، اور کوڈ کو منظم کرنا، اور چونکہ یہ علم کسی بھی React Native development کے لیے ضروری عملی بنیاد ہے، React Native پروجیکٹ کی ساخت کو سمجھنا — اہم فائلیں، JavaScript ecosystem، اور کوڈ کی تنظیم — React Native پروجیکٹس کے ساتھ کام کرنے کے لیے قیمتی، بنیادی عملی علم ہے، ایپلیکیشنز بنانے اور برقرار رکھنے کے لیے ضروری اور ایک بنیادی صلاحیت جو خاص طور پر JavaScript/npm ecosystem سے واقف developers کے لیے accessible ہے۔