React Eğitimi: Etkileşimli Web Uygulamaları

Eğitim Hakkında

JSX ve bileşenlerden hook tabanlı durum yönetimine, yönlendirmeden performansa uçtan uca React

React: Yüksek Etkileşimli Web Uygulamaları Oluşturma Eğitimi, bileşen temelli düşünceyle modern web arayüzleri geliştirmeyi öğretir. Katılımcılar JSX, props ve state ile bileşen kurar; useState, useEffect ve useReducer gibi hook'larla durum yönetir; Context ile veri paylaşır. React Router ile yönlendirme, form yönetimi, veri getirme ve React.memo, useMemo, kod bölme ile performans optimizasyonu işlenir. Program test ve dağıtımla tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; temel bileşenlerden hook'lara, yönlendirmeden performans ve dağıtıma kademeli olarak ilerleyen uygulamalı bir akış izlenir.

Seviye

Orta Seviye — JSX ve bileşenlerden hook'lara, yönlendirmeye ve performans optimizasyonuna React

Öğrenme Metodu

Her modülde kısa bir kavram anlatımının ardından canlı kodlama yapılır; bileşenler aşama aşama gerçek bir uygulamada birleştirilir.

Neden Bu Eğitim?

⚛️Bileşen düşüncesi

Arayüzü yeniden kullanılabilir bileşenlere ayırarak karmaşık ekranları yönetilebilir, bakımı kolay parçalardan kurmayı öğrenirsiniz.

🔁Hook'larla durum

useState, useEffect ve özel hook'larla bileşen durumunu ve yan etkileri temiz, öngörülebilir biçimde yönetmeyi kavrarsınız.

🚀Yüksek talep

React, ön yüz iş ilanlarının önemli bölümünde aranır; bu beceri kariyer ve proje fırsatlarınızı doğrudan genişletir.

Anahtar Konular

react eğitimireact kursureact js eğitimireact hooks eğitimiön yüz geliştirme eğitimijavascript reactreact router eğitimiweb uygulama geliştirme kursureact derslerifrontend eğitimi

“React'te düşünmek, arayüzü durumun bir fonksiyonu olarak görmektir; doğru bileşen sınırları ve temiz durum, her etkileşimi öngörülebilir kılar.”

Ön Koşullar

Eğitimden en yüksek verimi almak için önerilen bilgi ve kurulum

1

JavaScript bilgisi

Değişken, fonksiyon, dizi metotları, destructuring ve modüller gibi modern JavaScript konularına hakimiyet beklenir.

2

HTML ve CSS

Temel HTML yapısı ve CSS ile düzen kurma bilgisi, bileşen arayüzlerini oluştururken işinizi kolaylaştırır.

3

Geliştirme ortamı

Node.js, bir kod editörü ve tarayıcı kurulu olmalı; projeler Vite ile oluşturulup çalıştırılacaktır.

4

Temel terminal

npm komutlarını çalıştırabilecek düzeyde terminal kullanımı paket kurulumunda faydalı olur.

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ı JSX söz dizimini kavrar, fonksiyon bileşeni yazar, props ile veri aktarır ve bir bileşenin tarayıcıda nasıl render edildiğini anlar.

Modül 1

Proje Kurulumu ve Çalışma Mantığı

Vite ile React projesi oluşturma
Proje klasör yapısı ve giriş dosyası
Virtual DOM ve reconciliation mantığı
React bildirimsel (declarative) yaklaşımı
createRoot ile uygulamanın bağlanması
Geliştirme sunucusu ve hızlı yenileme

Modül 2

JSX Söz Dizimi Temelleri

JSX ile arayüzü JavaScript içinde yazma
Süslü parantezle JavaScript ifadesi gömme
className ve HTML'den farklı öznitelikler
JSX'in tek kök ve Fragment kuralı
Satır içi stil ve style nesnesi
JSX'in Babel ile dönüştürülmesi

Modül 3

Bileşenler ve Props

Fonksiyon bileşeni tanımlama ve dışa aktarma
Props ile ebeveynden çocuğa veri aktarma
Props destructuring ile okunabilirlik
children props ile içerik yerleştirme
Varsayılan prop değeri belirleme
Bileşen kompozisyonu ile ekran kurma

Modül 4

Koşullu ve Liste Render

Üçlü operatör ile koşullu gösterim
Kısa devre (&&) ile şartlı render
map ile dizilerden liste üretme
key prop'unun önemi ve doğru seçimi
Boş durum (empty state) gösterimi
Listeyi filtreleyip sıralayarak render

