Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitim serisinin üçüncü bölümü olup, bir eğitmen tarafından React ve Redux kullanarak basit bir web uygulaması oluşturma sürecini göstermektedir.
- Video, React ve Redux ile bir proje oluşturma sürecini adım adım anlatmaktadır. Eğitmen önce temel dosyaları (index.js, App.js, Store.js) oluşturup, React ve Redux kütüphanelerini import etmeyi, ardından React Router ile sayfa yönlendirmesini ve Redux store'larını oluşturmayı göstermektedir. Eğitim serisinin stratejisi, önce CC React classs yapısı ile projeyi oluşturup uçtan uca ayağa kaldırmak, sonra aynı projeyi birebir COCATE yapıp React hooks olarak dönüştürmek ve bu dönüşüm sırasında hook kullanımını öğrenmek şeklinde ilerlemektedir.
- 00:07Eğitim Serisi Stratejisi
- Eğitim serisinde önce CC React classs yapısı ile bir proje oluşturulacak ve uçtan uca ayağa kaldırılacak.
- Aynı proje birebir Cocate yapıp React hooks olarak convert edilecek ve bu conversion yaparken hook kullanımını öğrenilecek.
- 00:42Index Dosyası Oluşturma
- Index dosyasında React ve React içerisindeki komponent bileşeni import ediliyor.
- Ana giriş için React Redux kütüphanesi import ediliyor ve Redux'tan oluşturulan store bileşenini React bileşenlerine enjekte eden Provider kullanılıyor.
- App komponenti oluşturulacak ve Redux store import edilecek.
- 02:44Bootstrap Kullanımı
- Projede Bootstrap kullanılacak ve Bootstrap'in production dosyası (bootstrap.min.css) bundle'ın içerisine girecek.
- Webpack ilgili loader'ları bildirilecek.
- 03:22React Render İşlemi
- React render fonksiyonu birinci parametre olarak bir komponent, ikinci parametre olarak bir do nesnesi alıyor.
- App komponenti render edilecek ve uygulamanın tamamında Redux'ın geçerli olması için Provider ile sarılacak.
- Provider'a store olarak yukarıda import edilen store'un kendisi verilecek.
- 04:49App Komponenti Oluşturma
- App komponenti uygulamanın ana temellerini oluşturacak ve içerisinde React Router içerecek.
- Projede sadece komponent import edip React hiç import etmezseniz React not found gibi hatalar ile karşılaşabilirsiniz.
- Hash Router, Switch ve Root özellikleri React Router'dan import ediliyor.
- 06:23Sayfa Tanımları
- İki adet sayfa olacak: Dashboard ve Login.
- Bu sayfalar kendi dosyalarından import edilecek.
- Klasik klas paterni kullanılarak standart format uygulanacak.
- 07:21Router Yapısı
- Router nesnesi return edecek ve içerisinde bir div olacak.
- Switch router objenin içerisinde switch konur ve switch'in içerisine rootlar konur.
- Eğer root'un adı dashboard ise dashboard bileşeni, login ise login bileşeni render edilecek.
- 09:21Redux Store Oluşturma
- Store bileşeni oluşturulacak ve createStore ile combineReducers fonksiyonları import edilecek.
- İki adet reducer (dashboard ve login) oluşturulacak ve bunlar birleştirilerek tek bir reducer oluşturulacak.
- Initial state'ler olarak counter ve name değerleri tanımlanacak.
- 11:35Reducer Fonksiyonları
- Redux reduceleri initial state ve action parametrelerini alıyor.
- SetLogin fonksiyonu action değeri değiştiğinde switch ediyor ve login objesini set ediyor.
- SetTitle fonksiyonu action değeri geldiğinde title değerini alıyor ve counter değerini artıran bir fonksiyon yazılacak.