REACT FOUNDATIONS EĞİTİMİ

Sıfırdan sağlam React temelleri

JSX, bileşenler, props, state ve hooks ile React'ın temel taşlarını uygulamalı öğrenin

REACT Foundations Eğitimi, React'ı ilk kez öğrenenler için bileşen tabanlı arayüz geliştirmenin temellerini kurar. Program JSX sözdizimi, fonksiyon bileşenleri ve props ile başlar; useState ile state yönetimi, olay işleme, koşullu render, liste ve key, useEff…

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

Eğitim Hakkında

Bileşen düşüncesinden state yönetimine, formlardan listelere React'ın temel kavramlarını kurma

REACT Foundations Eğitimi, React'ı ilk kez öğrenenler için bileşen tabanlı arayüz geliştirmenin temellerini sağlam bir biçimde kurar. Katılımcılar JSX sözdizimini, bileşen ve props yapısını, useState ile state yönetimini ve olay işlemeyi uygular. Koşullu render, liste ve key, form yönetimi, useEffect ile yan etkiler ve state yukarı taşıma işlenir. Program bileşen kompozisyonu ve küçük bir uygulamanın birlikte geliştirilmesiyle tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; temel kavramlar küçük uygulamalarla pekiştirilir ve üçüncü gün bir araya getirilerek bütün bir arayüz geliştirilir.

Seviye

Temel Seviye — JSX, bileşenler, props, state, hooks ve form yönetimiyle React temelleri

Öğrenme Metodu

Her kavram küçük ve çalışan örneklerle gösterilir; katılımcılar adım adım kendi bileşenlerini yazarak öğrendiğini hemen uygular.

Neden Bu Eğitim?

🌱Sağlam temel

React'ın bileşen, props ve state gibi temel taşlarını doğru kurarak ileri konuları öğrenmeye hazır sağlam bir zemin edinirsiniz.

🧩Bileşen düşüncesi

Arayüzü yeniden kullanılabilir bileşenlere ayırmayı öğrenir, karmaşık ekranları küçük ve yönetilebilir parçalarla kurarsınız.

🛠️Hemen uygulama

Her kavramı küçük örneklerle hemen uygulayarak öğrendiğinizi kalıcı kılar, kendi arayüzlerinizi yazacak güveni kazanırsınız.

Anahtar Konular

react eğitimireact temel eğitimireact foundationsreact kursusıfırdan reactjsx eğitimireact hooks eğitimireact başlangıçön yüz geliştirme eğitimiusestate eğitimi
“React'ı öğrenmek bileşen gibi düşünmekle başlar; arayüzü küçük parçalara ayırmayı öğrenen, karmaşığı kolay kılar.”

Ön Koşullar

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

1
HTML ve CSS

Etiketler, form öğeleri ve temel CSS ile sayfa yapısına aşinalık, JSX ve arayüz konularının anlaşılmasını kolaylaştırır.

2
Temel JavaScript

Değişken, fonksiyon, dizi, nesne ve ok fonksiyonu kavramlarına temel düzeyde hakimiyet beklenir.

3
ES6 söz dizimi

Destructuring, map, spread ve template literal gibi modern JavaScript özelliklerine aşinalık faydalı olur.

4
Geliştirme ortamı

Node.js, bir kod editörü ve tarayıcı kurulu olmalı; Vite ile örnek proje oluşturulabilir 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ı React proje yapısını kurar, JSX sözdizimini kavrar, fonksiyon bileşenleri yazar ve props ile bileşenler arasında veri aktarmayı uygular.
Modül 1
React'a Giriş ve Kurulum
  • React'ın bileşen tabanlı yaklaşımı
  • Vite ile yeni bir React projesi oluşturma
  • Proje klasör yapısı ve giriş noktası
  • Sanal DOM ve bildirimsel arayüz mantığı
  • Geliştirme sunucusu ve sıcak yenileme
  • İlk bileşenin ekrana render edilmesi
