Ön Yüz Çatıları Eğitimi: React, Vue, Angular

Eğitim Hakkında

Bileşen modeli ve reaktiflikten durum yönetimine, yönlendirmeden çatı seçimine karşılaştırmalı bakış

FSD Front-End Development: Frameworks Eğitimi, modern tek sayfa uygulamalarının temelini oluşturan React, Vue ve Angular çatılarını karşılaştırmalı biçimde öğretir. Katılımcılar bileşen modelini, reaktiflik yaklaşımlarını ve veri akışını kavrar; durum yönetimi, yönlendirme ve veri çekme desenlerini üç çatıda yan yana inceler. Çatıların ortak ilkeleri ve ayrıştığı noktalar işlenir; program bilinçli çatı seçimi ve küçük bir uygulama projesiyle tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; bileşen modeli temelinden başlayıp durum yönetimi ve yönlendirme ile çatı seçimi ve uygulama projesine ilerler.

Seviye

Orta Seviye — Modern ön yüz çatıları: React, Vue ve Angular'ın bileşen modeli, durum yönetimi ve yönlendirme

Öğrenme Metodu

Her modülde aynı arayüz sorunu React, Vue ve Angular'da yan yana çözülür; katılımcılar çatıların benzer ve farklı yanlarını görür.

Neden Bu Eğitim?

🧠Ortak ilkeler

Bileşen, reaktiflik ve veri akışı gibi çatıların paylaştığı temel ilkeleri kavrayarak her çatıyı daha hızlı öğrenirsiniz.

🔀Bilinçli seçim

React, Vue ve Angular'ı yan yana görerek projeye ve ekibe en uygun çatıyı gerekçeleriyle seçme yetkinliği kazanırsınız.

🚀Hızlı adaptasyon

Çatıların ortak mantığını öğrenince yeni bir çatıya veya sürüme geçişiniz tahmin edilebilir ve kolay hale gelir.

Anahtar Konular

ön yüz çatıları eğitimireact vue angular karşılaştırmareact eğitimivue eğitimiangular eğitimifrontend framework eğitimijavascript çatı kursuspa geliştirme eğitimidurum yönetimi eğitimimodern web geliştirme eğitimi

“Çatı bir araçtır, amaç değil; ortak ilkeleri kavrayan geliştirici hangi çatı gelirse gelsin hızla uyum sağlar.”

Ön Koşullar

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

1

JavaScript bilgisi

ES6 söz dizimi, fonksiyon, dizi metotları ve modül kavramlarına pratik hakimiyet beklenir; çatılar bu temele dayanır.

2

DOM ve olaylar

DOM'u güncelleme ve olay yönetimi mantığına aşinalık, çatıların bunu nasıl soyutladığını anlamakta faydalıdır.

3

HTML ve CSS

Arayüz yapısı ve stil bilgisi, bileşenlerin şablon ve görünümünü kurmak için gereklidir.

4

Node ve npm

Node.js ve npm ile proje kurma ve paket yönetimi, üç çatının başlangıç projelerini oluşturmak için 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 kavramını ve reaktiflik yaklaşımlarını React, Vue ve Angular'da karşılaştırmalı kavrar; şablon ve tek yönlü veri akışını uygular.

Modül 1

Bileşen Kavramı ve Yapısı

Bileşenin yeniden kullanılabilir birim olması
React fonksiyon bileşeni ve JSX
Vue tek dosya bileşeni (SFC) yapısı
Angular bileşeni ve dekoratör modeli
Bileşen ağacı ve kompozisyon yapısı
Üç çatıda bileşen tanımının karşılaştırması

Modül 2

Şablon ve Görünüm

JSX ile JavaScript içinde işaretleme
Vue şablon direktifleri (v-if, v-for)
Angular şablonu ve yapısal direktifler
Koşullu ve liste render yaklaşımları
Olay bağlama söz dizimi farkları
Şablon yaklaşımlarının karşılaştırması

Modül 3

Reaktiflik Modelleri

