REACT NATIVE EĞİTİMİ
React Native eğitimi, "yaz, her yerde çalışır" sloganından çıkartıp native köprüsünü anlayarak kullanmak isteyen mühendisleri yetiştirir. JS bridge mimarisi ve New Architecture (Fabric, TurboModules) ile performans kazanımları somut örneklerle işlenir; native modül yazma ve native UI component bağlama günlük rutine yedirilir.
Program sonunda katılımcı, React Navigation ve Expo Router ile rotalama tasarlar; Context, Redux, Zustand ve Jotai arasında state yönetimi seçer; platform-specific code (.ios.tsx, .android.tsx) ile farklılıkları yönetir. EAS Build ve Expo Application Services ile build/deploy hattı eğitimin operasyonel kapanışıdır. Eğitim akışı React Native belgeleri referans alınarak şekillenir.
Katılımcı Profili
Bu eğitim, React Native'i "yazıp her yerde çalışır" sloganından çıkartıp native köprüsünü anlayarak kullanmak isteyen rollere yöneliktir:
- Mobil Geliştiriciler: Tek codebase ile iOS ve Android yazan ekipler
- React Geliştiricileri: Mobile tarafına geçiş yapan web mühendisleri
- Cross-platform Geliştiriciler: Hibrit yaklaşım hedefleyen roller
- Startup Mühendisleri: MVP'yi hızla iki platformda çıkarmak isteyenler
- Mobil Teknik Liderler: React Native proje standardı kuran roller
Ön Gereklilikler
Bu eğitime katılım için aşağıdaki ön bilgiler önerilir:
- React ile temel component, props ve state kullanım deneyimi
- JavaScript ES2015+ özelliklerine rahatlık
- Mobil uygulama mantığına (lifecycle, navigation) giriş düzeyi aşinalık
- Node.js ve npm ile paket yönetimi deneyimi
- Android Studio veya Xcode kurulumu (eğitim öncesi)
Süresi ve Tarihi
Süre: 4 gün. Bu süre standart program içindir; ek modüllere ve hedefe göre süre özelleştirilebilir.
Eğitim tarihleri ve saatleri, ekibinizin uygunluğuna göre birlikte planlanır.
Kazanımlar
Bu programın sonunda katılımcı, React Native'i "yazıp her yerde çalışır" sloganından çıkartıp native köprüsünü anlayarak kullanır:
- React Native'in JS bridge mimarisini açıklar
- New Architecture (Fabric ve TurboModules) ile performans kazanımlarını uygular
- Native modül yazar ve native UI component'i RN ile bağlar
- React Navigation ve Expo Router ile rotalama tasarlar
- Context, Redux, Zustand ve Jotai arasında state yönetimi seçer
- Platform-specific code (.ios.tsx, .android.tsx) ile farklılıkları yönetir
- EAS Build ve Expo Application Services ile build/deploy hattını kurar
React Native Eğitimi Konuları
1. React Native Mimarisi - New Architecture
- Bridge ve JSI (JavaScript Interface)
- Fabric renderer ve TurboModules
- Hermes JavaScript engine
- Expo vs Bare Workflow
2. Expo Ekosistemi
- Expo CLI ve EAS Build
- Managed vs Bare workflow farkı
- Expo Go ile hızlı geliştirme
- expo-router file-based routing
- Native modüllerin dağıtımı
3. Core Component - View, Text, Image
- View ve flex tabanlı layout
- Text ve nested text
- Image ve FastImage alternatifi
- ScrollView ve refresh control
- Pressable vs TouchableOpacity
4. Styling ve Flexbox
- StyleSheet.create ve inline style
- Flexbox: flexDirection, justifyContent, alignItems
- Platform-specific style
- NativeWind ile Tailwind
- Restyle, Tamagui design system
5. Navigation - React Navigation
- Stack, Tab, Drawer navigator
- Nested navigation pattern
- Deep linking
- Type-safe navigation
- expo-router alternative
6. List - FlatList ve SectionList
- FlatList ile virtualized list
- SectionList ile gruplu liste
- keyExtractor ve renderItem optimizasyonu
- FlashList: yüksek performans alternative
- Pull-to-refresh
7. Form ve Input
- TextInput ve klavye tipleri
- React Hook Form ile validation
- KeyboardAvoidingView ve Keyboard
- Picker ve DateTimePicker
8. State Management
- useState, useReducer, Context
- Zustand mobile uyumlu
- Redux Toolkit ile RTK Query
- MMKV ile fast persistent state
9. Native Module - Permissions, Camera, Location
- expo-camera ve expo-image-picker
- expo-location ve permissions
- expo-notifications (push)
- expo-sensors (accelerometer, gyroscope)
10. Local Storage
- AsyncStorage temel kullanım
- MMKV: native, encrypted, hızlı
- SecureStore (Keychain/Keystore)
- SQLite ve WatermelonDB
11. Networking ve API
- fetch ve axios
- TanStack Query (mobile-friendly)
- WebSocket ve real-time
- Network error ve offline detection
12. Authentication
- JWT token storage (SecureStore)
- OAuth: expo-auth-session
- Biometric: expo-local-authentication
- Firebase Auth ve Supabase Auth
13. Push Notification
- expo-notifications (Expo Push)
- Firebase Cloud Messaging (FCM)
- APNs (Apple Push Notification)
- Deep link ve notification handler
14. Animation - Reanimated ve Gesture
- Animated API klasik
- Reanimated 3 worklet
- react-native-gesture-handler
- Layout animation
- Lottie ile vektör animasyon
15. Platform-Specific Code
- Platform.OS ve Platform.select
- .ios.tsx, .android.tsx dosya uzantısı
- SafeAreaView (iPhone notch)
- StatusBar yönetimi
16. Performance Optimization
- Why Did You Render
- memo, useMemo, useCallback
- Image caching ve lazy load
- InteractionManager
- Flipper ile debug
17. Native Module Yazma
- Expo Modules API ile Swift/Kotlin
- Bridge ile legacy native module
- TurboModules ile modern yaklaşım
- Native code debugging
18. CI/CD - EAS Build ve Submit
- EAS Build cloud build
- EAS Submit ile App Store / Play Store
- EAS Update (OTA) - CodePush alternatifi
- Fastlane geleneksel CI
19. Testing
- Jest ile unit test
- React Native Testing Library
- Detox ile E2E test
- Maestro ile akış testi
20. App Store ve Play Store Yayınlama
- App Store Connect ve App Review
- Google Play Console ve Internal Testing
- App icon, splash screen, screenshots
- Privacy manifest (iOS) ve Data Safety (Android)
- Versioning ve over-the-air update
REACT NATIVE EĞİTİMİ ile İlgili
Sıkça Sorulan Sorular ve Cevapları
Expo Managed ile Bare Workflow arasında karar?
Expo Managed native code'a dokunmaz, EAS Build ile cloud build, hızlı geliştirme — çoğu use case için yeterli. Bare Workflow native modül ekleme ve düşük seviye kontrol için Xcode/Android Studio gerekir. Yeni başlarken Managed; native ihtiyaç ortaya çıkınca eject. Expo modern API'leri Managed'da da sunuyor.
New Architecture (Fabric + TurboModules) ne getiriyor?
Fabric yeni renderer — synchronous layout, daha az JS-native köprü trafiği, animasyon ve gesture daha akıcı. TurboModules lazy-loaded native modüller, başlangıç süresi düşer. JSI native objelerin JS'e doğrudan bağlanmasına izin verir — bridge serialization overhead'i azalır. Modern RN projelerinde default.
Native modül yazmak ne zaman gerekli?
Mevcut npm paketi ihtiyacı karşılamıyorsa, native API (BLE, camera advanced, custom UI) gerekiyorsa native modül yazılır. Swift/Objective-C iOS, Kotlin/Java Android tarafı. RN docs Bridge ve TurboModules için template sunar. Çoğu projede community paketi yeter, native modül son çare.
React Navigation ile Expo Router arasındaki fark?
React Navigation mature, stack/tab/drawer navigator'ları manuel kurulur. Expo Router file-based (Next.js benzeri) — folder yapısı route'u belirler, deep link otomatik, type-safe. Modern Expo projeleri Router'a yöneliyor; React Navigation'ın üzerine kurulu. Karar deneyim ve mevcut codebase'e bağlı.
Platform-specific code (.ios.tsx, .android.tsx) ne zaman kullanılır?
Buton stili, navigation header gibi platform farkı için inline Platform.OS yeterli. Bütünüyle farklı implementation gerekirse Component.ios.tsx ve Component.android.tsx ile dosya seçici otomatik doğru dosyayı yükler. Aşırı kullanımı kod bakımını zorlaştırır; tasarım kararlarında 'platform-aware' tercih edilir.
EAS Build, Fastlane ve klasik build arasında karar?
EAS Build cloud-based, Expo entegre, kurulum kolay — çoğu RN projesi için yeterli. Fastlane self-hosted, daha esnek pipeline, advanced TestFlight ve Play Console scripting. Klasik xcodebuild + gradlew CI'a doğrudan yazılır, kontrol tam ama maintenance ağır. Karar takım büyüklüğü ve özelleştirme ihtiyacına bağlı.
