React: Başlangıçtan İleri Seviyeye
Modern React'i bileşenlerden hooks'a, state yönetiminden performans optimizasyonuna kadar bölüm bölüm öğreten kapsamlı rehber. JavaScript eğitimini tamamladıktan sonra başlayabilirsin.
Bu eğitim, modern React'i (React 19) sıfırdan ileri seviyeye kadar götürmek için tasarlandı. JavaScript temelin sağlamsa hemen başlayabilirsin — sağlam değilse önce JavaScript eğitimini bitir, sonra geri dön.
Bu eğitimde neler öğreneceksin?
- React'in ne olduğu, neden var, virtual DOM ve reconciliation
- JSX, bileşenler, props ve composition
useState,useEffect,useRef,useContext,useMemo,useCallback,useReducer- Custom hook yazma ve hook kuralları
- Form yönetimi: controlled/uncontrolled, React Hook Form + Zod
- Liste render, koşullu render, key kullanımı
- Veri çekme: fetch, SWR, TanStack Query
- Routing: React Router v7
- Performans:
memo, code splitting,lazy,Suspense - Error boundaries, portals, refs
- TypeScript ile React
- Stil yönetimi: CSS Modules, Tailwind, CSS-in-JS
- State yönetimi: Zustand, Redux Toolkit
- Test: Vitest + Testing Library
- React Server Components ve Next.js'e geçiş
Nasıl ilerlemelisin?
- Her bölümü dikkatlice oku
- Kod örneklerini Vite ile kurduğun projede çalıştır
- Her bölümün sonunda küçük bir bileşen yaz — sadece okumak yetmez
- Takıldığın yere geri dön — her bölüm öncekinin üzerine inşa edilir
İyi öğrenmeler. Hadi başlayalım.
Bu eğitimde
- 01
React Nedir ve Neden Var?
ÖnizlemeReact'in ortaya çıkış sebebi, virtual DOM, reconciliation ve declarative UI mantığı.
2 dk - 02
Geliştirme Ortamı: Vite ile Proje Kurulumu
ÖnizlemeNode.js kurulumu, Vite ile yeni React projesi açma, dosya yapısı ve dev server.
2 dk - 03
JSX: HTML Gibi Görünen JavaScript
JSX sözdizimi, expression embedding, attribute farklılıkları ve fragment'lar.
2 dk - 04
Bileşenler ve Props
Function component, props alma, props.children ve PascalCase isimlendirme.
2 dk - 05
State ve useState
Bileşen state'i, useState hook'u, set fonksiyonu ve immutability.
2 dk - 06
Olay Yönetimi (Event Handling)
onClick, onChange, event objesi, preventDefault ve handler pattern'leri.
2 dk - 07
Koşullu Render
if/ternary, &&, erken return ve null döndürme ile koşullu UI.
2 dk - 08
Liste Render ve Keys
Array.map ile liste render, key prop'unun önemi ve yaygın hatalar.
2 dk - 09
Form Yönetimi: Controlled vs Uncontrolled
Controlled input, uncontrolled (ref ile), checkbox, radio, select ve textarea.
2 dk - 10
useEffect: Yan Etkiler
Render dışı işler, dependency array, cleanup ve yaygın useEffect tuzakları.
3 dk - 11
useRef: DOM ve Mutable Değerler
DOM elementine erişim, render tetiklemeyen mutable referans ve forwardRef.
2 dk - 12
useContext: Prop Drilling Çözümü
Context API ile global tema, kullanıcı, dil gibi state'leri tüm ağaca yayma.
2 dk - 13
useMemo ve useCallback
Memoization, referans eşitliği, ne zaman kullanmalı ve React Compiler etkisi.
2 dk - 14
useReducer: Karmaşık State
Reducer pattern, action tabanlı state yönetimi ve ne zaman useState yerine seçilmeli.
3 dk - 15
Custom Hooks: Mantığı Yeniden Kullan
Hook kuralları, custom hook yazma ve yaygın örnekler (useLocalStorage, useDebounce).
3 dk - 16
Component Composition Pattern'leri
children, slots, compound components ve render props pattern'leri.
3 dk - 17
Lifting State Up
Kardeş bileşenlerde state paylaşımı, single source of truth ve aşağı doğru veri akışı.
3 dk - 18
Routing: React Router v7
SPA routing, nested routes, dinamik parametreler, useNavigate ve loader pattern'i.
3 dk - 19
Veri Çekme: fetch, SWR ve TanStack Query
useEffect ile fetch, race condition, ve modern data-fetching kütüphaneleri.
3 dk - 20
Form Kütüphaneleri: React Hook Form + Zod
Performanslı form yönetimi, validasyon, şema tabanlı doğrulama ve TypeScript entegrasyonu.
3 dk - 21
Performans Optimizasyonu
React.memo, gereksiz render'ları önleme, profiler kullanımı ve React Compiler.
3 dk - 22
Code Splitting ve Lazy Loading
React.lazy, Suspense, dinamik import ve route-bazlı code splitting.
3 dk - 23
Error Boundaries
Render hatalarını yakalama, fallback UI ve react-error-boundary kütüphanesi.
3 dk - 24
Portals: DOM Ağacının Dışına Render
Modal, tooltip ve toast bileşenlerini DOM hiyerarşisinden bağımsız render etmek.
2 dk - 25
React Server Components ve Next.js'e Bakış
RSC nedir, client/server bileşen ayrımı, 'use client' direktifi ve Next.js App Router.
3 dk - 26
Test Yazma: Vitest + Testing Library
Bileşen testi, kullanıcı odaklı test felsefesi, mocking ve E2E test'e bakış.
3 dk - 27
TypeScript ile React
Bileşen prop tipleri, hook tipleri, generic component ve event tipleri.
4 dk - 28
Stil Yönetimi: CSS Modules, Tailwind, CSS-in-JS
React'te stil seçenekleri, avantajları/dezavantajları ve tipik kombinasyonlar.
3 dk - 29
State Yönetimi: Zustand, Redux Toolkit, Jotai
useState'in yetmediği durumlar, global state çözümleri ve hangisini ne zaman seçmeli.
4 dk - 30
Sonraki Adımlar
React öğrendikten sonra Next.js, ekosistem ve gerçek proje yol haritası.
3 dk