Description

Course content

• Giriş
  • React.JS Nedir ?
  • JavaScript ve Node.JS
  • GitHub Reposu
  • Component Nedir ?
  • Virtual Dom nedir ? (Sanal Dom)
  • One Way ve Two-Way Data Binding Nedir ?
  • React'i Kullanmak Ne Zaman Mantıklı ?
  • JSX Nedir ?
• Kurulumlar
  • Node.JS Kurulumu
  • React Dev Tools
  • WebStorm
  • WebStorm React Live Templates
• EcmaScript 6 Bilinmesi Gerekenler
  • Spread Operator
  • Array Map
  • Array Filter
  • Object.assign
• EcmaScript 6 Modül Sistemi
  • Babel Kurulumu
  • Modül Oluşturmak
  • Varsayılan Modül Belirlemek
  • as keyword'ü ile yeniden isimlendirme
  • Çoklu fonksiyonlu modüllerde as operatörü
  • Temiz modül yazmak
• Component'ler (Bileşenler)
  • Create-react-app ile Hello World!
  • Component oluşturmak ve kullanmak
  • Component oluşturmak ve kullanmak - 2
  • Özel tanımlı keywordler
  • Componentlerde değişkenkeri kullanmak
• Props'lar ile Çalışmak
  • Props nedir? Nasıl Kullanılır?
  • Props Kullanımı - 2
  • Props Kullanımı - 3
  • Props Kullanımı - 4
  • Döngülerde "key" Kullanımı
  • React Developer Tools
  • propTypes: Nedir? Nasıl kullanılır?
  • propTypes: "isRequired" Tanımı
  • propTypes: "oneOfType" Tanımı
  • oneOfType için isRequired kullanımı
  • propTypes: "shape" tanımı
  • defaultProps Tanımı
  • Constructor Metodu
• Eventler (Events)
  • Event Oluşturmak ve Context Bind Etmek
  • Constructor İçerisinde Binding
  • Arrow Function ile Binding
  • JSX içerisinde Arrow Function ile Binding
• State'ler ile Çalışmak
  • State nedir? Nasıl Oluşturulur?
  • setState Kullanımı
  • Re-Render Mantığını Anlamak
  • Counter Uygulaması
  • Stateful ve Stateless Componentler
• Telefon Rehberi Uygulaması
  • Giriş
  • "Contacts" ve "List" Componentlerinin Hazırlanması
  • Form Component'inin Hazırlanması
  • Contacts State'inin Hazırlanması
  • Contacts State Konumunun Değiştirilmesi
  • Form State'inin Yazılması
  • addContact Methodunun Yazılması
  • Filter Fonksiyonun Yazılması
  • Contacts Komponentinin Stateless Tanımlanması
• React Lifecycle (Yaşam döngüsü)
  • Constructor
  • componentWillMount()
  • componentDidMount()
  • componentDidMount() Hiyerarşisi Hakkında
  • componentWillReceiveProps()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • componentDidUpdate()
• Fetching
  • JavaScript Native "fetch" Fonksiyonu
  • "Loading..." Gösterimi
  • Axios
• React Router
  • BrowserRouter ve Exact Özelliği
  • Strict Özelliği
  • Component Özelliği
  • Route'a Parametre Göndermek
  • Link Objesi
  • NavLink Objesi
  • Redirect Objesi
  • Switch ile Hata Sayfası Yapımı
  • Component'leri Dışarıda Yazmak
• İleri Component Kullanımları
  • Higher Order Components
  • Reusable Higher Order Components
  • Pure Component
• Redux
  • Redux Nedir? Neden İhtiyaç Duyarız?
  • Redux Data Flow (Action, Reducer, Dispatcher, Store)
  • Store Oluşturmak
  • dispatch() Metodu ile Store'u Güncellemek
  • Store Subscribe Metodu
  • combineReducers ile Multi Reducer Kullanımı
  • Reducer'a Initial State Vermek
  • Redux Dev Tools
  • Provider Nedir?
  • Dizin Yapısının Oluşturulması
  • Connect ile Component'den Store'a Bağlantı Sağlamak
  • mapStateToProps
  • Action dispatch etmek
  • mapDispatchToProps
  • Component'e Props Geçmek
  • mergeProps
  • Redux Thunk Middleware: Kurulum
  • Async Actions
  • Async Action Dispatch İşlemi
  • Async/Await Yapısı ile Servis Çağrımı
