ReactJS ve Grunt Eğitimi

Eğitim Hakkında

React bileşenleri ve Grunt build otomasyonu

Eğitim, React bileşen geliştirmeyi Grunt görev çalıştırıcısıyla birleştirir: JSX ve ES6 sözdizimi, Babel ile dönüştürme, bileşen, props ve state, olay yönetimi, liste ve form, Gruntfile.js yapısı, grunt-browserify veya grunt-webpack ile bundling, grunt-contrib-uglify ile minify, grunt-sass, ESLint, grunt-contrib-watch ve livereload, connect sunucusu, görev kaydı (registerTask) ve geliştirme/üretim yapılandırmaları.

Süre ve Format

2 Gün. Her gün dört modül; React Bileşen Geliştirme ve Grunt ile Build Hattı ekseninde ilerleyen uygulamalı program.

Seviye

Orta Seviye — React bileşen geliştirme ve Grunt ile build otomasyonu: JSX derleme, bundling, minify, linting ve geliştirme akışı

Öğrenme Metodu

Küçük bir React uygulaması sıfırdan kurulur; Gruntfile adım adım yazılarak derleme, minify ve canlı yenileme akışı oluşturulur.

Neden Bu Eğitim?

⚙️Build otomasyonu

Derleme, minify ve test adımlarını tek komutla çalıştırırsınız.

⚛️React bileşenleri

JSX ile durumlu bileşenler ve formlar geliştirirsiniz.

🔄Hızlı geri bildirim

Watch ve livereload ile değişiklikleri anında tarayıcıda görürsünüz.

Anahtar Konular

reactjs eğitimigrunt eğitimigruntfilejsx babelbrowserifywebpackbuild otomasyonulivereloadreact bileşenlerigörev çalıştırıcıeslint grunt

“Tekrar eden işi bir kez otomatikleştirin, sonra yalnızca kod yazın.”

Ön Koşullar

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

1

JavaScript

ES6 temelleri ve DOM bilgisi gerekir.

2

HTML/CSS

Temel web geliştirme bilgisi gerekir.

3

Node.js

Node.js ve npm kurulu olmalıdır.

4

Komut satırı

Terminal kullanımı temel düzeyde bilinmelidir.

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ı JSX ile bileşenler yazar, props ve state ile etkileşimli arayüzler kurar.

Modül 1

React Temelleri

Virtual DOM mantığı
JSX sözdizimi ve kuralları
Fonksiyon bileşenleri
Props ve çocuk bileşen
Koşullu render
Liste render ve key

Modül 2

State ve Olaylar

useState ile durum yönetimi
Olay yönetimi (onClick, onChange)
Kontrollü form bileşenleri
useEffect ile yan etkiler
Üst bileşene veri yukarı akışı
Bileşen kompozisyonu

Modül 3

Bileşen Mimarisi

Container ve sunum bileşeni
Context API ile paylaşılan durum
Özel hook (custom hook)
PropTypes ile doğrulama
Kod bölme fikri
Erişilebilirlik temelleri

Modül 4

Veri ve Ağ

fetch ile API çağrısı
Yükleniyor ve hata durumları
Liste filtreleme ve arama
Form doğrulama
Basit yönlendirme (react-router)
Örnek: kişi listesi uygulaması

Günün hedefiKatılımcı Gruntfile yazar, JSX derlemesini, bundling ve minify adımlarını otomatikleştirir.

Modül 1

Grunt Temelleri

npm init ve grunt-cli kurulumu
Gruntfile.js yapısı
initConfig ve loadNpmTasks
registerTask ile görev zinciri
Hedef (target) ve dosya eşleme
Grunt eklenti ekosistemi

Modül 2

JSX ve Bundling

grunt-babel ile JSX/ES6 dönüştürme
grunt-browserify yapılandırması
grunt-webpack alternatifi
Kaynak haritası (source map)
Modül import/export
Bağımlılık paketleme

Modül 3

Optimizasyon ve Kalite

grunt-contrib-uglify ile minify
grunt-contrib-cssmin ve grunt-sass
ESLint ile kod kontrolü
grunt-contrib-clean ve copy
Dosya adına hash ekleme (cache busting)
Jest birim test entegrasyonu

Modül 4

Geliştirme Akışı ve Üretim

grunt-contrib-watch
grunt-contrib-connect ve livereload
dev ve prod yapılandırma ayrımı
Ortam değişkenleri
CI'da grunt çalıştırma
Grunt'tan Vite/webpack'e geçiş notları

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

JSX derleme

Babel ile JSX ve ES6 kodunu Grunt içinde dönüştürebilirsiniz.

🧩

React bileşenleri

Props ve state ile bileşenler yazabilirsiniz.

⚙️

Form yönetimi

Kontrollü form bileşenleri geliştirebilirsiniz.

🔍

Gruntfile yazımı

Görev tanımlama ve görev zinciri oluşturabilirsiniz.

🛠️

Bundling

Browserify veya webpack ile paketleme yapabilirsiniz.

📈

Minify

Uglify ve cssmin ile üretim çıktısı hazırlayabilirsiniz.

🔐

Canlı geliştirme

Watch ve livereload ile hızlı geliştirme akışı kurabilirsiniz.

🚀

Geçiş planı

Grunt tabanlı projeyi modern araçlara taşıma planı çıkarabilirsiniz.

Kimler İçin Uygundur?

Mevcut Grunt tabanlı projeleri sürdüren veya React'i klasik görev çalıştırıcı hattına entegre etmek isteyen front-end geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Mevcut Grunt tabanlı projeleri sürdüren veya React'i klasik görev çalıştırıcı hattına entegre etmek isteyen front-end geliştiriciler için uygundur. ES6 temelleri ve DOM bilgisi gerekir.

Grunt hâlâ kullanılıyor mu?

Birçok kurumsal proje hâlâ Grunt kullanıyor; eğitim hem bu projelerin bakımı hem modern araçlara geçiş için hazırlar.

Vite veya webpack işlenir mi?

webpack alternatifi gösterilir, Vite geçiş notu olarak değinilir.

Class bileşenleri var mı?

Odak fonksiyon bileşenleri ve hook'lardır; class bileşenleri eski kodu okumak için kısaca anlatılır.

Önkoşul nedir?

ES6 JavaScript, HTML/CSS ve Node.js/npm bilgisi gerekir.

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

REACTJS & GRUNT EĞİTİMİ