FSD FRONT-END DEVELOPMENT: UI DEVELOPMENT WITH REACTJS EĞİTİMİ

React ile modern arayüz geliştirme

Bileşen, hook, durum yönetimi, yönlendirme ve performans ile uçtan uca React arayüz geliştirme

FSD Front-End Development: UI Development with ReactJS Eğitimi, modern arayüzleri React ile geliştirmeyi uçtan uca öğretir. Program JSX, bileşen modeli ve props ile başlar; useState, useEffect, useRef ve özel hook'lar, Context ve useReducer ile durum yönetimi…

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

Eğitim Hakkında

JSX ve bileşenlerden hook'lara, durum yönetiminden yönlendirme ve performansa React arayüzü

FSD Front-End Development: UI Development with ReactJS Eğitimi, modern arayüzleri React ile geliştirmeyi uçtan uca ve uygulamalı öğretir. Katılımcılar JSX ve bileşen modelini, props ve state'i, useState, useEffect, useContext ve useReducer gibi hook'ları uygular. Form yönetimi, React Router ile yönlendirme, veri çekme, memoization ve performans optimizasyonu işlenir. Program bileşen kütüphanesi, erişilebilirlik ve gerçek bir arayüz projesiyle tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; etkileşimli bir React arayüzü bileşenlerden durum yönetimine ve performans optimizasyonuna doğru adım adım geliştirilir.

Seviye

Orta Seviye — React ile bileşen, hook, durum yönetimi, yönlendirme ve performans

Öğrenme Metodu

Etkileşimli bir React arayüzü dört gün boyunca canlı geliştirilir; her modülde bir kavram bileşen üzerinde uygulanarak sonucu gözlemlenir.

Neden Bu Eğitim?

⚛️Bileşen düşüncesi

Arayüzü yeniden kullanılabilir bileşenlere ayırmayı öğrenir, karmaşık ekranları yönetilebilir ve test edilebilir parçalara bölersiniz.

🔗Hook hakimiyeti

Modern React'in temeli olan hook'ları doğru kullanır, durum ve yan etkiyi öngörülebilir biçimde yöneten arayüzler kurarsınız.

⚡Performans

Gereksiz render'ları tespit edip memoization ve kod bölme ile arayüzün akıcılığını ve yüklenme hızını belirgin iyileştirirsiniz.

Anahtar Konular

react eğitimireactjs kursureact hook eğitimireact router eğitimiön yüz geliştirme eğitimireact durum yönetimijavascript arayüz eğitimireact performansmodern web arayüzü eğitimireact bileşen eğitimi
“React'te zorluk söz diziminde değil, durumu doğru yerde tutmaktadır; durumu yönetmeyi öğrenen arayüzü yönetmeyi öğrenir.”

Ön Koşullar

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

1
JavaScript bilgisi

ES6 ile ok fonksiyon, destructuring, spread, modül ve asenkron kavramlarına hakimiyet React'i anlamak için gereklidir.

2
HTML ve CSS

Semantik HTML ve temel CSS ile sayfa düzenleme bilgisi, JSX ve bileşen stillemesini kavramada faydalı olur.

3
DOM temeli

Tarayıcı DOM'u, olaylar ve temel etkileşim mantığına aşinalık React'in bildirimsel yaklaşımını kavramayı kolaylaştırır.

4
Geliştirme ortamı

Node.js, bir kod editörü ve modern tarayıcı kurulu; Vite ile React projesi oluşturabilir bir ortam 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 bileşen modelini ve JSX sözdizimini kavrar, props ile veri aktarır, koşullu ve liste render'ını uygular, bileşenleri kompozisyonla birleştirir.
Modül 1
JSX ve Render Mantığı
  • JSX sözdizimi ve JavaScript ifadeleri
  • Bildirimsel arayüz ve sanal DOM mantığı
  • Fonksiyon bileşeninin yapısı ve dönüşü
  • className ve stil özniteliği kullanımı
  • Fragment ile gereksiz sarmalayıcıdan kaçınma
  • Vite ile React projesinin oluşturulması
