React Native'e Giriş: Kurulum, Proje Oluşturma ve İlk Uygulama

Merhaba arkadaşlar, bu makalemizde son yıllarda mobil uygulama geliştirme dünyasında adından çokça söz ettiren React Native'in ne olduğunu, neden kullanmamız gerektiğini ve makinemizde nasıl kuracağımızı inceliyor olacağız. Ayrıca ilk React Native uygulamamızı oluşturup hem Android hem de iOS simülatöründe çalıştıracağız. Bu makale biraz uzun olacak, başlamadan bir kahve alsanız iyi olur.

React Native Nedir?
React Native, Facebook (Meta) tarafından geliştirilen, JavaScript (veya TypeScript) kullanarak hem iOS hem de Android için native mobil uygulama yazmamızı sağlayan açık kaynaklı bir framework. Buradaki kilit nokta "native" kelimesi: React Native aslında WebView içinde koşan bir web uygulaması değil. Yazdığımız JavaScript kodu, çalışma zamanında gerçek iOS ve Android UI bileşenlerine çevriliyor. Yani kullanıcı ekranda gerçek bir UIButton (iOS'ta) ya da android.widget.Button (Android'de) görüyor.

Neden React Native Tercih Edelim?
- Tek kod tabanı: Bir proje yazarsın, iki platformda da çalışır. Bu hem geliştirme süresini hem de maliyeti ciddi şekilde azaltır.
- Hot Reload: Kodda yaptığın değişiklik anında telefonda/simulatörde yansır. Geleneksel iOS/Android geliştirmede her derleme 30 saniye ile 2 dakika arası beklemek gerekirken, React Native'de 1 saniyeden kısa.
- Büyük ekosistem: NPM üzerinde binlerce hazır paket var. İhtiyacın olan neredeyse her şeye hazır çözüm bulursun.
- React bilen developer'lar için geçiş çok kolay: Web'den React bilen biri React Native'e birkaç gün içinde adapte olabilir.
- Büyük şirketler kullanıyor: Facebook, Instagram, Discord, Shopify, Microsoft Teams, Bloomberg — hepsi React Native kullanıyor.

Expo mu, Bare Workflow mu?
React Native ile proje başlatmak için iki yol var. İkisini de kısaca anlatayım, hangisini seçeceğinize siz karar verin:

Expo — Kolay yol. Xcode veya Android Studio kurmak zorunda kalmazsınız, telefonunuzdaki Expo Go uygulaması ile projeyi anında çalıştırabilirsiniz. Başlangıçta çok rahat ama ileride native kod (Objective-C / Kotlin) yazmanız gerekirse kısıtlı kalabilir.

Bare Workflow — Klasik React Native CLI yöntemi. Tam kontrol sizde. Ancak iOS için Mac'e Xcode, Android için Android Studio kurmanız şart. Kurulum biraz daha zahmetli ama profesyonel projelerde tercih edilen yol bu.

Bu makalede Expo ile başlayacağız çünkü başlangıç için çok daha pratik. İleri seviyede ejection yapıp bare workflow'a geçebilirsiniz zaten.

Ön Şartlar
Başlamadan önce makinemizde şu araçların olması gerekiyor:

