BUILD APPS USING REACT: ADVANCED FEATURES IN REACT EĞİTİMİ

React'in ileri özelliklerinde ustalaşın

İleri hook'lar, bellekleme, Suspense ve durum yönetimiyle React'in özelliklerinde ustalaşın

Advanced Features in React, React temellerini bilen geliştiriciler için ileri seviye bir programdır. Eğitim useReducer, useRef ve custom hook ile ileri durum mantığını; Context API, useMemo, useCallback ve React.memo ile performansı; React.lazy ve Suspense il…

5 gün İleri Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

İleri hook'lar, performans optimizasyonu, Suspense, hata sınırları ve ölçeklenebilir durum yönetimi

Advanced Features in React, React temellerini bilen geliştiricileri bir üst seviyeye taşır. Program useReducer, useRef ve custom hook ile ileri durum mantığıyla başlar; Context API, useMemo, useCallback ve React.memo ile performansı işler. React.lazy, Suspense, eşzamanlı özellikler, hata sınırları, portal ve ileri bileşen desenleri ele alınır. Eğitim; Redux Toolkit ve Zustand ile durum yönetimi, test ve üretime hazırlığı birleştiren bir projeyle tamamlanır.

Süre ve Format

5 Gün. Her gün dört modül; ileri hook'lardan performans, kod bölme, Suspense, hata sınırları ve durum yönetimine kadar her konu uygulamalı işlenir.

Seviye

İleri Seviye — useReducer, Context, bellekleme, Suspense, hata sınırları ve durum yönetimiyle ileri React

Öğrenme Metodu

Her ileri konu canlı kodlama ve gerçek senaryolarla işlenir; teknikler React DevTools ile ölçülerek ve profil çıkarılarak pekiştirilir.

Neden Bu Eğitim?

⚡Performansta ustalık

Bellekleme, kod bölme ve eşzamanlı özelliklerle büyük React uygulamalarını akıcı ve hızlı tutmayı öğrenirsiniz.

🧩İleri desenler

Custom hook, render props, HOC ve compound component desenleriyle yeniden kullanılabilir, ölçeklenebilir kod yazarsınız.

🏗️Ölçeklenebilir mimari

Context, Redux Toolkit ve Zustand ile durumu doğru yöneterek büyüyen uygulamalarda düzeni korumayı öğrenirsiniz.

Anahtar Konular

ileri react eğitimireact advanced featuresreact performans optimizasyonureact hook eğitimiusememo usecallbackreact suspensereact durum yönetimireact context apireact memocustom hook eğitimi
“İleri React, daha çok özellik ezberlemek değil; her tekniği ne zaman ve neden kullanacağını ölçerek bilmektir.”

Ön Koşullar

İleri konulardan verim almak için faydalı olacak React bilgisi ve deneyimi

1
React temelleri

Bileşen, JSX, props ve state kavramlarına ve küçük bir React uygulaması kurmuş olmaya ihtiyaç vardır.

2
Temel hook'lar

useState ve useEffect hook'larını daha önce kullanmış olmak ileri hook konularında işleri oldukça kolaylaştırır.

3
Modern JavaScript

ES6+ özellikleri, closure, destructuring ve asenkron kod (async/await) bilgisi ileri desenleri anlamada faydalıdır.

4
Geliştirme ortamı

Node.js, npm ve VS Code kurulu bir bilgisayar; proje Vite ile oluşturulur ve ilk modülde hazırlanı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ı useReducer ile karmaşık durumu yönetir, useRef ile değer ve DOM erişimini kullanır, custom hook yazar ve useEffect'i ileri düzeyde kurar.
Modül 1
useReducer ile Karmaşık Durum
  • useReducer ile reducer ve dispatch kullanımı
  • Action nesneleri ve switch tabanlı reducer mantığı
  • useState yerine useReducer tercih etme kriterleri
  • Karmaşık form durumunu reducer ile yönetme
  • Başlangıç durumu ve lazy initializer kullanımı
  • Reducer'ı saf (pure) fonksiyon olarak tasarlama
Modül 2
useRef ve Değişebilir Değerler
  • useRef ile DOM elemanına doğrudan erişim
  • Render arası değer saklamak için useRef kullanımı
  • forwardRef ile ref'i alt bileşene iletme
  • useImperativeHandle ile ref API'si tanımlama
  • Önceki değeri saklama (previous value) deseni
  • Zamanlayıcı ve interval ID'sini ref'te tutma
