React Native projesi nasıl yapılandırılmıştır?

Question

Accepted Answer

Bir React Native projesi **JavaScript/TypeScript kodu** ile **native iOS/Android projeleri** ve konfigürasyonu birleştiren bir yapıya sahiptir. Yapıyı ve anahtar dosyaları anlamak, React Native uygulamalarında gezinmeye ve geliştirmeye yardımcı olur.

## Yapının temel parçaları

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

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

## Kodunuzu organize etme

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

## Neden önemli

Bir React Native projesinin nasıl yapılandırıldığını anlamak, React Native uygulamalarında gezinme, geliştirme ve organize etme için gerekli pratik bilgidir, bu nedenle yararlı temel bilgidir.

**Temel parçaları** bilmek — **App.js/App.tsx'in kök bileşen** (giriş noktası) olduğu, **JS/TS kodunuzun `src/` içinde bulunduğu** (zamanınızın çoğunu geçirdiğiniz yer), **package.json** bağımlılıkları ve betikleri yönettiği (herhangi bir JavaScript projesi gibi) ve **native `ios/` ve `android/` projeleri** bulunduğu (bare React Native için, Expo ise bunları yönetirken) — bir React Native projesinde dolaşmak için gereklidir, çünkü JavaScript koduyla native projeleri birleştirir.

**JavaScript ekosistemini** anlama önemlidir: React Native projeleri **package.json ve npm/yarn** kullanır bağımlılıklar için (muazzam npm ekosistemi kullanılabilir — büyük bir avantaj), **Metro** (React Native'in paketleyicisi) ve Babel — React Native geliştirmesinin tanıdık araçlarla JavaScript geliştirmesi olduğunu yansıtır, web geliştiricileri için değerlidir.

**Kodu organize etmeyi** anlamak (`src/` klasörünü özellik veya türe göre yapılandırma — bileşenler, ekranlar, navigasyon, hizmetler, hooks, yardımcı fonksiyonlar, store) proje büyüdükçe sürdürülebilir projeler için iyi uygulamayı yansıtır.

React Native ile çalışmak proje yapısında gezinmeyi (JS kodu artı native projeler) gerektirdiğinden, package.json aracılığıyla bağımlılıkları yönetmeyi, paketleyiciyi anlamayı ve kodu organize etmeyi, ve bu bilgi herhangi bir React Native geliştirmesi için gerekli pratik temel olduğundan, bir React Native projesinin nasıl yapılandırıldığını anlamak — temel dosyalar, JavaScript ekosistemi ve kod organizasyonu — React Native projeleriyle çalışmak için değerli, temel pratik bilgidir, uygulamaları geliştirmek ve sürdürmek için gereklidir ve özellikle JavaScript/npm ekosistemiyle tanıdık geliştiriciler için erişilebilir temel bir yetkinliktir.