BUILD APPS USING REACT: IN DEVELOPMENT & PRODUCTION EĞİTİMİ

React'i geliştirmeden üretime taşıyın

React uygulamalarını geliştirme ortamından üretim derlemesine ve yayına kadar yönetin

In Development & Production, React uygulamalarını geliştirme ortamından üretime taşımayı öğretir. Eğitim geliştirme ve üretim modu farkı, dev server, HMR ve ortam değişkenleriyle başlar; Vite ve webpack ile build, kod bölme ve varlık yönetimini kapsar.

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

Eğitim Hakkında

Geliştirme ortamı, build araçları, üretim optimizasyonu, yayına alma ve CI/CD

In Development & Production, React uygulamalarını geliştirme ortamından üretime yönetmeyi öğretir. Program geliştirme ve üretim modu farkı, dev server, HMR ve ortam değişkenleriyle başlar; Vite ve webpack ile build, kod bölme ve varlık yönetimini işler. Bundle analizi, minifikasyon, önbellek ve Core Web Vitals ile üretim optimizasyonu ele alınır. Eğitim; Vercel ve Netlify ile yayın, GitHub Actions ile CI/CD ve Sentry ile hata izlemeyi uygulamalı olarak kapsar.

Süre ve Format

4 Gün. Her gün dört modül; geliştirme ortamından build araçlarına, üretim optimizasyonundan yayına alma ve CI/CD'ye kadar her aşama uygulamalı işlenir.

Seviye

Orta Seviye — React uygulamalarını geliştirme ortamından üretim derlemesi, optimizasyon ve yayına kadar yönetme

Öğrenme Metodu

Her konu gerçek bir proje üzerinde build alınarak, optimize edilerek ve yayına çıkarılarak işlenir; sonuçlar araçlarla ölçülüp doğrulanır.

Neden Bu Eğitim?

🚀Üretime hazır beceri

Uygulamanızı yalnızca geliştirip bırakmaz; optimize edip güvenle yayına alma ve sürdürme becerisi kazanırsınız.

📦Build'e hakimiyet

Vite ve webpack ile paketleme, kod bölme ve varlık yönetimini kavrayarak çıktınızı küçültmeyi ve hızlandırmayı öğrenirsiniz.

🔁Otomatik iş akışı

CI/CD, hata izleme ve analitik ile sürümleri otomatikleştirip üretimdeki sorunları erken yakalamayı öğrenirsiniz.

Anahtar Konular

react üretim eğitimireact build eğitimireact deploy eğitimivite build optimizasyonureact ci cdwebpack eğitimireact performans optimizasyonureact yayına almacore web vitalsreact vercel netlify
“Bir uygulamanın hayatı yayına alındığında başlar; asıl beceri, onu hızlı, ölçülebilir ve sürdürülebilir tutmaktır.”

Ön Koşullar

Bu eğitimden verim almak için faydalı olacak bilgi ve hazırlık

1
React deneyimi

Bileşen, props, state ve hook ile küçük bir React uygulaması geliştirmiş olmak bu eğitim için gereklidir.

2
Terminal kullanımı

npm komutları, script çalıştırma ve temel terminal kullanımı build ve yayın adımlarında işleri kolaylaştırır.

3
Git ve GitHub

Temel Git kullanımı ve bir GitHub deposu olması, CI/CD ve yayına alma konularında faydalı olur.

4
Geliştirme ortamı

Node.js, npm ve VS Code kurulu bir bilgisayar; örnek proje ilk gün hazırlanır ve kurulum birlikte yapılı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ı geliştirme ve üretim modu farkını kavrar, dev server ve HMR'ı kullanır, ortam değişkenlerini ve proje araçlarını yapılandırır.
Modül 1
Geliştirme ve Üretim Modu Farkı
  • Development ve production mod arasındaki farklar
  • NODE_ENV ortam değişkeninin rolü ve etkisi
  • Geliştirmede uyarı ve hata ayıklama kolaylıkları
  • Üretimde kaldırılan geliştirici kontrolleri
  • StrictMode'un geliştirmedeki davranışı
  • Mod bazlı koşullu kod ve optimizasyon
Modül 2
Geliştirme Sunucusu (Dev Server)
  • Vite geliştirme sunucusunu başlatma
  • Hot Module Replacement (HMR) ile canlı güncelleme
  • Hızlı yeniden yükleme ve durum koruması
  • Proxy ile backend API'ye yönlendirme
  • Dev server portu ve host yapılandırması
  • HTTPS ve yerel ağ erişimini ayarlama
Modül 3
Ortam Değişkenleri (Env)
  • .env dosyaları ile yapılandırma yönetimi
  • import.meta.env ile değişkenlere erişim
  • VITE_ ön ekiyle istemciye açılan değişkenler
  • Geliştirme, test ve üretim için ayrı env
  • Gizli anahtarları istemciden uzak tutma
  • Ortam bazlı API tabanı (base URL) ayarı