Modül 2
JSX Sözdizimi ve Kuralları
  • JSX ile HTML benzeri arayüz yazımı
  • Süslü parantez ile JavaScript ifadeleri
  • className ve stil özniteliklerinin kullanımı
  • Tek kök öğe ve Fragment kullanımı
  • Kendini kapatan etiketler ve kurallar
  • JSX içinde yorum ve ifade gömme
Modül 3
Fonksiyon Bileşenleri
  • Fonksiyon bileşeni tanımı ve dışa aktarımı
  • Bileşenin JSX döndürmesi ilkesi
  • Bileşen adlandırma ve dosya organizasyonu
  • Bileşenlerin iç içe kullanımı ve ağacı
  • Yeniden kullanılabilir bileşen tasarımı
  • Bileşen ağacı ve kompozisyon mantığı
Modül 4
Props ile Veri Aktarımı
  • Ebeveynden çocuğa props ile veri geçişi
  • Props destructuring ile okunabilirlik
  • Varsayılan props değerlerinin tanımı
  • children prop ile içerik aktarımı
  • Props'un salt okunur (immutable) olması
  • Fonksiyonların props olarak geçirilmesi
Günün hedefiKatılımcı useState ile bileşen state'ini yönetir, kullanıcı olaylarını işler, koşullu render ve liste render ile dinamik arayüzler oluşturur.
Modül 1
useState ile State Yönetimi
  • useState ile bileşen state tanımı
  • State değişiminde yeniden render mantığı
  • Önceki state'e göre güncelleme
  • Nesne ve dizi state'in güncellenmesi
  • State'in doğrudan değiştirilmemesi ilkesi
  • Birden çok state değişkeninin yönetimi
Modül 2
Olay Yönetimi ve İşleyiciler
  • onClick, onChange gibi olay işleyicileri
  • Olay işleyici fonksiyonu tanımlama
  • Olay nesnesi (event) ve hedef erişimi
  • Parametreli olay işleyici geçirme
  • Varsayılan davranışın engellenmesi
  • Olaylarla state'in güncellenmesi
Modül 3
Koşullu Render Teknikleri
  • if ifadesiyle bileşen dallanması
  • Üçlü operatör ile koşullu arayüz
  • Mantıksal && ile koşullu gösterim
  • null döndürerek render'ı atlama
  • Yükleme ve boş durum gösterimi
  • Koşullara göre farklı bileşen seçimi
Modül 4
Listeler ve Key Kullanımı
  • map ile dizi üzerinden liste render
  • key özniteliğinin önemi ve seçimi
  • Dinamik listelerin güncellenmesi
  • Liste öğesini ayrı bileşene ayırma
  • Filtreleme ve sıralama ile liste gösterimi
  • Index'i key olarak kullanmanın riskleri
Günün hedefiKatılımcı useEffect ile yan etkileri yönetir, kontrollü formlar oluşturur, state'i yukarı taşır ve bileşen kompozisyonuyla küçük bir uygulama geliştirir.
Modül 1
useEffect ile Yan Etkiler
  • useEffect ile render sonrası işlem
  • Bağımlılık dizisinin (dependency) rolü
  • Montaj ve güncelleme anında çalışma
  • Temizleme (cleanup) fonksiyonu
  • useEffect içinde fetch ile veri getirme
  • Gereksiz effect çalışmasının önlenmesi
Modül 2
Kontrollü Formlar
  • Giriş değerinin state ile bağlanması
  • onChange ile girdi güncellemesi
  • Birden çok alanın tek state nesnesiyle yönetimi
  • Form gönderimi ve submit işleme
  • Temel form doğrulaması ve geri bildirim
  • Metin, seçim ve onay kutusu girdileri
Modül 3
State Yukarı Taşıma
  • Paylaşılan state'in ortak ebeveyne taşınması
  • Props ile state ve güncelleyicinin dağıtımı
  • Kardeş bileşenler arası veri paylaşımı
  • Tek yönlü veri akışı ilkesinin korunması
  • Props sondajı (prop drilling) sorunu
  • Context'e geçişin ne zaman gerektiği
