REACT İLE KURUMSAL ÖN YÜZ GELİŞTİRME EĞİTİMİ

Kurumsal ölçekte sürdürülebilir React

Mimari, tasarım sistemi, veri yönetimi, test ve CI ile kurumsal ölçekte React geliştirme

React ile Kurumsal Ön Yüz Geliştirme Eğitimi, büyük ekiplerin sürdürülebilir ve tutarlı arayüzler geliştirmesi için gereken standartları öğretir.

3 gün Orta Seviye Online / Yüz Yüze / Hibrit Sertifikalı

Eğitim Hakkında

Klasör mimarisinden tasarım sistemine, veri yönetiminden teste kurumsal React standartları

React ile Kurumsal Ön Yüz Geliştirme Eğitimi, büyük ekiplerin sürdürülebilir ve tutarlı arayüzler geliştirmesi için gereken standartları öğretir. Katılımcılar ölçeklenebilir klasör mimarisi, yeniden kullanılabilir bileşen kütüphanesi ve tasarım sistemi kurar. React Router ile yönlendirme, React Query ile sunucu durumu, React Hook Form ile formlar, test, erişilebilirlik, çok dillilik ve performans işlenir. Program CI ve kod standardıyla tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; örnek bir kurumsal uygulama mimari, tasarım sistemi, veri yönetimi ve test standartlarıyla kademeli olarak kurulur.

Seviye

Orta Seviye — Ölçeklenebilir React mimarisi, tasarım sistemi, veri yönetimi, test ve erişilebilirlik

Öğrenme Metodu

Örnek bir kurumsal uygulama üç gün boyunca katmanlara ayrılıp standartlarla geliştirilir; her modülde bir mühendislik kararı uygulanır.

Neden Bu Eğitim?

🏛️Sürdürülebilirlik

Ölçeklenebilir mimari ve net standartlarla uygulama büyüdükçe bakımı kolay, ekip genelinde tutarlı bir kod tabanı kurarsınız.

🎨Tutarlı arayüz

Tasarım sistemi ve bileşen kütüphanesiyle tüm uygulamada görsel ve davranışsal tutarlılığı garanti altına alırsınız.

✅Kalite güvencesi

Test, erişilebilirlik ve CI süreçleriyle kurumsal kalite standartlarını otomatikleştirir, hataları erken yakalarsınız.

Anahtar Konular

react kurumsal eğitimreact mimari eğitimireact query eğitimireact router eğitimitasarım sistemi eğitimireact test eğitimireact hook formölçeklenebilir reactön yüz geliştirme eğitimireact erişilebilirlik
“Kurumsal ön yüz, bireysel yetenekten çok paylaşılan standartların eseridir; tutarlılık ekibin ortak hafızasını oluşturur.”

Ön Koşullar

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

1
React deneyimi

Bileşen, props, state ve hook kavramlarına pratik hakimiyet beklenir; eğitim bu temel üzerine kurumsal konuları kurar.

2
JavaScript ve ES6

Modern JavaScript, async/await, modül sistemi ve dizi/nesne işlemlerine aşinalık gerekir.

3
Proje tecrübesi

En az bir orta ölçekli React uygulaması geliştirmiş olmak, sürdürülebilirlik sorunlarını anlamayı kolaylaştırır.

4
Geliştirme ortamı

Node.js LTS, bir kod editörü ve Git kurulu olmalı; örnek projenin derlenip çalıştırılabilir durumda olması gerekir.

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ı özellik tabanlı ölçeklenebilir bir klasör mimarisi kurar, yeniden kullanılabilir bileşen kütüphanesi ve token tabanlı bir tasarım sistemi tasarlar.
Modül 1
Ölçeklenebilir Klasör Mimarisi
  • Özellik (feature) tabanlı klasör organizasyonu
  • Paylaşılan ve özelliğe özel kodun ayrımı
  • Barrel export ve genel API sınırları
  • Mutlak içe aktarım ve yol takma adları
  • Katmanlar arası bağımlılık yönü kuralı
  • Kod bölümleme ve modül sınırlarının korunması
Modül 2
Bileşen Kütüphanesi
  • Temel (button, input, modal) bileşen tasarımı
  • Bileşik (compound) bileşen deseni
  • Kontrollü ve kontrolsüz bileşen yaklaşımı
  • Prop API tasarımı ve varsayılan davranışlar
  • Storybook ile bileşen kataloğu oluşturma
  • Yeniden kullanılabilirlik ve esneklik dengesi
Modül 3
Tasarım Sistemi ve Token'lar
  • Renk, tipografi ve boşluk token'ları
  • Tema değişkenleriyle tutarlı stil
  • Açık ve koyu tema desteğinin kurulması
  • Tasarım token'larının koda yansıtılması
  • Marka kimliğinin sistematik uygulanması
  • Tasarımcı ve geliştirici ortak dili
