Modern Frontend (React.js) Masterclass Nasıl Çalışılır? Adım Adım Yol Haritası

Aşama 1: Modern JS & React Giriş

ES6+, JSX, Components, Props

01

ES6+ React İçin Neden Kritik?

Destructuring, Arrow Functions ve Spread.

02

JSX: JavaScript XML Nedir?

HTML'i JS içinde yazma sanatı.

03

Class vs Functional Components

React'ın tarihsel evrimi.

04

Props: Bileşenler Arası Veri Taşıma

Input değerleri ve salt-okunur yapı.

05

Koşullu Görüntüleme (Conditional Rendering)

Veriye göre arayüzü değiştirme.

06

Listeler ve Anahtarlar (Lists and Keys)

Döngüyle veri basma ve Key mantığı.

07

Fragment (<> ) Kullanımı

DOM kalabalığını önleme.

08

Bileşen Parçalama (Thinking in React)

Kodu atomik parçalara bölme.

09

Olay Yönetimi (Handling Events)

onClick, onChange yakalama.

10

Props Drilling Problemi

Verinin katmanlar arasında kaybolması.

11

Children Prop: İçerik Yerleştirme

Bileşen içine bileşen gömme.

Aşama 2: Hooks & State Management

useState, useEffect, Custom Hooks

01

useState: Dinamik Veri Yönetimi

Arayüzü güncelleyen değişkenler.

02

useEffect: Yaşam Döngüsü ve Yan Etkiler

API çağırma ve temizlik işlemleri.

03

useRef: DOM Erişimi ve Bellek

Değer saklama ama render etmeme.

04

useMemo: Performans Hesaplamaları

Ağır işlemleri önbelleğe alma (Caching).

05

useCallback: Fonksiyon Memoization

Fonksiyonları hafızada tutma.

06

useReducer: Karmaşık Durum (State) Yönetimi

Redux benzeri yerel yönetim.

07

Custom Hooks Yazımı

Mantığı (logic) bileşenden ayırma.

08

useLayoutEffect vs useEffect

Görsel güncellemelerden önce çalışma.

09

Kanca Kuralları (Hooks Rules)

Sadece en üst seviyede çağırma.

10

Bayat Kapanışlar (Stale Closures) ve useEffect

Eski değerlerin takılması sorunu.

11

React 18: useId ve useDeferredValue

Erişilebilirlik ve performans.

Aşama 3: Advanced Patterns & Reusability

Composition, HOCs, Render Props

01

Composition vs Inheritance

Bileşenleri birleştirme sanatı.

02

Yüksek Dereceli Bileşenler (Higher-Order Components - HOC)

Bileşeni fonksiyona sokup özellik katma.

03

Render Props Deseni

Fonksiyon dönen proplar.

04

Bileşik Bileşenler (Compound Components) Deseni

Birbirine bağlı atomik bileşenler.

05

Kontrollü vs Kontrolsüz Bileşenler

Form verilerinin kontrolü kimde?.

06

Portals: DOM'un Dışına Çıkmak

Modalları kök dizine basma.

07

Hata Sınırları (Error Boundaries)

Uygulamanın tamamen çökmesini önleme.

08

Prop Collections & Getters

Karmaşık propları yönetme.

09

Kapsayıcı (Container) ve Sunumsal Bileşenler

İş mantığı (Logic) ve Görseli ayırma.

10

Ref'leri İletme (Forwarding Refs)

Alt bileşandeki DOM'a dışarıdan erişim.

11

Yüksek Dereceli Kancalar (Higher-Order Hooks)

Hookları parametreyle özelleştirme.

Aşama 4: React'ta Stil Yönetimi

Tailwind CSS, Styled Components, Modules

01

Inline Styles: JS İçinde CSS

Style objesiyle hızlı tasarım.

02

CSS Modules: İzole Stiller

Class ismi çakışmalarını önleme.

03

Tailwind CSS Entegrasyonu

Utility-first CSS devrimi.

04

Styled Components (CSS-in-JS)

Stilleri bileşen gibi tanımlama.

05

Sass/SCSS: Güçlü Stil Dili

Değişkenler ve Mixinler.

06

Dinamik Sınıf (Class) Seçimi

Koşullu class atama araçları.

07

Duyarlı (Responsive) Tasarım: React Yaklaşımı

Mobil uyumlu bileşenler.

08

CSS Variables (Modern Approach)

Global değişkenleri yönetme.

09

Bileşen Kütüphaneleri (Component Libraries)

Hazır bileşen kitleri.

10

Animations in React (Framer Motion)

Akışkan ve şık geçişler.

11

Temalandırma ve Tasarım Sistemleri (Theming)

Kendi tasarım dilinizi kurma.

