React Native'e Giriş | Everion Consulting

Buse Savaş

14 August 2025

ReactMobil Uygulamalar

React Native nedir?

React Native bileşen tabanlı bir yapı sunar. Arayüz kodu JavaScript ya da TypeScript tarafında yazılır. Uygulama cihazda native bileşenlerle çalışır. Böylece web yerine cihaza uyumlu bir deneyim elde edilir. Güncel sürümlerde JavaScript kodu Hermes adlı motorda çalışır. Açılış süresi ve bellek kullanımı bu motorla genelde daha iyidir. Yeni Mimari Fabric ve Turbo Native Modules yaklaşımına dayanır. Maliyeti azaltmayı hedefler. Yerel modüller için güvenli bir üretim akışı sağlar. Büyük projelerde kararlılık ve performans avantajı görülür.

Kurulum

Expo ile hızlı başlangıç

Expo bir platform olarak süreci basitleştirir. Araçları tek yerden sunar. İlk proje dakikalar içinde ayağa kalkar.

npx create-expo-app@latest cd <proje-adi> npx expo start

Expo Go ile gerçek cihazda anında deneme yapılır. EAS ile bulutta derleme ve güncelleme akışı kurulabilir. Prebuild ise gerektiğinde iOS ve Android proje klasörlerini otomatik üretir. Config plugin yapısı yerel bağımlılıkları düzenler.

React Native CLI ile başlangıç

Framework olmadan da başlanabilir. Bu yol tam kontrol sağlar. Android Studio ve Xcode kurulu olmalıdır.

npx react-native init MyApp cd MyApp npm run android # ya da npm run ios

Özel modüller ve kurumsal kısıtlar varsa CLI daha esnektir. Mevcut native projeye parça eklemek için de uygun bir yoldur.

Metro Bundler ve Proje Yapısı

React Native projeleri Metro ile paketlenir. Metro giriş dosyasını çözümler. Kodları dönüştürür. Çıktıyı uygulamaya sunar. Varsayılan ayarlar çoğu proje için yeterlidir. Gerekirse metro.config.js ile özelleştirme yapılır. Expo tarafında da Metro çalışır. Böylece build mantığı projeler arasında tutarlı kalır.

Arayüz ve Stil

Stil verme JavaScript içinde yapılır. API isimleri CSS’e benzer. StyleSheet ile tanımlanır. Düzen için Flexbox kullanılır. Önemli bir fark vardır. flexDirection varsayılanı column değerindedir. Yani dikey akış önceliklidir.

Basit bir örnek;

import { View, Text, StyleSheet } from "react-native";
export default function HelloCard() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Merhaba React Native</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  card: { flex: 1, alignItems: "center", justifyContent: "center" },
  title: { fontSize: 20, fontWeight: "600" },
});

Navigasyon

Mobil akışları yönetmek için React Navigation sık tercih edilir. Yığın yapısı stack, sekmeler tabs, çekmece drawer. Küçük projelerde basit bir stack yeterlidir. Orta ve büyük projelerde sekme ve çekmece yapıları netleşir.

Bir örnek verelim;

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack

İle projenin gereklilikleri kurulur. Daha sonra;

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "./screens/Home";
import Details from "./screens/Details";
const Stack = createNativeStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Hata Ayıklama ve Geliştirme Deneyimi

Fast Refresh değişiklikleri hızla yansıtır. LogBox uyarıları ekranda gösterir. Yeni sürümlerde React Native DevTools tercih edilir. Ağ trafiği ve arayüz incelemesi için Flipper yararlıdır. Geliştirme buildi ve gerçek cihaz testleri erken aşamada yapılmalıdır. Performans sorunları böylece erkenden yakalanır.

İyi Uygulamalar İçin

Bileşenleri küçük ve tek sorumlu tutmak fayda sağlar. Ortak stilleri ayrı dosyada toplamak okunurluğu artırır. TypeScript kullanımı uzun vadede hataları azaltır. Ağ katmanı için hafif bir istek kütüphanesi yeterlidir. Durum yönetimi sade başlamalıdır. Gerektiğinde Context ya da ek bir çözüm eklenir. OTA güncellemeleri yayın sürecini hızlandırır. Mağaza süreçleri yine de takip edilmelidir.

Sonuç

React Native ekiplerin mobil hedeflerine tek kod tabanı ile ulaşmasını sağlar. Başlangıç süresi kısadır. Mimari ihtiyaçlara göre genişler. Expo hız ve dağıtım kolaylığı sunar. CLI esneklik ve tam denetim sağlar. Hermes ve Metro temel katmandır. Navigasyon ve stil deneyimi şekillendirir. Bu temel atıldığında üretim süreci öngörülebilir hâle gelir.

Kaynakça

All Posts