ReactJS Web Application Development Eğitimi

Eğitim Hakkında

React ile uçtan uca web uygulaması geliştirme

Eğitim, React ile modern web uygulaması geliştirmeyi kapsar: Vite ile proje kurulumu, JSX ve bileşen tasarımı, props/state, useState, useEffect, useRef, useMemo ve useCallback, custom hook, React Router ile yönlendirme ve korumalı rotalar, Context API ve Redux Toolkit ile durum yönetimi, React Query ile sunucu durumu, form yönetimi, Axios ile API entegrasyonu, Jest ve React Testing Library, performans optimizasyonu ve Netlify/Vercel ile dağıtım.

Süre ve Format

2 Gün. Her gün dört modül; React Temelleri ve Hooks ve Durum Yönetimi, API ve Dağıtım ekseninde ilerleyen uygulamalı program.

Seviye

Orta Seviye — React ile web uygulaması geliştirme: hooks, yönlendirme, durum yönetimi, API entegrasyonu, test ve dağıtım

Öğrenme Metodu

Eğitim boyunca kimlik doğrulamalı bir ürün yönetim paneli adım adım geliştirilir, test edilir ve yayına alınır.

Neden Bu Eğitim?

⚛️Modern React

Hooks ve fonksiyon bileşenleriyle güncel React yazım tarzını kazanırsınız.

🗂️Durum yönetimi

Context, Redux Toolkit ve React Query ile doğru durum katmanını seçersiniz.

🚀Yayına hazır

Test, performans ve dağıtım adımlarıyla uygulamayı canlıya alırsınız.

Anahtar Konular

reactjs eğitimireact hooksreact routerredux toolkitreact queryreact testing libraryvitereact web uygulamasıfront-end geliştirmejwt reactreact form

“İyi arayüz, durumu doğru yerde tutan arayüzdür.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam gereksinimleri

1

JavaScript

ES6+, async/await ve DOM bilgisi gerekir.

2

HTML/CSS

Temel düzen ve stil bilgisi gerekir.

3

Node.js

Node.js, npm ve VS Code kurulu olmalıdır.

4

HTTP/REST

REST API mantığına aşinalık faydalıdır.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı bileşen tabanlı arayüz kurar, hooks ile durum ve yan etkileri yönetir.

Modül 1

Proje Kurulumu ve Bileşenler

Vite ile React projesi
JSX kuralları ve fragment
Bileşen hiyerarşisi ve props
Stil: CSS Modules, Tailwind
Liste, key ve koşullu render
Klasör yapısı önerileri

Modül 2

Hooks

useState ve fonksiyonel güncelleme
useEffect bağımlılık dizisi ve cleanup
useRef ve DOM erişimi
useMemo ve useCallback
useReducer ile karmaşık durum
Hooks kuralları

Modül 3

Formlar ve Doğrulama

Kontrollü ve kontrolsüz bileşenler
React Hook Form
Zod ile şema doğrulama
Hata mesajları ve erişilebilirlik
Dosya yükleme
Form gönderimi ve yükleniyor durumu

Modül 4

Yönlendirme

React Router: Routes, Link, useNavigate
Dinamik parametreler (useParams)
İç içe rotalar ve Outlet
Korumalı rota (protected route)
Lazy loading ve Suspense
404 sayfası ve yönlendirme

Günün hedefiKatılımcı global durumu ve sunucu verisini yönetir, uygulamayı test eder ve yayına alır.

Modül 1

Global Durum Yönetimi

Context API ve provider
Prop drilling sorunu
Redux Toolkit: slice, store, selector
createAsyncThunk
Zustand alternatifi
Doğru durum aracını seçme

Modül 2

API Entegrasyonu

fetch ve Axios
React Query (TanStack Query): cache, refetch
Optimistic update
Hata ve yeniden deneme
JWT ile kimlik doğrulama akışı
Axios interceptor

Modül 3

Test ve Kalite

Jest ve React Testing Library
Bileşen ve kullanıcı etkileşimi testi
MSW ile API taklidi
ESLint ve Prettier
Snapshot testinin sınırları
Erişilebilirlik kontrolleri

Modül 4

Performans ve Dağıtım

React.memo ve gereksiz render
Profiler kullanımı
Kod bölme ve bundle analizi
Ortam değişkenleri
Netlify/Vercel ile dağıtım
Docker ve nginx ile yayın

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Hooks kullanımı

useEffect, useMemo ve custom hook yazabilirsiniz.

🧩

Form yönetimi

React Hook Form ve Zod ile doğrulamalı formlar geliştirebilirsiniz.

⚙️

Yönlendirme

React Router ile korumalı rotalı çok sayfalı uygulama kurabilirsiniz.

🔍

Global durum

Context ve Redux Toolkit ile durumu yönetebilirsiniz.

🛠️

Sunucu durumu

React Query ile önbellekli API çağrıları yapabilirsiniz.

📈

Kimlik doğrulama

JWT tabanlı giriş akışı uygulayabilirsiniz.

🔐

Test yazımı

Testing Library ile kullanıcı davranışı testi yazabilirsiniz.

🚀

Dağıtım

Uygulamayı Netlify, Vercel veya Docker ile yayınlayabilirsiniz.

Kimler İçin Uygundur?

JavaScript bilen
React ile gerçek dünya uygulamaları geliştirmek isteyen front-end geliştiriciler ile full-stack adayları için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

JavaScript bilen ve React ile gerçek dünya uygulamaları geliştirmek isteyen front-end geliştiriciler ile full-stack adayları için uygundur. ES6+, async/await ve DOM bilgisi gerekir.

Hangi React sürümü?

Güncel React sürümü ve fonksiyon bileşenleri/hooks kullanılır.

TypeScript var mı?

Örnekler JavaScript'tir; TypeScript kısa bir ek notla gösterilir.

Redux zorunlu mu?

Hayır; Context, Redux Toolkit ve Zustand karşılaştırılır, doğru araç seçimi öğretilir.

Backend gerekli mi?

Hazır bir REST API sağlanır; backend yazılmaz.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

REACTJS WEB APPLICATION DEVELOPMENT EĞİTİMİ