ReactJS ve Redux Eğitimi Yeni Dönem ( Uzaktan Eğitim )

Bir ReactJS ortamının nasıl kurulacağını öğreneceksiniz.
Virtual DOM ve ReactDOM ile tanışacaksınız.
Redux ve React bileşenleri için test yapıları hakkında bilgi edineceksiniz.

Real Dom / Virtual Dom

IDE / Text Editor Seçimi

Node.JS Kurulumu

Temel Node.JS

ES6 Modül Sistemi

Callback Functions / async-await

Promises

Array Functions

Bir React Projesini Ayağa Kaldırmak (create-react-app)

Component Nedir?

Component Oluşturmak/Kullanmak

JSX ve Temel Kuralları

Componentlerde Değişken Render Etmek

Koşullu Render İşlemi

Props Nedir? Nasıl Kullanılır?

Döngülerde "key" Prop'u

React Developer Tools

Prop Types

Prop Types: isRequired

Prop Types: oneOfType

Prop Types: shape

Default Props

State Nedir? Nasıl Oluşturulur?

Array States

Object States

Sayaç Uygulaması

Re-Render Mantığını Anlamak (React vs jQuery)

Input için State Tanımı Yapmak

useEffect

Component Unmount

Stil Tanımı Yapmak

Module CSS

Native Fetch
Axios

Kurulum

Exact Prop

URL Parameters

Nesting

NavLink

No Match (404)

Kurulum
handleSubmit & handleChange
Radio / Checkbox / Dropdown
useFormik
Form Validasyonları - 1
Form Validasyonları - 2

React.memo

useMemo

useCallback

Context Nedir?

Context Oluşturmak

Context Provider

Theme Switcher Yapımı

Context Provider Side Effects

Multi Context

Custom Context Hook

Arayüzün Hazırlanması

Socket Server'a Bağlanmak

Backend'e Veri İletmek

Bir Kanala Abone Olmak

Giriş

Chat Context

Temel Bileşenlerin Geliştirilmesi

Backend Bağlantısı

Mesajların İletilmesi

Mesajların Listelenmesi

Feed Scroll

React Intl - Kurulum

Default Locale

Parametre Geçmek

Neden Test Yazarız?

React Testing Library - 1

React Testing Library - 2

create-react-library

Publish İşlemleri

Semantic Versiyonlama

Surge.sh

Netlify

AWS EC2 Üzerine Deploy İşlemleri

Uygulama Tanitimi

Backend'e Genel Bakış

Chakra UI Kurulumu

Products Ekranının Hazırlanması

React Query

React Query Dev Tools

Ürün Detay Sayfasının Geliştirilmesi

useInfiniteQuery

Kullanıcı Kayıt İşlemleri - 1

Kullanıcı Kayıt İşlemleri - 2

Kullanıcı Kayıt İşlemleri - 3

Kullanıcı Kayıt İşlemleri - 4

Çıkış İşlemleri

Protected Routes

Login İşlemleri

Sepete Atma İşlemleri - 1

Sepete Atma İşlemleri - 2

Sipariş Oluşturma İşlemleri

Admin: Routing İşlemleri

Admin: Order Sayfası

Admin: Products Sayfası

Admin: Product Update İşlemleri

Admin: Yeni Ürün Eklemek

Redux Nedir? Neden İhtiyaç Duyarız?

Redux Data Flow

Stora Oluşturmak

Dispatch

combineReducer ile Multi Reducer Kullanımı

Store Subscribe

Initial State

Redux Dev Tools

Provider Nedir?

Dizin Yapısının Oluşturulması

Connect ile Component'e Bağlanmak

mapStateToProps

Action Dispatch Etmek

mapDispatchToProps

Component'e Props Geçmek

Merge Props

Thunk Middleware

Async Actions

Async Action Dispatch İşlemi

Async/Await ile Servis Çağrımı

Immutable vs Mutable

Array'i Immutable Saklamak

Redux Logger Middleware

Redux Promise Middleware

Proje Tanıtımı ve Projeyi Oluşturma

Proje Dizinlerinin Oluşturulması

Store ve Root Reducer'ı Oluşturmak

Redux Dev Tools & Thunk Middleware Kurulumları

Redux Provider

React Router Kurulumu

Movies Page Component Redux Store Bağlantısı

Movies List Component'inin Hazırlanması

Semantic UI Kurulumu

Semantic UI Tema Düzenlemeleri

Semantic UI Bug Fix - 1

Semantic UI Bug Fix - 2

Footer Component'inin Hazırlanması

Header Component'inin Hazırlanması

Semantic UI Tema Son İşlemler

Node.JS Backend'in Kurulması

mLab Düzeltme

Movies Action'ın Yazılması

Movies Reducer'ın Yazılması

MovieList PropType Tanımının Güncellenmesi

Redux Logger Kurulumu

Error Action Dispatch İşlemi

Redux Promise Middleware Kullanımı

Filmlerin Listelemesinin Yapılması

Filmlerin Listelemesinin Yapılması - 2

Loading Indicator

Routing Menüde Active Class Gösterimi

New Movie Sayfasının Hazırlanması

New Movie Form Component'inin Hazırlanması

New Movie Form Component'inin Hazırlanması - 2

New Movie Form Validasyon İşlemleri

New Movie Form Validasyon İşlemleri - 2

New Movie Sayfası Reducer Tanımının Yapılması

onNewMovieSubmit Action

onNewMovieSubmit Error Handling

Redirect ile Yönlendirme İşleminin Yapılması

Edit & Delete Butonlarının Hazırlanması

Movie Edit - Route İşlemleri

Movie Edit - Inputların Doldurulması

Movie Edit - Fetch Movie

Movie Edit - Loading Gösterimi

Movie Edit - Update

Delete Movie - 1

Delete Movie - 2

Redirect Bug Fix

Anasayfa Tasarımı

Server Side Rendering Nedir?

Next.JS Nedir?

Next.JS Kurulumu

Pages

Components

Link

Routing Query String Kullanımı

Routing as Operatörü

Layout

Head Component'i

Built in CSS

Next.JS ve Express ile Custom Route Oluşturmak

Hot Module Reloading

Isomorphic Fetch

Stateful Componentlerde Isomorphic Fetch

Prefetch

onMouseEnter Prefetch

PWA Nedir? Service Worker Nedir?

Next.JS Offline

Now Deploy