İLERİ SEVİYE REACT EĞİTİMİ

React'te performans, mimari ve üretim kalitesi

İleri hook, performans optimizasyonu, durum mimarisi ve TypeScript ile üretim düzeyinde React

İleri Seviye React Eğitimi, React temellerine hakim geliştiricileri karmaşık uygulamalarda performanslı, sürdürülebilir ve test edilebilir kod yazacak düzeye taşır.

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

Eğitim Hakkında

Deneyimli geliştiriciler için ileri hook, performans, mimari, test ve TypeScript odaklı React

İleri Seviye React Eğitimi, React temellerine hakim geliştiricileri büyük ve karmaşık uygulamalarda performanslı, sürdürülebilir ve test edilebilir kod yazacak düzeye taşır. Katılımcılar ileri hook desenlerini, render optimizasyonunu, durum yönetimi mimarilerini ve sunucu durumunu derinlemesine ele alır. Suspense, concurrent özellikler, kod bölme ve hata sınırları gibi konuların ardından React Testing Library ve TypeScript ile üretim kalitesinde React geliştirmeyi uygular.

Süre ve Format

4 Gün. Her gün dört modül; ileri hook, performans, durum mimarisi, test ve TypeScript uygulamalı örneklerle derinlemesine işlenir.

Seviye

İleri Seviye — performans, mimari, ileri hook desenleri, test ve TypeScript ile üretim React

Öğrenme Metodu

Her konu gerçek senaryolar, canlı kodlama ve profil ölçümleriyle işlenir; öğrenilen desenler büyük bir uygulamada birleştirilir.

Neden Bu Eğitim?

⚡Gerçek performans

Render maliyetini ölçmeyi ve memoization ile gereksiz render'ları gidermeyi öğrenerek uygulamalarınızı belirgin biçimde hızlandırırsınız.

🏗️Ölçeklenen mimari

Durum yönetimi ve bileşen desenleriyle büyüdükçe karmaşıklaşmayan, bakımı kolay bir React mimarisi kurmayı öğrenirsiniz.

🧪Üretim kalitesi

Test ve TypeScript ile hataları erken yakalar, güvenle refactor eder ve üretime hazır sağlam React kodu yazarsınız.

Anahtar Konular

ileri seviye react eğitimireact performans eğitimireact hook eğitimireact durum yönetimireact query eğitimiredux toolkit kursureact typescript eğitimireact test eğitimiileri react kursureact mimari eğitimi
“İleri React, daha çok özellik eklemek değil; büyüyen bir uygulamayı hızlı, okunabilir ve güvenle değiştirilebilir tutabilmektir.”

Ön Koşullar

Eğitimden verim almak için gerekli olan deneyim ve hazırlık

1
React deneyimi

Bileşen, props, state ve useState/useEffect gibi temel hook'ları rahatça kullanabilmek bu eğitim için gereklidir.

2
Modern JavaScript

ES6+ özellikleri, closure, asenkron kod ve modül sistemine hakimiyet ileri konuları takip etmeyi kolaylaştırır.

3
Araç zinciri

npm, Vite veya benzeri bir derleyici ve Git ile çalışma deneyimi eğitim boyunca işinizi kolaylaştırır.

4
TypeScript fikri

Temel TypeScript bilgisi son gün için avantaj sağlar; gerekli kavramlar eğitim içinde özetlenir, zorunlu değildir.

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ı render döngüsünü derinlemesine kavrar; useMemo, useCallback ve useRef ile gereksiz hesaplama ve render'ları giderir, Profiler ile darboğazları ölçer.
Modül 1
Render Döngüsünü Anlamak
  • React render ve commit aşamaları
  • Yeniden render tetikleyen nedenler
  • Referans eşitliği ve props karşılaştırması
  • Reconciliation ve sanal DOM mantığı
  • key kullanımının render'a etkisi
  • Gereksiz render belirtilerini tanıma
Modül 2
Memoization Hook'ları
  • useMemo ile pahalı hesaplamayı önbellekleme
  • useCallback ile fonksiyon referansını sabitleme
  • React.memo ile bileşen render'ını önleme
  • Bağımlılık dizisi (deps) doğru kullanımı
  • Erken ve gereksiz optimizasyon tuzakları
  • Memoization'ın maliyeti ve dengesi
Modül 3
useRef ve Zorunlu Erişim
  • useRef ile render dışı değer saklama
  • DOM elemanına doğrudan erişim sağlama
  • forwardRef ile ref'i aşağı aktarma
  • useImperativeHandle ile API açma
  • Önceki değeri ref ile saklama deseni
  • Ref ile state farkı ve kullanım yeri
Modül 4
Profilleme ve Ölçüm
  • React DevTools Profiler ile ölçüm
  • Render süresi ve nedenlerini okuma
  • Profiler bileşeni ile programatik ölçüm
  • web vitals ve kullanıcı deneyimi metrikleri
  • Darboğaz tespiti ve önceliklendirme
  • Ölçmeden optimizasyon yapmama ilkesi
