Hur är ett React Native-projekt strukturerat?

Question

Accepted Answer

Ett React Native-projekt har en struktur som kombinerar **JavaScript/TypeScript-kod** med **native iOS/Android-projekt** och konfiguration. Att förstå strukturen och nyckelfiler hjälper dig navigera och bygga React Native-appar.

## Viktiga delar av strukturen

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

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

## Organisera din kod

```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).
```

## Varför det är viktigt

Att förstå hur ett React Native-projekt är strukturerat är nödvändig praktisk kunskap för att navigera, bygga och organisera React Native-appar, så det är användbar grundläggande kunskap.

Att känna till **de viktiga delarna** — att **App.js/App.tsx är rotkomponenten** (startpunkten), din **JS/TS-kod finns i `src/`** (där du tillbringar största delen av tiden), **package.json** hanterar beroenden och skript (som alla JavaScript-projekt), och att **native `ios/` och `android/`-projekten** finns (för bare React Native, medan Expo hanterar dem) — är nödvändigt för att orientera dig i ett React Native-projekt, som kombinerar JavaScript-kod med native-projekt.

Att förstå **JavaScript-ekosystemet** är viktigt: React Native-projekt använder **package.json och npm/yarn** för beroenden (med det enorma npm-ekosystemet tillgängligt — en stor fördel), **Metro** (React Natives bundler), och Babel — vilket återspeglar att React Native-utveckling är JavaScript-utveckling med bekant verktyg, värdefullt för webbutvecklare.

Att förstå hur man **organiserar kod** (strukturerar `src/` i mappar efter funktion eller typ — komponenter, skärmar, navigering, tjänster, hooks, utils, store) återspeglar god praxis för underhållbara projekt när de växer.

Eftersom att arbeta med React Native kräver att navigera projektstrukturen (JS-kod plus native-projekt), hantera beroenden via package.json och npm, förstå bundlern, och organisera kod, och eftersom denna kunskap är nödvändig praktisk grund för all React Native-utveckling, är det värdefullt, grundläggande praktisk kunskap för att arbeta med React Native-projekt — de nyckelfiler, JavaScript-ekosystemet och kodorganisationen — nödvändig för att bygga och underhålla appar och en grundläggande kompetens som är särskilt tillgänglig för utvecklare som är bekanta med JavaScript/npm-ekosystemet.