React temelleri ve güvenli bileşen yazımı
Kullanıcı arayüzlerini bileşenlerle kurar, React’te sık görülen güvenlik hatalarından kaçınırsın.
Seviye 201 · 18 ders · 15 pratik lab
Dersler
Başlangıç
- React nedir ve Vite ile ilk uygulama: Bileşen tabanlı yaklaşımı anlar, Node.js ile ilk uygulamayı ayağa kaldırırsın.
- JSX: arayüzü JavaScript içinde yazmak: JSX kurallarını ve ifadelerin süslü parantezle nasıl gömüldüğünü öğrenirsin.
- Bileşenler ve props: Küçük bileşenler yazar, onlara props ile veri aktarırsın.
- Kısa görev: profil kartı bileşeni
Etkileşim
- useState ile durum: Arayüzün değişen verisini durumda tutar, güncellemenin ekranı nasıl yenilediğini görürsün.
- Olayları yönetmek: Tıklama ve girdi olaylarını bileşende yakalayıp duruma yansıtırsın.
- Koşullu görüntüleme: Duruma göre farklı arayüz parçaları gösterirsin.
- Listeler ve key: Bir diziden öğe listesi çizer, key değerinin neden gerektiğini anlarsın.
- Denetimli formlar: Form alanlarını durumla bağlar, doğrulama mesajlarını ekranda gösterirsin.
- Kısa görev: sayaçlı ve formlu alışveriş listesi
Veri ve yapı
- Durumu yukarı taşımak ve bileşen bileşimi: Kardeş bileşenlerin ortak veriyi paylaşması için durumu ortak üst bileşene taşırsın.
- useEffect ile sunucudan veri almak: Bileşen yüklenince API’den veri çeker, yükleniyor ve hata durumlarını yönetirsin.
- Kendi hook’unu yazmak: Tekrarlayan mantığı özel bir hook’a çıkarır ve yeniden kullanırsın.
- Kısa görev: sunucudan gelen kullanıcı listesi
Güvenli React
- React’te XSS’ten kaçınmak: dangerouslySetInnerHTML ve javascript: bağlantılarının tehlikesini görür, kullanıcı girdisini güvenle gösterirsin.
- İstemcide sır tutmamak ve belirteçlerin saklanması: Ortam değişkenlerinin tarayıcıya gittiğini bilir, oturum belirtecini nerede saklamanın daha güvenli olduğunu tartarsın.
- Bağımlılık güvenliği: npm audit ve kilit dosyası: Bağımlılıkları denetler, kilit dosyasını korur, benzer adlı sahte paketlere karşı dikkatli olursun.
- Bitirme görevi: güvenli bir not panosu: Kullanıcı notlarını listeleyen, ekleyen ve güvenle görüntüleyen küçük bir uygulama yazarsın.
Pratik lablar
- Ürün kartını bileşene çevir: Üç kez kopyalanmış HTML ürün kartını props alan tek bir React bileşenine dönüştür.
- Eksik prop'ta kartı bozma: Görseli veya fiyatı eksik gelen ürünlerde varsayılan değer ve yedek görünüm gösteren bir bileşen yaz.
- Dev menü bileşenini parçalara böl: Tek dev bileşen olan restoran menüsünü kategori, yemek ve fiyat etiketi bileşenlerine ayır.
- Beğeni butonuna durum ekle: Tıklandıkça sayısı artan ve rengi değişen bir beğeni butonunu useState ile yap.
- Yükleniyor ve boş durumlarını göster: Bir sipariş listesinde yükleniyor, boş ve hata durumlarını koşullu render ile ayrı ayrı göster.
- Eski durumla güncelleme hatasını düzelt: Hızlı art arda tıklamaları kaçıran bir sayacı fonksiyonel güncellemeyle düzelt.
- Görev listesini map ile çiz: Bir görev dizisini map ve anahtarlarla listeye çizip tamamlananları üstü çizili göster.
- Dizin anahtarı hatasını düzelt: Silince yanlış satırın girişini koruyan listeyi kalıcı kimliklerle düzelt.
- Kontrollü üyelik formu yaz: Ad, e-posta ve paket seçimi olan bir üyelik formunu tek durum nesnesiyle kontrollü yap ve gönderirken doğrula.
- Sekme başlığını effect ile güncelle: Okunmamış mesaj sayısını useEffect ile sekme başlığına yaz.
- Sonsuz istek döngüsünü durdur: Yanlış bağımlılık dizisi yüzünden durmadan istek atan bileşeni düzelt ve temizleme fonksiyonu ekle.
- useFetch kancası yaz: Yükleme, hata ve iptal durumlarını yöneten bir useFetch kancası yazıp iki bileşende kullan.
- Kullanıcı biyografisini güvenle göster: dangerouslySetInnerHTML ile gösterilen biyografiyi metin olarak göster ve kötü niyetli bir girdiyle dene.
- Pakete gömülü sırrı bul: Derlenmiş paketi inceleyip içine konmuş API anahtarını bul ve sunucu tarafına taşı.
- Zararlı bağlantı adreslerini engelle: Profildeki web sitesi alanından gelen javascript: adreslerini engelleyen güvenli bir bağlantı bileşeni yaz.
Kurs hakkında
Kullanıcı arayüzlerini bileşenlerle kurar, React’te sık görülen güvenlik hatalarından kaçınırsın.
Ne öğreneceksin
- Başlangıç
- Etkileşim
- Veri ve yapı
- Güvenli React
Ön koşullar
Aynı yolun 101 düzeyindeki kurslarını bitirmiş olmak ya da o konuları biliyor olmak yeterlidir.
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 201 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.