React ile uygulama geliştirme
Yönlendirme, bağlam, indirgeyici, veri getirme, form ve testlerle çok sayfalı bir React uygulamasını uçtan uca kurar; durumu ve performansı düzenli tutarsın.
Seviye 301 · 16 ders · 15 pratik lab
Dersler
Durum yönetimi
- Durumu doğru yere koymak
- useReducer ile karmaşık durum
- Context ile durumu paylaşmak
- useRef ve DOM’a erişim
- Kısa görev: alışveriş sepeti durumu
Uygulama yapısı
- İstemci tarafında yönlendirme
- Veri yükleme, bekleme ve hata durumları
- React’te form doğrulama
- Hata sınırları ve yedek arayüz
- Kod bölme ve tembel yükleme
- Kısa görev: üç sayfalı katalog uygulaması
Kalite ve hız
- Gereksiz yeniden çizimleri bulmak ve önlemek
- React bileşenlerini sınamak
- React’te erişilebilirlik ve odak yönetimi
- Oturum açma akışının arayüzü
- Bitirme görevi: ekip görev panosu
Pratik lablar
- Dağınık durumu useReducer'a topla: Beş ayrı useState kullanan bir rezervasyon formunu tek bir reducer'a taşı.
- Prop delmesini context ile bitir: Tema ve dil bilgisini dört katman boyunca props ile taşıyan uygulamayı context'e geçir.
- Her şeyi yeniden çizen context'i böl: Tek context'te tutulan kullanıcı ve bildirim verisini ayırarak her değişiklikte tüm uygulamanın çizilmesini önle.
- Ürün detayına adresle git: Ürün listesine /product/:id rotası ekleyip doğrudan adresle açılabilen bir detay sayfası yap.
- Yarışan veri yüklemesini düzelt: Hızlı sayfa değiştirince eski isteğin yanıtı yeni sayfanın üstüne yazılıyor; isteği iptal ederek düzelt.
- Silinmiş kayda anlamlı bulunamadı sayfası göster: Silinmiş bir siparişin adresi açılınca boş ekran yerine iç içe rotalarda hata öğesiyle bulunamadı sayfası ve dönüş yolu göster.
- Çöken yorum bileşenini yalıt: Yorum bileşeni hata verince tüm sayfanın kaybolmasını bir hata sınırı ve yedek arayüzle önle.
- Çok adımlı başvuru formunu doğrula: Üç adımlı bir sigorta başvurusunda her adımı geçmeden alanları doğrulayıp hataları alanların yanında göster.
- Ağır grafik sayfasını tembel yükle: Grafik kütüphanesini yalnızca rapor sayfası açılınca yükleyen lazy ve Suspense düzenini kur, ilk yükü ölç.
- Boşuna çizilen bileşenleri bul: React geliştirici araçlarının profilleyicisiyle bir yazışma ekranında boşuna çizilen bileşenleri bul.
- Kişi listesini memo ile hızlandır: Her tuş vuruşunda bin satırı yeniden çizen bir kişi listesini memo ve useCallback ile hızlandır.
- Ürün tablosunu kullanıcı gözüyle test et: Filtrelenebilir bir ürün tablosunu Testing Library ile rol ve metin üzerinden test edip kırılgan seçicilerden kurtul.
- Sayfa değişince odağı başlığa taşı: Rota değişince ekran okuyucu fark etsin diye odağı yeni sayfanın başlığına taşı.
- Giriş formundaki hataları duyur: Hatalı girişte mesajı aria-live ile duyuran ve odağı ilk hatalı alana götüren bir giriş formu yap.
- Oturum düşünce yazılan formu kaybetme: Oturum düşünce kullanıcıyı yarım formu kaybetmeden yeniden girişe yönlendiren ve sonra geri getiren bir akış kur.
Kurs hakkında
Yönlendirme, bağlam, indirgeyici, veri getirme, form ve testlerle çok sayfalı bir React uygulamasını uçtan uca kurar; durumu ve performansı düzenli tutarsın.
Ne öğreneceksin
- Durum yönetimi
- Uygulama yapısı
- Kalite ve hız
Ön koşullar
Aynı yolun 101 ve 201 düzeyindeki konularına hâkim olmalısın.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 301 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.