JavaScript Front-end Çatıları Eğitimi

Eğitim Hakkında

Bileşen tabanlı mimariden durum yönetimine modern ön yüz çatılarına uygulamalı giriş

JavaScript Front-end Development: Frameworks Eğitimi, modern ön yüz çatılarının ortak kavramlarını ve öne çıkan temsilcilerini uygulamalı olarak tanıtır. Katılımcılar bileşen tabanlı mimariyi, bildirimsel arayüzü ve sanal DOM mantığını öğrenir; React, Vue ve Angular'ı karşılaştırmalı inceler. Durum yönetimi, bileşenler arası iletişim, yönlendirme ve veri çekme işlenir; Vite gibi derleme araçlarıyla proje kurulumu ve yayına alma pratikle pekiştirilir.

Süre ve Format

3 Gün. Her gün dört modül; her çatı kavramı kısa anlatımın ardından küçük bileşen örnekleriyle uygulamalı gösterilir.

Seviye

Orta Seviye — modern JavaScript ön yüz çatılarını karşılaştırmalı ve uygulamalı tanıtan program

Öğrenme Metodu

Her kavram üç çatıda karşılaştırmalı örneklerle işlenir; katılımcılar küçük bileşenler yazarak mimari kalıpları pekiştirir.

Neden Bu Eğitim?

🧱Bileşen mimarisi

Bileşen tabanlı düşünmeyi öğrenerek arayüzleri yeniden kullanılabilir, test edilebilir ve ölçeklenebilir parçalara bölersiniz.

⚖️Doğru çatı seçimi

React, Vue ve Angular'ı karşılaştırmalı görerek projenizin ihtiyacına en uygun çatıyı bilinçli biçimde seçebilirsiniz.

🚀Modern iş akışı

Derleme araçları, modüller ve bileşen kalıplarıyla modern ön yüz projelerinde hızlı ve düzenli geliştirme yaparsınız.

Anahtar Konular

ön yüz çatıları eğitimijavascript framework eğitimireact vue angular karşılaştırmafrontend framework kursubileşen mimarisi eğitimispa geliştirme eğitimijavascript framework kursudurum yönetimi eğitimimodern web geliştirme eğitimiön yüz geliştirme eğitimi

“Çatılar araçtır, kavram ise kalıcıdır; bileşen, durum ve veri akışını kavrayan geliştirici her çatıya kolayca uyum sağlar.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak ön bilgi ve ortam gereksinimleri

1

Modern JavaScript

ES6+ özellikleri, fonksiyonlar, diziler ve nesnelere aşinalık beklenir; çatılar bu temel üzerine kurulur.

2

HTML ve DOM

HTML yapısı ve DOM elemanlarıyla temel çalışma deneyimi, bileşen ve şablon örneklerini anlamayı kolaylaştırır.

3

Node.js ve npm

Node.js ve npm kurulumu önerilir; proje oluşturma ve paket yönetimi akışı eğitimde kısaca gösterilir.

4

Kod editörü ve terminal

VS Code ve temel terminal kullanımı, proje kurulumu ve geliştirme sunucusunu çalıştırmak için faydalıdır.

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ı ön yüz çatılarının çözdüğü sorunları, bildirimsel arayüz ve sanal DOM mantığını, bileşen tabanlı mimariyi ve derleme araçlarını kavrar.

Modül 1

Çatı Neden Gerekir?

Saf DOM ile büyük arayüzün zorlukları
Bildirimsel (declarative) arayüz yaklaşımı
Durum odaklı arayüz güncelleme mantığı
SPA (tek sayfa uygulama) kavramı
Çatı, kütüphane ve meta-çatı ayrımı
React, Vue ve Angular genel bakışı

Modül 2

Sanal DOM ve Reaktiflik

Gerçek DOM güncellemesinin maliyeti
Sanal DOM ve fark (diff) algoritması
Vue'da reaktif veri izleme mantığı
React'te render ve yeniden render döngüsü
Angular değişiklik denetimi (change detection)
Verimli güncelleme için anahtar (key) kullanımı

