React Native Ortam Kurulumu: Mobil Uygulama Geliştirmeye Başlangıç (2025)

Mobil uygulama geliştirme dünyası, özellikle son yıllarda inanılmaz bir ivme kazandı. İster kendi projenizi hayata geçirmek isteyin, ister sektörde bu alana yönelmek, doğru başlangıcı yapmak her zaman en kritik adımdır. İşte bu noktada, tek bir kod tabanıyla hem Android hem de iOS için uygulama geliştirmeye olanak tanıyan React Native gibi teknolojiler devreye giriyor. Ben de yazılım serüvenimde farklı dilleri ve teknolojileri denedim ve React Native’in sunduğu esneklik beni her zaman etkilemiştir.

Bu yazımda, React Native ile mobil uygulama geliştirmeye başlamak için ihtiyacınız olan geliştirme ortamını adım adım nasıl kuracağınızı kendi tecrübelerimden yola çıkarak anlatacağım. 2025 yılı itibarıyla güncel kalacak bu rehber sayesinde, karşılaşabileceğiniz olası sorunlara karşı da hazırlıklı olacak ve ilk projenizi hayata geçirmek için sağlam bir temel oluşturacaksınız.

React Native İçin Gerekli Ön Hazırlıklar

Herhangi bir yazılım geliştirme ortamı kurmaya başlarken, öncelikle sisteminizin gerekli gereksinimleri karşıladığından emin olmak önemlidir. React Native de sorunsuz bir geliştirme deneyimi için bazı temel donanım ve yazılım ihtiyaçlarına sahip. Bu adımları doğru atmak, ileride yaşanabilecek pek çok baş ağrısını engeller, tecrübeyle sabittir.

İhtiyacınız olacak temel şeyler şunlar:

• İşletim Sistemi: Hem Windows (tercihen Windows 11) hem de macOS (Mojave veya üzeri) destekleniyor. iOS uygulaması geliştirmek istiyorsanız mutlaka macOS’e ihtiyacınız olacak.
• Donanım: Modern bir çok çekirdekli işlemci (i5 veya üzeri önerilir), minimum 8GB RAM (ancak 16GB veya üzeri çok daha akıcı bir deneyim sunar, bu yatırımın karşılığını alırsınız) ve kurulumlar ve projeler için en az 10GB boş disk alanı.
• Node.js ve npm: React Native’in kalbinde JavaScript yattığı için Node.js ve paket yöneticisi npm (veya Yarn) olmazsa olmazdır. Bunların güncel ve stabil versiyonlarının kurulu olması gerekir.
• Java Development Kit (JDK): Özellikle Android geliştirme için JDK 8 veya üzeri gereklidir.
• Android Studio: Android emülatörleri ve gerekli araçlar için Android Studio kurulumu şart.
• Xcode: Eğer iOS hedefliyorsanız, macOS üzerine Xcode’u kurmalısınız. Bu, iOS simülatörlerini ve derleme araçlarını içerir.

Bu ön gereksinimleri tamamladığınızda, React Native dünyasına adım atmaya hazırsınız demektir.

Kurulum Yöntemleri: Expo mu, CLI mı?

React Native ortam kurulumu için temelde iki farklı yaklaşım bulunuyor: Expo Go ve React Native CLI (Command Line Interface). Hangi yöntemi seçeceğiniz, deneyim seviyenize ve projenizin ihtiyaçlarına göre değişir.

Eğer mobil uygulama geliştirme dünyasına yeni adım atıyorsanız veya projeniz çok özelleştirilmiş native kod gerektirmiyorsa, Expo Go Quickstart en kolay başlangıç noktasıdır. Expo, React Native etrafında kurulmuş geniş bir araç setidir. Sanal cihaz veya gerçek cihaz üzerinde uygulamanızı anında çalıştırmanızı sağlar, native modüllerle uğraşmanıza gerek kalmaz. Hatta hiçbir kurulum yapmadan tarayıcı üzerinden deneme yapmak için Snack platformunu kullanabilirsiniz.

Expo CLI ile proje oluşturmak ve çalıştırmak oldukça basittir:

npm install -g expo-cli

npx create-expo-app HarikaProjem

cd HarikaProjem

npx expo start

Diğer yandan, eğer daha önce mobil geliştirme deneyiminiz varsa, projenizde native cihaz özelliklerine (kamera, sensörler vb.) derinlemesine erişim veya özel native modüller kullanma ihtiyacınız varsa, React Native CLI Quickstart size daha fazla kontrol sağlar. Ancak bu yol, Android Studio ve Xcode gibi platforma özel IDE’lerin kurulumunu gerektirir ve kurulum süreci Expo’ya göre biraz daha zahmetlidir ve zaman alabilir.

