# Claude Code ile React Native projeleri için pratik rehber

Adres: https://agentvera.dev/blog/claude-code-ile-react-native/ · Yayın: 2026-11-01

Claude Code’u React Native projesinde etkili kullanın; CLAUDE.md kurulumu, çalışma döngüsü, tipik görevler, test doğrulama ve paralel ajan ipuçları.

**Kısaca:**

- Claude Code, doğru CLAUDE.md ve küçük adımlarla React Native’de güvenle refactor, hata ayıklama ve test yazabilir.
- Metro, native modüller ve Jest gibi RN’e özgü noktaları CLAUDE.md’ye yazmak ajanın hata yapmasını azaltır.
- Paralel ajanlar için git worktree ve otomatik kod incelemesi kullanmak dosya çakışmalarını önler.

Claude Code’u bir React Native projesinde terminalden `claude` komutuyla başlatarak kod yazma, refactor, test ekleme ve hata ayıklama işlerini yaptırabilirsiniz. Ajan, proje kökündeki CLAUDE.md dosyasını okuyarak repo kurallarını ve React Native’e özgü yapılandırmayı baştan öğrenir. Bu rehberde Expo ve bare workflow ayrımından Metro, Jest ve native modül sınırlarına kadar pratik bir çalışma düzeni anlatılmıştır.

## Neden Claude Code React Native işine uygun?

Claude Code, terminalde çalıştığı için bir React Native projesinin gerçek araçlarını doğrudan kullanabilir: `npm test`, `npx tsc --noEmit`, `npm run lint`, `npx expo start` gibi komutları çalıştırır, çıktıları okur ve buna göre kodu düzenler. Çok dosyalı değişikliklerde bir ekranı, hook’ları, API katmanını ve testleri birlikte güncelleyebilir; bu da RN’de sık görülen parçalı refactor işlerini hızlandırır. Ajanın asıl gücü, proje kökündeki CLAUDE.md dosyasına yazdığınız bağlamı her turda hatırlamasıdır. Örneğin "bu proje Expo SDK 51 kullanıyor, native değişiklik yapma" gibi kurallar, ajanın yanlış yöne sapmasını engeller. Daha geniş bir başlangıç için [Claude Code](/ajanlar/claude-code/) sayfasına bakabilirsiniz.

Metro gibi uzun süre çalışan geliştirme sunucusunu ajanın yönetmesini beklemek yerine, siz Metro’yu ayrı bir terminalde tutun; ajan ise statik kontrol, test ve tek seferlik build komutlarını çalıştırsın. Bu sınır, hem daha hızlı iterasyon hem de daha az hata demektir.

## Projeyi ajan için hazırlama ve CLAUDE.md

Claude Code, her komuttan önce proje kökündeki CLAUDE.md dosyasını okur. React Native projesi için bu dosyaya şunlar yazılmalıdır:

- Kesin komutlar: kurulum, test, lint, typecheck, başlatma. Böylece ajan hangi paket yöneticisini ve betikleri kullanacağını bilir.
- Klasör yapısı: `app/`, `src/`, `components/`, `__tests__/` gibi yerler; hangi katman nerede durur.
- RN’e özgü kurallar: Expo mu bare mi, native klasörlere dokunma, StyleSheet kullanımı, Metro cache temizliği, dependency uyumluluğu.
- Test politikası: Jest runner, mock zorunlulukları, snapshot yasağı gibi tercihler.

Aşağıdaki örnek, Expo tabanlı bir proje için kısa ama etkili bir CLAUDE.md’dir:

```markdown
# React Native (Expo) projesi

## Komutlar
- Kurulum: `npm install`
- Başlat: `npx expo start`
- Test: `npm test -- --watchAll=false`
- Lint: `npm run lint`
- Typecheck: `npx tsc --noEmit`

## Klasörler
- `app/`: expo-router ekranları; yalnızca navigasyon dosyaları, iş mantığı içermez.
- `components/`: yeniden kullanılabilir UI bileşenleri; web'e özel API kullanma.
- `src/api/`: veri çekme ve mutasyon fonksiyonları.
- `src/hooks/`: özel hook'lar.
- `__tests__/`: her modülün yanında eş test dosyaları.

## React Native'e özel kurallar
- `ios/` ve `android/` klasörlerini elle düzenleme; native değişiklik gerekirse config plugin veya prebuild kullan.
- Yeni bağımlılık önermeden önce Expo SDK uyumluluğunu kontrol et.
- Stil için `StyleSheet.create` kullan; üçten fazla tekrarlanan inline style'ı ayıkla.
- Yeni alias ekledikten sonra Metro cache'i için `npx expo start -c` öner.
- Jest testlerinde native modülleri `jest.mock` ile izole et; snapshot yazma.
```