Modül 3

Bileşen (Component) Mimarisi

Bileşen ile arayüzü parçalara bölme
Yeniden kullanılabilir bileşen tasarımı
Bileşen ağacı ve üst-alt ilişkisi
Sunum ve kapsayıcı bileşen ayrımı
Bileşen dosya ve klasör düzeni
Tek sorumluluk ilkesiyle bileşen bölme

Modül 4

Derleme Araçları ve Proje Kurulumu

npm ile bağımlılık ve betik yönetimi
Vite ile hızlı proje oluşturma
Geliştirme sunucusu ve sıcak yeniden yükleme
Modül paketleme (bundling) temelleri
Ortam değişkenleri ve yapılandırma
Üretim derlemesi (production build) alma

Günün hedefiKatılımcı props ile veri aktarır, bileşen durumunu yönetir, üst-alt iletişimi kurar ve koşullu ile liste tabanlı arayüz oluşturmayı öğrenir.

Modül 1

Props ile Veri Aktarımı

Üstten alta props ile veri geçirme
React'te props ve tek yönlü akış
Vue'da props tanımı ve doğrulama
Angular'da @Input ile veri alma
Props varsayılan değerleri ve tipi
Değişmez (immutable) props yaklaşımı

Modül 2

Bileşen Durumu (State)

Yerel bileşen durumu (state) kavramı
React useState ile durum tutma
Vue ref ve reactive ile durum tutma
Angular bileşen alanı ile durum
Durum güncelleme ve yeniden render
Durumu olabildiğince yerelde tutma

Modül 3

Olaylar ve Bileşen İletişimi

Kullanıcı olaylarını bileşende işleme
Alttan üste olay (emit/callback) iletimi
Vue'da custom event tanımı ve emit
Angular'da @Output ve EventEmitter
Form girdilerini duruma bağlama
Kardeş bileşenler arası iletişim

Modül 4

Koşullu ve Liste Render

Koşula göre bileşen gösterme/gizleme
React'te koşullu render kalıpları
Vue v-if ve v-for yönergelerini kullanma
Angular *ngIf ve *ngFor yapıları
Listelerde anahtar (key) kullanımı
Dinamik liste güncelleme ve performans

Günün hedefiKatılımcı istemci tarafı yönlendirmeyi kurar, API'den veri çeker, global durum yönetimini kavrar ve uygulamayı derleyip yayına almayı öğrenir.

Modül 1

İstemci Tarafı Yönlendirme

SPA'da sayfa geçişi ve URL yönetimi
React Router ile rota tanımlama
Vue Router ile yönlendirme kurulumu
Angular Router ve rota yapılandırması
Dinamik rota ve URL parametreleri
İç içe rota ve yönlendirme koruması

Modül 2

API'den Veri Çekme

fetch ve axios ile HTTP isteği
Veri çekmeyi bileşen yaşam döngüsüne bağlama
Yükleniyor ve hata durumlarını yönetme
React'te useEffect ile veri çekme
Vue'da yaşam döngüsü kancaları
Angular HttpClient ve observable akışı

Modül 3

Global Durum Yönetimi

Prop zincirleme (prop drilling) sorunu
React Context ile paylaşılan durum
Redux ve tek merkezi depo kavramı
Vue için Pinia ile durum yönetimi
Angular'da servis ile durum paylaşımı
Durum yönetimi aracı seçim ölçütleri

Modül 4

Derleme, Test ve Yayına Alma

Üretim için uygulamayı derleme
Statik dosyaların yayınlanma mantığı
Netlify ve Vercel gibi barındırma
Ortam yapılandırması ve API adresleri
Temel bileşen testine kısa giriş
Performans ve paket boyutu iyileştirme

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Çatı kavramları

Bildirimsel arayüz, sanal DOM ve reaktiflik mantığını kavrayarak modern çatıların neden ve nasıl çalıştığını anlarsınız.

✅

Bileşen mimarisi

Arayüzü yeniden kullanılabilir bileşenlere bölerek düzenli, bakımı kolay ve ölçeklenebilir ön yüz projeleri tasarlarsınız.

✅

Çatı karşılaştırması

React, Vue ve Angular'ı karşılaştırarak her projenin ihtiyacına en uygun çatıyı bilinçli biçimde seçebilirsiniz.

✅

Props ve durum

Props ile veri aktarır, bileşen durumunu yönetir ve veri değişiminde arayüzün doğru güncellenmesini sağlarsınız.

✅

Bileşen iletişimi

Olaylarla alttan üste iletişim kurar, koşullu ve liste tabanlı render ile dinamik arayüzler oluşturursunuz.

✅

Yönlendirme

İstemci tarafı yönlendirmeyle çok sayfalı hissi veren tek sayfa uygulamalar ve korunan rotalar kurarsınız.

✅

Veri ve global durum

API'den veri çeker, yükleme ve hata durumlarını yönetir, Context, Redux veya Pinia ile global durumu paylaşırsınız.

✅

Yayına alma

Uygulamayı üretim için derler, statik barındırma platformlarına dağıtır ve temel performans iyileştirmeleri yaparsınız.

Kimler İçin Uygundur?

Modern JavaScript ve DOM temeli olan
React
Vue veya Angular gibi ön yüz çatılarına geçmek
doğru çatıyı seçebilmek isteyen geliştiriciler ile web geliştirme öğrenenler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Modern JavaScript ve DOM temeli olan, React, Vue veya Angular gibi ön yüz çatılarına geçmek ve doğru çatıyı seçebilmek isteyen geliştiriciler ile web geliştirme öğrenenler için uygundur. ES6+ özellikler, fonksiyon ve nesne gibi konulara aşinalık beklenir.

Tek bir çatı mı öğretiliyor, yoksa birçoğu mu?

Eğitim bileşen mimarisi, durum yönetimi ve yönlendirme gibi ortak kavramları React, Vue ve Angular üzerinde karşılaştırmalı işler. Amaç tek bir çatıda uzmanlaşmak değil, çatıların ortak mantığını kavramak ve projeye uygun olanı bilinçle seçebilmektir.

Hangi konular işleniyor?

Eğitim çatı kavramları, sanal DOM ve bileşen mimarisiyle başlar; props, durum yönetimi, olaylar ve bileşen iletişimini kapsar. Son gün istemci tarafı yönlendirme, API'den veri çekme, Context/Redux/Pinia ile global durum ve uygulamayı derleyip yayına alma uygulamalı 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. Her çatı kavramı kısa anlatımın ardından küçük bileşen örnekleriyle uygulamalı gösterilir. Yüz yüze veya online olarak verilebilir ve kurumun kullandığı çatıya göre içerik ağırlığı 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 bileşen çalışmalarını belgeler; kurumsal gruplara özel çatı odağıyla uyarlama yapılabilir.

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

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

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Çatı Neden Gerekir?

Sanal DOM ve Reaktiflik

Bileşen (Component) Mimarisi

Derleme Araçları ve Proje Kurulumu

Props ile Veri Aktarımı

Bileşen Durumu (State)

Olaylar ve Bileşen İletişimi

Koşullu ve Liste Render

İstemci Tarafı Yönlendirme

API'den Veri Çekme

Global Durum Yönetimi

Derleme, Test 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

Application Development with Node.js: Node Clusters & Memory Optimizations Eğitimi

Application Development with Node.js: Process Managers Eğitimi

Application Development with Node.js: Real-time Applications Eğitimi

Application Development with Node.js: Working with Features Eğitimi

Creating Data APIs Using Node.js Eğitimi

Design Patterns in JavaScript: Constructor, Factory, & Abstract Factory Creational Patterns Eğitimi