React Native mobil geliştirmede: nedir, temel kavramlar ve nasıl çalışır

Temeller (JSX, Functional Component, Hooks)

JSX (JavaScript XML) — UI'yi tanımlamak için JavaScript'in sözdizimsel uzantısı. HTML gibi görünür ancak React.createElement() aracılığıyla çalışır. JSX ifadeleri: {variable}, {condition && <View />}, {array.map()}. Functional Component — JSX döndüren bir işlev. Props'ı argüman olarak alır. React'in modern standardı (React 16.8'den önce Class Components kullanılıyordu). Hooks — Functional Component'ten duruma ve yaşam döngüsüne erişmek için işlevler. Hooks kuralları: yalnızca üst düzeyde, yalnızca Functional Components içinde.

Hooks Referansı

useState — yerel durum. useEffect — yan etkiler. useContext — Context'e erişim. useRef — değiştirilebilir referans. useCallback — işlev belleklemeyi. useMemo — değer belleklemeyi. Custom Hooks — yeniden kullanılabilir mantık: function useDebounce(value, delay).

// React Native'de hooks ile Functional Component
import React, { useState, useEffect, useCallback } from 'react';
import {
  View, Text, FlatList,
  ActivityIndicator, SafeAreaView
} from 'react-native';

const DATA = Array.from({ length: 100 }, (_, i) => ({
  id: String(i),
  title: `Item ${i + 1}`,
}));

const Item = React.memo(({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
));

export default function App() {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Hooks (useState, useEffect, useRef, useCallback, useMemo)

useState — [value, setValue] döndürür. setValue — değiştirir (Class'taki setState gibi birleştirmez). Nesneler için: setUser(prev => ({ ...prev, name: 'New' })). useEffect — render işleminden sonra çalışır. Bağımlılık dizisi: [] — bir kez (mount), [dep] — dep değiştiğinde, undefined — her render. Temizlik işlevi — return () => {}. useContext — const value = useContext(MyContext). Ağaçta daha yukarıda Context.Provider gerektirir.

useRef — render'lar arasında değeri koruyan değiştirilebilir nesne. .current — değişiklik. Kullanımı: yerel öğelere erişim (ref={inputRef}), önceki değerleri saklama, zamanlayıcılar. useCallback — belleğe alınmış bir işlev döndürür. const handlePress = useCallback(() => {}, [dep]). useMemo — belleğe alınmış bir değer döndürür. const sorted = useMemo(() => data.sort(), [data]). Pahalı hesaplamalar için useMemo kullanın.

useState — basit durum için. useEffect — API çağrıları ve abonelikler için. useCallback/useMemo — optimizasyon için. IT Sectr her şeyi belleğe almayı önermez — yalnızca gerçek performans sorunları olduğunda.

Custom Hooks

Custom Hook — yerleşik hook'ları kullanan bir işlev. İsim use* ile başlar. Örnekler: useDebounce, useNetworkStatus, useAppState, useKeyboard. Custom Hooks, React Native'de mantığı yeniden kullanmanın ana yoludur. IT Sectr, iş mantığını Custom Hooks'a çıkarmayı ve bileşenleri temiz tutmayı (yalnızca JSX + stiller) önerir.

Bileşenler (View, Text, FlatList, ScrollView, SafeAreaView)

View — temel kapsayıcı (div benzeri). Text — metin (metin için tek bileşen). TextInput — metin girişi. ScrollView — kaydırılabilir kapsayıcı. FlatList — büyük veriler için sanallaştırılmış liste. SectionList — bölümlerle FlatList. SafeAreaView — Safe Area'dan otomatik boşluk (çentik, durum çubuğu). Pressable — TouchableOpacity'nin modern alternatifi. useColorScheme — karanlık/aydınlık tema algılama.

FlatList Optimizasyonu

FlatList — sanallaştırma: yalnızca görünür öğeler + windowSize render edilir. Optimizasyon: 1) keyExtractor — benzersiz anahtar, 2) getItemLayout — sabit yükseklik (onLayout ölçümünü atlar), 3) renderItem için React.memo, 4) maxToRenderPerBatch (varsayılan 10), 5) windowSize (varsayılan 21), 6) removeClippedSubviews, 7) initialNumToRender.

React Native'de Navigasyon

React Navigation — standart navigasyon yığını. NativeStackNavigator — yerel animasyon (push/pop). TabNavigator — alt sekmeler. DrawerNavigator — yan menü. NavigationContainer — navigasyonun kök bileşeni. Deep linking — harici bağlantılar için bağlantı yapılandırması. Kimlik doğrulama akışı — koşullu navigasyon: isAuth ? AppStack : AuthStack. IT Sectr ana ekranlar için NativeStackNavigator'ı ve birinci düzey navigasyon için TabNavigator'ı önerir.

Stiller (StyleSheet)

StyleSheet.create() — stiller oluşturma. Tüm özellikler camelCase'de: backgroundColor, fontSize, marginTop. Flexbox — varsayılan düzen modeli (flexDirection: 'column'). CSS basamaklama yok, kalıtım yok, seçici yok. Satır içi stiller — çalışır ancak önerilmez. StyleSheet.compose() — stilleri birleştirme. Platform.select — platforma özgü stiller: Platform.OS === 'ios' ? styles.ios : styles.android. SafeAreaView — güvenli alan iç boşluklarını yönetme.