Modül 2
Props ile Veri Akışı
  • Props ile ebeveynden çocuğa veri aktarımı
  • Props destructuring ve varsayılan değer
  • children prop ile bileşen kompozisyonu
  • Tek yönlü veri akışı ilkesinin kavranması
  • PropTypes veya TypeScript ile tip güvenliği
  • Props ile fonksiyon geri çağırma aktarımı
Modül 3
Koşullu ve Liste Render
  • Koşullu render için ternary ve kısa devre
  • map ile dizi öğelerinin render edilmesi
  • key özniteliğinin önemi ve doğru seçimi
  • Boş durum ve yüklenme gösterimi
  • İç içe liste ve gruplama senaryoları
  • Koşullu stil ve dinamik sınıf atama
Modül 4
Olay ve Form Temeli
  • onClick ve onChange olay işleyicileri
  • Sentetik olay nesnesi ve event mantığı
  • Kontrollü bileşenle form girdisi yönetimi
  • Form gönderimi ve varsayılan davranışın önlenmesi
  • Birden çok girdinin tek state ile yönetimi
  • Basit doğrulama ve hata gösterimi
Günün hedefiKatılımcı useState ile durumu yönetir, useEffect ile yan etkileri ve yaşam döngüsünü kontrol eder, useRef'i kullanır ve mantığı özel hook'lara ayırır.
Modül 1
useState ile Durum
  • useState ile bileşen durumunun tanımı
  • Durumun değişmezliği ve kopyalama kuralı
  • Fonksiyonel güncelleme ile önceki duruma erişim
  • Nesne ve dizi durumunun güncellenmesi
  • Durum kaldırma (lifting state up) deseni
  • Durumun render'ı nasıl tetiklediği
Modül 2
useEffect ile Yan Etki
  • useEffect ile yan etkinin tanımlanması
  • Bağımlılık dizisinin doğru belirlenmesi
  • Temizleme fonksiyonu ile kaynak serbest bırakma
  • Mount, update ve unmount senaryoları
  • Sonsuz döngü hatasının önlenmesi
  • Veri çekme için effect kullanımı ve sınırları
Modül 3
useRef ve DOM Erişimi
  • useRef ile değişken referans tutma
  • DOM öğesine doğrudan erişim senaryosu
  • Render'ı tetiklemeyen değer saklama
  • Odaklanma ve kaydırma gibi işlemler
  • Önceki değeri saklama deseninin kurulması
  • ref ile state arasındaki farkın kavranması
Modül 4
Özel Hook Tasarımı
  • Tekrarlayan mantığın özel hook'a taşınması
  • Hook kuralları ve çağrı sırası
  • useFetch ile veri çekme hook'u örneği
  • useLocalStorage ile kalıcı durum hook'u
  • Hook'ların test edilebilir tasarımı
  • Yeniden kullanılabilir mantık soyutlaması
Günün hedefiKatılımcı useContext ve useReducer ile paylaşılan durumu yönetir, React Router ile çok sayfalı gezinme kurar, sunucu durumunu veri çekme kütüphanesiyle yönetir.
Modül 1
Context API ile Paylaşım
  • Context ile prop drilling probleminin çözümü
  • createContext ve Provider tanımı
  • useContext ile paylaşılan değere erişim
  • Tema ve kullanıcı gibi global durum örnekleri
  • Context'in aşırı kullanımından kaçınma
  • Performans için context bölme stratejisi
Modül 2
useReducer ile Durum
  • Karmaşık durum için reducer deseni
  • Action ve dispatch ile durum geçişi
  • useState ile useReducer arasında seçim
  • Reducer ve context'in birlikte kullanımı
  • Öngörülebilir durum geçişlerinin tasarımı
  • Durum mantığının bileşenden ayrıştırılması