Günün hedefiKatılımcı yerel, global ve sunucu durumunu ayırt eder; Context, Redux Toolkit ve Zustand'ı karşılaştırır, React Query ile sunucu durumunu etkin biçimde yönetir.
Modül 1
Context ve Durum Türleri
  • Yerel, global ve sunucu durumu ayrımı
  • useContext ile durum paylaşımı
  • Context'in render performansına etkisi
  • Context bölme (splitting) stratejisi
  • useReducer ile karmaşık durum yönetimi
  • Context ne zaman yetersiz kalır
Modül 2
Redux Toolkit ile Global Durum
  • createSlice ve configureStore kullanımı
  • createAsyncThunk ile asenkron akış
  • Seçici (selector) ve memoize selector
  • RTK Query ile veri çekme ve önbellek
  • Durum normalizasyonu ve yapı tasarımı
  • DevTools ile durum izleme ve zaman yolculuğu
Modül 3
Zustand ile Hafif Durum
  • Zustand store oluşturma ve kullanma
  • Seçici ile parçalı durum okuma
  • Middleware ve persist kullanımı
  • Redux ile Zustand karşılaştırması
  • Küçük ve orta uygulamalar için seçim
  • Store'u modüler biçimde yapılandırma
Modül 4
Sunucu Durumu: React Query
  • Sunucu durumu ile istemci durumu farkı
  • useQuery ile veri çekme ve önbellek
  • useMutation ile veri değiştirme
  • Önbellek geçersizleştirme (invalidation)
  • Arka planda yenileme ve stale veri
  • Optimistic update ile akıcı deneyim
Günün hedefiKatılımcı Suspense ve concurrent özellikleri kavrar; kod bölme, hata sınırları, portal ve compound bileşen desenleriyle ölçeklenebilir arayüzler kurar.
Modül 1
Suspense ve Concurrent Özellikler
  • Suspense ile yükleme durumu yönetimi
  • lazy ile bileşen düzeyinde kod bölme
  • useTransition ile öncelikli güncelleme
  • useDeferredValue ile ertelenmiş değer
  • Concurrent render mantığı ve etkileri
  • Akıcı kullanıcı deneyimi için kullanım
Modül 2
Kod Bölme ve Yükleme
  • React.lazy ve dinamik import kullanımı
  • Route bazlı kod bölme stratejisi
  • Paket (bundle) boyutunu analiz etme
  • Tree shaking ve gereksiz kodu atma
  • Ön yükleme (preload) ve öncelik
  • İlk yükleme süresini iyileştirme
Modül 3
Hata Sınırları ve Portal
  • Error boundary ile hata yakalama
  • Hata sınırı tasarımı ve geri dönüş UI
  • Suspense ile hata sınırı birleşimi
  • createPortal ile DOM dışına render
  • Modal ve tooltip için portal kullanımı
  • Erişilebilirlik ve odak yönetimi
Modül 4
İleri Bileşen Desenleri
  • Compound component (bileşik) deseni
  • Render props ve children fonksiyonu
  • Custom hook ile mantık soyutlama
  • Controlled ve uncontrolled bileşen
  • Provider ve bileşim (composition) deseni
  • Yeniden kullanılabilir API tasarımı
Günün hedefiKatılımcı React Testing Library ile davranış odaklı test yazar, TypeScript ile bileşen ve hook'ları tipler, SSR ve yayın konularıyla üretime hazır hale gelir.
Modül 1
React Testing Library ile Test
  • Davranış odaklı test felsefesi
  • render, screen ve query kullanımı
  • Kullanıcı etkileşimini userEvent ile test etme
  • Asenkron durum ve findBy sorguları
  • Mock ve API isteklerini taklit etme
  • Test edilebilir bileşen tasarımı
Modül 2
TypeScript ile React
  • Bileşen props'larını tip ile tanımlamak
  • useState ve useRef tip çıkarımı
  • Generic (jenerik) bileşen ve hook yazma
  • Event ve DOM tiplerini kullanma
  • Discriminated union ile durum tipleri
  • Tip güvenli custom hook tasarımı
Modül 3
SSR ve Modern Çatılar
  • İstemci ve sunucu render karşılaştırması
  • Next.js ile SSR ve SSG kavramları
  • Hydration kavramı ve olası sorunları
  • SEO ve ilk anlamlı boyama (FCP)
  • Streaming SSR yaklaşımına kısa bakış
  • React Server Components'e giriş
Modül 4
Üretim ve Bitirme Uygulaması
  • Üretim derlemesi ve ortam yapılandırması
  • Performans ve erişilebilirlik denetimi
  • Hata izleme ve loglama entegrasyonu
  • Öğrenilen desenleri uygulamada birleştirme
  • Kod inceleme ve refactor pratiği
  • Uygulamayı yayına hazırlama ve sunma

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Render optimizasyonu

Render döngüsünü kavrar; useMemo, useCallback ve React.memo ile gereksiz render'ları gidererek uygulamayı hızlandırırsınız.

✅
Performans ölçümü

React DevTools Profiler ile darboğazları ölçer, veriye dayalı optimizasyon yapar ve erken optimizasyon tuzaklarından kaçınırsınız.