Modül 3
Custom Hook Yazımı
  • Tekrar eden mantığı custom hook'a çıkarma
  • use ön ekiyle hook adlandırma kuralları
  • useFetch ile veri çekme hook'u yazma
  • useLocalStorage ile kalıcı durum hook'u
  • Hook kurallarına (rules of hooks) uyma
  • Custom hook'tan değer ve fonksiyon döndürme
Modül 4
useEffect'i İleri Düzey Kullanma
  • Bağımlılık dizisini (dependency array) doğru kurma
  • Temizleme (cleanup) ile abonelik ve zamanlayıcı yönetimi
  • useLayoutEffect ile senkron DOM ölçümü
  • Sonsuz döngü (infinite loop) hatalarından kaçınma
  • Effect'i sorumluluklarına göre bölme ve ayırma
  • Race condition ve istek iptali (abort) yönetimi
Günün hedefiKatılımcı Context API ile global durum paylaşır, useMemo ve useCallback ile bellekleme yapar, React.memo ile gereksiz render'ları önler.
Modül 1
Context API ile Global Durum
  • createContext ile context oluşturma
  • Provider ile değer sağlama ve kapsam belirleme
  • useContext ile context değerini tüketme
  • Context'i mantıksal alanlara bölme deseni
  • Tema ve dil (i18n) için context kullanımı
  • Context ile prop drilling sorununu çözme
Modül 2
useMemo ile Hesaplama Belleği
  • useMemo ile pahalı hesaplamaları önbellekleme
  • Bağımlılıklara göre yeniden hesaplama mantığı
  • Referans eşitliğini (reference equality) koruma
  • Türetilmiş (derived) veriyi memoize etme
  • Gereksiz memoization'dan kaçınma kriterleri
  • Liste filtreleme ve sıralamayı memoize etme
Modül 3
useCallback ve Fonksiyon Belleği
  • useCallback ile fonksiyon referansını sabitleme
  • Alt bileşene geçen callback'leri bellekleme
  • React.memo ile birlikte kullanım deseni
  • Bağımlılık dizisi ile stale closure önleme
  • Olay işleyicilerini memoize etme senaryoları
  • useMemo ile useCallback arasındaki farkı kavrama
Modül 4
React.memo ve Render Optimizasyonu
  • React.memo ile bileşen yeniden render kontrolü
  • Props karşılaştırma (shallow compare) mantığı
  • Özel karşılaştırma (areEqual) fonksiyonu yazma
  • Gereksiz render'ları Profiler ile tespit etme
  • key kullanımı ve liste render performansı
  • Render optimizasyonunu ölçerek doğrulama
Günün hedefiKatılımcı React.lazy ve Suspense ile kod böler, eşzamanlı özelliklerle akıcı arayüz kurar ve Server Components yaklaşımını kavrar.
Modül 1
Kod Bölme ve Lazy Loading
  • React.lazy ile bileşeni tembel (lazy) yükleme
  • Dinamik import() ile kod bölme (code splitting)
  • Route bazlı kod bölme stratejisi kurma
  • Bundle boyutunu küçültme ve ölçme
  • Yükleme sırasında iskelet (skeleton) gösterme
  • Lazy bileşenleri mantıksal gruplara ayırma
Modül 2
Suspense ile Yükleme Yönetimi
  • Suspense ile fallback arayüzü tanımlama
  • Lazy bileşenleri Suspense ile sarmalama
  • Veri çekme için Suspense yaklaşımına bakış
  • İç içe (nested) Suspense sınırları kurma
  • Yükleme durumlarını kullanıcıya yansıtma
  • Suspense ve hata sınırlarını birlikte kullanma
Modül 3
Eşzamanlı (Concurrent) Özellikler
  • useTransition ile acil olmayan güncellemeler
  • startTransition ile güncelleme önceliği belirleme
  • useDeferredValue ile gecikmeli (deferred) değer
  • Ağır listelerde yazma gecikmesini önleme
  • Eşzamanlı render mantığını kavrama
  • Kullanıcı etkileşimini akıcı tutma teknikleri
Modül 4
Server Components'e Giriş
  • Server ve Client Component ayrımını anlama
  • 'use client' yönergesi ve kullanımı
  • Sunucuda render edilen bileşenin avantajları
  • Veriyi sunucuda çekip bileşene aktarma
  • İstemci paketinden (bundle) kodu uzak tutma
  • Hibrit (hybrid) render mimarisine genel bakış