Styled Components ve CSS-in-JS

Styled Components — React Native'de CSS-in-JS için kütüphane. Restyle — tema + duyarlı stiller. NativeWind — React Native için Tailwind CSS. Unistyles — atomik CSS ile hızlı stiller. Karanlık mod — useColorScheme + dinamik stiller. IT Sectr basitlik için StyleSheet.create'i ve tasarım sistemi olan projeler için NativeWind'i önerir.

Animasyon (Animated API)

Animated API — bildirimsel animasyon. Animated.Value — animasyon değeri. Animated.timing — basit animasyon. Animated.spring — yaylı animasyon. Animated.View — animasyon yapılabilir View. useNativeDriver — yerel iş parçacığında animasyon (transform, opacity — desteklenir). Animated.loop — döngülü animasyon. LayoutAnimation — düzen değişikliğinde otomatik animasyon. reanimated 2/3 (kütüphane) — daha yüksek performanslı alternatif. Metro Bundler — JavaScript paketleyicisi. JS + varlıkları bir pakette toplar. Fast Refresh (Hot Reload) destekler. Hermes — mobil için optimize edilmiş JS motoru: hızlı başlangıç, az bellek. RN 0.70+ ile varsayılan.

Gesture Handler ve Animasyonlar

React Native Gesture Handler — yerel jest işleme. PanGestureHandler, PinchGestureHandler, TapGestureHandler. Gesture (RNGH 2.x) — bildirimsel jest API'si. Reanimated + Gesture Handler — jestlerle 60fps animasyonlar için kombinasyon. react-native-skia — karmaşık 2D grafikler için GPU oluşturma. IT Sectr, Animated API'den daha yüksek performanslı tüm animasyonlar için Reanimated 3'ü önerir.

Ağ (fetch, AsyncStorage, API)

fetch — yerleşik HTTP istemcisi. GET, POST, headers, body'yi destekler. Axios — önleyicilerle popüler kütüphane. AsyncStorage — anahtar-değer deposu (UserDefaults benzeri). MMKV — WeChat'ten AsyncStorage'a hızlı alternatif. react-native-keychain — güvenli token depolama. React Query (TanStack Query) — sunucu durumu yönetimi: önbellekleme, yeniden doğrulama, sayfalama. IT Sectr API istekleri için React Query'yi ve yerel depolama için MMKV'yi önerir.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeToken = async (token) => {
  try {
    await AsyncStorage.setItem('@auth_token', token);
  } catch (e) {
    console.error('Storage error:', e);
  }
};

const getToken = async () => {
  try {
    return await AsyncStorage.getItem('@auth_token');
  } catch (e) {
    return null;
  }
};

Native Modules ve Turbo Modules

Native Module — JS ve yerel kod arasında köprü (Android için Java/Kotlin, iOS için ObjC/Swift). JS'den yerel API'leri çağırmaya izin verir. Turbo Modules (New Architecture) — eski Native Modules'ların yerini alır. Senkron çağrı, Codegen aracılığıyla tipleme, daha az ek yük. Fabric Renderer — senkron düzene sahip yeni oluşturucu. JSI (JavaScript Interface) — köprü olmadan JS'nin yerel nesnelere doğrudan erişimi. IT Sectr yeni projeler için Turbo Modules'ı ve mevcut projeler için Native Modules'ı önerir.

// Android Yerel Modülü (Kotlin)
class CalendarModule(reactContext: ReactApplicationContext) :
    ReactContextBaseJavaModule(reactContext) {

    override fun getName() = "CalendarModule"

    @ReactMethod
    fun createCalendarEvent(name: String, location: String) {
        val intent = Intent(Intent.ACTION_EDIT).apply {
            type = "vnd.android.cursor.item/event"
            putExtra(Events.TITLE, name)
            putExtra(Events.EVENT_LOCATION, location)
        }
        reactContext.startActivity(intent)
    }
}

Test (Jest, React Native Testing Library)

Jest — standart test koşturucusu. describe/it/expect. React Native Testing Library — bileşen testi. render, fireEvent, waitFor. screen.getByText, getByTestId — arama. userEvent — eylem simülasyonu. Snapshot testleri — toMatchSnapshot(). MSW (Mock Service Worker) — API taklidi. Detox — RN için E2E testleri (grey-box, yerel). IT Sectr bileşenler için React Native Testing Library'yi ve uçtan uca senaryolar için Detox'u önerir.

CodePush (App Center) — App Store/Google Play'de yayınlamadan JS paketinin OTA güncellemeleri. Kullanımı: acil düzeltmeler, A/B testleri, içerik değişiklikleri. Sınırlamalar: yerel kod değiştirilemez. Alternatifler: EAS Update (Expo), react-native-update. IT Sectr acil düzeltmeler için CodePush'i ve Expo projeleri için EAS Update'i önerir.

Expo — React Native için framework. Yönetilen iş akışı — tüm yapılandırmalar app.json aracılığıyla. Development builds — eject olmadan özel yerel modüller. Expo SDK — yerleşik modüller: kamera, biyometri, bildirimler. EAS Build — bulut derleme. Expo Router — dosya tabanlı yönlendirme (Next.js benzeri). IT Sectr yeni projeler için Expo'yu ve derin yerel özelleştirme gerektiren projeler için bare RN'i önerir.