React state ve yeniden render mantığı
Vue reaktiflik sistemi (ref, reactive)
Angular signals ve değişim algılama
İzlenen veriye bağlı otomatik güncelleme
Reaktifliğin perde arkası karşılaştırması
Gereksiz render'ı önleme yaklaşımları

Modül 4

Veri Akışı ve İletişim

Props ile ebeveynden çocuğa veri
Olay ve emit ile çocuktan ebeveyne iletişim
Tek yönlü veri akışı ilkesinin önemi
İki yönlü bağlama (v-model) yaklaşımı
Content projection ve slot/children
Bileşenler arası iletişim desenleri

Günün hedefiKatılımcı yerel ve global durum yönetimini, yan etkileri ve bileşen yaşam döngüsünü üç çatıda karşılaştırmalı uygular.

Modül 1

Yerel Durum Yönetimi

React useState ile bileşen durumu
Vue ref ve reactive ile durum tutma
Angular bileşen alanı ve signal
Türetilmiş durum ve hesaplanan değer
Durum güncelleme ve değişmezlik
Yerel durumun doğru konumlandırılması

Modül 2

Yan Etki ve Yaşam Döngüsü

React useEffect ile yan etki yönetimi
Vue yaşam döngüsü kancalarının kullanımı
Angular ngOnInit ve ngOnDestroy
Veri çekme ve abonelik temizliği
Bağımlılık dizisi ve tetiklenme
Yaşam döngüsü kancalarının karşılaştırması

Modül 3

Global Durum Yönetimi

React Context ve harici store ihtiyacı
Vue ile Pinia üzerinden global durum
Angular servis ve RxJS ile paylaşım
Prop drilling sorunu ve çözümü
Durum yönetimine ne zaman geçileceği
Çatılara göre store yaklaşımı karşılaştırması

Modül 4

Bileşen Yeniden Kullanımı

React custom hook ile mantık paylaşımı
Vue composable ile yeniden kullanım
Angular servis ve directive paylaşımı
Sunum ve mantık ayrımı deseni yaklaşımı
Yeniden kullanılabilir bileşen tasarımı
Mantık paylaşım yaklaşımlarının karşılaştırması

Günün hedefiKatılımcı üç çatıda yönlendirme ve veri çekmeyi uygular, SSR ve meta çatıları tanır ve projeye uygun çatıyı gerekçeleriyle seçip uygular.

Modül 1

Yönlendirme (Routing)

React Router ile rota tanımlaması
Vue Router ile rota yapılandırması
Angular Router ve modül yönlendirme
İç içe rota ve parametreli yol
Tembel yükleme ile rota bölme stratejisi
Yönlendirme yaklaşımlarının karşılaştırması

Modül 2

Veri Çekme Desenleri

Bileşende veri çekme ve yükleme durumu
React Query/SWR ile sunucu durumu
Vue ve Angular'da veri çekme desenleri
Önbellekleme ve yeniden doğrulama
Hata ve boş veri durumu yönetimi
Veri çekme sorumluluğunun konumu

Modül 3

SSR ve Meta Çatılar

İstemci (CSR) ve sunucu (SSR) render farkı
Next.js ile React meta çatısı kurulumu
Nuxt ile Vue meta çatısı yaklaşımı
Angular Universal ile sunucu render
SEO ve ilk yükleme performansı etkisi
Statik site üretimi (SSG) yaklaşımı

Modül 4

Çatı Seçimi ve Uygulama

Ekip deneyimi ve öğrenme eğrisi ölçütü
Ekosistem, topluluk ve uzun dönem bakımı
Proje ölçeği ve gereksinime uygunluk
Performans ve paket boyutu değerlendirmesi
Seçilen çatıda küçük uygulama kurulumu
Karar gerekçesinin belgelenmesi

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Bileşen modeli

React, Vue ve Angular'da bileşen tanımını ve kompozisyonu kavrayarak üç çatıda arayüz kurma mantığını anlarsınız.

✅

Reaktiflik

Üç çatının farklı reaktiflik modellerini karşılaştırarak verinin arayüze nasıl yansıdığını derinlemesine öğrenirsiniz.