Bu dosyayı her takım üyesi güncel tutarsa ajan aynı bağlamla çalışır. Kurulum ve başlangıç akışı için [Claude Code nasıl kullanılır? Başlangıç rehberi](/blog/claude-code-nasil-kullanilir/) adresine göz atabilirsiniz.

## Çalışma döngüsü

Verimli bir döngü şöyle işler: önce ajan ile kapsamı netleştirin, ardından küçük adımlar halinde değişiklik isteyin. Her adımdan sonra ajanın çalıştırdığı test, lint veya typecheck çıktısını inceleyin; son olarak diff’i gözden geçirin. Kapsamı netleştirmek için plan modunu kullanabilirsiniz (bkz. [Claude Code plan modu: önce planla, sonra yaptır](/blog/claude-code-plan-modu/)). Ajan tek seferde büyük bir ekranı yeniden yazmak yerine önce hook’u, sonra bileşeni, en son testi güncellerse hataları izlemek kolaylaşır.

Aşağıdaki örnek prompt’lar tipik React Native görevlerini küçük adımlara böler:

- "Bu ekrandaki `FlatList` render sayısını azalt; `keyExtractor` ekle, `renderItem`'ı `useCallback` ile sarmala, gerekirse `getItemLayout` kullan. Sonra `npm test -- --watchAll=false` çalıştır."
- "React Navigation nested navigator için parametre listelerini güncelle; `npx tsc --noEmit` ile tip hatalarını sıfırla."
- "Şu hook için Jest testi yaz: başarılı yanıt, hata durumu ve yükleme durumunu kapsa; native modülü `jest.mock` ile izole et."
- "`npx expo-doctor` çalıştır ve çıkan uyarıları düzelt; yalnızca güvenli, geri alınabilir değişiklikler öner."
- "Son commit’teki değişiklikleri incele; `console.log` kalmış mı, `any` tipi kullanılmış mı, eksik `keyExtractor` var mı rapor et."

Her prompt sonrası ajanın önerdiği değişiklikleri okumadan kabul etmeyin; özellikle native klasörlere dokunan veya bağımlılık ekleyen diff’leri manuel inceleyin.

## Hangi görevlerde iyi, nerelerde dikkatli

Claude Code; TypeScript tiplerini düzeltmek, React Navigation yapılandırmasını güncellemek, hook’ları refactor etmek, Jest testleri yazmak, lint hatalarını temizlemek ve kullanılmayan bağımlılıkları saptamakta başarılıdır. Ayrıca bir native modül hatasının nedenini açıklamak ve çözüm yollarını sıralamakta iyidir.

Dikkat edilmesi gereken noktalar şunlardır:

- **Native modül sınırı:** Ajan `ios/` ve `android/` içindeki otomatik üretilmiş dosyaları değiştirmemelidir; yalnızca neyin değişmesi gerektiğini söyleyebilir.
- **Metro cache:** Yeni alias, babel eklentisi veya asset ekledikten sonra ajanın önerdiği "restart" adımını atlamayın.
- **Expo SDK uyumluluğu:** Ajan bazen güncel olmayan bir paket önerebilir; `npx expo install` kullanmasını isteyin.
- **Test kalitesi:** Ajanın yazdığı testler bazen her şeyi mock’layıp gerçek mantığı test etmeyebilir; testin asıl davranışı doğruladığından emin olun.

Aşağıdaki tablo sık karşılaşılan görevler için iyi prompt ve dikkat noktalarını özetler:

| Görev | İyi prompt örneği | Dikkat edilecek nokta |
|-------|-------------------|------------------------|
| `FlatList` performansı | "Bu listenin render süresini azalt; memoization ve `getItemLayout` ekle." | `keyExtractor` her zaman sabit olmalı, `renderItem` dışında fonksiyon üretme. |
| Jest testi | "Şu ekran için kullanıcı etkileşimini test et; `fireEvent` ile butona bas." | Native modülleri mock’lamazsan test çökebilir. |
| React Navigation tip güvenliği | "Param listesine yeni rota ekle, tüm `navigate` çağrılarını güncelle." | Nested navigatorlarda `CompositeScreenProps` gerekebilir. |
| Native hata ayıklama | "Bu iOS hata mesajını açıkla, olası nedenleri sırala; kod değiştirme." | Ajan native projeyi kurcalarsa prebuild sonrası değişiklikler kaybolur. |

