React Ortam Kurulumu ve Playground Eğitimi

Eğitim Hakkında

Yerel ortam kurulumu, React projesi oluşturma, online playground'lar ve iş akışı

Local Machine & Online Playgrounds, React geliştirmeye başlamak için hem yerel ortam kurulumunu hem de online playground'ları kapsar. Program Node.js, npm, VS Code, terminal ve Git ile yerel kurulumla başlar; Vite ve Create React App ile proje oluşturmayı ve geliştirme döngüsünü işler. CodeSandbox, StackBlitz, CodePen ve Replit ile tarayıcıda kurulumsuz geliştirme ele alınır. Eğitim; yerel ve online ortam karşılaştırması, proje paylaşımı ve verimli bir iş akışıyla tamamlanır.

Süre ve Format

4 Gün. Her gün dört modül; yerel ortam kurulumundan proje oluşturmaya, online playground'lardan iş akışı ve paylaşıma kadar her konu uygulamalı işlenir.

Seviye

Orta Seviye — React'i yerel makinede kurma ve CodeSandbox, StackBlitz gibi online playground'larda geliştirme

Öğrenme Metodu

Her konu hem yerel makinede hem online playground'da adım adım uygulanır; ortamlar karşılaştırılarak doğru seçim pratiği kazandırılır.

Neden Bu Eğitim?

🧰Sağlam ortam

Node, npm, VS Code, terminal ve Git ile sağlam bir yerel geliştirme ortamı kurmayı baştan sona öğrenirsiniz.

🌐Kurulumsuz hız

CodeSandbox ve StackBlitz ile tarayıcıda kurulumsuz geliştirme yaparak fikirleri hızla deneyip paylaşmayı öğrenirsiniz.

⚖️Doğru seçim

Yerel ve online ortamların güçlü yanlarını karşılaştırarak her senaryoda doğru aracı seçmeyi ve iş akışı kurmayı öğrenirsiniz.

Anahtar Konular

react kurulum eğitimireact ortam kurulumuvite react eğitimicreate react appcodesandbox eğitimistackblitzreact geliştirme ortamınode npm kurulumureact playgroundvs code react

“İyi bir geliştirici, aracı değil; her işe uygun aracı seçmeyi ve ortamını rahat çalışacağı biçimde kurmayı bilir.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve hazırlık

1

Temel bilgisayar

Dosya yönetimi, uygulama kurulumu ve temel işletim sistemi kullanımı bu eğitim için faydalı olur.

2

JavaScript fikri

Temel JavaScript ve ES6+ bilgisi, playground ve yerel projelerdeki React kodunu anlamayı kolaylaştırır.

3

React merakı

React'e yeni başlıyor olmak yeterlidir; derin React bilgisi gerekmez, odak ortam ve araçlar üzerinedir.

4

İnternet ve bilgisayar

Güncel bir tarayıcı, internet bağlantısı ve yönetici izni olan bir bilgisayar; kurulumlar eğitim sırasında yapılı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ı Node.js ve npm'i kurar, VS Code'u React için yapılandırır, terminali etkin kullanır ve Git ile sürüm takibini başlatır.

Modül 1

Node.js ve npm Kurulumu

Node.js'i indirme ve sürüm seçimi (LTS)
npm ve npx komutlarının işlevi ve rolü
node ve npm sürümünü doğrulama
nvm ile birden çok Node sürümü yönetme
Global ve yerel (local) paket farkı
PATH ve ortam değişkeni kontrolü

Modül 2

Kod Editörü (VS Code)

VS Code kurulumu ve temel kullanımı
React için faydalı eklenti (extension) seçimi
ESLint ve Prettier eklentilerini kurma
Entegre terminal (integrated terminal) kullanımı
Emmet ve kod kısayolları ile hızlanma
Editör ayarlarını projeye göre yapma

Modül 3

Terminal ve Komut Satırı

Temel terminal komutları ve dizinde gezinme
Dizin oluşturma ve dosya yönetimi
npm komutlarını terminalden çalıştırma
Script çalıştırma (npm run) mantığı
Hata mesajlarını terminalde okuma
Komut geçmişi ve kısayollarla verim

Modül 4

Git ile Sürüm Takibi

Git kurulumu ve temel yapılandırma
git init ile depo (repository) başlatma
add ve commit ile değişiklik kaydetme
.gitignore ile node_modules'ı hariç tutma
GitHub'a projeyi gönderme (push)
Temel dal (branch) ve birleştirme fikri

