Codex, React Native projesinde terminalde codex komutuyla açılır ve proje kökündeki AGENTS.md dosyasını okuyarak görevleri çalıştırır. Doğru AGENTS.md, küçük adımlı plan ve zorunlu test döngüsüyle bileşen, navigasyon, test ve native modül işlerinde hız kazandırır. Bu rehberde Expo ve bare workflow farklarını, Metro, Jest ve React Navigation özelinde pratik kullanımı anlatıyorum. Temel Codex kurulumu için Codex sayfasına bakabilirsiniz.
Codex React Native işleri için neden uygun
Codex, repo içindeki TypeScript, JSX, platform dosyaları ve yapılandırmayı okuyup değiştirebilir; terminal komutlarını çalıştırabildiği için test, lint ve tip kontrolünü kendisi yürütür. React Native projelerinde en çok şu noktalarda işe yarar: React Navigation ekran ve navigatör ekleme, Jest testleri yazma, platform farklarını .ios.tsx / .android.tsx dosyalarıyla yönetme, API katmanını yeniden düzenleme. Metro hatalarını ve stack trace’leri yorumlamada iyidir; eksik import, yanlış bileşen adı veya native modül sorunlarını hızlı tespit edebilir. Örneğin, Stack.Navigator’a yeni bir screen ekle dediğinizde doğru import’ları ve TypeScript tiplerini üretir; test dosyasını da güncelleyebilir. Ancak native tarafın yeniden derlenmesini gerektiren işlerde ajanın dokunduğu her dosyayı siz de incelemelisiniz.
Projeyi ajana hazırlama ve AGENTS.md
AGENTS.md dosyasını proje köküne koyun; Codex her görev öncesi burayı okur. React Native projesi için kısa ama net bir dosya, ajanın doğru komutları çalıştırmasını ve platform kurallarını bilmesini sağlar. Bağlam mühendisliği yaklaşımıyla ilgili detaylara Bağlam mühendisliği: yapay zeka kodlama ajanları rehberi sayfasından ulaşabilirsiniz.
# AGENTS.md
## Komutlar
- Kurulum: npm install
- Geliştirme (Expo): npx expo start
- Geliştirme (bare iOS): npx react-native run-ios
- Geliştirme (bare Android): npx react-native run-android
- Test: npm test -- --watchAll=false
- Lint: npm run lint
- Tip kontrolü: npx tsc --noEmit
## Klasör kuralları
- src/components: yeniden kullanılabilir bileşenler
- src/screens: React Navigation ekranları
- src/navigation: navigatör tanımları
- src/api: servis ve fetch/axios katmanı
- src/theme: renk, boşluk ve tipografi
- __tests__: test dosyaları, *.test.tsx
## React Native kuralları
- Platform farklarını Platform.OS ile yönet; mümkünse .ios.tsx / .android.tsx kullan.
- Native modül eklerken iOS için cd ios && pod install, Android için Gradle senkronizasyonu gerekir.
- Renk, boşluk ve tipografiyi src/theme içinden import et; sabit değer yazma.
- Animasyonlarda useEffect temizliği yap; native driver kullan.
- Metro önbelleği sorunlarında önce npx expo start -c veya npm start -- --reset-cache dene.Bu dosyada yer alan komutlar hem sizin hem ajanın kullanacağı tek doğruluk kaynağı olur. Testlerde --watchAll=false yazmazsanız ajan interaktif modda takılabilir; bu yüzden mutlaka belirtin. Ayrıca app.json, babel.config.js, metro.config.js gibi yapılandırma dosyalarını değiştirme yetkisini sınırlayın. Dosyayı kısa tutun; komutlar değiştikçe güncelleyin.
Çalışma döngüsü: plan, küçük adımlar, test ve diff
Her görevi doğrudan kodlatarak başlamayın. Önce Codex’e plan yaptırın: hangi dosyalar değişecek, hangi komutlar çalışacak, risk nedir? Planı onayladıktan sonra tek bir mantıklı değişiklik isteyin. Ajan değişikliği tamamlayınca npm test -- --watchAll=false, npm run lint ve npx tsc --noEmit komutlarını çalıştırmasını ya da sizin çalıştırmanızı sağlayın. Ardından git diff ile değişiklikleri satır satır inceleyin. Hata varsa çıktıyı yapıştırıp düzeltmesini isteyin. Bu döngü, özellikle native modül ve navigasyon değişikliklerinde hataları erken yakalar. Promptlarda dosya yolu ve beklenen davranış ne kadar net olursa, ajan o kadar az varsayım yapar. Ajan plan ürettiğinde ‘Sadece bu üç dosyayı değiştir, native modüle dokunma’ gibi sınırlar koyun.
Örnek promptlar:
- Login ekranından ana sayfaya React Navigation ile stack geçişi ekle; mevcut ekranları bozma, tip hatalarını düzelt.
- ProductCard bileşeni için Jest ve React Native Testing Library ile test yaz; mock data kullan.
- Tarih formatını Platform.OS ile Android ve iOS için ayır; .android.tsx ve .ios.tsx dosyalarını güncelle.
- Metro ‘Unable to resolve module’ hatası veriyor; AGENTS.md’deki komutlara göre önce reset-cache dene, sonra import zincirini kontrol et.
- Animasyon başlatan koda useEffect cleanup ekle ve native driver kullan.
Codex’in iyi yaptığı işler ve React Native tuzakları
Codex, saf JavaScript/TypeScript katmanında oldukça başarılıdır: ekran ekleme, navigatör düzenleme, API istemcisi yazma, bileşen parçalama, test kapsamı artırma. Platform farklarını Platform.OS veya ayrı dosyalarla yönetirken de genellikle doğru yapı kurar. Buna karşılık native modül ekleme, iOS Podfile veya Android Gradle dosyalarını değiştirme, Info.plist ve AndroidManifest.xml güncelleme işlerinde ajanı yakından izleyin. pod install adımını atlayabilir, Gradle senkronizasyonunu unutabilir veya yanlış sırada çalıştırabilir. Expo projelerinde config plugin yerine app.json’a elle alan eklemek isteyebilir; hangi yöntemin uygun olduğunu prompt içinde belirtin. Android minSdkVersion, iOS deploymentTarget, Hermes veya New Architecture ayarları gibi derleme yapılandırmalarında ajanın önerisini mutlaka diff’te inceleyin. Fast Refresh’in yeterli olduğunu varsayıp native değişikliklerde tam yeniden derleme yapmadan geçmesine izin vermeyin. npx expo prebuild sonrası oluşan native klasörleri ajanın düzenlemesine izin vermeyin; onun yerine config plugin veya app.json değişikliği isteyin. Android’de react-native-reanimated gibi kütüphanelerde babel plugin eklemek gerekebilir; ajan bu adımı atlayabilir. iOS’ta use_frameworks! veya RCT_NEW_ARCH_ENABLED gibi pod ayarlarını değiştirirken dikkatli olun.
React Native’de Codex ile test ve doğrulama
Test komutları AGENTS.md’de net biçimde yer almalı. Codex’e ‘testleri çalıştır, çıktıyı yorumla, hataları düzelt’ diyebilirsiniz. Jest, React Native Testing Library ve tip kontrolü ajanın ilk savunma hattıdır. Aşağıdaki tablo, her ajan görevinden sonra uygulamanız gereken temel kontrolleri özetler.
| Kontrol | Komut | Ne beklenir |
|---|---|---|
| Tip kontrolü | npx tsc --noEmit | Tip hatası sıfır olmalı |
| Lint | npm run lint | Kural ihlali olmamalı |
| Test | npm test -- --watchAll=false | Tüm testler geçmeli |
| Metro başlangıç | npx expo start veya npm start | Metro sorunsuz açılmalı |
Simülatör ve gerçek cihaz testlerini Codex yapamaz; siz çalıştırıp ekran görüntüsü veya Metro logunu yapıştırdığınızda yorumlayabilir. Native modül değişikliklerinde yalnızca Fast Refresh’e güvenmeyin; tam temiz derleme için npx expo run:ios veya npx react-native run-ios komutlarını çalıştırın. Böylece pod ve Gradle hataları erken görünür. Jest snapshot testlerini güncellerken ajan -u kullanmak isteyebilir; her snapshot değişikliğini diff’te inceleyin. Test yazarken React Native Testing Library ile fireEvent yerine userEvent kullanımı gibi ayrıntıları prompt içinde belirtin.
Birden fazla ajanı tek React Native projesinde çalıştırma
React Native projesinde biri iOS native tarafı, diğeri Android native tarafı, üçüncüsü test yazımı üzerinde çalışabilir. AgentVera, her ajanın gerçek komut satırı aracını kendi terminal panelinde çalıştırır; git worktree sayesinde dosyalar birbirinin üzerine yazmaz. Ajan bitince ikinci model kod incelemesi yapar ve bulguları file:line olarak gösterir; bu, native config hatalarını yakalamak için önemlidir. Checkpoint’ler yanlış bir pod veya Gradle değişikliğini tek tıkla geri almayı sağlar. Token bütçeleri, uzun Metro ve test döngülerinde kullanımı sınırlar. Daha fazlası için AgentVera nasıl kullanılır: ilk proje, ajanlar ve ızgara sayfasına bakabilirsiniz.
Sonuç
Codex, React Native projesinde en iyi sonucu net bir AGENTS.md, küçük adımlı plan ve her adımda zorunlu doğrulamayla verir. Native katmanı her zaman simülatör veya cihazda test edin; ajanı hızlandırıcı olarak kullanın, tek onaylayıcı olarak değil. Komutları, klasör kurallarını ve platform uyarılarını güncel tutarsanız Codex ile React Native geliştirme döngüsü belirgin biçimde kısalır.