Günün hedefiKatılımcı bileşen durumunu useState ile yönetir, useEffect ile yan etkileri kontrol eder, useRef'i kullanır ve tekrar eden mantığı özel hook'a taşır.

Modül 1

useState ile Durum Yönetimi

useState ile bileşene durum ekleme
Durum güncellemenin asenkron doğası
Önceki duruma göre fonksiyonel güncelleme
Nesne ve dizi durumunu değişmez güncelleme
Durum yükseltme (lifting state up)
Türetilmiş değerleri durumda tutmama

Modül 2

Kullanıcı Olaylarının Yönetimi

onClick, onChange ve sentetik olaylar
Olay yöneticisine argüman geçirme
Form girişini state ile bağlama
preventDefault ile varsayılanı engelleme
Olay baloncuğu ve yakalama farkı
Olay yöneticilerini bileşene bölme

Modül 3

useEffect ve Yan Etkiler

useEffect ile yan etki tanımlama
Bağımlılık dizisinin çalışmaya etkisi
Temizleme fonksiyonuyla abonelik iptali
Veri getirme için effect kullanımı
Sonsuz döngüye yol açan hatalar
Effect'in bileşen yaşamına göre tetiklenmesi

Modül 4

useRef ve Özel Hook'lar

useRef ile DOM öğesine doğrudan erişim
Render tetiklemeyen değer saklama
Hook kurallarının temel ilkeleri
Tekrar eden mantığı özel hook'a çıkarma
useLocalStorage gibi özel hook örneği
Özel hook'larla mantığın yeniden kullanımı

Günün hedefiKatılımcı React Router ile çok sayfalı yapı kurar, kontrollü formlar yazar, Context ile global veri paylaşır ve API'den veri getirir.

Modül 1

React Router ile Yönlendirme

Route ve Routes ile sayfa tanımlama
Link ve NavLink ile sayfa gezinme
URL parametreleri ve useParams
İç içe (nested) rota ve Outlet
Programatik yönlendirme için useNavigate
404 ve korumalı rota yaklaşımı

Modül 2

Form Yönetimi ve Doğrulama

Kontrollü bileşenle form girişi
Çoklu alanı tek state nesnesinde tutma
Form doğrulama ve hata mesajları
Gönderimde preventDefault ve işleme
Kontrolsüz form ve ref ile erişim
React Hook Form ile form yönetimi

Modül 3

Context API ile Paylaşım

createContext ile bağlam oluşturma
Provider ile bağlam değeri sağlama
useContext ile bağlamı tüketme
Tema ve kullanıcı gibi global veri
Context ile prop drilling'i önleme
Context bölme ve yeniden render dengesi

Modül 4

API'den Veri Getirme

fetch ve async ile API çağrısı
Yükleniyor ve hata durumlarının yönetimi
AbortController ile isteği iptal etme
Veriyi listeye dönüştürüp render etme
TanStack Query ile önbellekli getirme
İstek sonrası durumun güncellenmesi

Günün hedefiKatılımcı gereksiz render'ları önler, useMemo ve useCallback'i yerinde kullanır, uygulamayı test eder ve üretim için derleyip dağıtır.

Modül 1

Render Optimizasyonu

Gereksiz yeniden render'ın tespiti
React.memo ile bileşen memoization
useMemo ile pahalı hesabın saklanması
useCallback ile referans sabitleme
React DevTools Profiler ile ölçüm
Erken optimizasyondan kaçınma dengesi

Modül 2

Kod Bölme ve Yükleme

React.lazy ile bileşeni tembel yükleme
Suspense ile yükleme arayüzü gösterimi
Rota bazlı kod bölme stratejisi
Error boundary ile hata yakalama
Başlangıç paket boyutunun küçültülmesi
Görsel ve varlıkların geç yüklenmesi

Modül 3

Bileşenlerin Test Edilmesi

React Testing Library ile bileşen testi
render ve screen ile DOM sorgulama
Kullanıcı olaylarının simülasyonu
Asenkron davranışların test edilmesi
Vitest veya Jest ile test çalıştırma
Erişilebilirlik odaklı sorgu seçimi

Modül 4

Üretim Derlemesi ve Dağıtım

Vite ile üretim derlemesi alma
Ortam değişkenleri ile yapılandırma
Statik barındırma ortamına dağıtım
SPA için yönlendirme yeniden yazımı
Üretimde performans ve hata izleme
Sürekli dağıtım (CI/CD) akışına giriş

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Bileşen kurma

JSX, props ve kompozisyonla yeniden kullanılabilir bileşenler yazar, karmaşık arayüzleri parçalara ayırarak kurarsınız.

✅

Durum yönetimi