Aşama 5: Form Yönetimi (Hook Form & Zod)

Validation, Schemas, Performance

01

React Hook Form (RHF) Giriş

Performanslı form yönetimi.

02

Zod ile Schema Validation

Tip güvenli form doğrulaması.

03

RHF ve Zod Entegrasyonu

Resolver kullanımı.

04

Controller ve DevUI Bileşenleri

MUI/Tailwind bileşenlerini RHF'e bağlama.

05

Dinamik Formlar (useFieldArray)

Kullanıcının satır ekleyip silebildiği yapılar.

06

Form Durumları (isDirty, isSubmitting)

Kullanıcıya bildirim verme.

07

Çok Adımlı (Wizard) Formlar

Adım adım form doldurma mantığı.

08

Formlarda Dosya Yükleme (File Upload)

Dosya seçimi ve validasyonu.

09

Watch ve GetValues

Değerleri anlık izleme farkları.

10

Asenkron Doğrulama (Async Validation)

Veritabanından veri kontrolü.

11

Hata Yönetimi: Gösterim Teknikleri

Kullanıcı dostu hata mesajları.

Aşama 6: Routing (React Router v6)

Nested Routes, Loaders, Actions

01

React Router v6.4+ Data APIs

Modern routing yaklaşımı.

02

Nested Routes ve <Outlet />

İç içe geçmiş sayfa yapıları.

03

Loaders: Sayfa Açılmadan Veri Çekme

Route bazlı veri yükleme.

04

Actions: Form Gönderim Yönetimi

Rota bazlı form aksiyonları.

05

Dynamic Segments ve Params

ID bazlı rotalar.

06

Search Params (URL Queries)

Filtreleme ve arama.

07

Error Elements (v6 Power)

Rota bazlı hata yakalama.

08

Korumalı Rotalar (Protected Routes)

Yetkisiz erişimi engelleme.

09

Tembel Yüklemeli Rotalar (Lazy Loading Routes)

Sayfaları ihtiyaç anında yükleme.

10

useNavigate ve useLocation

Kodla sayfa yönlendirme.

11

Kaydırma (Scroll) Restorasyonu

Geri gelince kaldığı yeri hatırlama.

Aşama 7: Context API & Redux Toolkit

Global State, Slices, Async Thunks

01

Context API: Basit Global State

Kütüphanesiz veri paylaşımı.

02

Context Performansı: Yeniden Render Sorunu

Neden her zaman Context kullanılmaz?.

03

Redux Toolkit (RTK) Giriş

Modern ve kolaylaştırılmış Redux.

04

Dilimler (Slices): State ve Reducer Birleşimi

Mantıksal parçalara bölme.

05

Immer Library: Mutable Magic

State'i doğrudan değiştirme lüksü.

06

Tipli Kancalar (Typed Hooks)

TypeScript ile Redux kullanımı.

07

createAsyncThunk: API İstekleri

Redux içinde asenkron işlemler.

08

Varlık Adaptörü (Entity Adapter)

Normalizasyon ve ID bazlı veriler.

09

Redux Middleware

Aksiyonlar arasına girmek.

10

Redux DevTools: Zaman Yolculuğu

State geçmişini izleme.

11

RTK Query (Opsiyonel)

Redux içinde veri çekme motoru.

12

Saf Fonksiyonlar ve Öngörülebilir Durum (Predictable State)

Redux felsefesi.

Aşama 8: Zustand & React Query

Data Fetching, Caching, Mutations

01

React Query (TanStack Query) Giriş

Sunucu state yönetimi (Server State).

02

useQuery: Veri Çekme ve Caching

Stale-while-revalidate mantığı.

03

useMutation: Veri Güncelleme

POST/PUT/DELETE işlemleri.

04

Optimistic Updates

Daha cevap gelmeden arayüzü güncelleme.

05

Sayfalama (Pagination) ve Sonsuz Kaydırma (Infinite Scroll)

Büyük verileri parça parça çekme.

06

Önceden Veri Çekme (Prefetching)

Veriyi arka planda önden çekme.

07

Zustand: Hafif ve Güçlü State

Redux'un 10 kat daha basiti.

08

Zustand Kalıcılığı (Persistence)

State'i LocalStorage'da saklama.

09

React Query DevTools

Ağ isteklerini görsel izleme.

10

Paralel ve Bağımlı Sorgular (Dependent Queries)

Bağımlı sorguları yönetme.

11

Manuel Sorgu Geçersiz Kılma (Query Invalidation)

Veriyi zorla güncelleme (Refresh).

Aşama 9: Performance Optimization

memo, useMemo, Virtualization, Bundle size

01

React Profiler ile Darboğaz Tespiti