Günün hedefiKatılımcı Vite ve CRA ile yerel React projesi oluşturur, geliştirme döngüsünü ve DevTools'u kullanır, bağımlılıkları yönetir.

Modül 1

Vite ile Proje Oluşturma

npm create vite ile proje başlatma
React şablonunu (template) seçme
Bağımlılıkları npm install ile kurma
Geliştirme sunucusunu başlatma
Proje klasör yapısını inceleme
package.json script'lerini tanıma

Modül 2

Create React App (CRA)

CRA ile klasik React projesi oluşturma
CRA ve Vite arasındaki farklar
CRA klasör yapısı ve yapılandırma
CRA'nın gizlediği (abstracted) webpack yapısı
CRA'dan Vite'a geçiş değerlendirmesi
Ne zaman hangi aracı seçmeli ve neden

Modül 3

Geliştirme Döngüsü

HMR ile anlık (hot reload) güncelleme
Tarayıcıda hata ve uyarıları görme
React Developer Tools eklentisini kullanma
Bileşen ağacını ve props'u inceleme
Konsol ve ağ (network) sekmesini kullanma
Kaydet-gör döngüsüyle hızlı geliştirme

Modül 4

Bağımlılık ve Paket Yönetimi

npm ile paket kurma ve kaldırma
package.json ve package-lock rolü
Bağımlılık ve geliştirme bağımlılığı farkı
Sürüm aralığı (semver) notasyonu
node_modules klasörünün işlevi
Paket güncelleme ve güvenlik denetimi

Günün hedefiKatılımcı CodeSandbox, StackBlitz, CodePen ve Replit ile tarayıcıda React geliştirir ve playground'ların uygun kullanım senaryolarını öğrenir.

Modül 1

CodeSandbox ile Geliştirme

CodeSandbox'ta React projesi açma
Tarayıcıda kurulumsuz geliştirme yapma
npm paketlerini çevrimiçi ekleme
Canlı önizleme (preview) ve güncelleme
Proje dosyalarını düzenleme ve çalıştırma
Hesapla kaydetme ve projeye geri dönme

Modül 2

StackBlitz ve WebContainers

StackBlitz ile tarayıcıda Node çalıştırma
WebContainer teknolojisinin mantığı
Vite projesini çevrimiçi başlatma
Terminal ve npm'i tarayıcıda kullanma
Hızlı prototip ve demo oluşturma
Yerel ortama ihtiyaç duymadan çalışma

Modül 3

CodePen ve Replit

CodePen ile küçük UI denemeleri yapma
JSX ve Babel'i CodePen'de kullanma
Replit ile çevrimiçi proje ortamı
Hızlı deneme (snippet) paylaşma
Öğrenme için interaktif örnekler
Playground sınırlarını (limit) bilme

Modül 4

Playground Kullanım Senaryoları

Hızlı fikir doğrulama (prototyping)
Hata ayıklama için izole örnek (repro) kurma
Eğitim ve demo amaçlı paylaşım
Paket ve bileşen davranışını deneme
Topluluk örneklerini bulma ve inceleme
Playground'tan yerel projeye taşıma

Günün hedefiKatılımcı yerel ve online ortamları karşılaştırır, proje paylaşımı yapar, ortamlar arası taşır ve verimli bir geliştirme iş akışı kurar.

Modül 1

Yerel ve Online Karşılaştırma

Yerel ve çevrimiçi ortam avantajları
Performans ve kaynak (resource) farkları
Çevrimdışı çalışma ve bağımsızlık
Büyük proje için doğru ortam seçimi
Gizlilik ve kod güvenliği değerlendirmesi
Hangi senaryoda hangisi tercih edilir

Modül 2

Proje Paylaşımı ve İşbirliği

Playground bağlantısıyla proje paylaşma
Gerçek zamanlı ortak düzenleme (collaboration)
GitHub ile yerel projeyi paylaşma
Fork ve kopya (clone) ile başlama
Geri bildirim ve kod inceleme akışı
Paylaşılan demo linkiyle sunum yapma

Modül 3

Ortamlar Arası Taşıma

Playground projesini indirme (export)
Yerel projeyi çevrimiçi ortama aktarma
Bağımlılıkları iki ortamda eşitleme
Ortam değişkenlerini ortamlar arası taşıma
Build ve çalıştırma farklarını giderme
Taşıma sonrası doğrulama kontrolü