Modül 3
React Router ile Gezinme
  • Route ve rota tanımıyla sayfa eşleme
  • Link ve NavLink ile sayfa gezinmesi
  • URL parametreleri ve dinamik rotalar
  • İç içe rota ve Outlet kullanımı
  • Programatik yönlendirme ve navigate
  • 404 ve korumalı rota senaryoları
Modül 4
Sunucu Durumu ve Veri
  • İstemci durumu ile sunucu durumu ayrımı
  • TanStack Query ile veri çekme ve önbellek
  • Yükleniyor, hata ve başarı durum yönetimi
  • Önbellek geçersiz kılma ve yeniden çekme
  • Optimistic update ile hızlı geri bildirim
  • Sayfalama ve sonsuz kaydırma senaryosu
Günün hedefiKatılımcı gereksiz render'ları tespit edip memoization uygular, kod bölme ile paketi küçültür, erişilebilirlik kurallarını gözetir ve arayüzü üretime hazırlar.
Modül 1
Render Optimizasyonu
  • Gereksiz render'ın nedenleri ve tespiti
  • React.memo ile bileşen bellekleme
  • useMemo ile pahalı hesaplama önbelleği
  • useCallback ile referans kararlılığı
  • Profiler ile performans ölçümü
  • Erken optimizasyondan kaçınma dengesi
Modül 2
Kod Bölme ve Tembel Yükleme
  • React.lazy ile bileşen tembel yükleme
  • Suspense ile yükleniyor sınırı
  • Rota tabanlı kod bölme stratejisi
  • Başlangıç paket boyutunun küçültülmesi
  • Dinamik import ile isteğe bağlı yükleme
  • Hata sınırı (error boundary) ile dayanıklılık
Modül 3
Erişilebilirlik ve Form
  • Semantik HTML ve ARIA kullanımı
  • Klavye ile gezinme ve odak yönetimi
  • Etiket ve form erişilebilirliği
  • React Hook Form ile ölçekli form yönetimi
  • Doğrulama ve hata mesajı erişilebilirliği
  • Renk kontrastı ve okunabilirlik ölçütleri
Modül 4
Bileşen Kütüphanesi ve Yayın
  • Tasarım sistemi ve yeniden kullanılabilir bileşen
  • Storybook ile bileşen dokümantasyonu
  • Stil yaklaşımları ve CSS çözümlerinin seçimi
  • Üretim derlemesi ve ortam yapılandırması
  • Statik hosting ve SPA yönlendirme kuralı
  • Temel SEO ve meta etiket yönetimi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅
Bileşen modeli

JSX ve bileşen kompozisyonuyla arayüzü yeniden kullanılabilir parçalara ayırır, props ile veri akışını kurarsınız.

✅
Hook kullanımı

useState, useEffect ve useRef'i doğru kullanır, durum ve yan etkiyi öngörülebilir biçimde yöneten bileşenler yazarsınız.

✅
Özel hook

Tekrarlayan mantığı özel hook'lara taşır, test edilebilir ve yeniden kullanılabilir soyutlamalar tasarlarsınız.

✅
Durum yönetimi

Context ve useReducer ile paylaşılan durumu yönetir, yerel ve global durum arasında doğru seçimi yaparsınız.

✅
Yönlendirme

React Router ile çok sayfalı gezinme, dinamik rota ve korumalı rota senaryolarını kurabilirsiniz.

✅
Veri çekme

Sunucu durumunu TanStack Query ile yönetir, önbellek, yeniden çekme ve hata durumlarını doğru ele alırsınız.

✅
Performans

Gereksiz render'ları tespit eder, memoization ve kod bölme ile arayüzün akıcılığını ve açılış hızını iyileştirirsiniz.

✅
Erişilebilir arayüz

Semantik HTML, ARIA ve klavye gezinmesiyle erişilebilir, ölçekli form ve bileşen yapıları kurup üretime alırsınız.

Kimler İçin Uygundur?

  • HTML
  • CSS ve JavaScript temeline sahip
  • React
  • modern ve etkileşimli arayüzler geliştirmek isteyen ön yüz geliştiricileri ile mevcut React bilgisini bileşen mimarisi ve performansla derinleştirmek isteyenler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?