useState ve useReducer ile bileşen durumunu değişmez biçimde yönetir, durumu doğru yere yerleştirmeyi öğrenirsiniz.

✅

Hook'lar

useEffect, useRef ve özel hook'larla yan etkileri ve tekrar eden mantığı temiz, yeniden kullanılabilir biçimde yönetirsiniz.

✅

Yönlendirme

React Router ile çok sayfalı yapı, URL parametreleri ve korumalı rotalar kurarak gerçek uygulama akışları tasarlarsınız.

✅

Form ve veri

Kontrollü formlar yazar, doğrulama yapar ve API'den veriyi yükleme ile hata durumlarını yöneterek getirip gösterirsiniz.

✅

Context API

Context API ile tema, kullanıcı gibi global veriyi paylaşır, prop drilling'i önleyerek bileşen ağacını sadeleştirirsiniz.

✅

Performans

React.memo, useMemo ve kod bölme ile gereksiz render'ları önler, uygulamanın tepkiselliğini ve açılış hızını iyileştirirsiniz.

✅

Test ve dağıtım

React Testing Library ile bileşenleri test eder, uygulamayı üretim için derleyip statik barındırmaya dağıtmayı öğrenirsiniz.

Kimler İçin Uygundur?

HTML
CSS ve modern JavaScript bilen
bileşen temelli bir kütüphaneyle etkileşimli arayüzler geliştirmek isteyen ön yüz geliştiricileri
React'e geçiş yapan yazılımcılar için uygundur

Sıkça Sorulan Sorular

Bu React eğitimi kimler için uygundur?

HTML, CSS ve modern JavaScript bilen, bileşen temelli bir kütüphaneyle etkileşimli arayüzler geliştirmek isteyen ön yüz geliştiricileri ve React'e geçiş yapan yazılımcılar için uygundur. Değişken, fonksiyon, dizi metotları ve destructuring gibi JavaScript konularına hakimiyet beklenir; React deneyimi gerekmez.

Eğitim hangi React sürümü ve araçlarla işleniyor?

Eğitim güncel React sürümüyle, fonksiyon bileşenleri ve hook'lar üzerinden işlenir. Projeler Vite ile oluşturulur; yönlendirme için React Router, test için React Testing Library ve Vitest, veri getirme için fetch ve isteğe bağlı TanStack Query ele alınır. Sınıf bileşenleri yerine modern hook tabanlı yaklaşım esas alınır.

Redux öğretiliyor mu?

Bu eğitim React çekirdeğine, hook'lara ve Context API ile durum paylaşımına odaklanır; Redux kapsam dışıdır. Çoğu uygulama için Context ve özel hook'lar yeterli olduğundan bu temel önce sağlamlaştırılır. Redux ve Redux Toolkit, akademinin ayrı Reactive Programming Using Redux eğitiminde derinlemesine işlenmektedir.

Eğitimin süresi ve formatı nedir?

Eğitim dört gün sürer ve her gün dört modülden oluşur. Temel bileşenlerden başlayıp hook'lar, yönlendirme, form, veri getirme, performans, test ve dağıtıma kadar uygulamalı ilerler. Yüz yüze veya online yapılabilir ve içerik kurumun ihtiyacına göre uyarlanabilir; her modülde canlı kodlama yapılır.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika tamamlanan modülleri ve eğitim boyunca geliştirilen uygulamayı belgeler; kurumsal gruplara eğitim, mevcut proje ve kod standartlarına göre özelleştirilerek sunulabilir.

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

REACT: YÜKSEK ETKİLEŞİMLİ WEB UYGULAMALARI OLUŞTURMA EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Proje Kurulumu ve Çalışma Mantığı

JSX Söz Dizimi Temelleri

Bileşenler ve Props

Koşullu ve Liste Render

useState ile Durum Yönetimi

Kullanıcı Olaylarının Yönetimi

useEffect ve Yan Etkiler

useRef ve Özel Hook'lar

React Router ile Yönlendirme

Form Yönetimi ve Doğrulama

Context API ile Paylaşım

API'den Veri Getirme

Render Optimizasyonu

Kod Bölme ve Yükleme

Bileşenlerin Test Edilmesi

Üretim Derlemesi ve Dağıtım

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Build and Test SPA Using React & Redux Eğitimi

Build Apps Using React: Advanced Features in React Eğitimi

Build Apps Using React: In Development & Production Eğitimi

Build Apps Using React: Introducing React for Web Applications Eğitimi

Build Apps Using React: Local Machine & Online Playgrounds Eğitimi

Build Apps Using React: Props & State Eğitimi