Günün hedefiKatılımcı error boundary ile hataları yönetir, portal kullanır, render props, HOC ve compound component desenlerini uygular.
Modül 1
Error Boundary ile Hata Yönetimi
  • Error boundary sınıf bileşeni yazma
  • componentDidCatch ve getDerivedStateFromError
  • Hata durumunda yedek (fallback) arayüz gösterme
  • Hata sınırlarını mantıksal olarak yerleştirme
  • Hataları loglama ve raporlama entegrasyonu
  • Kurtarma (recovery) ve yeniden deneme deseni
Modül 2
Portals ve DOM Dışı Render
  • createPortal ile DOM ağacı dışına render
  • Modal ve tooltip için portal kullanımı
  • Olay yayılımının (bubbling) portal davranışı
  • z-index ve overlay katman yönetimi
  • Portal içeriğini erişilebilir (a11y) kılma
  • Portal'ı root dışındaki bir node'a bağlama
Modül 3
Render Props ve HOC Desenleri
  • Render props deseni ile mantık paylaşımı
  • Higher-Order Component (HOC) yazma
  • HOC ile props zenginleştirme (enhance)
  • Desenleri custom hook ile karşılaştırma
  • Children as a function (fonksiyon) kullanımı
  • Kompozisyonla yeniden kullanılabilir mantık
Modül 4
Compound Component Deseni
  • Compound component yapısını kurma
  • Context ile bileşenler arası iletişim sağlama
  • Esnek (flexible) bileşen API'si tasarlama
  • Controlled ve uncontrolled bileşen tasarımı
  • Tab ve Accordion gibi bileşenleri modelleme
  • Bileşen API'sini sezgisel ve açık tutma
Günün hedefiKatılımcı harici durum kütüphaneleriyle çalışır, React Testing Library ile test yazar, performans profiller ve üretime hazır bir proje kurar.
Modül 1
Harici Durum Yönetimi
  • Redux Toolkit ile store ve slice kurma
  • Zustand ile hafif global durum yönetimi
  • Context ve harici kütüphane karşılaştırması
  • Asenkron durum ve thunk mantığını kurma
  • Durum normalizasyonu ve seçiciler (selector)
  • Hangi durumun nerede tutulacağına karar verme
Modül 2
React Uygulamalarını Test Etme
  • React Testing Library ile bileşen testi
  • Kullanıcı davranışına dayalı test yazma
  • Jest ile birim (unit) test kurgusu
  • Hook'ları ve custom hook'ları test etme
  • Asenkron ve API çağrılarını mock'lama
  • Erişilebilirlik odaklı sorgu (query) kullanımı
Modül 3
Performans ve Profilleme
  • React DevTools Profiler ile ölçüm yapma
  • Render nedenlerini (why did render) inceleme
  • Liste sanallaştırma (virtualization) uygulama
  • Web Vitals ve performans metriklerini izleme
  • Gereksiz render ve bellek sızıntısı avı
  • Optimizasyonu veriyle önceliklendirme
Modül 4
İleri Proje ve Üretim
  • İleri özellikleri tek bir projede birleştirme
  • Kod yapısını ölçeklenebilir biçimde kurma
  • Üretim derlemesi (production build) alma
  • Hata izleme ve analitik entegrasyonu
  • Yayına (deploy) alma ve sürüm yönetimi
  • Kod gözden geçirme ve kalite kontrolü

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
İleri hook'lar

useReducer, useRef, useLayoutEffect ve custom hook ile karmaşık durum ve yan etkileri profesyonelce yönetirsiniz.

✅
Context ile durum

Context API ile global durumu paylaşır, prop drilling'i çözer ve tema, dil gibi kesişen kaygıları yönetirsiniz.

✅
Bellekleme

useMemo, useCallback ve React.memo ile gereksiz hesaplama ve render'ları önleyerek performansı ölçülü biçimde artırırsınız.

✅
Kod bölme ve Suspense

React.lazy, dinamik import ve Suspense ile uygulamayı böler, ilk yükü azaltır ve yükleme deneyimini iyileştirirsiniz.

✅
Eşzamanlı özellikler

useTransition ve useDeferredValue ile ağır güncellemelerde arayüzü akıcı tutar ve etkileşimi önceliklendirirsiniz.

✅
İleri desenler

Error boundary, portal, render props, HOC ve compound component desenleriyle yeniden kullanılabilir yapı kurarsınız.

✅
Durum yönetimi

Redux Toolkit ve Zustand ile ölçeklenebilir durum yönetimi kurar, durumu doğru katmanda konumlandırırsınız.

