React and Redux Eğitimi

React, Facebook tarafından karmaşık tarayıcı tabanlı kullanıcı arayüzlerinin (diğer adıyla Tek Sayfa Uygulamaları) oluşturulmasını basitleştirmek için oluşturulan 2. nesil bir web çerçevesidir. Özel özniteliklere ve Angular tarafından yapılan kirli kontrole başvurmadan SPA'ların hızlı bir şekilde oluşturulmasını sağlayan, bildirime dayalı, bileşen tabanlı bir yaklaşım sunar.

React bileşen modeli, modern JavaScript (ES2015+) ile birleştirildiğinde en iyi halindedir. React'i bir sonraki seviyeye taşımak istiyorsanız, onu TypeScript ile kullanabilir ve güvenli kodlama uygulamaları ekleyebilirsiniz. JavaScript veya TypeScript'in en son özelliklerini React ile etkili bir şekilde kullanmak için bu teslimatın bir parçası olarak delegeleri seviyelendirebiliriz.

React yalnızca bir kullanıcı arabirimi çerçevesi olduğundan, uzak hizmetlere erişim, yönlendirme ve durum yönetimi (Redux gibi) için kitaplıklarla birleştirilmelidir. Odaklanmak istediğiniz parçaları dahil etmek için bu kursu ihtiyaçlarınıza göre özelleştirebiliriz.

Katılımcılar yetkin JavaScript veya TypeScript geliştiricileri olmalıdır. Tüm katılımcıları en son dil özelliklerine ayarlamak için dillerde bir başlangıç sağlanabilir.

Modern JavaScript'te (veya TypeScript) geliştirme konusunda kendinize güvenin

Modern SPA'lar oluşturmak için React geliştirmenin tüm yönlerini anlayın

Uygulamaları bileşenlere ayırma deneyimi kazanın

React uygulamalarını daha iyi tasarlamak için bir durum yönetimi kitaplığından yararlanın

React'e Giriş

• Angular ve React önceki çerçevelerden nasıl gelişti?
• React mimarisine ve Sanal DOM'a genel bakış
• Sanal DOM ile kirli kontrol arasındaki dengeler
• React Elements oluşturmak ve başlatmak için JSX sözdizimini kullanma
• React to Angular'da kodlamayı karşılaştırma
• React geliştirme için proje oluşturma
• Modern JavaScript (İsteğe bağlı)
• let anahtar sözcüğü ve blok kapsamı desteği
• Ok İşlevlerine ve Lodash kitaplığına sahip FP
• Sınıf bildirimi sözdizimi ve kalıtım
• Dizilerden ve nesnelerden öğeleri yok etme
• Haritadan yararlanma ve veri yapılarını ayarlama
• İşlevlerde ve oluşturucu oluşturmada iyileştirmeler
• Proxy'ler ve vaatler için standart bir model
• Promises yerine ve Promises ile birlikte zaman uyumsuz beklemeyi kullanma
• for…of döngüsü ve yayılma operatörü

React'e Başlarken

• JSX kullanan temel bileşenler oluşturma
• Bileşenlere veri aktarmak için özellikleri kullanma
• Ebeveyn-çocuk ilişkilerini yerleştirme ve yönetme
• Babel kullanarak hem JSX hem de ES6'yı aktarma
• Bileşenlerinizi birim testine Jest eklemek
• Hızlı birim testi oluşturmak için anlık görüntüleri kullanma
• Bileşen kullanıcı arabirimi yapısını programlı olarak doğrulama
• Tek Sayfa Web Uygulamaları Oluşturma
• React bileşenleri için yaşam döngüsü geri aramalarını kullanma
• State özelliğini kullanan kalıcı değerler
• Karmaşık kullanıcı arabirimleri için bileşenlerin hiyerarşilerini tasarlama
• RESTful hizmetleriyle etkileşim kurma
• Birim ve entegrasyon testi için tasarımınızı modülerleştirme
• Eksiksiz bir SPA tabanlı Web Uygulaması oluşturma ve test etme
• Uygulamanıza Yönlendirme ekleme
• Gereksiz işlemeleri kaldırarak performansı optimize etme
• Tepki Kancaları
• İşlevsel Bileşenler ve Sınıf Bileşenleri
• Yeniden Seçimin React Hooks'a evrimi
• UseState ile durumu yönetme
• useEffect ile yan etkiler ekleme
• Performans için ezberlemenin önemi
• useMemo ve useCallback'ten yararlanma
• Özel kancalar yazma

React Uygulamalarını Şekillendirme

• Stil seçeneklerini belirleme
• Global stiller ve ad çakışmalarından kaçınma
• CSS Modüllerini kullanarak stilleri kapsülleme
• Dinamik stiller için satır içi stiller
• Dinamik stiller için stilli bileşenleri kullanma
• Gelişmiş Konular (Opsiyonel)
• Yavaş yükleme bileşenleri ve kod bölme
• HTML öğelerine yapılan başvurulara erişme
• Oluştur-tepki-uygulamasını özelleştirme
• tepki-intl kullanarak içselleştirme
• Cypress ile Uçtan Uca Test

React'i Redux ile Birleştirme (Opsiyonel)

• SPA'larda karmaşık durumu yönetirken yaşanan sorunlar
• Durumu merkezileştirmek ve yönetmek için bir çerçeve kullanma
• Mağazalar, Eylemler ve Düşürücüler oluşturma ve kullanma
• Verilerinizi bir geçiş dizisi olarak işleme
• Standartları azaltmak için Redux Toolkit'i kullanma
• Durumu, eylemleri ve indirgeyicileri Dilimler halinde gruplama
• Eşzamansız eylemler, parçalar ve Redux ara yazılımı
• Redux Thunk'u varsayılan Redux ara yazılımınız olarak benimsemek
• Daha karmaşık senaryolar için Redux Saga'nın avantajları

Redux geliştirme araçları