• İleri Redux
  • Immutable vs Mutable
  • Immutable Array
  • Redux Logger Middleware
  • Async Actions Pattern
  • Async Actions Pattern: Redux Promise Middleware
• React & Redux Single Page Movieapp Projesi
  • Proje Tanıtımı ve React Uygulamasının Ayağa Kaldırılması
  • Proje Dizinlerinin Oluşturulması
  • Redux Kurulumu: Store'u ve Root Reducer'ı Oluşturmak
  • Redux Kurulumu: Thunk Middleware ve Redux Dev Tools
  • Redux Kurulumu: Provider
  • React Router Kurulumu
  • MoviesPage Component Redux Store Bağlantısı
  • MoviesList Component'inin Hazırlanması
  • Semantic.UI Kit: Kurulum
  • Semantic.UI Kit: Tema Düzenlemeleri
  • Semantic.UI Kit: Bug Fix
  • Semantic.UI Kit: Bug Fix 2
  • Footer Component'inin Yazılması
  • Header Component'inin Yazılması
  • Semantic.UI Kit: Son İşlemler
  • Bilgilendirme (mLab)
  • Node.JS Backend'in Kurulması
  • mLab Düzeltme
  • Movies Action'ının Yazılması: fetchMovies()
  • Movies Reducer'ının Yazılması: FETCH_MOVIES
  • MoviesList PropType Tanımının Güncellenmesi
  • Redux Logger Middleware Kurulumu
  • Movies Reducer'ının Yazılması: FETCH_MOVIES_ERROR
  • Redux Promise Middleware
  • Filmlerin Listelemesinin Yapılması
  • Filmlerin Listelemesinin Yapılması - 2
  • Loading Indicator'un Hazırlanmasi
  • Routing: Menüde Active Class Gösterimi
  • New Movie Sayfasının Hazırlanması
  • NewMovieForm Component'in Hazırlanması
  • NewMovieForm Component'in Hazırlanması - 2
  • NewMovieForm Validasyon İşlemleri
  • NewMovieForm Validasyon İşlemleri - 2
  • newMovie Sayfası Reducer Tanımının Yapılması
  • onNewMovieSubmit Action'ın Hazırlanması
  • onNewMovieSubmit Error Handle
  • Redirect ile Yönlendirme İşleminin Yapılması
  • Edit ve Delete Butonlarının Hazırlanması
  • Movie Edit: 1 - Route İşlemleri
  • Movie Edit: 2 - Inputların Doldurulması
  • Movie Edit: 3 - FETCH_MOVIE
  • Movie Edit 4 - Loading Gösterimi
  • Movie Edit 5 - Update
  • Delete Movie - 1
  • Delete Movie - 2
  • Redirect Bug Fix
  • Anasayfa Tasarımının Yapılması
• Deploy
  • Surge.sh: Deploy İşlemleri
  • Surge.sh: Route Problemi ve Çözümü
  • Surge.sh: Deploy Script'inin Yazılması
  • Netlify: Nedir? Manuel Deploy Nasıl Yapılır?
  • Netlify: Continuos Deployment
• [Bonus] Next.JS ile Server Side Rendering
  • Server Side Rendering Nedir?
  • Next.JS: Nedir?
  • Next.JS: Kurulum
  • Next.JS: Pages
  • Next.JS: Components
  • Next.JS: Link
  • Next.jS: Routing Query String
  • Next.JS: Routing As Özelliği
  • Next.JS: Layout
  • Next.JS: Head Component'i
  • Next.JS: Built-in Styled CSS
  • Next.JS: Express.JS ile Custom Route'lar Oluşturmak
  • Next.JS: Hot Module Reloading
  • Next.JS: Isomorphic Fetch
  • Next.JS: Stateful Componentlerde Isomorphic Fetch
  • Next.JS: Prefetch
  • Next.js: Prefetch onMouseEnter
  • Progressive Web: Service Workers Nedir?
  • Progressive Web: Next.JS: Offline
• Next.JS Deploy!
  • Now: Nedir? Nasıl Kullanılır? Deploy Nasıl Yapılır?

react-redux-egitimi.part1.rar

react-redux-egitimi.part2.rar