React Native ਪ੍ਰੋਜੈਕਟ ਦੀ ਬਣਤਰ ਕਿਵੇਂ ਹੁੰਦੀ ਹੈ?

Question

Accepted Answer

React Native ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ **JavaScript/TypeScript ਕੋਡ** ਅਤੇ **native iOS/Android ਪ੍ਰੋਜੈਕਟਾਂ** ਨਾਲ ਮਿਲ ਕੇ ਇੱਕ ਬਣਤਰ ਹੁੰਦੀ ਹੈ ਅਤੇ configuration ਹੁੰਦੀ ਹੈ। ਬਣਤਰ ਅਤੇ ਮੁੱਖ ਫਾਈਲਾਂ ਨੂੰ ਸਮਝਣਾ React Native apps ਨੂੰ navigate ਅਤੇ build ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ।

## ਬਣਤਰ ਦੇ ਮੁੱਖ ਹਿੱਸੇ

```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 apps ਨੂੰ navigate, build, ਅਤੇ organize ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ practical ਜਾਣਕਾਰੀ ਹੈ, ਇਸ ਲਈ ਇਹ ਉਪਯੋਗੀ foundational ਜਾਣਕਾਰੀ ਹੈ।

**ਮੁੱਖ ਹਿੱਸਿਆਂ** ਨੂੰ ਜਾਣਨਾ ਜ਼ਰੂਰੀ ਹੈ — ਕਿ **App.js/App.tsx root component** ਹੈ (entry point), ਤੁਹਾਡਾ **JS/TS ਕੋਡ `src/` ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ** (ਜਿੱਥੇ ਤੁਸੀਂ ਜ਼ਿਆਦਾਤਰ ਸਮਾਂ ਲਗਾਉਂਦੇ ਹੋ), **package.json** dependencies ਅਤੇ scripts ਦਾ ਪ੍ਰਬੰਧ ਕਰਦਾ ਹੈ (ਜਿਵੇਂ ਕਿਸੇ ਵੀ JavaScript ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ), ਅਤੇ **native `ios/` ਅਤੇ `android/` ਪ੍ਰੋਜੈਕਟਾਂ** ਮੌਜੂਦ ਹਨ (bare React Native ਲਈ, ਜਦਕਿ Expo ਉਹਨਾਂ ਦਾ ਪ੍ਰਬੰਧ ਕਰਦਾ ਹੈ) — ਇਹ React Native ਪ੍ਰੋਜੈਕਟ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਆਪਣਾ ਰਾਸਤਾ ਖੋਜਣ ਲਈ ਜ਼ਰੂਰੀ ਹੈ, ਜੋ JavaScript ਕੋਡ ਨਾਲ native ਪ੍ਰੋਜੈਕਟਾਂ ਨੂੰ ਮਿਲਾਉਂਦਾ ਹੈ।

**JavaScript ਈਕੋਸਿਸਟਮ** ਦੇ ਪਹਿਲੂ ਨੂੰ ਸਮਝਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ: React Native ਪ੍ਰੋਜੈਕਟਾਂ **package.json ਅਤੇ npm/yarn** ਦੀ ਵਰਤੋਂ dependencies ਲਈ ਕਰਦੀਆਂ ਹਨ (ਵਿਸ਼ਾਲ npm ਈਕੋਸਿਸਟਮ ਉਪਲਬਧ ਹੈ — ਇੱਕ ਮੁੱਖ ਫਾਇਦਾ), **Metro** (React Native ਦੇ bundler), ਅਤੇ Babel — ਇਹ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ React Native development JavaScript development ਹੈ ਜੋ familiar tooling ਨਾਲ ਹੁੰਦੀ ਹੈ, ਜੋ web developers ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ।

ਕੋਡ ਨੂੰ **organize** ਕਰਨ ਦੇ ਤਰੀਕੇ ਨੂੰ ਸਮਝਣਾ (`src/` ਨੂੰ feature ਜਾਂ type ਦੁਆਰਾ ਫੋਲਡਰਾਂ ਵਿੱਚ ਢਾਂਚਾ ਬਣਾਉਣਾ — components, screens, navigation, services, hooks, utils, store) maintainable ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਚੰਗੀ practice ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਜਦ ਉਹ ਵਿਸ਼ਾਲ ਹੋਣੀਆਂ ਹਨ।

React Native ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਪ੍ਰੋਜੈਕਟ ਬਣਤਰ ਨੂੰ navigate ਕਰਨਾ (JS ਕੋਡ ਨਾਲ native ਪ੍ਰੋਜੈਕਟਾਂ), package.json ਦੁਆਰਾ dependencies ਦਾ ਪ੍ਰਬੰਧ ਕਰਨਾ, bundler ਨੂੰ ਸਮਝਣਾ, ਅਤੇ ਕੋਡ ਨੂੰ organize ਕਰਨਾ ਜ਼ਰੂਰੀ ਹੈ, ਅਤੇ ਕਿਉਂਕਿ ਇਹ ਜਾਣਕਾਰੀ ਕਿਸੇ ਵੀ React Native development ਲਈ ਜ਼ਰੂਰੀ practical ਬੁਨਿਆਦ ਹੈ, React Native ਪ੍ਰੋਜੈਕਟ ਦੀ ਬਣਤਰ ਨੂੰ ਸਮਝਣਾ — ਮੁੱਖ ਫਾਈਲਾਂ, JavaScript ਈਕੋਸਿਸਟਮ, ਅਤੇ ਕੋਡ organization — React Native ਪ੍ਰੋਜੈਕਟਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਮਹੱਤਵਪੂਰਨ, foundational practical ਜਾਣਕਾਰੀ ਹੈ, ਜੋ apps ਨੂੰ build ਅਤੇ maintain ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ ਅਤੇ ਇੱਕ basic competency ਹੈ ਜੋ ਖਾਸ ਕਰ ਕੇ JavaScript/npm ਈਕੋਸਿਸਟਮ ਨਾਲ familiar developers ਲਈ ਪਹੁੰਚਯੋਗ ਹੈ।