React Native + Hooks Kursu

Ders 1 • JSX ve Sanal DOM

JSX derlemesini, key prop eşlemesini ve React'in fark algoritmasının yerel güncellemeleri nasıl en aza indirdiğini açıklar. Sanal DOM davranışını performansa bağlar.

Ders 2 • Fonksiyonel Bileşenlere Derinlemesine Bakış

Sınıf bileşenlerini fonksiyonel bileşenlerle karşılaştırır ve hooks'ların neden fonksiyonel bileşenler gerektirdiğini açıklar. Durumsuz UI fonksiyonları için zihinsel modeli oluşturur.

Ders 3 • Modern JavaScript Sözdizimi İncelemesi

React Native kod tabanlarında kullanıldığı şekliyle yapı bozma, spread/rest, ok fonksiyonları ve async/await'i kapsar. Sonraki hook örneklerinde sözdizimi karışıklığını azaltır.

Ders 1 • React Native Nedir?

Köprü mimarisini, JavaScript iş parçacığını ve yerel modül sistemini açıklar. React Native'i web React'i ve yerel geliştirmeyle ilişkilendirir.

Ders 2 • İlk Projenizi Oluşturma

Projeyi iskeletlemek için React Native CLI'yi kullanır ve oluşturulan dosya yapısını açıklar. Klasör düzenini derleme hattına bağlar.

Ders 3 • Temel Yerleşik Bileşenler

View, Text, Image, ScrollView ve TextInput'u temel UI yapı taşları olarak tanıtır. Her birinin yerel bir widget'a nasıl eşlendiğini gösterir.

Ders 4 • Geliştirme Ortamını Kurma

Doğru SDK sürümleriyle Node, Watchman, Xcode ve Android Studio'yu kurar. Her iki platformda da boş bir proje çalıştırarak araç zincirini doğrular.

Ders 1 • useState ile Durum Yönetimi

useState imzasını, durum başlatmayı ve güncelleyici fonksiyon kalıplarını tanıtır. Eski kapanışlar ve toplu güncellemeler gibi yaygın tuzakları kapsar.

Ders 2 • Sayaç ve Zamanlayıcı Uygulaması Oluşturma

Pratik bir sayaç ve geri sayım zamanlayıcısında useState ve useEffect'i birlikte uygular. Gerçek bir bileşende durum güncellemelerini, aralıkları ve temizlemeyi pekiştirir.

Ders 3 • useEffect ile Yan Etkiler

Bağımlılık dizisini, temizleme fonksiyonlarını ve render'a göre yürütme zamanlamasını açıklar. Her üç sınıf yaşam döngüsü yönteminin yerini tek bir hook ile alır.

Ders 4 • Hooks ile Uzaktan Veri Çekme

useState kullanarak veri/yükleme/hata durumları ve useEffect kullanarak getirme çağrısı için bir veri çekme kalıbı oluşturur. Yükleme ve hata UI durumlarını tanıtır.

Ders 1 • Performans Hook'ları: useMemo ve useCallback

Pahalı hesaplamaları useMemo ile önbelleğe alır ve gereksiz alt bileşen yeniden render'larını önlemek için useCallback ile fonksiyon referanslarını dengeler.

Ders 2 • useImperativeHandle ile Zorunlu API'ler

useImperativeHandle ve forwardRef kullanarak bir alt bileşenden üst ref'e kontrollü bir zorunlu API sunar. Özel giriş bileşenleri için kullanışlıdır.

Ders 3 • useRef ile Değerlere Başvurma

Yeniden render'ları tetiklemeden render'lar arasında değişebilir değerleri kalıcı kılmak ve yerel bileşen örneklerine erişmek için useRef'i kullanır. UI dışı veriler için useState ile karşılaştırır.

Ders 4 • useReducer ile Karmaşık Durum

Çok eylemli durum makineleri için bir reducer fonksiyonu ve dispatch kalıbı uygular. Form ve sepet senaryoları için useReducer'ı useState ile karşılaştırır.

Ders 1 • useForm: Form Durum Yönetimi Hook'u

Alan değerlerini, doğrulama hatalarını ve gönderim durumunu yöneten bir useForm hook'u oluşturur. Birden çok ekranda tekrarlanan form mantığının yerini alır.

