Claude Code ile React Native projeleri için pratik rehber

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

# 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 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). 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:

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