✅

Veri akışı

Props, olay ve iki yönlü bağlama ile bileşenler arası veri akışını ve iletişim desenlerini doğru biçimde kurarsınız.

✅

Durum yönetimi

Yerel durumdan Pinia ve Context gibi global çözümlere, durum yönetimini çatılara göre karşılaştırmalı uygularsınız.

✅

Yaşam döngüsü

Yan etki ve yaşam döngüsü kancalarını kullanarak veri çekme ve temizlik işlerini üç çatıda doğru yönetirsiniz.

✅

Yönlendirme

React Router, Vue Router ve Angular Router ile rota tanımı, parametre ve tembel yükleme desenlerini uygularsınız.

✅

SSR farkındalığı

İstemci ve sunucu render farkını kavrayıp Next.js, Nuxt ve Angular Universal meta çatılarını tanırsınız.

✅

Bilinçli seçim

Ekip, ekosistem ve proje ölçütlerini değerlendirerek projeye en uygun çatıyı gerekçeleriyle seçebilirsiniz.

Kimler İçin Uygundur?

HTML
CSS ve JavaScript temeline sahip
modern bir ön yüz çatısına geçmek isteyen veya farklı çatıları karşılaştırarak bilinçli seçim yapmak isteyen web geliştiricileri
takım liderleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

HTML, CSS ve JavaScript temeline sahip, modern bir ön yüz çatısına geçmek isteyen veya farklı çatıları karşılaştırarak bilinçli seçim yapmak isteyen web geliştiricileri ve takım liderleri için uygundur. ES6 söz dizimi, dizi metotları ve DOM olaylarına aşinalık beklenir; çatıların kendileri eğitimde temelden ele alınır.

Üç çatıyı birden öğrenmek kafa karıştırmaz mı?

Eğitim her çatıyı ayrı ayrı değil, aynı arayüz sorununu üç çatıda yan yana çözerek işler. Böylece bileşen, reaktiflik ve veri akışı gibi ortak ilkeler öne çıkar ve çatılar arasındaki farklar netleşir. Bu yaklaşım, tek bir çatıya odaklanırken bile diğerlerini okuyabilme ve yeni çatıya hızlı uyum sağlama yetisi kazandırır.

Eğitim sonunda hangi çatıyı seçeceğimi öğrenir miyim?

Evet. Son gün ekip deneyimi, öğrenme eğrisi, ekosistem olgunluğu, proje ölçeği ve performans gibi ölçütlerle çatı seçimi ele alınır. React, Vue ve Angular'ın güçlü ve zayıf yönleri karşılaştırılır ve projenize uygun kararı gerekçelendirerek belgelemeyi öğrenirsiniz.

Eğitimin süresi ve formatı nedir?

Eğitim üç gün sürer ve her gün dört modülden oluşur. Bileşen modeli temelinden başlayıp durum yönetimi ve yönlendirme ile çatı seçimi ve uygulama projesine ilerler. Yüz yüze veya online yapılabilir; içerik kurumun odaklanmak istediği çatıya ve teknoloji yığını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 seçilen çatıda geliştirilen uygulama projesini belgeler; kurumsal gruplara kurumun tercih ettiği çatı üzerinden derinleşme atölyesiyle 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

FSD FRONT-END DEVELOPMENT: FRAMEWORKS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Bileşen Kavramı ve Yapısı

Şablon ve Görünüm

Reaktiflik Modelleri

Veri Akışı ve İletişim

Yerel Durum Yönetimi

Yan Etki ve Yaşam Döngüsü

Global Durum Yönetimi

Bileşen Yeniden Kullanımı

Yönlendirme (Routing)

Veri Çekme Desenleri

SSR ve Meta Çatılar

Çatı Seçimi ve Uygulama

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

WordPress | An Introduction Eğitimi

WordPress'u Öğretmen Olma Eğitimi

ASP.NET MVC ile Web Programlama Eğitimi

CMS - İçerik Yöneticisi Eğitimi

Contentful Headless CMS Eğitimi

Drupal 11'e Giriş Eğitimi