// Frontend Öğrenme Yol Haritası

React
Roadmap

Sıfırdan production-ready React geliştirici olmak için
adım adım, konu başlıklı ve proje tabanlı rehber.

8 Faz
3–9 Ay
30+ Proje
60+ Konu
aşağı kaydır
// Öğrenme Akışı
JS
JS Temelleri
2–4 hafta
01
React Giriş
2–3 hafta
02
Hooks
2–3 hafta
03
State Yönetimi
2–3 hafta
04
Routing & API
2 hafta
05
Performans
2 hafta
06
Test & Kalite
2 hafta
07
Production
2–3 hafta
// 00

Ön Koşullar

⚡
Faz 00 — Zorunlu Temel
Modern JavaScript ES6+
2–4 hafta başlangıç
ES6+ Sözdizimi
  • let, const vs var farkı
  • Arrow functions
  • Template literals
  • Destructuring (obje & dizi)
  • Spread / Rest operatörü (...)
  • Default parametreler
Asenkron JS
  • Callback fonksiyonları
  • Promise ve .then()/.catch()
  • async / await sözdizimi
  • fetch API ile HTTP istekleri
  • try/catch/finally
Dizi Metodları
  • map(), filter(), reduce()
  • find(), findIndex()
  • some(), every()
  • flat(), flatMap()
  • Fonksiyonel programlama mantığı
Modüller & Sınıflar
  • import / export sözdizimi
  • Default vs named export
  • ES6 Classes ve inheritance
  • Optional chaining (?.) ve nullish (??)
  • Closures ve scope kavramı
Kritik: React'i öğrenmeden önce bu konuları iyice kavra. Özellikle map(), destructuring ve async/await — bunları anlamadan React kodu okumak çok zorlaşır.
// 01

React Temelleri

⚛
Faz 01 — Çekirdek Kavramlar
React'e Giriş & Bileşenler
2–3 hafta başlangıç
React Nedir?
  • Virtual DOM ve Reconciliation
  • React vs Vanilla JS farkı
  • SPA (Single Page Application) kavramı
  • Vite ile proje kurulumu
  • Proje yapısı ve dosya düzeni
JSX
  • JSX sözdizimi ve kuralları
  • className vs class farkı
  • JavaScript ifadeleri JSX içinde
  • Koşullu render (&&, ternary)
  • Listeler ve key prop
Bileşenler (Components)
  • Fonksiyonel bileşenler
  • Bileşen hiyerarşisi & kompozisyon
  • Bileşen dosya yapısı
  • Default ve named export
  • Children prop
Props
  • Props geçirme ve alma
  • Props destructuring
  • Default props değerleri
  • PropTypes ile tip kontrolü
  • Props drilling sorunu
State & Events
  • useState hook'una giriş
  • State güncellemesi (immutability)
  • Event handling (onClick, onChange)
  • Form yönetimi temelleri
  • Controlled vs Uncontrolled components
// Faz Projeleri
Counter Uygulaması Todo List Renk Değiştirici Basit Form Uygulaması
İpucu: Her konuyu öğrendikten hemen sonra küçük bir demo yap. React öğrenmek okumakla değil, yazmakla olur.
// 02

Hooks Dünyası

🪝
Faz 02 — React Hooks
Built-in Hooks & Custom Hooks
2–3 hafta orta
useState & useReducer
  • useState ile karmaşık state
  • Fonksiyonel güncelleme formu
  • useReducer ile state makinesi
  • dispatch ve action pattern
  • Ne zaman reducer kullanılır?
useEffect
  • Bileşen yaşam döngüsü
  • Dependency array mantığı
  • Cleanup fonksiyonu
  • API çağrıları useEffect içinde
  • Race condition ve AbortController
