React

React (Axios, Hooks, Router, Heroku) ile Reaktif Programlama

Merhaba sevgili okur.

Aslında başlı başına koca bir kitap olması gereken React’ı elimden geldiğince en temelinden React’a giriş yapacak ve React ile bilinmesi gereken çoğu şeyi size en güncel hali ile (2019 Eylül) anlatmaya çalışacağım.

Kitaba başlamadan önce EcmaScript 6 bildiğinizi düşünerek ilerleyeceğim. Eğer EcmaScript 6 konusunda zorlanıyorsanız veya yeterince bilginiz yoksa blog’umda yer alan “Hızlandırlmış EcmaScript 6 Dersleri” makalelerine çalışıp yeterli seviyeye ulaşabilirsiniz.

Kitapta genel olarak işlenen konu başlıkları şunlardır:

React ile İlgili Temel Kavramlar

- React Nedir ve Ne Amaçla Kullanılır

- Virtual DOM (VDOM, Sanal DOM)

- Component (Bileşen)

- JSX

- One Way Binding (Tek Yön Bağlama)

Geliştirme Ortamının Hazırlanması

- Node.js ve Node Package Manager Kurulumu

- Visual Code

- React Dev Tools Eklentisi

NPX Git Reposu ile İlk Uygulamayı Ayağa Kaldırmak ve Proje Yapısını İncelemek

- NPX Kurulumu

- create-react-app Reposunu İndirmek

- React Projesinin Ayağa Kaldırılması

- React Projesinin Dosyalarını İncelemek

Örnek Proje Hakkında

Component’ler ile Çalışmak ve Component’lerde CSS Kullanımı

- Fonksiyon Component’lerle (Stateless, Dump) Çalışmak

- Class Componet’lerle (Stateful, Smart) Çalışmak

- İç İçe Component’ler

State’ler ile Çalışmak

State Objesi Oluşturmak

- State Verilerini Arayüzde Göstermek

- Form Elemanları ile Çalışmak, Fonksiyonlara Parametre Göndermek ve State Verilerini Güncellemek

props’lar ile Çalışmak

- Compoent’lere Props Aktarımı

- Varsayılan Props’lar

- Props Doğrulama (Validation)

ref (Referans)

Router (Yönlendirmeler)

- React Router Modülünü Kurulumu

- İç Sayfalarının Şablonlarının Oluşturulması

- Yönlendirmeler ve Varsayılan Açılış Sayfasını Tanımlama

- Yönlendirmelerde Parametre Gönderimi

Component LifeCycle (Yaşam Döngüsü)

- Initialization (Başlatma) Metotları

- Mounting (Binme) Metotları

- componentWillMount()

- render()

- componentDidMount()

- Mounting Metotları Örnek Kullanımı

- Updation (Güncelleme) Metotları

- componentWillReceiveProps(nextProps)

- shouldComponentUpdate(nextProps,nextState)

- componentWillUpdate(nextProps,nextState)

- componentDidUpdate(nextProps,nextState)

- getSnapshotBeforeUpdate(nextProps,nextState)

- Updating Metotları Örnek Kullanımı

- Unmounting (Kaldırma)

- componentWillUnmount()

- Unmounting Metodu Örnek Kullanımı

- Error (Hata) Yakalama

- componentDidCatch(error,errorInfo)

- Error Metodu Örnek Kullanımı

AXIOS ile Restfull API İşlemleri

- AXIOS Modülünün Kurulumu

- AXIOS ile Veri Çekme (GET) ve map() Etme

- UPDATE, DELETE, POST Metotlarının Kullanımı ve Header Parametreleri

- Global Varsayılan Tanımlamalar

- Asenkron ve Bekleme (async/await)

HOOKS ile State Yönetimi

- Hooks Nedir

- State Hook: useState()

- Efekt Hook: useEffect()

- Hooks Kuralları

React Semantic UI Kütüphaneleri

- Bootstrap

- Semantic UI

- Material UI

Depoloyment

- Statik Yayın ile Deployment

- Adım Adım Heroku Üzerinde Depolment

- Kurulum Gereksinimleri