✅
Durum mimarisi

Yerel, global ve sunucu durumunu ayırt eder; Context, Redux Toolkit ve Zustand arasında bilinçli seçim yaparsınız.

✅
Sunucu durumu

React Query ile veri çekme, önbellek, geçersizleştirme ve optimistic update kullanarak sunucu durumunu etkin yönetirsiniz.

✅
Concurrent React

Suspense, useTransition ve kod bölme ile akıcı, hızlı yüklenen ve dirençli kullanıcı arayüzleri oluşturursunuz.

✅
İleri desenler

Compound component, custom hook ve render props desenleriyle yeniden kullanılabilir ve ölçeklenebilir bileşenler tasarlarsınız.

✅
Test yazma

React Testing Library ile davranış odaklı test yazar, etkileşimleri doğrular ve güvenle refactor edebilir hale gelirsiniz.

✅
TypeScript ve React

Bileşen, hook ve event'leri tip güvenli yazar; TypeScript ile hataları erken yakalayıp üretim kalitesini artırırsınız.

Kimler İçin Uygundur?

  • React ile bileşen
  • props ve temel hook'ları rahatça kullanabilen; büyük ölçekli uygulamalarda performans
  • mimari
  • test
  • TypeScript konularında derinleşmek isteyen orta ve üzeri seviyedeki frontend geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
Eğitim, React ile bileşen, props, state ve temel hook'ları rahatça kullanabilen orta ve üzeri seviyedeki geliştiriciler içindir. React'e yeni başlayanlar için uygun değildir; önce temel bir React eğitimi önerilir. Katılımcıların modern JavaScript ve bileşen tabanlı geliştirmeye aşina olması beklenir, böylece ileri konulara doğrudan odaklanılabilir.
Performans optimizasyonu gerçek örneklerle mi işleniyor?
Evet. useMemo, useCallback ve React.memo gibi araçlar önce render döngüsü anlatılarak, ardından gerçek darboğazlar üzerinden uygulanır. React DevTools Profiler ile render maliyeti ölçülür ve ölçmeden optimizasyon yapmama ilkesi vurgulanır. Amaç ezberlenmiş kalıplar değil, ne zaman ve neden optimize edileceğini kavratmaktır.
Hangi durum yönetimi kütüphaneleri ele alınıyor?
Context API, Redux Toolkit, Zustand ve sunucu durumu için React Query işlenir. Her birinin güçlü ve zayıf yönleri karşılaştırılır; yerel, global ve sunucu durumu ayrımı netleştirilir. Böylece hangi senaryoda hangi çözümü seçeceğinizi gerekçeleriyle değerlendirebilir hale gelirsiniz.
TypeScript bilmek zorunlu mu?
Zorunlu değildir, ancak temel TypeScript bilgisi son gün için avantaj sağlar. Eğitimde React ile TypeScript kullanımı; props, hook, event ve generic bileşen tipleme üzerinden işlenir ve gerekli kavramlar özetlenir. JavaScript ile ilerlemek isteyenler de ana konuların büyük bölümünü takip edebilir.
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 uygulama çalışmalarını belgeler; kurumsal gruplar için içerik, ekibin kullandığı durum yönetimi ve test araçlarına 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. İleri Seviye React Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 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

ReactReact, Redux ve TypeScript Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

React, Redux ve TypeScript Eğitimi

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

Tip güvenli React, TypeScript, Redux Toolkit, tipli slice ve selector, RTK Query, asenkron thunk, test ve ölçeklenebilir durum mimarisi eğitimi.

Detayları Gör →
ReactReact: Yüksek Etkileşimli Web Uygulamaları Oluşturma Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

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

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

JSX, bileşenler, hook'lar, React Router, form, Context ve performans optimizasyonuyla modern React uygulamaları geliştirme eğitimi.

Detayları Gör →
ReactReactive Programming Using Redux Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Reactive Programming Using Redux Eğitimi

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

Redux Toolkit, RTK Query, redux-saga ve RxJS reaktif akışlarıyla öngörülebilir durum yönetimi ve React entegrasyonu eğitimi.

Detayları Gör →
ReactSpring Boot, React ve Redux Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Spring Boot, React ve Redux Eğitimi

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

Spring Boot REST API, Spring Security ve JWT ile React ve Redux ön yüzünü birleştiren uçtan uca tam yığın geliştirme eğitimi.

Detayları Gör →
ReactTam Katmanlı Geliştirme ile React, TypeScript, Next.js ve Modern Arka Uç Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Tam Katmanlı Geliştirme ile React, TypeScript, Next.js ve Modern Arka Uç Eğitimi

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

TypeScript, Next.js App Router, sunucu bileşenleri, Prisma ve Auth.js ile tam katmanlı modern web uygulaması geliştirme eğitimi.

Detayları Gör →
ReactIntroduction to ASP.NET Core Development using React with Redux Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Introduction to ASP.NET Core Development using React with Redux Eğitimi

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

ASP.NET Core Web API ile React ve Redux kullanarak tam yığın geliştirme: EF Core, Redux Toolkit, async thunk ve JWT ile uçtan uca eğitim.

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