Modül 4
Proje Yapısı ve Araçlar
  • Ölçeklenebilir klasör ve dosya yapısı kurma
  • ESLint ile kod kalitesi denetimi
  • Prettier ile otomatik kod biçimlendirme
  • Alias ve yol (path) kısayolları tanımlama
  • package.json script'leriyle iş akışı kurma
  • Bağımlılık yönetimi ve sürüm kilitleme
Günün hedefiKatılımcı Vite ve webpack ile build sürecini kurar, kod bölme ve chunk yönetimini uygular, varlık ve statik dosyaları doğru işler.
Modül 1
Vite ile Build Süreci
  • Vite build komutu ile üretim derlemesi alma
  • Rollup tabanlı paketleme (bundling) mantığı
  • Çıktı (dist) klasörü ve dosya yapısı
  • esbuild ile hızlı dönüştürme (transform)
  • vite.config ile build yapılandırmasını özelleştirme
  • Asset (varlık) işleme ve içe aktarma
Modül 2
Webpack Temelleri
  • Webpack entry, output ve loader kavramı
  • Babel ile JSX ve modern JS dönüşümü
  • Plugin'ler ile build sürecini genişletme
  • Mode ayarı ve ortam bazlı derleme
  • webpack-dev-server ile geliştirme
  • CRA altındaki webpack yapısını anlama
Modül 3
Kod Bölme ve Chunk Yönetimi
  • Dinamik import ile kod bölme (code splitting)
  • Vendor ve uygulama chunk'larını ayırma
  • Lazy loading ile ilk yükü (initial load) azaltma
  • Chunk adlandırma ve önbellek (cache) uyumu
  • Ortak bağımlılıkları paylaştırma (shared)
  • Route bazlı bölme ile sayfa yükünü dağıtma
Modül 4
Varlık (Asset) ve Statik Dosya
  • Görsel, font ve statik dosya içe aktarma
  • public klasörü ile doğrudan sunulan dosyalar
  • Görselleri optimize etme ve boyut küçültme
  • CSS ve CSS Modules paketleme davranışı
  • Hash'li dosya adlarıyla cache busting
  • SVG'leri bileşen olarak kullanma
Günün hedefiKatılımcı bundle'ı analiz eder, minifikasyon ve sıkıştırma uygular, önbellek stratejisi kurar ve Core Web Vitals'ı iyileştirir.
Modül 1
Bundle Analizi ve Boyut
  • Bundle boyutunu analiz araçlarıyla ölçme
  • rollup-plugin-visualizer ile paket haritası
  • Büyük bağımlılıkları tespit etme ve azaltma
  • Tree shaking ile kullanılmayan kodu atma
  • Gereksiz polyfill ve çift bağımlılık avı
  • Hedef tarayıcıya göre çıktıyı ayarlama
Modül 2
Minifikasyon ve Sıkıştırma
  • JS ve CSS minifikasyonu (minify) süreci
  • Gzip ve Brotli ile sunucu sıkıştırması
  • Source map üretimi ve üretimdeki rolü
  • Konsol ve debugger ifadelerini kaldırma
  • Ölü kod (dead code) eleme (elimination)
  • Üretim çıktısını boyut olarak doğrulama
Modül 3
Önbellek ve Yükleme Stratejisi
  • Tarayıcı önbelleği (cache) ve hash stratejisi
  • Uzun süreli (long-term) caching kurma
  • Preload ve prefetch ile kritik kaynak yükleme
  • Lazy loading ile görsel ve bileşen erteleme
  • CDN üzerinden statik varlık dağıtımı
  • Service Worker ile çevrimdışı önbellek
Modül 4
Üretim Performansı
  • Core Web Vitals (LCP, CLS, INP) ölçme
  • Lighthouse ile performans denetimi yapma
  • İlk içerik boyası (FCP) süresini iyileştirme
  • Render engelleyen kaynakları azaltma
  • Üretim modunda performans profili çıkarma
  • Performans bütçesi (budget) belirleme
Günün hedefiKatılımcı uygulamayı Vercel/Netlify ile yayına alır, GitHub Actions ile CI/CD kurar, Sentry ile hata izler ve sürüm yönetimi yapar.
Modül 1
Statik Barındırma ve Yayın
  • Vercel ile tek komutla yayına alma
  • Netlify üzerinde derleme ve dağıtım
  • SPA yönlendirme (rewrite) kurallarını ayarlama
  • Özel alan adı (custom domain) bağlama
  • Ortam değişkenlerini barındırmada tanımlama
  • Üretim ve önizleme (preview) dağıtımı