useRef & useCallback
  • DOM erişimi için useRef
  • Persistent değerler (render'lar arası)
  • useCallback ile fonksiyon memoization
  • useMemo ile hesaplama önbellekleme
  • Bağımlılık dizisi tuzakları
useContext
  • Context oluşturma (createContext)
  • Provider ve Consumer
  • useContext hook'u
  • Context ile tema/dil yönetimi
  • Context performans tuzakları
Custom Hooks
  • Custom hook anatomisi
  • useFetch — API çağrısı hook'u
  • useLocalStorage hook'u
  • useDebounce hook'u
  • Hook'ları kütüphaneleştirme
// Faz Projeleri
Hava Durumu Uygulaması (API) Dark / Light Mode Toggle Autocomplete Arama Custom useFetch Hook
Dikkat: useEffect bağımlılık dizisini yanlış yazmak en yaygın React hatasıdır. ESLint plugin'i exhaustive-deps kuralını aktif et.
// 03

State Yönetimi

🗃
Faz 03 — Global State
Zustand, Redux Toolkit & React Query
2–3 hafta orta
State Yönetimi Temelleri
  • Local vs Global state ayrımı
  • Props drilling problemi & çözümler
  • State lifting pattern
  • Ne zaman global state?
  • State yönetimi araçları karşılaştırması
Zustand
  • Store oluşturma (create)
  • Actions ve selectors
  • Immer ile immutable updates
  • Persist middleware
  • DevTools entegrasyonu
Redux Toolkit
  • configureStore ile kurulum
  • createSlice ve reducers
  • createAsyncThunk
  • RTK Query ile API yönetimi
  • Redux DevTools kullanımı
React Query (TanStack)
  • useQuery ile veri getirme
  • useMutation ile veri yazma
  • Cache ve stale time yönetimi
  • Optimistic updates
  • Infinite scroll & pagination
// Faz Projeleri
E-Ticaret Sepet (Zustand) Blog Uygulaması (React Query) Kullanıcı Yönetimi (RTK)
Tavsiye: 2024 itibarıyla çoğu proje için Zustand + React Query kombinasyonu Redux'tan daha pragmatik ve öğrenmesi kolay bir seçimdir.
// 04

Routing & API

🛣
Faz 04 — Navigasyon & Veri
React Router v6 & HTTP İletişimi
2 hafta orta
React Router v6
  • BrowserRouter & Routes kurulumu
  • Route, Link, NavLink bileşenleri
  • URL parametreleri (useParams)
  • Query string (useSearchParams)
  • Programatik navigasyon (useNavigate)
Gelişmiş Routing
  • Nested routes yapısı
  • Outlet bileşeni
  • Protected routes (auth guard)
  • Lazy loading ile code splitting
  • 404 ve redirect yönetimi
API İletişimi
  • fetch API ile CRUD işlemleri
  • Axios kurulumu ve interceptors
  • Base URL ve headers yönetimi
  • Error handling stratejileri
  • Loading & error state yönetimi
Authentication
  • JWT token yönetimi
  • localStorage ile token saklama
  • Axios request interceptor
  • Refresh token pattern
  • Auth context oluşturma
// Faz Projeleri
Çok Sayfalı Portfolio Login + Protected Routes Movie / Book Keşif Uygulaması
// 05

Performans

⚡
Faz 05 — Optimizasyon
Re-render Kontrolü & Code Splitting
2 hafta ileri
Re-render Optimizasyonu
  • React.memo ile bileşen memoization
  • useMemo ile hesaplama cache
  • useCallback ile fonksiyon cache
  • Re-render tetikleyicileri anlama
  • React Profiler ile analiz
Code Splitting
  • React.lazy ile dinamik import
  • Suspense ve fallback UI
  • Route-based code splitting
  • Component-level splitting
  • Bundle analizi (vite-bundle-analyzer)
Sanallaştırma (Virtualization)
  • Büyük liste problemi
  • react-window ile windowing
  • TanStack Virtual kullanımı
  • Infinite scroll implementasyonu
  • Image lazy loading
Web Vitals & Ölçüm
  • LCP, FID, CLS metrikleri
  • Chrome DevTools Performance tab
  • Lighthouse ile audit
  • React DevTools Profiler
  • why-did-you-render kütüphanesi
// Faz Projeleri
10.000 Satırlık Sanal Liste Lazy-loaded Dashboard Performans Audit Raporu
Altın kural: Önce çalış, sonra ölç, sonra optimize et. Erken optimizasyon yapma — React DevTools Profiler ile gerçek bottleneck'i bul.
// 06

Test & Kalite

🧪
Faz 06 — Test Stratejisi
Vitest, Testing Library & Cypress
2 hafta ileri
Unit & Entegrasyon Testi
  • Vitest kurulumu ve yapılandırması
  • describe, it, expect sözdizimi
  • @testing-library/react
  • render, screen, userEvent
  • Custom hook testi
Mock & Spy
  • vi.mock ile modül mocklamak
  • API isteklerini mocklama (msw)
  • Mock Service Worker (MSW)
  • Spy fonksiyonlar
  • Snapshot testleri
E2E Test (Cypress)
  • Cypress kurulumu
  • cy.visit, cy.get, cy.click
  • Form doldurma ve gönderme
  • API intercept
  • CI/CD entegrasyonu
Kod Kalitesi
  • ESLint kurulum ve kurallar
  • Prettier yapılandırması
  • Husky ile pre-commit hook
  • lint-staged kullanımı
  • TypeScript ile tip güvenliği
// Faz Projeleri
Todo App için Unit Testler Auth Flow E2E Testi %80+ Coverage Projesi
// 07

Production & İleri Konular

🚀
Faz 07 — Production Ready
Next.js, TypeScript, Deployment & Ekosistem
2–3 hafta ileri
Next.js (App Router)
  • Server vs Client Components
  • File-based routing sistemi
  • Server Actions
  • Static & Dynamic rendering
  • Metadata ve SEO yönetimi
TypeScript ile React
  • Props type tanımlama (interface)
  • useState ile generic tipler
  • Event tipleri (MouseEvent vb.)
  • Generic bileşenler
  • Utility types (Partial, Pick, Omit)
Styling Araçları
  • Tailwind CSS ile hızlı styling
  • CSS Modules
  • Styled-components / Emotion
  • shadcn/ui bileşen kütüphanesi
  • Framer Motion ile animasyon
Form Yönetimi
  • React Hook Form kurulumu
  • Validation ile Zod entegrasyonu
  • Field arrays
  • Form submission ve error handling
  • Formik alternatifi
Deployment & CI/CD
  • Vercel ile deploy
  • Environment variables yönetimi
  • GitHub Actions ile CI pipeline
  • Docker ile containerization
  • Monitoring (Sentry, LogRocket)
// Faz Projeleri
Full-stack Next.js Uygulaması TypeScript'li E-Ticaret Portfolio + Vercel Deploy Real-time Chat (WebSocket)
Son hedef: Bir production React uygulaması deploy et ve GitHub'a koy. İşverenlerin görmek istediği şey budur — teori değil, çalışan proje.
Önerilen Kaynaklar
📖
react.dev
Resmi React dökümantasyonu — başlangıç için en iyi kaynak
🎬
Scrimba
İnteraktif React kursları — kodu tarayıcıda yazarak öğren
🧠
Josh W. Comeau
joshwcomeau.com — derinlemesine React ve CSS makaleleri
🛠
TkDodo Blog
React Query ve state yönetimi üzerine mükemmel blog
⚡
Jack Herrington
YouTube — ileri seviye React pattern'leri ve mimari
🔬
patterns.dev
React design pattern'leri görsel olarak öğren