React JS Programlama Eğitimi

Eğitim Hakkında

Temel kavramlardan özel hook'lara, yönlendirmeden veri getirme ve yayına almaya React programlama

React JS Programlama Eğitimi, React ile tek sayfa uygulamaları (SPA) baştan sona geliştirme becerisi kazandırır. Katılımcılar bileşen, props ve state temelini pekiştirir; useState, useEffect, useRef, useMemo ve özel hook'larla state ve yaşam döngüsünü yönetir. Context ile global durum, React Router ile yönlendirme, form yönetimi ve API'den veri getirme işlenir. Program performans iyileştirme ve uygulamanın yayına alınmasıyla tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; örnek bir tek sayfa uygulaması hook'lar, yönlendirme ve veri getirmeyle kademeli geliştirilip yayına alınır.

Seviye

Orta Seviye — Hooks, Context, yönlendirme, veri getirme ve yayına almayla kapsamlı React programlama

Öğrenme Metodu

Örnek bir SPA üç gün boyunca adım adım geliştirilir; her modülde yeni bir React kavramı uygulamaya eklenerek pekiştirilir.

Neden Bu Eğitim?

🚀Uçtan uca beceri

Bileşenden yayına kadar bir React uygulamasını baştan sona geliştirecek kapsamlı beceriyi tek bir programda kazanırsınız.

🪝Hook'lara hakimiyet

useState'ten özel hook'lara React'ın hook sistemini derinlemesine öğrenir, state ve yan etkileri profesyonelce yönetirsiniz.

🔌Gerçek veri akışı

API'den veri getirme, yönlendirme ve global durum yönetimiyle gerçek dünyaya uygun, işlevsel uygulamalar kurarsınız.

Anahtar Konular

react js eğitimireact programlama eğitimireact kursureact hooks eğitimireact router eğitimireact veri getirmereact context eğitimispa geliştirme eğitimiön yüz geliştirme eğitimijavascript react

“İyi bir React geliştiricisi kavramları değil, kavramları birleştirmeyi bilir; gerçek beceri parçaları çalışan bir uygulamada buluşturmaktır.”

Ön Koşullar

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

1

JavaScript bilgisi

Fonksiyon, dizi, nesne, async/await ve ES6 özelliklerine hakimiyet beklenir; eğitim bu temel üzerine kurulur.

2

Temel React aşinalığı

JSX, bileşen ve props kavramlarına temel düzeyde aşinalık faydalıdır; eğitim bunları kısaca pekiştirerek ilerler.

3

HTML ve CSS

Sayfa yapısı ve temel stil bilgisi arayüz bileşenlerinin ve düzenin anlaşılmasını kolaylaştırır.

4

Geliştirme ortamı

Node.js LTS, 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ı bileşen ve props yapısını pekiştirir, useState ile state'i ve useEffect ile yan etkileri yönetir, olay işleme ve koşullu render'ı uygular.

Modül 1

Bileşen ve Props Pekiştirme

Fonksiyon bileşeni ve JSX yapısı
Props ile veri aktarımı ve destructuring
children ve kompozisyon deseni
Bileşen ağacı ve tek yönlü veri akışı
Yeniden kullanılabilir bileşen tasarımı
Bileşen dosya ve klasör organizasyonu

Modül 2

useState ve Olaylar

useState ile state tanımı ve güncelleme
Önceki state'e dayalı güncelleme
Nesne ve dizi state'in güvenli güncellenmesi
onClick ve onChange olay yönetimi
Olaylarla arayüzün dinamik güncellenmesi
Birden çok state değişkeninin yönetimi

Modül 3

useEffect ve Yaşam Döngüsü

useEffect ile render sonrası yan etki
Bağımlılık dizisi ve çalışma kontrolü
Temizleme fonksiyonu ve abonelik iptali
Montaj ve güncelleme davranışı
Zamanlayıcı ve olay dinleyici yönetimi
Gereksiz effect çalışmasının önlenmesi

Modül 4

Koşullu ve Liste Render

Üçlü operatör ve && ile koşullu gösterim
map ile liste render ve key kullanımı
Dinamik liste güncelleme ve filtreleme
Yükleme ve boş durum arayüzü gösterimi
Liste öğelerinin bileşene ayrılması
Render performansının gözetilmesi

Günün hedefiKatılımcı useRef, useMemo ve useCallback'i uygular, kendi özel hook'larını yazar, Context ile global durumu ve kontrollü formları yönetir.

Modül 1

useRef ve DOM Erişimi

useRef ile render arası değer saklama
DOM öğesine doğrudan erişim ve odaklama
Önceki değerin ref ile tutulması
Yeniden render tetiklemeyen değer yönetimi
forwardRef ile ref aktarımı ve iletimi
ref kullanımının uygun olduğu durumlar

Modül 2

useMemo ve useCallback

useMemo ile pahalı hesaplamanın belleklenmesi
useCallback ile fonksiyon kimliğinin korunması
Gereksiz yeniden render'ların azaltılması
React.memo ile bileşen belleklemesi
Bağımlılık dizisinin doğru tanımı
Erken optimizasyondan kaçınma dengesi

Modül 3

Özel Hook'lar (Custom Hooks)

Mantığın özel hook'a çıkarılması
useFetch benzeri veri getirme hook'u
useLocalStorage ile kalıcılık hook'u
Hook kurallarına uyum ve adlandırma
Hook'lar arası kompozisyon ve birleştirme
Yeniden kullanılabilir mantık tasarımı

Modül 4

Context ve Form Yönetimi

