React Hooks ve Context API Eğitimi

Eğitim Hakkında

Temel Hook'lardan özel Hook'lara, yerel durumdan Context ile global duruma uçtan uca yolculuk

React Hooks ve Context API Kullanımı Eğitimi, sınıf bileşenlerinden fonksiyon bileşenlerine geçmiş ya da modern React öğrenen geliştiricilere Hook mimarisini derinlemesine öğretir. Katılımcılar useState, useEffect, useReducer, useRef, useMemo, useCallback ve useContext Hook'larını gerçek senaryolarla kullanır. Program Context API ile prop drilling sorununu çözer, useReducer ile Context'i birleştirir ve yeniden kullanılabilir özel Hook'lar yazmayı kapsar.

Süre ve Format

4 Gün. Her gün dört modül; temel Hook'lardan başlanıp performans Hook'ları, Context API ve özel Hook'larla gerçek bir uygulama adım adım geliştirilir.

Seviye

Orta Seviye — React temeli olanlara Hook'lar ve Context API ile modern durum yönetimini öğretir

Öğrenme Metodu

Her Hook canlı kodla örnek bir uygulamaya eklenir; prop drilling, gereksiz render ve durum paylaşımı sorunları uygulamalı çözülür.

Neden Bu Eğitim?

🎯Modern React standardı

Hook'lar günümüz React'inin standardıdır; durum ve yan etki yönetimini fonksiyon bileşenlerinde temiz biçimde yazmayı öğrenirsiniz.

🧩Prop drilling çözümü

Context API ile veriyi ara bileşenlerden geçirmeden derin bileşen ağacına ulaştırır, karmaşık uygulamalarda temiz mimari kurarsınız.

♻️Yeniden kullanılabilir mantık

Özel Hook'larla tekrar eden durum ve yan etki mantığını bileşenlerden ayırır, bakımı kolay ve test edilebilir kod yazarsınız.

Anahtar Konular

react hooks eğitimireact context api eğitimireact durum yönetimiusestate useeffectusereducer eğitimiözel hook yazmareact kursuprop drilling çözümüusecontext kullanımıreact performans optimizasyonu

“Hook'lar React'te mantığı; Context ise veriyi özgürleştirir. İkisini birlikte ustalıkla kullanmak modern React'in anahtarıdır.”

Ön Koşullar

Eğitimden en iyi verimi almak için faydalı olacak temel bilgi ve ortam

1

JavaScript ve ES6

let/const, ok fonksiyonları, destructuring ve dizi metotları gibi modern JavaScript kavramlarına aşinalık gerekir.

2

Temel React bilgisi

JSX, bileşen ve props kavramını bilmek önemlidir; Hook'ların tümü eğitimde sıfırdan ele alınır.

3

Node.js ortamı

Node.js ve npm kurulu, Vite veya Create React App ile proje çalıştırabilir bir geliştirme ortamı yeterlidir.

4

Kod editörü

VS Code gibi bir editör ve tarayıcıda React Developer Tools eklentisi uygulamalar için 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ı fonksiyon bileşeni mantığını tazeler, useState ile durumu ve useEffect ile yan etkileri yönetir, Hook kurallarını kavrar ve ilk etkileşimli bileşeni geliştirir.

Modül 1

Fonksiyon Bileşenleri ve JSX

Fonksiyon bileşeni ile sınıf bileşeni farkı
JSX içinde ifade gömme ve koşullu render
props ile bileşene veri ve davranış aktarımı
Bileşeni küçük ve tek sorumluluklu parçalara ayırma
Liste render için map ve key kullanımı
Fragment ile gereksiz sarmalayıcıdan kaçınma

Modül 2

useState ile Durum Yönetimi

useState ile bileşen içi durum tanımlama
Durum güncellemede değişmezlik ilkesine uyma
Fonksiyonel güncelleme ile önceki duruma erişme
Nesne ve dizi durumunu doğru güncelleme
Kontrollü form girdisini state ile yönetme
Durum değişiminde yeniden render mantığı

Modül 3

useEffect ile Yan Etkiler

useEffect ile yan etkileri bileşene bağlama
Bağımlılık dizisi ile tetiklenmeyi kontrol etme
Monte olma anında bir kez çalışan effect
Temizleme fonksiyonu ile abonelik ve zamanlayıcı
Effect içinde veri çekmeyi başlatma
Sonsuz döngü ve gereksiz tetikten kaçınma

Modül 4

Hook Kuralları ve İpuçları

Hook'ları yalnızca en üst seviyede çağırma
Koşul ve döngü içinde Hook çağırmama kuralı
Hook'ları yalnızca bileşen ve özel Hook'ta kullanma
eslint-plugin-react-hooks ile kural denetimi
StrictMode ile çift çalışmanın anlamı
Yaygın Hook hatalarını tanıma ve giderme

Günün hedefiKatılımcı karmaşık durumu useReducer ile yönetir, useRef ile referans tutar, useMemo ve useCallback ile hesaplama ve fonksiyonları belleğe alır ve React.memo ile gereksiz render'ı önler.

Modül 1

useReducer ile Karmaşık Durum

useReducer ile durum ve eylem ayrımı kurma
reducer fonksiyonu ile saf güncelleme yazma
dispatch ile eylem göndererek durum değiştirme
Çok alanlı form durumunu reducer ile yönetme
useState yerine useReducer tercih ölçütleri
Başlangıç durumunu lazy init ile oluşturma

Modül 2

useRef ile Referans ve Değer

useRef ile DOM öğesine doğrudan erişim
Input'a odaklanma ve kaydırma işlemleri
Render tetiklemeyen değişken değer saklama
Önceki değeri effect ile ref'te tutma
Zamanlayıcı kimliğini ref'te saklama
ref ve state arasındaki farkın kavranması

Modül 3

useMemo ve useCallback

useMemo ile pahalı hesaplamayı belleğe alma
Bağımlılık değişmedikçe değeri yeniden hesaplamama
useCallback ile fonksiyon kimliğini sabitleme
Alt bileşene geçen fonksiyonu memolama
Gereksiz memolamadan ve erken optimizasyondan kaçınma
Referans eşitliğinin render'a etkisini kavrama

Modül 4

React.memo ve Render Optimizasyonu

React.memo ile bileşeni gereksiz render'dan koruma
props değişiminde yeniden render mantığı
React Developer Tools ile render izleme
Render tetikleyen yaygın nedenleri bulma
Bileşeni bölerek render alanını daraltma
key değişiminin bileşeni sıfırlaması

Günün hedefiKatılımcı prop drilling sorununu Context API ile çözer, Provider ile değer sağlar, useContext ile tüketir, Context'i useReducer ile birleştirir ve performans tuzaklarını önler.

Modül 1

Context API Temelleri

Prop drilling sorununun somut örnekle görülmesi
createContext ile bağlam nesnesi oluşturma
Provider ile bileşen ağacına değer sağlama
Varsayılan değerin rolü ve kullanımı
Context'in ne zaman gerekli olduğunu değerlendirme
Context ile prop arasında doğru tercih

Modül 2

useContext ile Tüketim

useContext ile bağlamdaki değere erişim
Tema ve dil gibi global ayarları paylaşma
Oturum açmış kullanıcı bilgisini taşıma
Birden çok Context'i aynı ağaçta birleştirme
Context değerini özel Hook ile sarmalama
Provider dışında kullanım hatasını önleme

Modül 3

Context ve useReducer Deseni

Global durumu Context ve useReducer ile kurma
dispatch fonksiyonunu Context üzerinden yayma
Durum ve dispatch için ayrı Context kullanımı
Sepet veya yapılacaklar durumu örneği
Eylem tiplerini merkezi biçimde tanımlama
Redux benzeri akışı kütüphanesiz kurma

Modül 4

Context Performans Tuzakları

Provider değerinin her render'da yenilenmesi sorunu
value nesnesini useMemo ile sabitleme
Gereksiz tüketici render'larını azaltma
Context'i mantıksal parçalara bölme
Sık değişen durumu ayrı Context'e taşıma
Büyük uygulamada Context sınırlarının kavranması

Günün hedefiKatılımcı tekrar eden mantığı özel Hook'lara taşır, veri çekme ve form Hook'ları yazar, mevcut Hook'ları birleştirir ve öğrendiklerini gerçek bir uygulamada bütünleştirir.

Modül 1

Özel Hook Tasarımı

use ön ekiyle özel Hook adlandırma kuralı
Tekrar eden durum mantığını Hook'a çıkarma
Hook'tan değer ve fonksiyon döndürme
Mevcut Hook'ları özel Hook içinde birleştirme
Hook'u parametreyle esnek ve yeniden kullanılır yapma
Özel Hook'u ayrı dosyada düzenleme

Modül 2

Veri Çekme Hook'u

useFetch tarzı veri çekme Hook'u yazma
Yükleniyor, veri ve hata durumlarını döndürme
AbortController ile isteği iptal etme
Bağımlılık değişince yeniden veri çekme
Önbellekleme ve tekrar istekten kaçınma mantığı
React Query'ye kısa bir karşılaştırmalı bakış

Modül 3

Form ve Yan Etki Hook'ları

useForm ile girdi ve doğrulama yönetimi
useLocalStorage ile kalıcı durum saklama
useDebounce ile gecikmeli arama girdisi
useToggle ve useWindowSize gibi yardımcı Hook'lar
useEffect tabanlı abonelik Hook'u yazma
Hook'ları tek yerde toplayıp düzenleme