HTML, CSS ve JavaScript temeline sahip, React ile modern ve etkileşimli arayüzler geliştirmek isteyen ön yüz geliştiricileri için uygundur. Mevcut React bilgisini bileşen mimarisi, durum yönetimi ve performansla derinleştirmek isteyenler de eğitimden verim alır.
React'e tamamen yeni biri katılabilir mi?
JavaScript ES6 kavramlarına hakimseniz React'e yeni olmanız sorun değildir. Eğitim JSX ve bileşenlerden başlayıp hook'lar, durum yönetimi ve performansa doğru kademeli ilerler. Her kavram etkileşimli bir arayüz üzerinde uygulamalı geliştirildiği için temelden sağlam kurulur.
Class bileşenler mi hook'lar mı işleniyor?
Eğitim modern React'e odaklanır ve tümüyle fonksiyon bileşenleri ile hook'lar üzerinden ilerler. useState, useEffect, useContext, useReducer ve özel hook'lar derinlemesine işlenir; class bileşenler yalnızca eski kodu okuyabilmek için kısaca tanıtılır.
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. Etkileşimli bir React arayüzü dört gün boyunca bileşenlerden durum yönetimine ve performans optimizasyonuna doğru adım adım geliştirilir. Yüz yüze veya online yapılabilir ve içerik kurumun projelerine 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 arayüz projesini belgeler; kurumsal gruplara mevcut projeler üzerinden uygulamalı değerlendirmeyle genişletilebilir.

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. FSD Front-End Development: UI Development with ReactJS Eğiti 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
Sertifika✓ Var
Hemen Bilgi Al
İlgili Eğitimler

Bu Eğitimle Birlikte Tercih Edilenler

Web Geliştirme GenelFront-end Apps: JAX-RS Web Services Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Front-end Apps: JAX-RS Web Services Eğitimi

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

JAX-RS ile RESTful servis tasarımı, JSON-B/JSON-P, içerik uzlaşması, istisna eşleme, güvenlik, asenkron işleme ve Client API eğitimi.

Detayları Gör →
Web Geliştirme GenelFront-end Apps: POJO, EJB, & EJB Lite Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Front-end Apps: POJO, EJB, & EJB Lite Eğitimi

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

EJB ile iş katmanı: stateless, stateful ve singleton bean'ler, CMT/BMT işlemler, mesajlaşma, zamanlayıcı, güvenlik ve EJB Lite eğitimi.

Detayları Gör →
Web Geliştirme GenelFront-end Apps: Presentation with JSF Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Front-end Apps: Presentation with JSF Eğitimi

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

JSF ile Facelets, yaşam döngüsü, UI bileşenleri, dönüşüm-doğrulama, şablonlama, AJAX, PrimeFaces ve çok dillilik eğitimi.

Detayları Gör →
Web Geliştirme GenelFront-end Apps: RESTful Services & Clients Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Front-end Apps: RESTful Services & Clients Eğitimi

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

fetch ve axios ile REST API tüketimi, JWT ve OAuth2 kimlik doğrulama, CORS ve dayanıklı ön yüz istemci tasarımı. Uygulamalı 4 günlük eğitim.

Detayları Gör →
Web Geliştirme GenelFront-end Apps: Servlets & JavaServer Pages Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Front-end Apps: Servlets & JavaServer Pages Eğitimi

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

Java Servlet yaşam döngüsü, JSP ve JSTL, MVC deseni, oturum yönetimi ve filtrelerle sunucu taraflı web geliştirme. Uygulamalı 4 günlük eğitim.

Detayları Gör →
Web Geliştirme GenelFront-end Apps: Transaction Support Eğitimi
Web ve Ön Yüz Geliştirme Eğitimleri

Front-end Apps: Transaction Support Eğitimi

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

ACID ilkeleri, izolasyon seviyeleri, iyimser-kötümser kilitleme, Spring @Transactional ve dağıtık işlemlerle tutarlı veri yönetimi eğitimi.

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