BUILD APPS USING REACT: INTRODUCING REACT FOR WEB APPLICATIONS EĞİTİMİ

React ile modern web uygulamaları kurun

React'in mantığından bileşen, props, state ve olaylara kadar modern web uygulaması geliştirin

Introducing React for Web Applications, React ile modern web uygulaması geliştirmeye sağlam bir giriş sunar. Eğitim React'in bileşen tabanlı yaklaşımı, Virtual DOM ve render mantığıyla başlar; JSX, fonksiyonel bileşenler ve props ile arayüz kurmayı öğretir.

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

Eğitim Hakkında

React'in temelleri, JSX, bileşenler, props, state, olaylar ve küçük web uygulaması

Introducing React for Web Applications, React ile modern web uygulaması geliştirmeye sağlam bir giriş sunar. Program React'in bileşen tabanlı yaklaşımı, Virtual DOM ve render mantığıyla başlar; JSX, fonksiyonel bileşenler ve props ile arayüz kurmayı öğretir. useState ile durum, olay işleme, koşullu render ve useEffect ile veri çekme uygulamalı ele alınır. Eğitim; liste render, kontrollü form ve API entegrasyonunu birleştiren küçük bir web uygulaması projesiyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; React'in mantığından bileşen, props, state, olaylar ve küçük bir web uygulaması projesine kadar her konu uygulamalı işlenir.

Seviye

Orta Seviye — React'in çalışma mantığından bileşen, props, state ve olaylarla web uygulaması kurmaya giriş

Öğrenme Metodu

Her konu canlı kodlama ve küçük görevlerle işlenir; dört gün boyunca öğrenilenler adım adım küçük bir web uygulamasında birleştirilir.

Neden Bu Eğitim?

🎯Doğru temel

React'i çalışma mantığından başlayarak öğrenir; Virtual DOM, bileşen ve veri akışını kavrayarak sağlam bir temel kurarsınız.

🧱Bileşen düşüncesi

Arayüzü yeniden kullanılabilir bileşenlere bölmeyi ve props ile veri akışını tasarlamayı öğrenerek modern UI kurarsınız.

💻Uygulamalı öğrenme

Her konuyu kodlar ve küçük bir web uygulaması projesinde birleştirerek teoriyi pratiğe dökmenin güvenini kazanırsınız.

Anahtar Konular

react eğitimireact giriş eğitimireact kursureact web uygulamasıjsx eğitimireact bileşen eğitimireact usestatereact öğrenfrontend eğitimireact başlangıç
“React öğrenmenin en iyi yolu, küçük de olsa çalışan bir uygulamayı baştan sona kendi elinizle kurmaktır.”

Ön Koşullar

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

1
HTML ve CSS

Temel HTML yapısı ve CSS ile stillendirme bilgisi, JSX ve bileşen stillemesini anlamada faydalı olur.

2
Temel JavaScript

Değişken, fonksiyon, dizi, nesne ve ES6+ (arrow fonksiyon, map) bilgisi React'i öğrenmede önemlidir.

3
Programlama mantığı

Koşul, döngü ve veri yapıları gibi temel programlama kavramlarına aşinalık öğrenmeyi kolaylaştırır.

4
Geliştirme ortamı

Node.js, npm, VS Code ve modern bir tarayıcının kurulu olduğu bilgisayar; proje Vite ile ilk gün oluşturulur.

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ı React'in neden ve nasıl çalıştığını kavrar, Virtual DOM ve render mantığını öğrenir, ilk uygulamasını kurar ve JSX yazar.
Modül 1
React Nedir ve Neden
  • React'in bileşen tabanlı yaklaşımı
  • SPA (tek sayfa uygulama) mantığı
  • Deklaratif (declarative) arayüz anlayışı
  • React'in diğer çözümlerden farkı
  • React ekosistemine genel bir bakış
  • Hangi projeler için React uygundur
Modül 2
Virtual DOM ve Render
  • Virtual DOM kavramı ve çalışma mantığı
  • Gerçek DOM ile sanal DOM karşılaştırması
  • Reconciliation (uzlaştırma) sürecine giriş
  • React'in verimli güncelleme yaklaşımı
  • Render ve yeniden render (re-render) kavramı
  • Bileşen ağacının (component tree) oluşumu
Modül 3
İlk React Uygulaması
  • Vite ile React projesi oluşturma
  • Proje klasör yapısını yakından tanıma
  • main.jsx ve kök (root) render işlemi
  • App bileşenini çalıştırma ve görüntüleme
  • Geliştirme sunucusunu başlatma
  • Tarayıcıda canlı güncellemeyi görme
Modül 4
JSX ile Arayüz Yazımı
  • JSX söz dizimi ve HTML'den farkları
  • JSX içinde JavaScript ifadeleri kullanma
  • className ve HTML öznitelik farklılıkları
  • Tek kök eleman kuralı ve Fragment kullanımı
  • Koşullu içerik ve kısa devre (&&) gösterimi
  • JSX kodunu okunur ve düzenli tutma
Günün hedefiKatılımcı fonksiyonel bileşen yazar, props ile veri aktarır, bileşen kompozisyonu kurar ve bileşenleri çeşitli yöntemlerle stiller.
Modül 1
Fonksiyonel Bileşenler
  • Fonksiyonel bileşen tanımlama ve dışa aktarma
  • Bileşen adlandırma ve dosya düzeni
  • Bileşenleri iç içe (nested) kullanma
  • Bileşen döndürme (return) kuralları
  • Yeniden kullanılabilir (reusable) bileşen fikri
  • Bileşenleri mantıksal parçalara ayırma
Modül 2
Props ile Veri Aktarımı
  • Üst bileşenden alt bileşene props geçme
  • Props'u destructuring ile okuma
  • Varsayılan (default) props değerleri
  • children prop'u ile içerik aktarma
  • Props'un salt okunur (read-only) doğası
  • Props ile dinamik içerik oluşturma
Modül 3
Bileşen Kompozisyonu
  • Küçük bileşenleri birleştirerek arayüz kurma
  • Layout ve container bileşen ayrımı
  • Prop drilling kavramına kısa giriş
  • Sunum (presentational) bileşen fikri
  • Bileşen hiyerarşisini tasarlama
  • Tekrarı azaltmak için bileşen çıkarma
Modül 4
Stil ve Görünüm Yönetimi
  • CSS dosyası ile bileşen stillemesi
  • CSS Modules ile kapsamlı (scoped) stil
  • Inline style nesnesi kullanımı
  • Koşullu class ile dinamik görünüm
  • Bileşen bazlı stil düzenleme yaklaşımı
  • Responsive düzen için temel ipuçları
Günün hedefiKatılımcı useState ile durum yönetir, olayları işler, koşullu render uygular ve useEffect ile yan etki ve veri çekmeyi öğrenir.
Modül 1
State ve useState
  • useState ile bileşen durumu tanımlama
  • Durum güncelleme ve yeniden render
  • Sayı, metin ve boolean durum örnekleri
  • Önceki duruma göre güncelleme (updater)
  • Durum ve props arasındaki fark
  • Durumu doğru yerde (bileşende) tutma
Modül 2
Olay İşleme (Events)
  • onClick ile tıklama olayını yakalama
  • Olay işleyici (handler) fonksiyon yazma
  • onChange ile girdi değişimini izleme
  • Olaya parametre (argument) geçme
  • Event nesnesini okuma ve kullanma
  • Olayla durumu birlikte güncelleme
Modül 3
Koşullu Render Teknikleri
  • if ve üçlü (ternary) ile koşullu içerik
  • && ile kısa devre koşullu gösterim
  • Yükleniyor ve boş durum (empty state) gösterme
  • Bileşeni koşula göre gösterme veya gizleme
  • Birden çok durumu temiz biçimde yönetme
  • Koşullu render ifadesini okunur tutma
Modül 4
Yan Etkiler ve useEffect
  • useEffect ile yan etki (side effect) yönetimi
  • Bağımlılık dizisi (dependency array) mantığı
  • Bileşen yüklendiğinde (mount) kod çalıştırma
  • fetch ile API'den veri çekme örneği
  • Temizleme (cleanup) fonksiyonu kullanımı
  • Sonsuz döngüden kaçınma dikkatleri
Günün hedefiKatılımcı liste render eder, kontrollü form kurar, API verisiyle çalışır ve öğrendiklerini küçük bir web uygulaması projesinde birleştirir.
Modül 1
Liste ve Döngü Render
  • map ile dizi öğelerini render etme
  • key prop'unun önemi ve doğru kullanımı
  • Liste öğelerini bileşene çıkarma
  • Filtreleme ve arama ile liste gösterme
  • Boş liste ve yükleme durumunu yönetme
  • Dinamik listeyi güncelleme (ekle veya sil)
Modül 2
Form ve Girdi Yönetimi
  • Kontrollü (controlled) girdi oluşturma
  • Form durumunu bileşen state'inde tutma
  • onSubmit ile form gönderimini yakalama
  • preventDefault ile varsayılan davranışı durdurma
  • Çoklu girdiyi tek state nesnesiyle yönetme
  • Basit form doğrulama (validation) ekleme
Modül 3
Veri ile Çalışma
  • API'den gelen veriyi state'e yazma
  • Yükleme ve hata durumlarını gösterme
  • Veriyi listeleme ve detay gösterme
  • Kullanıcı etkileşimiyle veriyi güncelleme
  • Veriyi bileşenler arasında paylaşma
  • İstek döngüsünü (fetch) düzenli kurma
Modül 4
Küçük Web Uygulaması Projesi
  • Basit bir yapılacaklar (todo) uygulaması kurma
  • Ekleme, silme ve tamamlama işlevleri
  • Bileşen yapısını baştan tasarlama
  • State ve olayları bir arada kullanma
  • Uygulamayı stilleyip düzenleme
  • Projeyi gözden geçirme ve iyileştirme

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
React mantığı

React'in bileşen tabanlı, deklaratif yaklaşımını ve Virtual DOM ile render mantığını kavrayarak sağlam bir temel kurarsınız.

✅
JSX yazımı

JSX ile arayüz tanımlar, JavaScript ifadelerini, koşullu içeriği ve Fragment'ı doğru kullanarak okunur bileşenler yazarsınız.

✅
Bileşen ve props

Fonksiyonel bileşen yazar, props ile veri aktarır ve kompozisyonla yeniden kullanılabilir bir arayüz yapısı kurarsınız.

✅
Durum yönetimi

useState ile bileşen durumunu tanımlar, günceller ve durum ile props arasındaki farkı doğru biçimde uygularsınız.

✅
Olay işleme

onClick, onChange ve onSubmit gibi olayları yakalar, handler yazar ve kullanıcı etkileşimiyle durumu güncellersiniz.

✅
Koşullu ve liste render

Koşullu render ve map ile liste gösterimini uygular, key kullanımı ve boş durum yönetimini doğru kurarsınız.

✅
Veri çekme

useEffect ve fetch ile API'den veri çeker, yükleme ve hata durumlarını yöneterek dinamik bir arayüz oluşturursunuz.

✅
Küçük uygulama

Öğrendiklerinizi birleştirerek liste, form ve veri içeren çalışan küçük bir React web uygulamasını kendiniz kurarsınız.

Kimler İçin Uygundur?

  • HTML
  • CSS ve temel JavaScript bilgisi olan; React'i sıfırdan öğrenerek bileşen tabanlı
  • dinamik web uygulamaları kurmaya başlamak isteyen geliştiriciler
  • öğrenciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
HTML, CSS ve temel JavaScript bilgisi olan; React'i sıfırdan öğrenerek dinamik web uygulamaları kurmak isteyen geliştiriciler ve öğrenciler için uygundur. React deneyimi gerekmez; ancak ES6+ JavaScript (arrow fonksiyon, map, destructuring) bilgisi öğrenmeyi belirgin biçimde kolaylaştırır.
React öğrenmek için hangi ön bilgi gerekir?
Değişken, fonksiyon, dizi ve nesne gibi temel JavaScript kavramları ile HTML ve CSS bilgisi faydalıdır. Modern JavaScript özelliklerinden arrow fonksiyon ve dizi metotları (map, filter) sık kullanılır; gerekli temeller eğitim içinde kısaca hatırlatılır.
Hangi konular işleniyor?
React'in çalışma mantığı ve Virtual DOM, JSX, fonksiyonel bileşenler, props ve kompozisyon; useState ile durum, olay işleme, koşullu render ve useEffect ile veri çekme işlenir. Son gün liste render, kontrollü form ve API verisiyle küçük bir web uygulaması kurulur.
Eğitimin süresi ve formatı nedir?
Eğitim dört gün sürer ve her gün dört modülden oluşur. Konular React'in mantığından başlayıp bileşen, props, state ve olaylara ilerler ve küçük bir web uygulaması projesiyle tamamlanır. Yüz yüze veya online yapılabilir; tempo katılımcı grubun seviyesine 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 geliştirilen web uygulaması projesini belgeler; kurumsal gruplar için içerik, hedeflenen seviye ve projeye 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: Introducing React for Web Applicatio 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

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 →
Reactİleri Seviye React Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

İleri Seviye React Eğitimi

4 günİleriOnline / Yüz Yüze / Hibrit

İleri seviye React eğitimi: performans optimizasyonu, ileri hook desenleri, durum mimarisi, React Query, test ve TypeScript ile üretim React.

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

JavaScript Kullanarak React'e Giriş Eğitimi

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

JavaScript kullanarak React'e giriş eğitimi: modern ES6 özellikleri, JSX, bileşen, props, useState ve useEffect ile iki günde React temelleri.

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