Ders 2 • Özel Hook'ları Test Etme

Özel hook'ları izole bir şekilde birim test etmek için React Native Testing Library ve renderHook'u kullanır. act, async act ve harici bağımlılıkları mock'lamayı kapsar.

Ders 3 • useFetch: Veri Çekme Hook'u

Getirme-yükleme-hata kalıbını, yapılandırılabilir URL ve seçeneklerle yeniden kullanılabilir bir useFetch hook'una çıkarır. Özel hook'ların bileşen tekrarını nasıl azalttığını gösterir.

Ders 4 • useLocalStorage ve useAsyncStorage

Kalıcı anahtar-değer verileri için useState API'sini yansıtan bir hook içinde AsyncStorage'i sarar. Serileştirme, seri durumdan çıkarma ve hata durumlarını yönetir.

Ders 1 • Yığın Gezgini Kalıpları

Push, pop ve replace geçişleriyle yerel bir yığın gezgini oluşturur. Ekranlar arasında parametreler iletir ve useRoute ile okur.

Ders 2 • Sekme ve Çekmece Gezginleri

Alt sekme ve çekmece gezginleri ekler ve bunları yığının içine yerleştirir. Hook odaklı durumla sekme simgelerini ve çekmece içeriğini özelleştirir.

Ders 3 • Navigasyon ile Kimlik Doğrulama Akışı

Bağlamda depolanan token durumuna göre auth ve uygulama yığınları arasında geçiş yapan koşullu bir gezgin uygular. Gerçek dünya korumalı yönlendirmeyi gösterir.

Ders 4 • Navigasyon Hook'ları Derinlemesine

Bileşenler içinden navigasyon davranışını kontrol etmek için useNavigation, useRoute, useFocusEffect ve useIsFocused'u kullanır. Navigasyon nesnelerinin prop-delinmesinin yerini alır.

Ders 1 • React Query ile Sunucu Durumu

Sunucu durumunu, önbelleğe almayı ve arka planda yeniden getirmeyi yönetmek için React Query'nin useQuery ve useMutation hook'larını kullanır. Manuel yükleme/hata durumu yönetimini ortadan kaldırır.

Ders 2 • Redux Toolkit Entegrasyonu

createSlice, veri getirme için RTK Query ve Provider sarmalayıcı ile bir Redux deposu yapılandırır. useSelector ve useDispatch kullanarak bileşenleri bağlar.

Ders 3 • Ölçekte Context API Kalıpları

Büyük ağaçlarda gereksiz yeniden render'ları önlemek için bağlamı durum ve dispatch sağlayıcılarına böler. Redux benzeri bir kalıp için useReducer'ı bağlamla birleştirir.

Ders 4 • Zustand ile Global Durum

Eylemler ve seçicilerle bir Zustand deposu oluşturur, ardından onu tek bir hook çağrısıyla tüketir. Zustand'ın minimal API'sini Context tekrarıyla karşılaştırır.

Ders 1 • Profil Çıkarma ve Performans Tanılama

Yavaş render'ları ve JS iş parçacığı takılmalarını belirlemek için Flipper, React DevTools profil oluşturucu ve Performans Monitörü'nü kullanır. Önce ölç optimizasyon iş akışını oluşturur.

Ders 2 • Listeleri ve Görselleri Optimize Etme

Kaydırma takılmalarını ortadan kaldırmak için FlatList optimizasyon prop'larını, görsel önbelleğe almayı ve tembel yüklemeyi uygular. windowSize, initialNumToRender ve getItemLayout'u kapsar.

Ders 3 • Bileşenleri ve Hook'ları Test Etme

Jest ve React Native Testing Library ile kullanıcı etkileşimlerini ve asenkron davranışı kapsayan birim ve entegrasyon testleri yazar. Uygulama ayrıntılarını test etmeden anlamlı kapsama alanı elde eder.

Ders 4 • Animated ve Reanimated ile Animasyon

Animated API'sini kullanarak düzgün animasyonlar oluşturur ve UI iş parçacığı animasyonları için Reanimated 2'ye yükseltir. Spring, timing ve hareket odaklı animasyonları kapsar.