Modül 4
Stil Stratejisi Seçimi
  • CSS Modules ve kapsamlı (scoped) stil
  • CSS-in-JS yaklaşımları ve ödünleşimleri
  • Utility-first (Tailwind) ile stil yönetimi
  • Tutarlı spacing ve layout sistemleri
  • Duyarlı (responsive) tasarım yaklaşımı
  • Stil mimarisinin ekip ölçeğinde seçimi
Günün hedefiKatılımcı React Router ile korumalı rotalar kurar, React Query ile sunucu durumunu ve önbelleği yönetir, React Hook Form ile ölçeklenebilir formlar geliştirir.
Modül 1
React Router ile Yönlendirme
  • İç içe rota ve layout yönlendirme
  • Dinamik parametre ve rota eşleştirme
  • Korumalı (protected) rota ve yetki kontrolü
  • Tembel yükleme ile rota bazlı kod bölme
  • Yönlendirme ve URL durumu yönetimi
  • 404 ve hata rotalarının ele alınması
Modül 2
React Query ile Sunucu Durumu
  • useQuery ile veri getirme ve önbellek
  • useMutation ile veri değiştirme işlemleri
  • Önbellek geçersizleştirme ve yeniden getirme
  • Arka planda yeniden doğrulama stratejisi
  • Sayfalama ve sonsuz kaydırma desteği
  • Yükleme, hata ve boş durum yönetimi
Modül 3
İstemci Durum Yönetimi
  • Context ile global istemci durumu
  • Zustand ile hafif durum yönetimi
  • Sunucu durumu ile istemci durumu ayrımı
  • Durum paylaşımı ve bileşenler arası erişim
  • Gereksiz render'ların azaltılması
  • Durum yönetimi aracının ölçeğe göre seçimi
Modül 4
React Hook Form ile Formlar
  • useForm ile form kaydı ve yönetimi
  • Zod/Yup ile şema tabanlı doğrulama
  • Alan dizileri ve dinamik form alanları
  • Form gönderimi ve sunucu hatası eşleme
  • Yeniden kullanılabilir form bileşenleri
  • Performanslı form ve gereksiz render önleme
Günün hedefiKatılımcı test piramidine göre bileşen ve uçtan uca testler yazar, erişilebilirlik ve çok dilliliği uygular, CI süreciyle kalite standartlarını otomatikleştirir.
Modül 1
Test Stratejisi ve Araçları
  • Test piramidi ve test türlerinin dengesi
  • React Testing Library ile bileşen testi
  • Kullanıcı davranışı odaklı test yaklaşımı
  • MSW ile ağ isteklerinin taklit edilmesi
  • Playwright ile uçtan uca testler
  • Test kapsamı ve anlamlı test ölçütleri
Modül 2
Erişilebilirlik (a11y)
  • Anlamsal HTML ve doğru etiketleme
  • ARIA rolleri ve öznitelikleri kullanımı
  • Klavye ile gezinme ve odak yönetimi
  • Renk kontrastı ve WCAG ölçütleri
  • Ekran okuyucu ile erişilebilirlik testi
  • Erişilebilirlik denetiminin otomatikleştirilmesi
Modül 3
Çok Dillilik ve Yerelleştirme
  • i18next ile çeviri altyapısı kurulumu
  • Metinlerin anahtar tabanlı yönetimi
  • Çoğul ve bağlama göre çeviri yönetimi
  • Tarih, sayı ve para biçimlendirme
  • Dil değişimi ve seçimin kalıcılığı
  • Sağdan sola (RTL) düzen desteği
Modül 4
CI ve Kod Standardı
  • ESLint ve Prettier ile kod kalitesi
  • TypeScript ile tip güvenliğinin sağlanması
  • Git kancaları ve commit öncesi denetim
  • CI iş akışıyla test ve derleme otomasyonu
  • Kod inceleme ve PR standartları
  • Sürüm yayınlama ve dağıtım hattı

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Ölçekli mimari

Özellik tabanlı klasör yapısı ve net bağımlılık kurallarıyla büyümeye açık, sürdürülebilir bir React mimarisi kurarsınız.

✅
Tasarım sistemi

Token tabanlı tasarım sistemi ve bileşen kütüphanesiyle tüm uygulamada görsel ve davranışsal tutarlılık sağlarsınız.

✅
Yönlendirme

React Router ile iç içe ve korumalı rotalar, rota bazlı kod bölme ve URL durumu yönetimini uygulayabilirsiniz.

✅
Sunucu durumu

React Query ile veri getirme, önbellek, mutasyon ve arka planda yeniden doğrulamayı doğru biçimde yönetirsiniz.

✅
Form yönetimi