✅
Test ve üretim

React Testing Library ile test yazar, performans profiller ve uygulamayı üretim için hazırlayıp yayına alırsınız.

Kimler İçin Uygundur?

  • React ile bileşen
  • props
  • state ve hook temellerini bilen; ileri hook'lar
  • performans optimizasyonu
  • Suspense
  • ölçeklenebilir durum yönetimini öğrenerek daha büyük uygulamalar kurmak isteyen geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
React ile bileşen, props, state ve temel hook (useState, useEffect) kavramlarını bilen ve daha büyük, performanslı uygulamalar kurmak isteyen geliştiriciler için uygundur. React'e yeni başlayanlar için önce giriş düzeyinde bir React eğitimi önerilir; bu program ileri konulara odaklanır.
Hangi ileri konular işleniyor?
useReducer, useRef, custom hook ve ileri useEffect; Context API, useMemo, useCallback ve React.memo ile performans; React.lazy ve Suspense ile kod bölme; eşzamanlı özellikler; hata sınırları, portal, render props, HOC ve compound component desenleri; Redux Toolkit ve Zustand ile durum yönetimi, test ve üretime hazırlık işlenir.
Durum yönetimi için hangi araçlar gösteriliyor?
Context API'nin yanı sıra Redux Toolkit ve Zustand uygulamalı olarak gösterilir. Bu araçların ne zaman tercih edileceği, durumun hangi katmanda tutulacağı ve asenkron durum yönetimi örneklerle karşılaştırmalı biçimde ele alınır.
Eğitimin süresi ve formatı nedir?
Eğitim beş gün sürer ve her gün dört modülden oluşur. Konular ileri hook'lardan başlayıp performans, kod bölme, ileri desenler ve durum yönetimine ilerler ve üretime hazır bir projeyle tamamlanır. Yüz yüze veya online yapılabilir; içerik kurumsal gruba göre uyarlanabilir.
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 ileri modülleri ve geliştirilen projeyi belgeler; kurumsal gruplar için içerik, ekibin teknoloji yığınına ve seviyesine göre özelleştirilebilir.

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 d Digital Vizyon AKADEMİ KATILIM SERTİFİKASI Bu sertifika [Katılımcı Adı Soyadı] adlı katılımcının aşağıdaki eğitim programını başarıyla tamamladığını belgeler. Build Apps Using React: Advanced Features in React Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre5 gün
Seviyeİleri Seviye
FormatOnline / Yüz Yüze / Hibrit
KonuReact
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

ReactBuild Apps Using React: Introducing React for Web Applications Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

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

4 günOrtaOnline / Yüz Yüze / Hibrit

React'e giriş eğitimi: Virtual DOM, JSX, bileşen, props, state, olaylar ve useEffect ile sıfırdan modern web uygulaması geliştirmeyi öğrenin.

Detayları Gör →
ReactBuild Apps Using React: Local Machine & Online Playgrounds Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

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

4 günOrtaOnline / Yüz Yüze / Hibrit

React için yerel ortam kurulumu ve online playground eğitimi: Node, npm, VS Code, Vite, Create React App, CodeSandbox ve StackBlitz ile geliştirme.

Detayları Gör →
ReactBuild Apps Using React: Props & State Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Build Apps Using React: Props & State Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

React props ve state eğitimi: props ile veri aktarımı, useState ile durum yönetimi, tek yönlü veri akışı, state lifting ve kontrollü formlar.

Detayları Gör →
ReactBuild Apps Using React: Working with Events Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Build Apps Using React: Working with Events Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

React olay işleme eğitimi: onClick, onChange, onSubmit, SyntheticEvent, preventDefault, stopPropagation ve klavye/fare olaylarıyla etkileşimli arayüzler.

Detayları Gör →
ReactBuild Apps Using React: Working with Forms Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Build Apps Using React: Working with Forms Eğitimi

4 günOrtaOnline / Yüz Yüze / Hibrit

React'te form geliştirme: controlled bileşenler, React Hook Form, Zod ve Yup doğrulama, çok adımlı sihirbazlar ve erişilebilir UX eğitimi.

Detayları Gör →
ReactBuilding Web Applications with React Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Building Web Applications with React Eğitimi

3 günOrtaOnline / Yüz Yüze / Hibrit

React ile uçtan uca web uygulaması geliştirme: bileşenler, hook'lar, React Router, veri çekme, kimlik doğrulama, performans ve yayına alma eğitimi.

Detayları Gör →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn