REACT EĞİTİMİ
React eğitimi, kütüphaneyi "JSX yazma" boyutundan çıkartıp bir UI mimarisi olarak kullanmak isteyen mühendisleri yetiştirir. Component model'i function component ve Hooks ile kurulur; useState, useReducer ve Context ile Redux ya da Zustand'ı doğru bağlamda ayırma somut senaryolar üzerinden işlenir.
Eğitim sonunda katılımcı, TanStack Query ile server state'i client state'ten ayırır; React Router ile SPA navigation ve route guard yapar; Concurrent rendering, Suspense ve Server Component'i sezgisel anlatır. Memoization (memo, useMemo, useCallback) ve virtualization ile performans ölçme; React Testing Library ile davranış odaklı test eğitimin pratik kapanışıdır. Eğitim materyalleri React ile uyumlu hazırlanmıştır.
Katılımcı Profili
Bu eğitim, React'i JSX yazma boyutundan çıkartıp UI mimarisi olarak kullanmak isteyen rollere yöneliktir:
- Frontend Geliştiriciler: React ile SPA ve dashboard yazan mühendisler
- Full-stack Geliştiriciler: React + Node.js veya Next.js ile uçtan uca yazan roller
- Mobil Geliştiriciler: React Native öncesi React temelini öğrenmek isteyenler
- UI Mühendisleri: Component library ve design system kuran roller
- Modern Frontend Geçişi Yapanlar: jQuery veya Angular'dan React'e geçen ekipler
Ön Gereklilikler
Bu eğitime katılım için aşağıdaki ön bilgiler önerilir:
- JavaScript temellerinde rahatlık (ES2015+ özellikleri, async/await)
- HTML ve CSS ile temel arayüz geliştirme deneyimi
- npm veya yarn ile paket yönetimi mantığına aşinalık
- Tarayıcı dev tools (Chrome DevTools) ile temel tanışıklık
- Git ile sürüm kontrol akışı bilgisi
Süresi ve Tarihi
Süre: 4 gün. Bu süre standart program içindir; ek modüllere ve hedefe göre süre özelleştirilebilir.
Eğitim tarihleri ve saatleri, ekibinizin uygunluğuna göre birlikte planlanır.
Kazanımlar
Bu eğitim sonunda katılımcı, React'i "JSX yazma" boyutundan çıkartıp bir UI mimarisi olarak kullanır:
- Component model'i function component ve Hooks ile kurar
- useState, useReducer ve Context ile Redux/Zustand'ı doğru bağlamda ayırır
- TanStack Query ile server state'i client state'ten ayırır
- React Router ile SPA navigation ve route guard yapar
- Concurrent rendering, Suspense ve Server Component'i sezgisel anlatır
- Memoization (memo, useMemo, useCallback) ve virtualization ile performansı ölçer
- React Testing Library ile davranış odaklı test yazar
React Eğitimi Konuları
1. React Çalışma Modeli - Virtual DOM
- Virtual DOM ve reconciliation
- React Fiber mimarisi
- React sürüm akışı ve concurrent rendering
- Vite vs Create React App vs Next.js
2. JSX ve Component Yapısı
- JSX söz dizimi ve transpilation
- Function component (tek standart)
- Component composition ve children
- Fragment (<>) ve key prop
3. Props ve State
- Props: immutable, top-down flow
- State: useState ile local state
- Controlled vs uncontrolled component
- Lifting state up pattern
- Props drilling problemi
4. Event Handling
- Synthetic event ve native event
- onClick, onChange, onSubmit
- preventDefault ve stopPropagation
- Event delegation
5. Hook Sistemi - useState, useEffect
- useState ile state yönetimi
- useEffect ve dependency array
- Cleanup function
- Rules of Hooks
- Custom hook yazımı
6. Ek Hook'lar - useRef, useMemo, useCallback
- useRef ile DOM ve mutable value
- useMemo ile memoization
- useCallback ile fonksiyon memoization
- useReducer kompleks state için
- useContext ile context tüketimi
7. Context API ve Provider Pattern
- createContext ve Provider
- Multi-provider ve nested context
- Re-render optimization
- Ne zaman context, ne zaman state manager
8. Form Yönetimi
- Controlled input pattern
- React Hook Form ile uncontrolled
- Formik (legacy) ile karşılaştırma
- Zod ile schema validation
9. Routing - React Router
- React Router v6 söz dizimi
- Nested routes ve outlet
- useNavigate, useParams, useSearchParams
- Loader ve action (data router)
- Lazy route ile code splitting
10. Data Fetching - TanStack Query
- useQuery ve useMutation
- Cache invalidation
- Optimistic update
- SWR alternatif
- Suspense for data fetching
11. State Management - Zustand, Redux Toolkit
- Zustand: minimal store
- Redux Toolkit (RTK) modern Redux
- Jotai, Recoil atom-based
- State manager seçim kriterleri
12. Styling - CSS Modules, Tailwind, CSS-in-JS
- CSS Modules ile scoped style
- Tailwind CSS utility-first
- Styled-components ve Emotion
- CSS-in-JS performans tartışması
- shadcn/ui ile copy-paste component
13. Performance Optimization
- React.memo ile component memoization
- useMemo, useCallback ile prop equality
- React DevTools Profiler
- Code splitting ve React.lazy
- Virtualization (react-window)
14. Error Boundary ve Suspense
- Error boundary class component
- react-error-boundary kütüphanesi
- Suspense ile loading state
- Streaming SSR ile Suspense
15. SSR ve SSG - Next.js
- Next.js App Router (RSC)
- Server Component vs Client Component
- Static, dynamic, ISR rendering
- Streaming ve loading.tsx
16. Testing - Vitest ve React Testing Library
- Vitest hızlı test runner
- React Testing Library prensibi
- User event simulation
- Mock Service Worker (MSW)
- Playwright ile E2E test
17. TypeScript ile React
- FC, PropsWithChildren type
- useState<T>, useRef<T> generic
- Event handler tipi
- Discriminated union ile prop
18. Deploy - Vercel, Netlify, Cloudflare Pages
- Vercel: Next.js native
- Netlify ve Cloudflare Pages
- Edge function ve serverless
- Environment variable yönetimi
- Preview deployment
REACT EĞİTİMİ ile İlgili
Sıkça Sorulan Sorular ve Cevapları
useState ile useReducer arasında ne zaman karar değişir?
useState basit, tek-değer veya küçük obje için yeterli. useReducer karmaşık state geçişleri, birden fazla ilişkili field veya action-tarzı update'ler için daha temiz — reducer fonksiyonu tek noktada davranış tutar, test edilebilir. State'in 3+ alt-field'ı varsa veya update mantığı karmaşıksa useReducer'a geçilir.
Context ile Redux/Zustand arasında karar?
Context theme, locale gibi nadiren değişen ve geniş alanda tüketilen değer için doğru. Sık değişen state için Context her tüketici component'i rerender eder — performans sorunu. Redux Toolkit veya Zustand subscription-based, sadece ilgili component'i rerender ediyor; orta-büyük uygulamalarda tercih.
TanStack Query server state'i neden ayrı tutar?
Server state cache, invalidation, retry, optimistic update gibi karmaşık yönetim gerektirir — Redux'a koymak boilerplate'i şişirir. TanStack Query query key ile cache, automatic refetch, stale-while-revalidate sunar. Client state (form, modal) ayrı state manager'da kalır — iki ayrı concern.
Concurrent rendering ve Suspense neyi değiştirdi?
Concurrent rendering React'in render'ı kesintiye uğratabilmesi — UI takılmadan büyük list veya hesaplama yapılır. Suspense data fetching ve code splitting için 'loading' state'i declarative ifade eder; transitions kullanıcı etkileşimini önceliklendirir. Server Component ile birleşince streaming SSR mümkün olur.
Memoization (memo, useMemo, useCallback) ne zaman gerçekten kazandırır?
Pahalı hesaplama veya prop equality kritik component için doğru. Prematüre memoization debug zorlaştırır ve micro-allocation'la pratik kazanım sağlamaz. React DevTools Profiler ile render maliyetini ölçüp karar vermek best practice. Çoğu component'te memo gereksiz.
React Server Component ile Client Component arasındaki fark?
Server Component server'da render edilir, JS bundle'a girmez — DB query, file read gibi server-only iş yapabilir. Client Component ("use client" directive) browser'da render, useState, useEffect ile interaktivite. Karma yaklaşım: çoğu sayfa Server, interactive widget Client. Next.js App Router default'u Server.