Modül 4

Verimli Geliştirme İş Akışı

Deneme için playground, üretim için yerel
Hızlı prototipi yerel projeye dönüştürme
Editör, terminal ve tarayıcı düzeni kurma
Kısayol ve otomasyonla hızlanma
Düzenli commit ve yedekleme alışkanlığı
Kendi iş akışını (workflow) oluşturma

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Yerel ortam

Node.js, npm ve VS Code'u kurar, React için yapılandırır ve sağlam bir yerel geliştirme ortamını baştan sona hazırlarsınız.

✅

Terminal ve Git

Temel terminal komutlarını kullanır, npm script'leri çalıştırır ve Git ile projenizin sürüm takibini güvenle yaparsınız.

✅

Proje oluşturma

Vite ve Create React App ile yerel React projesi oluşturur, aralarındaki farkı bilir ve doğru aracı seçersiniz.

✅

Geliştirme döngüsü

HMR, React DevTools ve tarayıcı araçlarıyla hızlı kaydet-gör döngüsü kurar ve hataları etkin biçimde ayıklarsınız.

✅

Paket yönetimi

npm ile bağımlılıkları kurar, package.json ve semver mantığını kavrar ve paket güncellemelerini güvenle yönetirsiniz.

✅

Online playground

CodeSandbox, StackBlitz, CodePen ve Replit ile tarayıcıda kurulumsuz geliştirir ve projeleri hızla paylaşırsınız.

✅

Ortam seçimi

Yerel ve online ortamların güçlü yanlarını karşılaştırır ve her senaryo için doğru ortamı bilinçli biçimde seçersiniz.

✅

Verimli iş akışı

Projeleri ortamlar arasında taşır, ekiple paylaşır ve kendinize uygun verimli bir geliştirme iş akışı kurarsınız.

Kimler İçin Uygundur?

React öğrenmeye başlayan veya geliştirme ortamını düzenlemek isteyen; yerel kurulum
online playground'lar arasında doğru seçimi yapıp verimli bir iş akışı kurmak isteyen geliştiriciler için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

React öğrenmeye başlayan veya geliştirme ortamını düzenlemek isteyen herkes için uygundur. Derin React bilgisi gerekmez; odak Node, npm, VS Code ve Git ile yerel ortam kurulumu ile CodeSandbox ve StackBlitz gibi online playground'larda verimli geliştirme üzerinedir.

Yerel kurulum mu, online playground mu daha iyi?

İkisinin de güçlü yanları vardır. Online playground'lar kurulumsuz, hızlı deneme ve paylaşım için idealdir; yerel ortam ise büyük projeler, tam kontrol ve çevrimdışı çalışma için uygundur. Eğitim her iki ortamı karşılaştırır ve hangi senaryoda hangisinin seçileceğini gösterir.

Hangi araçlar ve platformlar kullanılıyor?

Yerel tarafta Node.js, npm, VS Code, terminal, Git, Vite ve Create React App; online tarafta CodeSandbox, StackBlitz, CodePen ve Replit kullanılır. Ayrıca React Developer Tools ile hata ayıklama ve projeleri ortamlar arasında taşıma işlenir.

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. İlk iki gün yerel ortam kurulumu ve proje oluşturmaya, son iki gün online playground'lar ile iş akışı ve paylaşıma ayrılmıştır. Yüz yüze veya online yapılabilir; kurulumlar birlikte adım adım gerçekleştirilir.

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 belgeler; kurumsal gruplar için içerik, ekibin kullandığı araçlara ve tercih edilen ortama göre uyarlanabilir.

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

BUILD APPS USING REACT: LOCAL MACHINE & ONLINE PLAYGROUNDS EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Node.js ve npm Kurulumu

Kod Editörü (VS Code)

Terminal ve Komut Satırı

Git ile Sürüm Takibi

Vite ile Proje Oluşturma

Create React App (CRA)

Geliştirme Döngüsü

Bağımlılık ve Paket Yönetimi

CodeSandbox ile Geliştirme

StackBlitz ve WebContainers

CodePen ve Replit

Playground Kullanım Senaryoları

Yerel ve Online Karşılaştırma

Proje Paylaşımı ve İşbirliği

Ortamlar Arası Taşıma

Verimli Geliştirme İş Akışı

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