Kako je strukturiran React Native projekt?

Question

Accepted Answer

React Native projekt ima strukturu koja kombinira **JavaScript/TypeScript kod** sa **nativnim iOS/Android projektima** i konfiguracijom. Razumijevanje strukture i ključnih datoteka pomaže pri navigaciji i gradnji React Native aplikacija.

## Ključni dijelovi strukture

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

## Ekosistem JavaScript-a

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

## Organiziranje vašeg koda

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

## Zašto je to važno

Razumijevanje kako je React Native projekt strukturiran je neophodna praktična znanja za navigaciju, gradnju i organiziranje React Native aplikacija, pa je to korisno temeljno znanje.

Znanje **ključnih dijelova** — da je **App.js/App.tsx glavna komponenta** (ulazna točka), vaš **JS/TS kod se nalazi u `src/`** (gdje provodite većinu vremena), **package.json** upravlja ovisnostima i skriptama (kao u svakom JavaScript projektu), i **nativni `ios/` i `android/` projekti** postoje (za čist React Native, dok Expo upravlja njima) — nužno je znati kako se kretati oko React Native projekta, koji kombinira JavaScript kod s nativnim projektima.

Razumijevanje aspekta **ekosistema JavaScript-a** je važno: React Native projekti koriste **package.json i npm/yarn** za ovisnosti (s ogromnom dostupnom npm ekosfere — velika prednost), **Metro** (React Native-ov bundler), i Babel — što odražava da je React Native razvoj JavaScript razvoj s poznatim alatima, vrijedan za web razvojnjake.

Razumijevanje kako **organizirati kod** (strukturiranje `src/` u mape po značajki ili vrsti — komponente, zaslone, navigaciju, usluge, hooks, utilities, store) odražava dobre prakse za održavajuće projekte kako se skaliraju.

Budući da rad s React Native-om zahtijeva navigaciju strukturom projekta (JS kod plus nativni projekti), upravljanje ovisnostima putem package.json i npm-a, razumijevanje bundlera i organiziranje koda, i budući da je ovo znanje neophodna praktična osnova za bilo kakav React Native razvoj, razumijevanje kako je React Native projekt strukturiran — ključne datoteke, ekosistem JavaScript-a i organizacija koda — je vrijedna, temeljna praktična znanja za rad s React Native projektima, neophodna za gradnju i održavanje aplikacija i temeljna sposobnost koja je posebno pristupačna razvojnjacima koji su upoznati s ekosustavom JavaScript/npm.