## Test ve doğrulama

Ajanın ürettiği her değişikliği üç katmanda doğrulayın: birim testler, tip kontrolü ve Metro ile paketleme. Jest testlerini `npm test -- --watchAll=false` komutuyla çalıştırın; ajan testlerin geçtiğini göstermeden diff’i kabul etmeyin. Testleri yalnızca "geçiyor" diye değil, gerçek senaryoyu kapsıyor mu diye de okuyun.

TypeScript kontrolü için `npx tsc --noEmit` kullanın; özellikle React Navigation parametreleri ve `useRoute`/`useNavigation` tiplerinde hata çıkabilir. Lint için `npm run lint` çalıştırın. Son olarak Metro’nun paketi gerçekten derlediğini görmek için `npx expo export --platform ios` gibi bir komut tek seferlik bir doğrulama sağlar. Ajan bu komutların çıktısını okuyup kalan hataları düzeltebilir; bu döngüyü en az iki kez tekrarlayın.

Test eklerken `@testing-library/react-native` tercih edin, snapshot’lardan kaçının. Ajanın yazdığı testlerin native modül çağrılarını izole ettiğini kontrol edin; aksi halde CI’da geçen test yerelde çökebilir.

## Birden fazla ajanı React Native projesinde çalıştırma

React Native projesinde birden fazla Claude Code ajanını aynı anda çalıştırmak için AgentVera her ajanı kendi git worktree’sinde başlatabilir; böylece biri `src/api` katmanını, diğeri ekran bileşenlerini güncellerken dosya çakışması yaşanmaz. Ajanın turu bitince ikinci model otomatik kod incelemesi yapar ve bulguları file:line ile bağlar; bu, özellikle native modül sınırındaki hataları erken yakalar. Token bütçesi, ajanın uzun oturumlarda gereksiz yere projeyi genişletmesini önler; checkpoint’ler ise yanlış bir refactor’ü tek tıkla geri almayı sağlar. Paralel çalışma örnekleri için [Birden fazla Claude Code ajanını paralel çalıştırma](/blog/birden-fazla-claude-code-ajani/) sayfasına bakabilirsiniz.

## Sonuç

Claude Code, React Native projesinde iyi tanımlanmış bir CLAUDE.md ve disiplinli bir doğrulama döngüsüyle güvenilir bir yardımcıdır. Küçük adımlar atın, native değişiklikleri sınırlayın, testleri ve tip kontrolünü atlamayın. Paralel ajan gerektiğinde git worktree ve otomatik kod incelemesiyle çakışmaları yönetin.

## Sık sorulanlar

**Claude Code bir React Native projesine nasıl bağlanır?** Proje kökünde terminal açıp claude komutunu çalıştırmanız yeterlidir. Ajan, CLAUDE.md dosyasını okuyarak proje komutlarını ve kurallarını öğrenir; ardından isteklerinizi doğal dilde yazabilirsiniz.

**CLAUDE.md dosyasına React Native için hangi bilgiler yazılmalı?** Kullanılan komutlar (test, lint, typecheck, start), klasör yapısı, Expo/bare workflow ayrımı ve native klasörlere müdahale sınırları yazılmalıdır. Ayrıca test politikası ve Metro cache gibi RN’e özgü kurallar eklemek ajanın doğruluğunu artırır.

**Claude Code React Native’de native modüllerle çalışabilir mi?** Ajan, ios/ ve android/ klasörlerindeki kodu okuyabilir ve hata mesajlarını açıklayabilir, ancak doğrudan native kod değiştirmesi genellikle önerilmez. Bunun yerine gerekli değişikliği tarif etmesini isteyin ve siz config plugin veya prebuild üzerinden uygulayın.

**Birden fazla Claude Code ajanını aynı React Native projesinde kullanabilir miyim?** Evet, her ajanı ayrı bir git worktree içinde çalıştırmak dosya çakışmalarını önler. AgentVera gibi bir masaüstü uygulaması bu paralel çalışmayı otomatik kod incelemesi ve checkpoint’lerle yönetebilir.

---

**AgentVera hakkında.** AgentVera, Solviera Teknoloji tarafından geliştirilen macOS, Windows ve Linux masaüstü uygulamasıdır. 18 yapay zeka kodlama ajanını (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) proje bazında, gerçek terminallerde ve kullanıcının kendi CLI kurulum ve girişleriyle yan yana çalıştırır. Ücretsiz planda sınırsız ajan vardır. İndir: https://agentvera.dev/indir/ · Fiyatlar: https://agentvera.dev/fiyatlar/