Eğitim Hakkında
React , web kullanıcı arayüzleri oluşturmak için bir JavaScript kitaplığıdır ve günümüzün en çok aranan ve sevilen web çerçevelerinden biridir.
React, web standartlarının üstünde etkileşimli kullanıcı arabirimleri oluşturmayı zahmetsiz hale getirir ve genellikle bir React uygulamasındaki verileri veya durumu yönetmek için Redux kitaplığı ile birlikte kullanılır.
Neler Öğreneceksiniz
Tüm katılımcılar:
• Bir JavaScript paket yöneticisi kullanmayı (npm veya Yarn)
• Sınıflar, modüller ve ok işlevleri dahil olmak üzere yeni JavaScript dil özelliklerini hızlı bir şekilde anlamayı
• React'in ne olduğunu ve neden yararlı olduğunu açıklamayı
• Bir React uygulamasının temel mimarisini keşfetmayi
• JSX ve Virtual DOM hakkında derinlemesine bir anlayış kazanmayı
• Etkileşimli arayüzler oluşturmak için React bileşenlerini kullanmayı
• Kontrollü bileşenleri kullanarak formlar oluşturmayı ve doğrulamayı
• Verileri okumak veya değiştirmek için HTTP çağrıları yapmayı
• Ortak bileşen mimari modellerini keşfetmeyi
• Basit ve karmaşık yönlendirmeyi yapılandırmayı
• Ne zaman ihtiyaç duyulduğu ve çeşitli alternatifler dahil olmak üzere durum yönetimini anlamayı
• Uygulamanın durumunu yönetmek için Redux'u kullanmayı
• React ve Redux'u birlikte kullanmayı
• React ve Redux en iyi uygulamalarını uygulamayı
• Jest ve React Test Kitaplığını kullanarak React için test yazmayı
Eğitim İçeriği
Giriş
Paket Yöneticisi (npm / Yarn)
Npm
Node.js nedir?
Npm nedir?
Npm kullanma
Npm Komut Dosyaları
Yarn
Neden Yarn?
Npm ile Yarn
Kurulum
Yarn Kullanımı
Derleyici Kurulumu
Kurulum TypeScript Derleyicisi (tsc)
ES6 / ES2015
Sınıflar
Kapsam (var, let, const)
Ok İşlevleri
Modüller
Şablon Değişmezleri
Varsayılan, Dinlenme, Yayılma
Varsayılan
Dinlenme
Yaymak
Şeklini bozma
Opsiyonel Parametreler
Object.assign ()
Nesne Başlatıcı
TypeScript
TypeScript, ES6 ve ES5'i anlama
TypeScript Nasıl Çalışır?
TypeScript'in arkasında kim var?
Tür Açıklamaları
Sınıflar
Alanlar
Parametre Özellikleri
Üye görünürlüğü (genel, özel, korumalı)
Modülleri Otomatik Olarak İçe Aktar
Null yapılabilir Parametreler
Arayüzler
Jenerikler
Proje Kurulumu (React Uygulaması Oluştur)
Yeni Proje Oluşturun
Klasör Yapısı
Tarayıcı Desteği
Stiller ve Varlıklar
Bağımlılıklar
En İyi Uygulamalar (Kod Organizasyonu ve Kurallar)
React'e Genel Bakış
Neden tepki vermelisiniz?
Ne olduğunu?
Neden faydalıdır?
Açısal, React Karşılaştırıldı
Web uygulama mimarileri
Sunucu tarafı web uygulama mimarisi
Tek sayfalı web uygulama mimarisi
React Mimarisi
Elementler
JavaScript'te Merhaba Dünya
React'te Merhaba Dünya
JSX
CreateElement yerine
İfadeleri Gömme
Öznitelikleri Belirtme
Sanal DOM
Bileşenler
Bir Eleman Oluşturmak
Bir Fonksiyon Bileşeni Oluşturun
Bir Bileşeni Oluşturma
Bir Sınıf Bileşeni Oluşturma
Oluşturma ve Yeniden Kullanma
Sahne
Sadece oku
Dize Değişmezleri ve İfadeler
Sınıf Bileşenlerine Karşı İşlev
Etkinlikler
Bir Etkinliği Dinleme / Abone Olma / Kablolama
In Vanilla JavaScript
React'te: Fonksiyon Bileşeni
React'te: Sınıf Bileşeni
Bağlayıcı
Bağlama Neden Gereklidir?
Sınıf Yöntemi
Ok Fonksiyonu
Parametreleri Geçirme
Ok İşlevlerini Kullanma
Bağlamayı kullanma
Olayları Yönetme
Ok İşlevlerini Kullanma
Bağlamayı kullanma
Sentetik Olaylar
Kancalar
Tanım
Neden Hooks?
Kesintisiz Değişiklikler Yok
Hooks API: useState, useEffect, useRef, useContext
Kanca Kuralları
Durum
Tanım
Fonksiyon Bileşenlerinde Durum
useState Hook
Sınıf Bileşenlerinde Durum
Durumu setState ile değiştirme
Durumu Doğru Kullanmak
Veri Akıyor
Yan Etkiler ve Yaşam Döngüsü
kullanımEfekt Kanca
UseEffect ne işe yarar?
UseEffect'i kullanma
useEffect Demo
Yaşam Döngüsü Yöntemleri nelerdir
Montajı Anlamak
Yaygın ve Daha Az Yaygın Yöntemler
Yaşam Döngüsü Yöntemlerini Kullanma
Koşullu Oluşturma
Eğer, değilse
Koşullu Operatör (?)
Mantıksal (&&) Operatör
Listeler
In Vanilla JavaScript: for loop, array.forEach, array.map
React'te: Elemanları, Bileşenleri Kullanma
Anahtarlar Neden Gereklidir?
Bileşen Mimarisi
Yeniden kullan
Bileşen İletişimi
Tasarım desenleri
Kap ve Sunum Bileşenleri
Bileşim ve Miras
Formlar
Kontrollü Bileşenler
Çoklu Girişlerde Değişim Mantığının Yeniden Kullanımı
Form Gönderme İşlemi
Diğer Form Öğelerini Kontrol Etme: seçme, metin alanı, sayı
Doğrulama
Kontrolsüz Bileşenler
HTTP
Axios kütüphanesi
Fetch API
React ile kullanmak (HTTP GET)
Yeniden Kullanım için Yeniden Düzenleme
HTTP POST, PUT, DELETE
Yönlendirme (React Yönlendirici)
Kurulum
Temel bilgiler
İşleme Bulunamadı (404)
Parametreler (URL ve Sorgu)
Yuvalama
Kancalar
Tanımlı
Neden Hooks?
Breaking API Değişiklikleri Yok
Hooks API
UseState
UseEffect
Özel Kancalar
Kanca Kuralları
Oluşturun ve Dağıtın
Üretim için React Uygulaması Oluşturma
Bir React Uygulamasını Dağıtma
İstemci Tarafı Yönlendirme ile Uygulama Sunma
Ortam Değişkenlerini Özelleştirme
Özel Kancalar
Arka fon
Tanım
Durum bilgisi olan mantığın yeniden kullanımı
Bağlam
Bağlam ne zaman kullanılır?
useContext Hook
Durum Yönetimi
Devlet nedir?
Redux'a ne zaman ihtiyacınız var?
Redux Alternatifleri
Paylaşılan Durum için Bağlamı Kullanma
Sunucu Durumu: React Query, SWR veya GraphQL istemcisi
Redux
Redux nedir?
Devlet nedir?
Avantajlar Kontrol Listesi
Redux İlkeleri
Temel Kavramlar (Mağaza, Durum, Azaltıcılar, Eylemler, Eylem Oluşturucular)
Tamamlayıcı Paketler
Redux'a ne zaman ihtiyacınız var?
Temel Redux Örneği (zaman yolculuğunu içerir)
Gotchas / İpuçları
Redux'u React ile Kullanma (React Redux Kitaplığı)
Fonksiyon Bileşenlerinde React ile Redux
useSelector ve useDispatch Hooks
Sağlayıcı
Misal
Sınıf Bileşenlerinde React ile Redux
Üst Düzey Bileşenler
Bağlantı işlevi
MapState fonksiyonları yazma
Harita yazmaDispatch Fonksiyonları
Misal
Eşzamansız Eylemler (Redux Thunk)
Genel Bakış
Eşzamansız Eylemler (Thunks)
Kurulum
İlk Thunk'ınız
Tam CRUD Örneği
Hepsini Bir Araya Getirmek (React & Redux & Thunk)
Test yapmak
Araçlar (Jest, React Testing Library veya Enzyme, JSDOM)
Sözdizimi
Vanilla JavaScript'i Jest ile Test Etme
Alaycı
Alay Modülleri
Alay İşlevleri
Hata Ayıklama Testleri
Bileşen Testleri
Shallow
Tam
Snapshot
Redux Eylemlerini ve Thunks'u, Redüktörleri, HTTP'yi Test Etme
İsteğe Bağlı Konular / SSS (zaman kalırsa)
Şekillendirme
Sınıfları Kullanma
Stilleri Kullanma
JS'de CSS'ye Genel Bakış
Verim
Bir bileşenin işlenmesine ne sebep olur?
Wasted Renders
Memoization
React.memo
Saf Bileşenler
Gelişmiş Bileşenler
Üst Düzey Bileşenler
Sahne Oluştur
Diğer Eğitimler
Digital Vizyon
444 Eğitim Seti