Modül 4
Bileşen Kompozisyonu ve Uygulama
  • Bileşenleri birleştirerek ekran kurma
  • children ve kompozisyonla esnek tasarım
  • Küçük bir yapılacaklar uygulamasının kurgusu
  • Bileşen ağacının ve state'in planlanması
  • Stil ve düzenin bileşenlere dağıtımı
  • Uygulamanın derlenip çalıştırılması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
JSX yazımı

JSX sözdizimiyle HTML benzeri arayüz yazar, içine JavaScript ifadeleri gömerek dinamik içerik oluşturabilirsiniz.

✅
Bileşen ve props

Yeniden kullanılabilir fonksiyon bileşenleri yazar, props ile bileşenler arasında veriyi doğru biçimde aktarabilirsiniz.

✅
State yönetimi

useState ile bileşen state'ini yönetir, state değişimiyle arayüzün nasıl yeniden render edildiğini kavrarsınız.

✅
Olay işleme

onClick ve onChange gibi olayları işler, kullanıcı etkileşimine göre state'i güncelleyerek arayüzü yanıt verir hale getirirsiniz.

✅
Koşullu ve liste render

Koşullu render ve map ile liste gösterimini uygular, key kullanımıyla dinamik listeleri doğru yönetirsiniz.

✅
useEffect

useEffect ile veri getirme ve temizleme gibi yan etkileri bağımlılık dizisini doğru kullanarak yönetebilirsiniz.

✅
Form yönetimi

Kontrollü formlar oluşturur, girdileri state'e bağlar ve temel doğrulama ile form gönderimini ele alabilirsiniz.

✅
Kompozisyon

Bileşenleri birleştirir, state'i yukarı taşır ve küçük bir uygulamayı uçtan uca geliştirebilirsiniz.

Kimler İçin Uygundur?

  • HTML
  • CSS ve temel JavaScript bilen
  • React'ı sıfırdan öğrenmek isteyen ön yüz geliştirici adayları
  • bootcamp katılımcıları
  • arayüz geliştirmeye yeni başlayanlar için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
HTML, CSS ve temel JavaScript bilen, React'ı sıfırdan öğrenmek isteyen ön yüz geliştirici adayları, bootcamp katılımcıları ve arayüz geliştirmeye yeni başlayanlar için uygundur. Önceden React deneyimi gerekmez; temel JavaScript bilgisi yeterlidir.
React öğrenmek için ne kadar JavaScript bilmeliyim?
Değişken, fonksiyon, dizi, nesne, ok fonksiyonu ile map, destructuring ve spread gibi ES6 özelliklerine temel düzeyde hakim olmak yeterlidir. Eğitimde bu kavramlar React bağlamında kullanıldıkça kısaca hatırlatılır, ancak JavaScript'in tamamı öğretilmez.
Eğitimde hangi araçlar kullanılır?
Proje oluşturmak için Vite, kod yazmak için modern bir editör ve çalıştırmak için tarayıcı kullanılır. Bileşenler fonksiyon bileşeni ve hook yaklaşımıyla yazılır; ek bir kütüphane yerine React'ın kendi temel kavramlarına odaklanılır.
Eğitimin süresi ve formatı nedir?
Eğitim üç gün sürer ve her gün dört modülden oluşur. Her kavram küçük çalışan örneklerle gösterilir ve üçüncü gün öğrenilenler birleştirilerek bütün bir arayüz geliştirilir. Yüz yüze veya online yapılabilir ve kuruma 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 geliştirilen temel React uygulamasını belgeler; bu eğitim ileri React, state yönetimi ve TypeScript programlarına sağlam bir başlangıç oluşturur.

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 Foundations Eğitimi Sertifika Kodu DV-2026XX00 Tarih 15.10.2026 Yetkili İmza DV AKADEMİ

Eğitim Bilgileri

Süre3 gün
SeviyeTemel 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