- Node.js 18+ (nodejs.org'dan LTS versiyon)
- npm veya yarn (Node ile birlikte gelir)
- Git
- Bir kod editörü (VS Code tavsiyem)
- Telefonunuzda Expo Go uygulaması (App Store / Google Play'den)

Node'un kurulu olduğunu doğrulayalım:

node --version
npm --version

İlk Projemizi Oluşturalım
Expo, projeleri oluşturmak için create-expo-app adında bir araç sunuyor. Açalım terminali ve çalıştıralım:

npx create-expo-app@latest ilk-rn-uygulamam
cd ilk-rn-uygulamam

IDE tarafinda: VS Code tarafinda Expo ile kurdugumuz projeyi acinca Explorer'da src/screens, src/components gibi ilk klasor yapisini gorursunuz. Alttaki terminal panelinde 'npx expo start' calisir ve QR kodu cihaza baglamak icin hazirdir.

Komut bize birkaç template sunabilir (blank, tabs, navigation). Başlangıç için Blank (TypeScript) seçmeniz yeterli. Kurulum sürecinde Expo bütün bağımlılıkları indirecek ve proje iskeletini oluşturacak. Bu işlem 1-2 dakika sürebilir.

Projeyi Çalıştıralım
Proje klasöründeyken şu komutu çalıştırın:

npx expo start

Terminal size bir QR kod gösterecek. Telefonunuzdaki Expo Go uygulamasını açıp bu QR kodu okuttuğunuzda uygulamanız anında telefonda açılır. Hiçbir kablo, hiçbir imzalama, hiçbir derleme sorunu. İlk kez bunu gören herkes şaşırır, ben de şaşırmıştım.

Alternatif olarak:

- Terminalde a tuşu → Android emulator açar
- Terminalde i tuşu → iOS simulator açar (sadece Mac'te)
- Terminalde w tuşu → Web tarayıcısında açar

Proje Yapısını İnceleyelim
Şimdi oluşan dosyalara bir göz atalım:

- App.tsx → Uygulamamızın ana bileşeni. İlk önce bu dosya render olur.
- app.json → Uygulamamızın meta bilgileri (ikon, splash screen, isim, versiyon).
- package.json → NPM bağımlılıkları ve script komutları.
- tsconfig.json → TypeScript ayarları.
- assets/ → Resim, ikon, font dosyalarımız.

App.tsx dosyasını açın, muhtemelen şöyle bir şey var:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Şunlara dikkat edelim:

- View, HTML'deki <div>'in React Native karşılığıdır.
- Text, <p> veya <span> gibi düşünülebilir ama React Native'de tüm metinler mutlaka Text içinde olmak zorunda.
- StyleSheet.create stillerimizi tanımladığımız yer. CSS değil, JavaScript objesi ama benzer syntax.
- flex: 1 görünce gözünüzü korkutmayın, React Native'de layout için Flexbox kullanılıyor.

İlk Değişikliğimizi Yapalım
Uygulamamızı biraz kişiselleştirelim. App.tsx'i şöyle güncelleyin:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.baslik}>Merhaba Sem!</Text>
      <Text style={styles.altBaslik}>İlk React Native uygulamam çalışıyor 🚀</Text>
      <View style={styles.kart}>
        <Text style={styles.kartBaslik}>Bugün öğrendiklerim:</Text>
        <Text style={styles.kartItem}>• Expo ile proje oluşturma</Text>
        <Text style={styles.kartItem}>• View ve Text component'leri</Text>
        <Text style={styles.kartItem}>• StyleSheet ile stil vermek</Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0f172a',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  baslik: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#f59e0b',
    marginBottom: 8,
  },
  altBaslik: {
    fontSize: 16,
    color: '#cbd5e1',
    marginBottom: 30,
  },
  kart: {
    backgroundColor: '#1e293b',
    padding: 20,
    borderRadius: 12,
    width: '100%',
  },
  kartBaslik: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
    marginBottom: 12,
  },
  kartItem: {
    color: '#cbd5e1',
    fontSize: 14,
    marginBottom: 6,
  },
});

Kaydedin ve telefonu/simulatörü izleyin. Fast Refresh sayesinde 1 saniyeden kısa sürede yeni haliniz ekrana yansır. İşte bu React Native'in sihri.

Karşılaşabileceğiniz Yaygın Sorunlar
- "Network response timed out": Telefon ve bilgisayar aynı WiFi ağında değil. Kontrol edin.
- QR kod çalışmıyor: Expo CLI'yi tunnel modunda başlatın: npx expo start --tunnel.
- Metro bundler takılıyor: npx expo start --clear ile cache'i temizleyin.
- iOS simulator açılmıyor: Mac'te Xcode'un kurulu ve bir iOS simülatör imajının yüklü olduğundan emin olun.

Özet
Bu ilk makalede React Native'in ne olduğunu, neden popüler olduğunu, Expo ile nasıl proje başlatacağımızı ve proje yapısını inceledik. Ayrıca ilk kişisel uygulamamızı yazıp telefonda çalıştırdık.

Bir sonraki makalede Component yapısı, Props, State ve Hook'lar konularına eğileceğiz. React bilenler için tanıdık gelecek ama React Native'e özgü detaylar da olacak. Herkese kolay gelsin, sorularınızı yoruma bekliyorum...