Hangi bileşen neden yavaş? analizi.

02

React.memo() ile Gereksiz Render Önleme

Props değişmedikçe render etmeme.

03

useMemo ve useCallback Derin Bakış

Hesaplama ve fonksiyonları sabitleme.

04

Kod Bölme (Code Splitting)

Ana paketi parçalara bölme.

05

Pencereleme / Sanallaştırma (Windowing)

Binlerce veriyi kasmadan listeleme.

06

Varlık Optimizasyonu (Asset Optimization)

Görsel ve yazı tipi yönetimi.

07

Web Workers ile Ağır İş Hesaplama

Ana thread'i kasmadan işlem yapma.

08

Paket Boyutu İzleme (Bundle Size Monitoring)

Kütüphanelerin kapladığı yeri görme.

09

Transition API (v18): useTransition

Düşük öncelikli güncellemeler.

10

Throttling ve Debouncing (Logic)

Sık tetiklenen olayları sınırlama.

11

React DevTools: Highlight Updates

Render anlarını görsel izleme.

Aşama 10: Testing (Vitest & RTL)

Unit, Integration, Mocking, Coverage

01

Unit Testing Temelleri (Vitest)

Hızlı ve modern test runner.

02

React Testing Library (RTL) Felsefesi

Kullanıcı odaklı test yazımı.

03

Bileşen Renderlama ve Sorgular (Queries)

Bileşeni render edip bulma yolları.

04

Kullanıcı Olayları (User Events)

Kullanıcı etkileşimlerini simüle etme.

05

Mocking API (MSW - Mock Service Worker)

Gerçek ağ isteklerini taklit etme.

06

Asenkron Kod Testi (WaitFor)

Zaman alan işlemlerin sonunu bekleme.

07

Özel Kancaları (Custom Hooks) Test Etme

Mantıksal parçaları bileşensiz test etme.

08

Context ve Global State Testi

Providerlar ile çevreleme.

09

Anlık Görüntü (Snapshot) Testi

Arayüzün fotoğrafını çekip değişim takibi.

10

Code Coverage (Test Kapsamı)

Kodun ne kadarı testlerden geçti?.

11

Sürekli Test Etme (Continuous Testing)

Otomatik test koşturma.

Aşama 11: Next.js & Server Components

App Router, SSR, Server Actions, SEO

01

Next.js 14+ App Router Mimarisi

Modern routing ve klasör yapısı.

02

React Sunucu Bileşenleri (Server Components)

İstemciye sıfır JS gönderen bileşenler.

03

Sunucu Eylemleri (Server Actions): Form Gönderimi

API yazmadan veritabanına veri yazma.

04

Rendering: SSR, SSG ve ISR

Farklı içerik sunma stratejileri.

05

Next.js'de Veri Çekme (Data Fetching)

Fetch API güçlendiricileri.

06

Streaming ve Suspense

Sayfayı parça parça kullanıcıya gönderme.

07

Görsel Optimizasyonu (<Image />)

Otomatik boyutlandırma ve WebP.

08

SEO ve Metadata API

Google dostu uygulamalar.

09

Middleware: Giriş ve Rota Yönetimi

Trafiği sayfaya gitmeden kesme.

10

Rota Yöneticileri (Route Handlers / API Routes)

Kendi REST API'nizi Next içinde yazma.

11

Next.js Fonts and Scripts

Otomatik font optimizasyonu.

12

İstemci (Client) vs Sunucu Bileşenleri Sınırı

Hangi bileşen nerede yaşamalı?.

Aşama 12: Deployment & Best Practices

Vercel, Security, Clean Architecture

01

Vercel Deployment ve CI/CD

Dünya standartlarında yayına alma.

02

Çevresel Değişken (Environment Variables) Yönetimi

Şifreleri güvende tutma.

03

Temiz Mimari (Clean Architecture)

Kurumsal dosya düzeni.

04

Güvenlik: XSS ve CSRF Korunma

Frontend güvenlik önlemleri.

05

Erişilebilirlik (Accessibility) Standartları

Herkes için erişilebilir web.

06

Hata Loglama (Error Logging)

Kullanıcı hatalarını canlı izleme.

07

SEO Best Practices (Lighthouse)

Arama motoru puanını artırma.

08

Durum Birlikteliği (State Colocation)

State'i ihtiyacı olan yere koyma.

09

Kod Stili ve Linting (ESLint/Prettier)

Kod kalitesi ve standartlar.

10

Micro-Frontends Mimarisi (Giriş)

Büyük uygulamaları küçük uygulamalara bölme.

11

Paket Boyutu ve Temel Web Verileri (Core Web Vitals)

Kullanıcı deneyimi ölçümü.