Modül 2
CI/CD İş Akışı Kurma
  • GitHub Actions ile otomatik derleme kurma
  • Push ve pull request tetikleyicileri (trigger)
  • Lint, test ve build adımlarını sıralama
  • Başarılı derlemede otomatik dağıtım
  • Ortam gizli anahtarlarını (secrets) yönetme
  • Sürüm etiketleme ve geri alma (rollback)
Modül 3
Hata İzleme ve İzlenebilirlik
  • Sentry ile üretim hatalarını yakalama
  • Kaynak haritalarıyla hata izini çözümleme
  • Kullanıcı etkisini ve sıklığı önceliklendirme
  • Error boundary ile hataları raporlama
  • Uyarı (alert) ve bildirim kurulumu
  • Loglama ve tanılama (diagnostics) ekleme
Modül 4
Analitik ve Sürüm Yönetimi
  • Kullanım analitiği ve olay (event) izleme
  • Özellik bayrağı (feature flag) ile kademeli açım
  • A/B testi için sürüm (version) yönetimi
  • Sürüm notları ve değişiklik takibi
  • Üretim sağlık kontrolü (health check)
  • Yayın sonrası izleme ve geri bildirim

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Ortam yönetimi

Geliştirme ve üretim modu farkını kavrar, dev server, HMR ve ortam değişkenlerini doğru yapılandırarak projenizi düzenlersiniz.

✅
Build araçları

Vite ve webpack ile build sürecini kurar, paketleme ve dönüştürme adımlarını anlayarak çıktınızı kontrol edersiniz.

✅
Kod bölme

Dinamik import ve chunk yönetimiyle uygulamayı böler, ilk yükü azaltır ve önbellek uyumlu bir dağıtım kurarsınız.

✅
Varlık yönetimi

Görsel, font ve statik dosyaları optimize ederek içe aktarır, cache busting ile sürüm güncellemelerini güvenli yönetirsiniz.

✅
Üretim optimizasyonu

Bundle analizi, tree shaking, minifikasyon ve sıkıştırma ile üretim çıktısını belirgin biçimde küçültür ve hızlandırırsınız.

✅
Performans ölçümü

Core Web Vitals ve Lighthouse ile performansı ölçer, render engelleyen kaynakları azaltır ve bütçe belirlersiniz.

✅
Yayına alma

Uygulamayı Vercel veya Netlify ile yayına alır, özel alan adı ve ortam değişkenleriyle üretim dağıtımını kurarsınız.

✅
CI/CD ve izleme

GitHub Actions ile otomatik dağıtım, Sentry ile hata izleme ve analitik kurarak üretim sürecini otomatikleştirirsiniz.

Kimler İçin Uygundur?

  • React ile uygulama geliştirebilen; projelerini doğru yapılandırmak
  • üretim için optimize etmek
  • yayına almak
  • CI/CD ile hata izleme süreçlerini kurmak isteyen geliştiriciler ve ekipler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
React ile bileşen, props, state ve hook kullanarak uygulama geliştirebilen; projelerini üretim için yapılandırmak, optimize etmek ve yayına almak isteyen geliştiriciler ve ekipler için uygundur. React'in temelini bilmek ön koşuldur; eğitim build ve üretim süreçlerine odaklanır.
Hangi build araçları gösteriliyor?
Öncelikli olarak Vite üzerinden modern build süreci işlenir; ayrıca webpack temelleri ve CRA altındaki yapı ele alınır. Kod bölme, chunk yönetimi, varlık işleme, tree shaking ve minifikasyon gibi konular her iki aracın mantığıyla birlikte gösterilir.
Yayına alma için hangi platformlar kullanılıyor?
Statik barındırma için Vercel ve Netlify uygulamalı olarak gösterilir. SPA yönlendirme kuralları, özel alan adı, ortam değişkenleri ve önizleme dağıtımları ele alınır. Ek olarak GitHub Actions ile CI/CD kurulumu adım adım işlenir.
Performans konularını da kapsıyor mu?
Evet. Bundle analizi, tree shaking, minifikasyon, sıkıştırma ve önbellek stratejilerinin yanı sıra Core Web Vitals (LCP, CLS, INP) ölçümü ve Lighthouse ile denetim işlenir. Amaç üretim çıktısını hem küçültmek hem de ölçülebilir biçimde hızlandırmaktı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 üretime alınan projeyi belgeler; kurumsal gruplar için içerik, ekibin kullandığı araç ve dağıtım altyapısına göre 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 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: In Development & Production Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre4 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 ile Kurumsal Ön Yüz Geliştirme Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

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

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

Kurumsal React: ölçeklenebilir mimari, tasarım sistemi, React Router, React Query, React Hook Form, test, erişilebilirlik ve CI eğitimi.

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

React JS Programlama Eğitimi

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

React JS ile SPA geliştirme: hooks, özel hook'lar, Context, React Router, API veri getirme, performans ve yayına alma eğitimi.

Detayları Gör →
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 →
+90 (501) 369 40 14 WhatsApp [email protected] LinkedIn