DEVELOPING APPLICATIONS USING REACTJS EĞİTİMİ

ReactJS ile modern arayüzler geliştir

JSX, bileşenler, hook'lar, React Router, Context ve Redux Toolkit, API entegrasyonu ile test edilmiş React uygulaması geliştirme

Hook'lar, React Router, Redux Toolkit, API entegrasyonu ve Testing Library ile uçtan uca React uygulama geliştirme eğitimi.

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

Eğitim Hakkında

Sıfırdan bileşen tabanlı, test edilmiş ve dağıtıma hazır React uygulaması

Bu eğitim, modern React ile uygulama geliştirmeyi uçtan uca öğretir. JSX ve bileşen mimarisi, props ve state, useState, useEffect, useMemo, useCallback, useRef ve özel hook'lar, kontrollü formlar, React Router ile yönlendirme, Context API ve Redux Toolkit ile durum yönetimi, fetch ve Axios ile REST entegrasyonu, React Query, performans optimizasyonu ve React Testing Library ile test yazımı uygulamalı işlenir.

Süre ve Format

3 Gün. Her gün dört modül; canlı kodlama, her modülde mini proje adımı ve günün sonunda ana projeye entegrasyon çalışmasından oluşur.

Seviye

Orta Seviye — React bileşenleri, hook'lar, durum yönetimi, yönlendirme, API entegrasyonu ve test

Öğrenme Metodu

Eğitim boyunca tek bir ürün listeleme ve sepet uygulaması adım adım büyütülür; her gün sonunda çalışan bir sürüm elde edilir.

Neden Bu Eğitim?

⚛️Modern React

Fonksiyonel bileşenler ve hook'larla güncel React yazım biçimini öğrenirsiniz.

🧭Uçtan uca uygulama

Yönlendirme, durum yönetimi ve API entegrasyonuyla gerçek uygulama iskeleti kurarsınız.

🧪Test ve kalite

Bileşenleri React Testing Library ile test eden bir alışkanlık edinirsiniz.

Anahtar Konular

ReactJS eğitimiReact hooksReact RouterRedux ToolkitReact QueryReact Testing Libraryfrontend geliştirmeJSXReact uygulama geliştirmeuseEffect
“React'i öğrenmek sözdizimini değil, durumu ve veri akışını düşünmeyi öğrenmektir.”

Ön Koşullar

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

1
JavaScript bilgisi

ES6 özellikleri (arrow function, destructuring, modules, promise) bilinmelidir.

2
HTML ve CSS

Temel sayfa yapısı ve stil bilgisi gerekir.

3
Node.js kurulumu

Node.js LTS ve npm bilgisayarda kurulu olmalıdır.

4
Kod editörü

VS Code gibi bir editör ve tarayıcı geliştirici araçları kullanılacaktı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ı, fonksiyonel bileşenler ve temel hook'larla etkileşimli arayüzler geliştirir.
Modül 1
Proje Kurulumu ve JSX
  • Vite ile React projesi oluşturma
  • Klasör yapısı ve giriş noktası
  • JSX kuralları ve ifade gömme
  • Fragment ve koşullu render
  • Liste render ve key özelliği
  • Strict Mode davranışı
Modül 2
Bileşenler ve Props
  • Fonksiyonel bileşen tasarımı
  • Props geçirme ve children
  • PropTypes ve TypeScript tip tanımı
  • Bileşen kompozisyonu
  • Tek yönlü veri akışı
  • Bileşeni küçültme ve ayırma ölçütleri
Modül 3
State ve Olaylar
  • useState ile durum
  • Olay yönetimi ve synthetic event
  • State'i yukarı taşıma (lifting state up)
  • Güncellemelerin toplu yapılması ve fonksiyonel set
  • Obje ve dizi state değişmezliği
  • Kontrollü ve kontrolsüz formlar
Modül 4
Etki ve Yaşam Döngüsü
  • useEffect bağımlılık dizisi
  • Temizleme (cleanup) fonksiyonu
  • Veri çekme ve yarış durumu
  • useRef ile DOM erişimi
  • Sonsuz döngü tuzakları
  • Bileşen mount, update, unmount mantığı
Günün hedefiKatılımcı, yönlendirme, global durum ve API entegrasyonuyla çok sayfalı uygulama kurar.
Modül 1
React Router
  • BrowserRouter, Routes ve Route
  • Link, NavLink ve useNavigate
  • Dinamik rota ve useParams
  • İç içe rotalar ve Outlet
  • Korumalı rota (auth guard)
  • 404 ve yönlendirme
Modül 2
Context ve Redux Toolkit
  • Context API ile tema ve kullanıcı durumu
  • Prop drilling sorunu
  • Redux Toolkit: slice, store, reducer
  • useSelector ve useDispatch
  • createAsyncThunk ile asenkron işlem
  • Context ve Redux seçim ölçütü
Modül 3
API Entegrasyonu
  • fetch ve Axios kullanımı
  • Yükleniyor, hata ve başarı durumu modelleme
  • React Query ile önbellek ve yeniden doğrulama
  • Axios interceptor ile token ekleme
  • CORS ve proxy ayarı
  • Sayfalama ve arama uygulaması
Modül 4
Formlar ve Doğrulama
  • React Hook Form ile form yönetimi
  • Yup/Zod şema doğrulaması
  • Hata mesajı gösterimi
  • Dosya yükleme alanı
  • Gönderim durumu ve çift gönderim engelleme
  • Erişilebilir form etiketleri