Unutmamak gerekir ki, Windows veya Linux kullanıyorsanız iOS uygulaması geliştirmek için bir Mac cihaza erişiminiz olmalıdır. CLI kurulumu, özellikle platforma özel detaylarla uğraşmayı gerektirir.

Windows Üzerine React Native CLI Kurulumu (Detaylı Adımlar)

Referans aldığımız metin, özellikle Windows üzerindeki CLI kurulumuna detaylıca değinmiş. Ben de kendi Windows deneyimlerimden yola çıkarak bu adımları biraz daha açmak istiyorum. Bu kısım, başlangıçta biraz göz korkutucu görünebilir ama adımları takip edince aslında o kadar da karmaşık olmadığını göreceksiniz.

Windows’ta CLI ile React Native ortamını kurmak için Chocolatey (bir paket yöneticisi), Node.js, JDK, Python, Android Studio ve React Native CLI’a ihtiyacınız olacak. Bunların kurulumu şu adımlarla yapılabilir:

1. Chocolatey Kurulumu: Yönetici olarak Komut İstemi’ni açın ve şu komutu çalıştırın:

@"%SystemRoot%System32WindowsPowerShellv1.0powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "[System.Net.ServicePointManager]::SecurityProtocol = 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))"

2. Node.js, JDK ve Python Kurulumu (Chocolatey ile): Chocolatey kurulduktan sonra işler biraz kolaylaşıyor. Aşağıdaki komutları çalıştırın:

choco install nodejs

choco install openjdk

choco install python

Kurulumları node -v, npm -v, java -version, python –version komutlarıyla doğrulayabilirsiniz.

3. React Native CLI Kurulumu (npx ile): Artık global react-native-cli kurmak yerine, npx kullanarak güncel versiyonu çalıştırmak en iyi yöntemdir. Bu, versiyon çakışmalarını engeller. Eğer daha önce global CLI kurduysanız, npm uninstall -g react-native-cli @react-native-community/cli komutuyla kaldırın.

4. Android Studio Kurulumu: Android Studio’yu resmi web sitesinden indirin ve kurun. Kurulum sırasında veya sonrasında SDK Manager’ı açarak şu bileşenlerin seçili olduğundan emin olun:

• Android SDK
• Android SDK Platformu (Genellikle en son stabil sürüm, örneğin Android 13 veya 14 gibi, ve referans alınan metindeki gibi 33.0.0 Build Tools)
• Android Sanal Cihaz (AVD)
• Performans (Intel ® HAXM veya AMD/Hyper-V için ilgili hızlandırıcı)

SDK Manager’da “Show Package Details” seçeneğini işaretleyerek detayları görebilir ve Android SDK Platform 33 ile 33.0.0 Build Tools gibi spesifik versiyonları seçebilirsiniz.

5. Ortam Değişkenlerini Ayarlama: Bu adım çok önemlidir ve genelde sorun yaşanan kısımdır. React Native, Android SDK’nın nerede olduğunu bilmek için ANDROID_HOME değişkenine ihtiyaç duyar. Ayrıca platform-tools klasörünü de PATH’e eklemeliyiz.

Adımlar:

1. Windows Arama çubuğuna “ortam değişkenleri” yazın ve “Sistem ortam değişkenlerini düzenleyin” seçeneğini açın.
2. Açılan pencerede “Ortam Değişkenleri…” butonuna tıklayın.
3. “Kullanıcı değişkenleri” veya “Sistem değişkenleri” altında (genellikle kullanıcı değişkenleri tercih edilir) “Yeni…” butonuna tıklayarak ANDROID_HOME adında yeni bir değişken oluşturun.
4. Bu değişkene Android SDK’nızın yolunu atayın. Varsayılan yol genellikle %LOCALAPPDATA%AndroidSdk şeklindedir. SDK yolunuzu Android Studio’da Ayarlar -> Appearance & Behavior -> System Settings -> Android SDK altında görebilirsiniz.
5. PATH değişkenini bulun (kullanıcı veya sistem değişkenlerinde) ve “Düzenle…” butonuna tıklayın.
6. “Yeni” butonuna tıklayarak %LOCALAPPDATA%AndroidSdkplatform-tools yolunu ekleyin.
7. Tüm pencereleri “Tamam” diyerek kapatın.
8. Değişikliklerin etkili olması için yeni bir Komut İstemi veya PowerShell penceresi açın. PowerShell’de Get-ChildItem -Path Env: komutunu çalıştırarak ANDROID_HOME değişkeninin eklenip eklenmediğini kontrol edebilirsiniz.

Bu adımları tamamladığınızda Windows üzerindeki React Native CLI ortamınız büyük ölçüde hazır demektir.