React Hook Form ve şema doğrulamasıyla performanslı, yeniden kullanılabilir ve ölçeklenebilir formlar geliştirirsiniz.

✅
Test altyapısı

Testing Library ve Playwright ile bileşen ve uçtan uca testler yazar, kullanıcı davranışı odaklı bir test stratejisi kurarsınız.

✅
Erişilebilirlik

Anlamsal HTML, ARIA ve klavye erişimiyle WCAG ölçütlerine uygun, herkes için kullanılabilir arayüzler geliştirirsiniz.

✅
Teslim süreci

ESLint, TypeScript ve CI iş akışlarıyla kurumsal kalite standartlarını otomatikleştirir ve yayın hattını kurarsınız.

Kimler İçin Uygundur?

  • React ile uygulama geliştirmiş
  • projesi büyüdükçe tutarlılık ve sürdürülebilirlik ihtiyacı duyan orta ve üstü geliştiriciler
  • takım liderleri
  • kurumsal ekiplerde çalışan ön yüz geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
React ile uygulama geliştirmiş, projesi büyüdükçe tutarlılık ve sürdürülebilirlik ihtiyacı duyan orta ve üstü geliştiriciler, takım liderleri ve kurumsal ekiplerde çalışan ön yüz geliştiriciler için uygundur. Bileşen, props, state ve hook kavramlarına pratik hakimiyet beklenir.
React Query yerine Redux kullanmalı mıyım?
İkisi farklı sorunları çözer. React Query sunucu durumunu, yani ağdan gelen veriyi, önbelleği ve yeniden doğrulamayı yönetir; Redux veya Zustand ise istemci durumunu yönetir. Eğitimde sunucu ve istemci durumu ayrımı netleştirilir ve her birinin ne zaman kullanılacağı örneklerle işlenir, böylece gereksiz karmaşıklıktan kaçınılır.
Tasarım sistemi kurmak küçük ekipler için gerekli mi?
Tasarım sistemi her ölçekte tutarlılık ve hız kazandırır; küçük ekiplerde token ve temel bileşen kütüphanesi düzeyinde hafif başlayıp büyüdükçe genişletilebilir. Eğitimde ekip ölçeğine göre nereden başlanacağı ve sistemin nasıl büyütüleceği uygulamalı gösterilir.
Eğitimin süresi ve formatı nedir?
Eğitim üç gün sürer ve her gün dört modülden oluşur. Örnek bir kurumsal uygulama mimari, tasarım sistemi, veri yönetimi ve test standartlarıyla kademeli kurulur. Yüz yüze veya online yapılabilir; içerik kurumun mevcut kod tabanı ve standartlarına 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 modülleri ve eğitimde kurulan kurumsal örnek uygulamayı belgeler; kurumsal gruplara mevcut React projeleri üzerinden mimari ve standart değerlendirmesiyle genişletilebilir.

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. React ile Kurumsal Ön Yüz Geliştirme Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

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

Bu Eğitimle Birlikte Tercih Edilenler

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

React Eğitimi

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

React eğitimi: JSX, bileşen, props, useState, useEffect, useContext, React Router ve API entegrasyonu ile modern web arayüzü geliştirme.

Detayları Gör →
ReactReact Giriş Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

React Giriş Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

React giriş eğitimi: bileşen, JSX, props, useState ve olaylarla iki günde React'e sıfırdan uygulamalı ve hızlı başlangıç yapın.

Detayları Gör →
ReactReact Hooks ve Context API Kullanımı Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

React Hooks ve Context API Kullanımı Eğitimi

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

useState, useEffect, useReducer, useContext ve özel Hook'larla modern React durum yönetimini ve Context API ile global durumu öğreten uygulamalı eğitim.

Detayları Gör →
ReactReact ile Modern Front-End Geliştirme Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

React ile Modern Front-End Geliştirme Eğitimi

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

JSX, Hook'lar, React Router, veri çekme ve Vite ile üretime hazır modern, bileşen tabanlı ön yüz uygulamaları geliştirmeyi öğreten uygulamalı React eğitimi.

Detayları Gör →
ReactTest-Driven Development (TDD) Using React.js and ES Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Test-Driven Development (TDD) Using React.js and ES Eğitimi

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

Jest, React Testing Library ve kırmızı-yeşil-refactor döngüsüyle React ve modern ES'te test odaklı geliştirmeyi öğreten uygulamalı TDD eğitimi.

Detayları Gör →
ReactTypeScript Kullanarak React'e Giriş Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

TypeScript Kullanarak React'e Giriş Eğitimi

2 günBaşlangıçOnline / Yüz Yüze / Hibrit

TypeScript temelleri, tiplenmiş props ve state, Hook tipleri ve olay tipleriyle tip güvenli React geliştirmeye giriş yaptıran uygulamalı başlangıç eğitimi.

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