Günün hedefiKatılımcı, uygulamayı optimize eder, test eder ve yayına hazırlar.
Modül 1
Özel Hook'lar ve İleri Hook'lar
  • Özel hook yazma (useFetch, useLocalStorage)
  • useReducer ile karmaşık durum
  • useMemo ve useCallback kullanımı
  • useContext ile tüketim
  • Hook kuralları
  • Hook testi
Modül 2
Performans Optimizasyonu
  • React.memo ve gereksiz render
  • React Profiler ile ölçüm
  • Kod bölme: lazy ve Suspense
  • Büyük liste için sanallaştırma
  • Bundle analizi
  • Görsel optimizasyonu
Modül 3
Test
  • Jest ve React Testing Library kurulumu
  • Bileşen render ve kullanıcı etkileşimi testi
  • Mock API (MSW)
  • Snapshot testi ve sınırları
  • Asenkron test (waitFor, findBy)
  • Kapsam raporu
Modül 4
Üretime Hazırlık ve Dağıtım
  • Ortam değişkenleri (VITE_)
  • Production build ve önizleme
  • Vercel/Netlify dağıtımı
  • Erişilebilirlik (a11y) kontrolü
  • Hata sınırı (Error Boundary)
  • Proje gözden geçirme ve sonraki adımlar

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Bileşen tasarımı

Küçük, yeniden kullanılabilir ve kompozisyona uygun React bileşenleri tasarlayabilirsiniz.

✅
Hook kullanımı

useState, useEffect ve özel hook'larla durum ve yan etkileri yönetebilirsiniz.

✅
Yönlendirme

React Router ile korumalı ve iç içe rotalı uygulama kurabilirsiniz.

✅
Global durum

Context veya Redux Toolkit ile uygulama genelinde durum yönetebilirsiniz.

✅
API entegrasyonu

Axios ve React Query ile yükleniyor ve hata durumlarını yöneten veri akışı kurabilirsiniz.

✅
Form yönetimi

React Hook Form ve Yup ile doğrulamalı formlar geliştirebilirsiniz.

✅
Performans

Profiler ile darboğazı bulup memo ve lazy loading ile giderebilirsiniz.

✅
Test ve dağıtım

React Testing Library ile test yazıp uygulamayı Vercel veya Netlify'a dağıtabilirsiniz.

Kimler İçin Uygundur?

  • JavaScript bilen web geliştiricileri
  • frontend kariyerine yönelenler
  • jQuery veya Angular'dan React'e geçmek isteyenler

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
JavaScript bilen web geliştiricileri, frontend kariyerine yönelenler ve jQuery veya Angular'dan React'e geçmek isteyenler.
Sınıf bileşenleri de işlenir mi?
Eğitim fonksiyonel bileşenler ve hook'lar üzerine kuruludur; sınıf bileşenleri yalnızca eski kodu okumak için kısaca anılır.
TypeScript kullanılır mı?
Ana akış JavaScript ile ilerler; TypeScript tip tanımlarına kısa bir bölümde değinilir.
Next.js bu eğitimin kapsamında mı?
Hayır, eğitim istemci taraflı React'e odaklanır; Next.js için ayrı bir devam eğitimi uygundur.
Sertifika veriliyor mu?
Evet, Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir.

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. Developing Applications using ReactJS Eğitimi Sertifika Kodu DV-2026XX00 Tarih 27.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

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

Bu Eğitimle Birlikte Tercih Edilenler

Yazılım Geliştirme GenelSpec Driven Development for Non Developers Eğitimi
Yazılım Geliştirme Eğitimleri

Spec Driven Development for Non Developers Eğitimi

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

Teknik olmayanlar için spec-driven development eğitimi: kullanıcı hikayesi, EARS, kabul kriterleri ve yapay zeka asistanıyla spec'ten uygulama geliştirme.

Detayları Gör →
Yazılım Geliştirme GenelSpec-Driven Development with Kiro (SDDKR) Eğitimi
Yazılım Geliştirme Eğitimleri

Spec-Driven Development with Kiro (SDDKR) Eğitimi

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

Kiro ile spec-driven development (SDDKR) eğitimi: requirements, design, tasks, EARS, steering, agent hooks ve MCP ile ajan destekli yazılım geliştirme.

Detayları Gör →
Yazılım Geliştirme GenelSpec-Driven Development with Kiro Eğitimi
Yazılım Geliştirme Eğitimleri

Spec-Driven Development with Kiro Eğitimi

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

Kiro ile spec-driven development eğitimi: EARS gereksinimleri, tasarım dokümanı, görev yürütme, steering, agent hooks ve spec tabanlı test üretimi.

Detayları Gör →
Yazılım Geliştirme GenelSpinnaker and Deployment Fundamentals Eğitimi
Yazılım Geliştirme Eğitimleri

Spinnaker and Deployment Fundamentals Eğitimi

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

Spinnaker ve deployment temelleri eğitimi: Halyard kurulumu, pipeline, Kubernetes dağıtımı, blue-green, Kayenta canary analizi ve geri alma stratejileri.

Detayları Gör →
Yazılım Geliştirme GenelStakeholder Needs & Framework Integration Eğitimi
Yazılım Geliştirme Eğitimleri

Stakeholder Needs & Framework Integration Eğitimi

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

Stakeholder needs ve framework integration eğitimi: paydaş analizi, ihtiyaç elicitation, MoSCoW, BABOK, PMBOK, Agile ve ITIL çerçevelerinin entegrasyonu.

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