React Kursu
React'i JSX ve component'lerden hook'lara, routing'e, state yönetimine, test ve deployment'a kadar öğren; basit örnekler ve pratik projelerle.
11 kategoride 32 ders
React Temelleri
React Nedir?
React'in ne olduğu, neden ortaya çıktığı, library ile framework arasındaki fark, SPA kavramı ve React'in nerede kullanıldığı -- sade bir dille, hiç kod yazmadan.
Bir React Projesi Oluşturmak
Node.js ve npm, Vite ile yeni bir proje oluşturma, proje yapısı, package.json, npm run dev ve development ile production farkı.
JSX
JSX nedir, HTML ile farkları, süslü parantez { } ile JavaScript gömme, attribute'lar ve className, JSX kuralları ve conditional rendering'e kısa bir bakış.
Component'ler ve Props
Components
Component nedir, fonksiyon olarak nasıl yazılır, nasıl kullanılır (render edilir), isimlendirme kuralı ve yeniden kullanılabilirlik -- basit örneklerle.
Props
Props nedir, parent'tan child'a veri gönderme, birden fazla prop, destructuring, varsayılan değerler ve props'un normal fonksiyon parametrelerinden farkı.
Component Composition
children prop'u, iç içe component'ler ve composition ile inheritance arasındaki fark -- yeniden kullanılabilir bir Card component'i mini projesiyle.
State ve Event'ler
Events
React'te olay (event) sistemi -- onClick, event handler tanımlamak, onChange, onSubmit ve event object -- basit örneklerle.
State
State nedir, useState ile nasıl tanımlanır, nasıl güncellenir, bir önceki state'e göre güncelleme ve state immutability -- basit örneklerle.
Conditional Rendering
if, ternary (? :) ve && operatörü ile koşula göre farklı arayüz göstermek, ve koşula göre farklı component'ler döndürmek -- basit örneklerle.
Lists & Keys
map() ile liste render etmek, key prop'u nedir, neden önemlidir, ve en yaygın hata olan index'i key olarak kullanmak -- basit örneklerle.
Hook'lar
What Are Hooks?
Hook nedir, neden var, Hooks kuralları (Rules of Hooks) ve function component'lerle ilişkisi -- basit örneklerle.
useEffect
Side effect nedir, useEffect ile nasıl çalıştırılır, dependency array'in üç kullanımı, cleanup fonksiyonu ve yaygın infinite loop hatası -- basit örneklerle.
useRef
DOM referansları, render'lar arası kalıcı değerler, useRef vs useState, ve useRef'i useEffect ile birlikte kullanmak -- basit örneklerle.
useMemo & useCallback
Memoization nedir, useMemo ile hesaplama sonucunu ve nesne referansını, useCallback ile fonksiyon referansını önbelleğe almak, ve ne zaman kullanılmaması gerektiği -- basit örneklerle.
Custom Hooks
Custom hook nedir, use öneki ve isimlendirme kuralı, aynı hook'u birden fazla kez kullanmak, ve bir useFetch örneği -- basit örneklerle.
Formlar
Controlled Components
Controlled component nedir, value ve onChange ile bir input'u state'e bağlamak, checkbox/select'lerde de aynı deseni kullanmak -- basit örneklerle.
Form Handling
onSubmit ile formu göndermek, birden fazla alanı tek bir state nesnesiyle yönetmek, validation ve hata mesajları göstermek -- basit örneklerle.
Routing
React Router Basics
react-router ile bir React uygulamasına sayfa geçişi eklemek -- BrowserRouter, Routes, Route, Link, NavLink ve tanımsız URL'ler için Not Found sayfası, basit örneklerle.
Route Parameters & Navigation
URL'in içine değişken değerler koymak (route parametreleri), useParams ile okumak, Outlet ile iç içe route'lar kurmak, ve useNavigate ile programatik yönlendirme -- basit örneklerle.
API ve Veri Çekme
Fetching Data
React'te fetch ile bir sunucudan veri çekmek ve göndermek -- GET, POST, PUT, DELETE, loading ve error handling, basit örneklerle.
React + REST API
React'in bir REST API'ye bağlanması -- API katmanını bir api.js modülünde ayırmak, listeleme, oluşturma ve silme işlemlerini birlikte yönetmek, basit örneklerle.
State Yönetimi
Sharing State
Birden fazla component'in aynı state'e ihtiyaç duyduğu durumlar -- state'i yukarı taşımak (lifting state up) ve props drilling sorunu, basit örneklerle.
Context API
React'in props drilling'e yerleşik çözümü Context API -- createContext, useContext, Provider, ve context'i bir custom hook'a sarmalamak, basit örneklerle.
İleri React
React Performance
React.memo, useMemo ve useCallback ile gereksiz yeniden render'ları önlemek, ve React'in Profiler component'i ile render sürelerini ölçmek -- basit örneklerle.
Error Boundaries
React'te render sırasındaki hataları yakalayan class component'ler: getDerivedStateFromError, componentDidCatch, error boundary'lerin kapsamı ve yakalamadıkları, basit örneklerle.
Lazy Loading & Code Splitting
React.lazy ile component'leri sonradan yüklemek, route bazlı code splitting, named export'larla lazy kullanmak, ve koşullu lazy loading -- basit örneklerle.
Suspense
Suspense'in fallback prop'u, iç içe Suspense sınırları, React 19'un use() hook'u ile Suspense entegrasyonu, ve Suspense'in otomatik yapmadıkları -- basit örneklerle.
Portals
react-dom'un createPortal fonksiyonu ile component'leri farklı bir DOM düğümüne render etmek -- modal'lar, event bubbling davranışı, ve portal hedefi ayarlamak, basit örneklerle.
Test
Component Testing
Vitest ve React Testing Library kurulumu, render+screen ile ilk test, getByRole/getByLabelText ile sorgulama, jest-dom matcher'ları, ve koşullu render'ı test etmek -- basit örneklerle.
User Interaction Testing
user-event ile gerçekçi etkileşim simülasyonu, tıklamayı ve yazmayı test etmek, form gönderimini vi.fn() ile doğrulamak, ve asenkron UI güncellemelerini findBy* ile test etmek -- basit örneklerle.
Production
Build & Deployment
npm run build ile production build almak, Vite'ta ortam değişkenleri (VITE_ öneki, .env), ve tamamen statik bir React uygulamasını Vercel'e deploy etmek -- basit örneklerle.
React + Spring Boot Deployment
React'i Vercel'e, gerçek bir Spring Boot REST API'sini Render'a (Docker) deploy etmek, ortam değişkenleriyle backend adresini yönetmek, ve production CORS yapılandırması -- basit örneklerle.