createContext ve Provider ile global durum
useContext ile global değere erişim
Tema veya kimlik gibi global state örneği
Props sondajının Context ile çözülmesi
Kontrollü form ve girdi yönetimi
Temel form doğrulama ve gönderim

Günün hedefiKatılımcı React Router ile çok sayfalı gezinme kurar, API'den veri getirir, performansı iyileştirir ve uygulamayı derleyip yayına alır.

Modül 1

React Router ile Yönlendirme

Rota tanımı ve sayfa bileşenleri
Link ve NavLink ile sayfalar arası gezinme
Dinamik parametre ve URL okuma
İç içe rota ve ortak layout yapısı
Programatik yönlendirme ve geçmiş
404 ve yönlendirme hatalarının yönetimi

Modül 2

API'den Veri Getirme

fetch ve axios ile istek gönderme
Yükleme, hata ve veri durumlarının yönetimi
useEffect ile veri getirme deseni
İstek iptali ve yarış durumu (race) önleme
React Query ile önbellekli veri getirme
Verinin arayüzde listelenmesi ve gösterimi

Modül 3

Performans İyileştirme

React.lazy ve Suspense ile kod bölme
Gereksiz render'ların profillenmesi
React DevTools Profiler kullanımı
Liste sanallaştırma (virtualization)
Bellekleme ile hesap maliyetinin düşürülmesi
Paket boyutunun ölçülüp küçültülmesi

Modül 4

Derleme ve Yayına Alma

Vite ile üretim derlemesi ve çıktısı
Ortam değişkenleri ve yapılandırma
Statik barındırma platformlarına dağıtım
SPA yönlendirme ve sunucu yapılandırması
Hata izleme ve temel analitik ekleme
Yayın sonrası güncelleme akışı

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Bileşen ve state

Bileşen ve props yapısını pekiştirir, useState ve olaylarla dinamik ve etkileşimli arayüzler geliştirebilirsiniz.

✅

useEffect

useEffect ile yan etkileri, abonelikleri ve zamanlayıcıları bağımlılık dizisini doğru kullanarak yönetirsiniz.

✅

Performans hook'ları

useMemo, useCallback ve React.memo ile gereksiz render'ları azaltıp uygulama performansını iyileştirirsiniz.

✅

Özel hook'lar

Tekrar eden mantığı özel hook'lara çıkararak yeniden kullanılabilir ve okunabilir bir kod yapısı kurarsınız.

✅

Context API

createContext ve useContext ile tema veya kimlik gibi global durumu yönetir, props sondajını ortadan kaldırırsınız.

✅

Yönlendirme

React Router ile çok sayfalı gezinme, dinamik parametreler ve iç içe rotalarla tam bir SPA kurabilirsiniz.

✅

Veri getirme

API'den veri getirir, yükleme ve hata durumlarını yönetir ve React Query ile önbellekli veri akışı kurarsınız.

✅

Yayına alma

Uygulamayı Vite ile derler, ortam değişkenlerini ayarlar ve statik barındırma platformuna yayına alabilirsiniz.

Kimler İçin Uygundur?

JavaScript bilen ve temel React kavramlarına aşina
React
gerçek uygulamalar geliştirmeyi uçtan uca öğrenmek isteyen ön yüz geliştiricileri ve yazılım geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

JavaScript bilen ve temel React kavramlarına aşina, React ile gerçek uygulamalar geliştirmeyi uçtan uca öğrenmek isteyen ön yüz ve yazılım geliştiriciler için uygundur. JSX ve bileşen kavramlarına temel aşinalık faydalıdır; eğitim bunları kısaca pekiştirerek ileri konulara geçer.

Bu eğitim ile React Foundations arasındaki fark nedir?

Foundations eğitimi JSX, bileşen, props ve temel hook'lara odaklanan bir başlangıç programıdır. React JS Programlama ise bu temeli pekiştirip ileri hook'lar, özel hook'lar, Context, React Router, API veri getirme, performans ve yayına alma gibi konularla gerçek bir uygulamayı uçtan uca geliştirmeyi kapsar.

Eğitimde hangi araçlar ve kütüphaneler kullanılır?

Proje için Vite, yönlendirme için React Router, veri getirme için fetch/axios ve React Query kullanılır. State yönetiminde React'ın kendi hook'ları ve Context öne çıkar. Tüm kavramlar fonksiyon bileşeni ve modern hook yaklaşımıyla örnek bir uygulama üzerinde işlenir.

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 tek sayfa uygulaması hook'lar, yönlendirme ve veri getirmeyle kademeli geliştirilip yayına alınır. Yüz yüze veya online yapılabilir ve kurumun ihtiyaçları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ğitim boyunca geliştirilen React uygulamasını belgeler; bu program ileri React, state yönetimi ve TypeScript eğitimlerine sağlam bir zemin 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

REACT JS PROGRAMLAMA EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Bileşen ve Props Pekiştirme

useState ve Olaylar

useEffect ve Yaşam Döngüsü

Koşullu ve Liste Render

useRef ve DOM Erişimi

useMemo ve useCallback

Özel Hook'lar (Custom Hooks)

Context ve Form Yönetimi

React Router ile Yönlendirme

API'den Veri Getirme

Performans İyileştirme

Derleme ve Yayına Alma

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Build Apps Using React: Props & State Eğitimi

Build Apps Using React: Working with Events Eğitimi

Build Apps Using React: Working with Forms Eğitimi

Building Web Applications with React Eğitimi

Enhance Reactive Applications with Advanced React Eğitimi

Gelişmiş React Eğitimi