Modül 4

Bütünleşik Proje ve Test

Context ve özel Hook'larla küçük uygulama kurma
Global tema, kullanıcı ve veri akışını birleştirme
React Testing Library ile Hook ve bileşen testi
Render ve etkileşimi kullanıcı gözüyle test etme
Vite ile üretim derlemesi alma
Statik barındırmaya uygulamayı yayınlama

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Temel Hook'lar

useState ve useEffect ile fonksiyon bileşenlerinde durumu ve yan etkileri doğru, temiz biçimde yönetebilirsiniz.

✅

Hook kuralları

Hook'ların çağrılma kurallarını bilir, eslint denetimiyle yaygın Hook hatalarından kaçınırsınız.

✅

Karmaşık durum

useReducer ile çok alanlı ve karmaşık durumu saf reducer fonksiyonlarıyla düzenli biçimde yönetirsiniz.

✅

Performans Hook'ları

useMemo, useCallback ve React.memo ile gereksiz render'ı önler, uygulama performansını ölçerek iyileştirirsiniz.

✅

Referans yönetimi

useRef ile DOM erişimi sağlar ve render tetiklemeyen değerleri güvenle saklayabilirsiniz.

✅

Context API

Context API ve useContext ile prop drilling'i çözer, tema, dil ve kullanıcı gibi global durumu paylaşırsınız.

✅

Global durum deseni

Context ve useReducer'ı birleştirerek kütüphane kullanmadan Redux benzeri global durum akışı kurarsınız.

✅

Özel Hook'lar

Tekrar eden mantığı yeniden kullanılabilir özel Hook'lara taşır, test edilebilir ve bakımı kolay kod yazarsınız.

Kimler İçin Uygundur?

React bileşen ve props temeline sahip olup Hook'ları ve global durum yönetimini derinlemesine öğrenmek isteyen ön yüz geliştiricileri
sınıf bileşenlerinden Hook'lara geçen yazılımcılar
bilgisayar bölümü öğrencileri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

JSX, bileşen ve props temeline sahip olup Hook'ları ve global durum yönetimini derinlemesine öğrenmek isteyen ön yüz geliştiricileri, sınıf bileşenlerinden Hook'lara geçen yazılımcılar ve öğrenciler için uygundur. Tüm Hook'lar sıfırdan ve gerçek örneklerle ele alındığı için ileri React bilgisi gerekmez.

Hangi Hook'lar işleniyor?

Eğitimde useState, useEffect, useReducer, useRef, useMemo, useCallback ve useContext Hook'ları ayrıntılı olarak işlenir. Ayrıca useFetch, useForm, useLocalStorage ve useDebounce gibi yaygın özel Hook'lar sıfırdan yazılır; böylece hem yerleşik hem de kendi yazacağınız Hook'lara hâkim olursunuz.

Context API Redux'ın yerine geçer mi?

Context API prop drilling'i çözmek ve orta ölçekli global durumu paylaşmak için güçlüdür; useReducer ile birleştirildiğinde Redux benzeri bir akış kurulabilir. Çok büyük ve sık güncellenen durumlarda Redux Toolkit gibi araçlar hâlâ avantajlıdır; eğitim bu ayrımı performans tuzaklarıyla birlikte açıklar.

Eğitim uygulamalı mı yoksa teorik mi?

Eğitim tümüyle uygulamalıdır; her Hook canlı kodla örnek bir uygulamaya eklenir. Katılımcılar prop drilling, gereksiz render ve durum paylaşımı gibi gerçek sorunları kendi elleriyle çözer ve son gün Context ile özel Hook'ları bir araya getiren küçük bir uygulama geliştirir.

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 geliştirilen örnek uygulamayı belgeler. Eğitim yüz yüze veya online olarak verilebilir ve kurumsal gruplara özel olarak uyarlanabilir.

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 HOOKS VE CONTEXT API KULLANIMI EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Fonksiyon Bileşenleri ve JSX

useState ile Durum Yönetimi

useEffect ile Yan Etkiler

Hook Kuralları ve İpuçları

useReducer ile Karmaşık Durum

useRef ile Referans ve Değer

useMemo ve useCallback

React.memo ve Render Optimizasyonu

Context API Temelleri

useContext ile Tüketim

Context ve useReducer Deseni

Context Performans Tuzakları

Özel Hook Tasarımı

Veri Çekme Hook'u

Form ve Yan Etki Hook'ları

Bütünleşik Proje ve Test

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

React ile Kurumsal Ön Yüz Geliştirme Eğitimi

React JS Programlama Eğitimi

React, Redux ve TypeScript Eğitimi

React: Yüksek Etkileşimli Web Uygulamaları Oluşturma Eğitimi

Reactive Programming Using Redux Eğitimi

Spring Boot, React ve Redux Eğitimi