İlk “Merhaba Dünya” Uygulamamızı Kodlama

Kurulum tamamlandıktan sonra, ilk React Native uygulamanızı oluşturmak oldukça heyecan verici bir adımdır. CLI kullanıyorsanız, yeni bir proje oluşturmak için aşağıdaki komutu kullanabilirsiniz:

npx react-native@latest init IlkReactProjem

Bu komut, IlkReactProjem adında yeni bir klasör oluşturacak ve gerekli tüm dosya ve klasörleri otomatik olarak ayarlayacaktır. Proje klasörüne girdikten sonra (cd IlkReactProjem), ana uygulama dosyamız App.js’i düzenleyebiliriz. Referans metindeki örneği biraz daha açıklayarak kullanalım:

import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.greetingText}>Merhaba, React Native Dünyası!</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF', // Açık gri arka plan
  },
  greetingText: {
    fontSize: 24, // Biraz daha büyük font
    textAlign: 'center',
    margin: 20, // Kenarlardan biraz boşluk
    color: '#333333', // Koyu gri metin rengi
  },
});

export default App;

Yukarıdaki kod, temel React ve React Native bileşenlerini kullanır. SafeAreaView, içeriğin cihazın güvenli alanında (çentikler, durum çubukları vb. altına saklanmayan alan) görünmesini sağlar. Text bileşeni ekranda metin göstermek için kullanılır. StyleSheet.create ise, bileşenlere stil vermek için kullanılan bir yöntemdir, CSS’e benzer ama JavaScript içindedir.

Proje klasörünüzde ayrıca uygulamanın giriş noktası olan index.js, Android’e özel dosyaların bulunduğu android/, iOS’e özel dosyaların bulunduğu ios/, tüm bağımlılıkların yer aldığı node_modules/ ve proje ayarları ile bağımlılık listesinin tutulduğu package.json gibi dosyalar bulunur.

Uygulamayı çalıştırmak için:

1. Ayrı bir terminalde proje klasöründeyken Metro Bundler’ı başlatın:

   npm start

   veya

   yarn start

   Metro, kodunuzu derleyip cihaz veya emülatörün anlayacağı hale getirir.
2. Başka bir terminalde proje klasöründeyken uygulamayı hedef platformda başlatın:

   npx react-native run-android

   veya

   npx react-native run-ios

   (iOS için Mac ve Xcode gereklidir)

Eğer her şeyi doğru yaptıysanız, kısa süre içinde emülatörünüzde veya cihazınızda “Merhaba, React Native Dünyası!” yazısını görmelisiniz.

Hata Ayıklama (Debugging) İpuçları

Yazılım geliştirmenin kaçınılmaz bir parçası da hata ayıklamadır. React Native, bu süreçte hayatınızı kolaylaştıracak birkaç güçlü araç sunar. Kendi projelerimde en sık kullandığım yöntemler şunlardır:

• Geliştirici Menüsü: Cihazı sallayarak (veya emülatörde Ctrl+M ile Android’de) açılan menü. Buradan “Debug JS Remotely” seçeneğini seçerek JavaScript kodunuzu Chrome geliştirici araçları üzerinden debug edebilirsiniz.
• Chrome Geliştirici Araçları: “Debug JS Remotely” seçeneğini seçtikten sonra Chrome’u açıp chrome://inspect adresine giderek uygulamanızın JavaScript’ini inceleyebilir, console loglarını görebilir, ağ isteklerini takip edebilirsiniz.
• console.log(): En basit ama en etkili yöntemlerden biridir. Kodunuzun belirli yerlerine console.log(‘Değişken değeri:’, degisken) gibi ifadeler ekleyerek akışı takip edebilir ve değişken değerlerini kontrol edebilirsiniz.
• React DevTools: Bileşen hiyerarşinizi görsel olarak incelemek ve bileşenlerin state/props değerlerini görmek için harika bir araçtır. npm install –save-dev react-devtools ile kurup, npx react-devtools ile başlatabilirsiniz.
• Kırmızı Hata Ekranları: React Native, bir hata oluştuğunda size detaylı bilgi veren kırmızı bir ekran gösterir. Hata mesajını ve stack trace’i dikkatlice okumak, sorunun kaynağını bulmada genellikle yeterlidir.

Karşılaşılabilecek Sorunlar ve Çözümleri

Kurulum sürecinde veya ilk projeyi çalıştırırken bazı problemlerle karşılaşmanız olasıdır. Endişelenmeyin, bu geliştirme sürecinin normal bir parçasıdır. İşte sık karşılaşılan bazı sorunlar ve deneyimlerimden süzülmüş çözümleri:

• Proje Başlamıyor veya Hata Veriyor: Çoğu zaman cache sorunlarından kaynaklanır. Metro Bundler’ı –reset-cache bayrağı ile yeniden başlatmayı deneyin:

  npx react-native start --reset-cache

• Bağımlılık Sorunları (node_modules): node_modules klasöründeki bozulmalar veya eksiklikler sıkça sorun yaratır. Klasörü silip bağımlılıkları yeniden yüklemek genellikle işe yarar:

  rm -rf node_modules/ && npm install

  (Windows’ta rm -rf yerine rd /s /q node_modules kullanabilirsiniz)
• Android Build Hatası: Android klasörüne girip build cache’ini temizlemeyi deneyin:

  cd android

  ./gradlew clean

  (Windows’ta gradlew clean)

  Android Studio’da gerekli SDK ve build tools’un kurulu olduğundan emin olun.

• iOS Build Hatası: iOS klasörüne girip CocoaPods bağımlılıklarını yükleyin veya güncelleyin:

  cd ios

  pod install

  Xcode’un güncel ve doğru yapılandırılmış olduğundan emin olun.

• Emülatör/Cihazda Uygulama Hatası: Cihazın veya emülatörün Metro Bundler ile aynı ağda olduğundan emin olun. Kırmızı hata ekranındaki mesajı dikkatlice okuyun. Çoğu zaman eksik importlar veya yazım hataları bu tür hatalara neden olur.

Bu komutlar ve ipuçları, karşılaştığınız pek çok sorunun üstesinden gelmenize yardımcı olacaktır. Unutmayın, hata mesajlarını okumak ve anlamak, sorunu çözmenin yarısıdır.

React Native Geliştirme İçin En İyi Uygulamalar

Ortam kurulumunu tamamlayıp ilk adımları attıktan sonra, daha düzenli, verimli ve sürdürülebilir kod yazmak için bazı en iyi uygulamaları benimsemek önemlidir. Bunlar, sadece başlangıçta değil, projeniz büyüdükçe de size büyük fayda sağlayacaktır:

• Bileşenleri Modüler Hale Getirin: Küçük, yeniden kullanılabilir bileşenler oluşturun. Bu, kodunuzu daha okunabilir, yönetilebilir ve test edilebilir hale getirir.
• State Yönetimini Planlayın: Uygulamanız büyüdükçe state yönetimi karmaşıklaşabilir. Redux, MobX veya React’in Context API’si gibi çözümleri öğrenmek ve projenize uygun olanı seçmek önemlidir.
• Gereksiz Render’ları Optimize Edin: Performans kritik uygulamalarda React.memo veya eski bileşenlerde shouldComponentUpdate gibi yöntemlerle gereksiz yeniden render’ları engelleyerek performansı artırabilirsiniz.
• Kapsamlı Hata Yönetimi Uygulayın: Hataları sadece geliştirme ortamında değil, canlı ortamda da yakalamak ve izlemek için Sentry gibi araçları kullanın. Error Boundaries (Hata Sınırları) kullanarak uygulamanızın çökmesini engelleyin.
• Tutarlı Stiller Kullanın: Uygulamanızda stil tutarlılığını sağlamak için Styled Components veya standard StyleSheet yaklaşımını düzenli kullanın.
• Test Yazmayı Alışkanlık Edinin: Jest ve React Testing Library gibi araçlarla birim ve entegrasyon testleri yazarak kodunuzun beklenen şekilde çalıştığından emin olun.
• Güncellemeleri Takip Edin: React Native ve kullandığınız kütüphaneler sürekli güncellenir. Güncellemeler yeni özellikler, performans iyileştirmeleri ve hata düzeltmeleri getirir. Düzenli olarak güncellemeleri kontrol edin.
• Native Modüllerden Çekinmeyin: Eğer React Native’in sunduğu imkanlar yetersiz kalırsa, platforma özel (native) kod yazmaktan çekinmeyin. Bu, uygulamanızın potansiyelini artırır.
• Dokümantasyon Tutun: Proje büyüdükçe veya bir ekiple çalışıyorsanız, projenizin yapısı, önemli kararlar ve kurulum adımları hakkında dokümantasyon tutmak hayati önem taşır.

Bu pratikler, sadece ortamı kurmakla kalmayıp, o ortamda kaliteli ve sürdürülebilir yazılımlar geliştirmenize yardımcı olacaktır.

Sıkça Sorulan Sorular

React Native ortam kurulumu hakkında sıkça karşılaştığım bazı sorular ve cevapları:

React Native ortam kurulumu ne anlama gelir?

React Native ortam kurulumu, bilgisayarınızı React Native ile mobil uygulamalar geliştirebilmek için gerekli tüm yazılımları, araçları ve ay