REACT EĞİTİMİ
jQuery döneminde DOM doğrudan manipüle edilirdi: butona tıkla, sayfada o div'i bul, içeriğini değiştir. React UI'yi durum (state) fonksiyonu olarak modeller — durum değişir, framework hangi DOM güncellenmeli kendi hesaplar. Bu paradigma 5 ekran üzerinde fark etmez, 50 ekranda ise bütün projenin sürdürülebilirliğini belirler.
JSX ve component composition, props ve state mantığı, hook kataloğu (useState, useEffect, useMemo, useContext, useReducer), custom hook tasarımı, lifting state up, render optimizasyonu (memo, virtualization), routing, form yönetimi ve data fetching pattern'leri ele alınır. Resmi başvuru için React resmi sitesi birincil kaynaktır.
Katılımcı Profili
React ile modern arayüz geliştiren profillere yöneliktir:
- Front-end Geliştiriciler: SPA ve component-based UI geliştirir
- Full-stack Geliştiriciler: Next.js ve Remix ekosistemini kullanır
- React Native Geliştiricileri: Cross-platform mobil app üretir
- UI Engineer'lar: Design system ve component library implementasyonu yapar
- Bootcamp Mezunları: Junior React developer'lık için pratik kazanır
Ön Gereklilikler
Bu temellerle gelmek eğitim akışını belirgin biçimde hızlandırır:
- JavaScript ve ES6 sözdizimine aşinalık (let, const, arrow, destructuring)
- HTML ve CSS ile sayfa düzeni kurabilmek
- Git ile commit ve branch akışına temel hakimiyet
- HTTP, JSON ve REST kavramlarına farkındalık
- Node.js ve npm ekosistemine giriş seviyesi deneyim
Süresi ve Tarihi
Süre: 3 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, katılımcı grubunun uygunluğuna göre birlikte planlanır.
Kazanımlar
Program sonunda React projelerinde kalite ve hız odaklı bir geliştirme pratiği oluşur:
- React bileşenlerini doğru sorumluluklarla tasarlar
- State ve lifecycle mantığını modern Hook'larla kurgular
- Tek yönlü veri akışıyla öngörülebilir UI davranışı sağlar
- Routing ve veri çekme akışlarını hatasız entegre eder
- Performans darboğazlarını ölçerek iyileştirme uygular
- Form, validasyon ve hata yönetimini tutarlı yapılandırır
- Test stratejisiyle kritik senaryoları güvence altına alır
- Build ve dağıtım adımlarını anlaşılır bir akışa oturtur
React Eğitimi Konuları
1. React Temelleri ve JSX
- Vite veya Create React App ile proje kurulumu
- JSX syntax ve JavaScript expression embedding
- Functional component yazımı
- className, htmlFor ve HTML attribute farkları
- Fragment (<>) ile çoklu element döndürme
2. Component, Props ve Children
- Functional component ve prop destructuring
- props.children ile composition pattern
- PropTypes ve TypeScript ile type checking
- Default props ve optional props
- Spread operator ile props forwarding
3. useState Hook ve State Yönetimi
- useState ile primitive ve object state
- Functional update ile prev state
- Lazy initial state ve performance
- Multiple state vs object state
- Immutable update pattern
- useReducer alternatifi
4. useEffect Hook ve Side Effects
- Effect lifecycle: mount, update, unmount
- Dependency array ve infinite loop riski
- Cleanup function ile memory leak önleme
- useLayoutEffect ile DOM measurement
- Multiple effect bölme stratejisi
5. Event Handling ve Form
- onClick, onChange, onSubmit handler'ları
- Synthetic event vs native event
- Controlled vs uncontrolled component
- useRef ile uncontrolled form
- React Hook Form ile complex form
- Zod veya Yup ile validation
6. Conditional Rendering ve Lists
- Ternary operator ve && ile conditional
- Array.map ile list render
- key prop ve unique identifier
- Fragment ile key kullanımı
- Empty state ve loading skeleton
7. Custom Hooks ve Reusable Logic
- Custom hook naming convention (use prefix)
- useFetch, useLocalStorage, useDebounce örnekleri
- Hook composition
- Rules of Hooks ve ESLint plugin
- Testing custom hooks
8. Context API ve Global State
- createContext ve Provider pattern
- useContext hook ile consume
- Context performance optimization
- Multiple context vs single store
- Zustand, Jotai, Redux Toolkit alternatifleri
9. React Router ve Navigasyon
- React Router v6: BrowserRouter, Routes, Route
- Link, NavLink ve programmatic navigation
- useParams, useSearchParams, useLocation
- Nested route ve Outlet
- Protected route ve loader pattern
- Lazy loading route'lar
10. Data Fetching: fetch, axios, SWR, React Query
- fetch API ile useEffect data fetching
- axios ile interceptor ve config
- SWR ile stale-while-revalidate
- TanStack Query (React Query) ile cache
- Loading, error, success state yönetimi
- Optimistic update pattern
11. Performance: memo, useMemo, useCallback
- React.memo ile component memoization
- useMemo ile expensive computation cache
- useCallback ile function reference stability
- React DevTools Profiler
- Code splitting ile React.lazy
- Virtual list: react-window, react-virtuoso
12. Error Boundary ve Suspense
- Error Boundary class component
- componentDidCatch ve getDerivedStateFromError
- React 18 Suspense ile async component
- Fallback UI ve error recovery
- react-error-boundary library
13. Testing: React Testing Library ve Jest
- Jest ile test runner
- React Testing Library ile component test
- render, screen, fireEvent, userEvent
- Mock API ve MSW (Mock Service Worker)
- Snapshot test ve accessibility test
14. Build ve Deployment: Vite ve Next.js
- Vite ile fast HMR development
- Production build ve bundle analizi
- Environment variables (.env)
- Next.js ile SSR ve SSG alternatifi
- Vercel, Netlify, Cloudflare Pages deployment
React Eğitimi ile İlgili
Sıkça Sorulan Sorular ve Cevapları
React’te bileşen tasarımında en iyi pratikler nelerdir?
Bileşenleri tek sorumlulukla kurgulayıp kompozisyonu öne çıkarırız. Props akışını sade tutar, yeniden kullanılabilir UI parçaları oluşturur ve gereksiz bağımlılıkları azaltan bir yapı hedefleriz.
State ve side effect yönetimini eğitimde nasıl ele alıyorsunuz?
useState ile state modellemeyi, useEffect ile side effect akışını gerçek senaryolar üzerinden işleriz. Dependency, cleanup ve yarış durumları gibi kritik noktaları uygulamalı olarak pekiştiririz.
React Router ile sayfa akışını hangi düzeyde kapsıyorsunuz?
Route yapısı, nested route, parametreler ve korumalı sayfalar dahil kapsamlı ilerleriz. 404, yönlendirme ve linkleme pratikleriyle kullanıcı akışını tutarlı hale getiririz.
Performans optimizasyonunda hangi konulara odaklanılıyor?
Render maliyeti analizi, memoization (React.memo, useMemo, useCallback) ve lazy loading gibi başlıkları işleriz. Ölçüm odaklı yaklaşımla darboğazları bulup iyileştirme adımlarını uygularız.
Eğitim içeriğini ihtiyaçlarımıza göre özelleştirebilir misiniz?
Evet. Eğitim öncesinde ihtiyaç analizi yaparak içerik ve örnekleri kurumun hedeflerine göre uyarlıyoruz. Modüller eklenebilir, bazı başlıklar derinleştirilebilir veya sadeleştirilebilir.
Eğitim yeri, yöntemi ve sertifikasyon süreci nasıl ilerliyor?
Eğitim online (canlı) veya yerinde gerçekleştirilebilir; tarih ve saatleri katılımcı grubunun uygunluğuna göre planlıyoruz. Program sonunda katılım sertifikası verilir; talep edilirse ölçme-değerlendirme ve raporlama eklenebilir.
