ServBay ile React Projesi Oluşturma ve Çalıştırma
React Nedir?
React, Meta (eski adıyla Facebook) ve topluluğu tarafından geliştirilen, açık kaynaklı bir JavaScript kütüphanesidir. Kullanıcı arayüzleri (UI) oluşturmak için tasarlanmıştır. Bileşen tabanlı mimarisiyle interaktif UI’lar geliştirmenizi sağlar; böylece geliştiriciler, karmaşık ve sürdürülebilir tek sayfa uygulamalar (SPA) ya da büyük ölçekli web projelerinin görünüm katmanını verimli biçimde üretebilir. React’in temel avantajları arasında deklaratif programlama stili, verimli virtual DOM güncellemeleri ve güçlü bir ekosistem bulunur.
React’in Temel Özellikleri ve Avantajları
- Bileşen Tabanlı Geliştirme: Karmaşık UI’lar bağımsız ve tekrar kullanılabilir parçalara ayrılarak kodun bakımını ve yeniden kullanımını kolaylaştırır.
- Deklaratif Görünümler: UI’nin durumunu kolayca tanımlarsınız, React DOM’u bu duruma göre günceller; UI mantığını sadeleştirir.
- Virtual DOM: Bellekte UI’nin sanal bir temsilini tutar; farklılıkları algılayıp gerçek DOM’a minimum müdahalede bulunarak yüksek performans sağlar.
- Tek Yönlü Veri Akışı: Veri yukarıdan aşağı akarak uygulama durumunun takibini ve anlaşılmasını kolaylaştırır.
- JSX: JavaScript’te HTML benzeri yapı yazmayı mümkün kılan bir sözdizimi uzantısıdır, kodun okunabilirliğini artırır.
- Geniş Ekosistem: React Router, Redux/Zustand/MobX, Material UI gibi birçok üçüncü parti kütüphane ve topluluk desteği sunar; durum yönetimi, yönlendirme, UI bileşenleri ve daha fazlası için çözümler barındırır.
React ile modern, yüksek performanslı web uygulamaları daha hızlı ve etkin şekilde geliştirilebilir.
ServBay ile React Geliştirme ve Üretim Ortamı Kurulumu
ServBay, macOS ve Windows kullanıcıları için güçlü bir yerel web geliştirme ortamıdır ve Node.js dahil birçok yazılım paketini içerir. Bu rehberde, ServBay’in Node.js desteği ve Websites fonksiyonu sayesinde bir React projesinin sıfırdan oluşturulmasını, yapılandırılmasını ve çalıştırılmasını, gelişmiş ters proxy (develop modunda) ve statik dosya servisi (üretim modunda) ile adım adım açıklayacağız.
Ön Gereksinimler
Başlamadan önce aşağıdaki hazırlıkları tamamlamış olmalısınız:
- ServBay’in Kurulması: ServBay’i sisteminize başarıyla yükleyip çalıştırmalısınız.
- Node.js Paketi Kurulumu: ServBay arayüzü veya komut satırı ile Node.js paketini yüklediniz. Detaylı adımlar için ServBay ile Node.js paket kurulumu dokümantasyonuna bakabilirsiniz. ServBay, Node.js sürümünü ve ortam değişkenlerini otomatik olarak yönetir.
React Projesi Oluşturma
Modern frontend yapı aracı Vite ile hızlıca React projesi oluşturacağız. Vite, hızlı başlatma ve canlı modül güncelleme (HMR) sunarak yeni React projelerinde standart haline gelmiştir (geleneksel create-react-app
in yerine geçmiştir).
Terminali Açın ve Site Kök Dizinine Geçin
Terminal uygulamanızı açın. ServBay’in önerdiği varsayılan site kök dizini şunlardır:
macOS:
bashcd /Applications/ServBay/www
1Windows:
cmdcd C:\ServBay\www
1Vite ile Yeni React Projesi Oluşturun
Aşağıdaki komutla,
servbay-react-demo
isimli,react
şablonuna sahip yeni bir proje başlatınız:bashnpx create-vite servbay-react-demo --template react
1npx
: npm paket çalıştırıcısıdır; küresel kurulum olmadan, komut satırı araçlarını doğrudan npm’den çalıştırır. Böylece daimacreate-vite
in en güncel versiyonunu kullanırsınız.create-vite
: Vite’nin resmi proje oluşturucu aracıdır.servbay-react-demo
: Proje klasörünüzün adıdır.--template react
: React tabanlı bir proje yapısı oluşturur.
Ekrandaki yönergeleri takip ederek kurulumu tamamlayın.
Proje Dizinine Girin ve Bağımlılıkları Yükleyin
Yeni oluşturulan proje klasörüne geçin, ardından bağımlılıkları yüklemek için npm kullanın:
bashcd servbay-react-demo npm install
1
2- İsterseniz
yarn install
veyapnpm install
da kullanabilirsiniz; tercihinize göre farklı bir paket yöneticisi seçebilirsiniz.
- İsterseniz
React Proje İçeriği Düzenleme (Opsiyonel)
Kurulumunuzun başarılı olduğunu kontrol etmek için ana sayfa içeriğini kısaca değiştirebiliriz.
src/App.jsx
veyasrc/App.tsx
Dosyasını AçınKullandığınız editörden, proje klasörünüzde bulunan
src/App.jsx
(JavaScript şablonu seçtiyseniz) veyasrc/App.tsx
(TypeScript şablonu seçtiyseniz) dosyasını açın.İçeriği Değiştirin
Ana içerik kısmını bulun ve ekrana "Hello ServBay!" yazacak şekilde düzenleyin:
javascript// ... Diğer importlar ... import './App.css'; function App() { // ... Diğer kodlar ... return ( <> {/* ... Diğer öğeler ... */} <h1>Hello ServBay!</h1> {/* ... Diğer öğeler ... */} </> ); } export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15Dosyayı kaydedin.
Geliştirme Moduna Geçiş
Geliştirme sürecinde, canlı modül güncellemesi (HMR) destekleyen bir lokal geliştirme sunucusu çalıştırırız. ServBay, dış istekleri bu sunucuya yönlendirmek için ters proxy desteği sunar.
Terminalde Geliştirme Sunucusunu Başlatın
Proje dizininizde (
servbay-react-demo
), aşağıdaki komutla Vite geliştirme sunucusunu başlatın ve bir port belirtin (ör. 8585):bashnpm run dev -- --port 8585
1npm run dev
, projepackage.json
dosyasındakidev
komutunu çalıştırır; genellikle Vite sunucusunu başlatır.-- --port 8585
, Vite’ye port parametresi iletilir.
Sunucu başladığında, genellikle terminalde
http://localhost:8585
gibi bir adres görürsünüz. Terminal penceresini açık tutmalı, sunucuyu kapatmamalısınız.ServBay’de Ters Proxy Site Yapılandırması
ServBay uygulamasını açın. Websites bölümüne gidin. Ekle butonuyla yeni bir site yapılandırın:
- Ad (Name):
ServBay React Dev
(açıklayıcı bir isim) - Alan Adı (Domain):
servbay-react-dev.servbay.demo
(ServBay markasına özgü demo alan adı) - Site Türü (Site Type):
Ters Proxy (Reverse Proxy)
seçin - Proxy IP:
127.0.0.1
(geliştirme sunucusu lokal çalışıyor) - Proxy Port:
8585
(geliştirme sunucusunda kullandığınız port ile aynı)
Yapılandırmayı kaydedin. ServBay, entegre web sunucusunda (Caddy veya Nginx)
servbay-react-dev.servbay.demo
adresine gelen isteklerihttp://127.0.0.1:8585
adresine yönlendirecek şekilde ayarlar.ServBay’de site ekleme adımlarının detayları için ServBay Websites yönetim dokümantasyonu‘na bakabilirsiniz.
- Ad (Name):
Geliştirme Sitesine Erişim
Tarayıcınızı açın ve az önce tanımladığınız alan adı üzerinden siteye erişin:
https://servbay-react-dev.servbay.demo
.- ServBay’in entegre SSL özelliği sayesinde siteniz otomatik olarak SSL sertifikası (ServBay User CA veya ServBay Public CA tarafından imzalanmış) ile güvenceye alınır. SSL hakkında daha fazla bilgi için Web sitenizi SSL ile koruma rehberine göz atabilirsiniz.
- Artık editörde dosyalarınızı düzenleyip kaydettiğinizde, tarayıcıda sayfa otomatik olarak güncellenecektir; bu canlı modül güncellemenin (HMR) aktif olduğunun göstergesidir.
Üretim Versiyonu Oluşturma
Projenizi tamamlayıp yayına alınmaya hazır olduğunda, optimize edilmiş bir üretim sürümü oluşturmanız gerekir.
Üretim Dosyalarını Derleyin
Proje kök dizininde, aşağıdaki komutla üretim derlemesini başlatın:
bashnpm run build
1Bu komut,
package.json
dosyasındakibuild
script’ini çalıştırır. Vite tabanlı React projesinde, kaynak kodunuzu derleyerek optimize edilmiş statik dosyalara (HTML, CSS, JS, diğer kaynaklar) dönüştürür ve sonucu projededist
klasörüne yazar. Derleme tamamlandığında terminalde başarı iletisi görürsünüz.ServBay’de Statik Site Olarak Yayınlama
Üretim derlemesiyle oluşturulan
dist
klasörü, doğrudan web sunucusunda yayınlanabilir durumdadır. ServBay’de bu klasöre yönelik bir statik site yapılandırabilirsiniz.ServBay arayüzünde Websites bölümüne gidin. Ekle butonu ile yeni bir site tanımlayın:
- Ad (Name):
ServBay React Prod
(açıklayıcı bir isim) - Alan Adı (Domain):
servbay-react.servbay.demo
(servisi ile demo için özel, geliştirme ile üretimin ayrılması için farklı) - Site Türü (Site Type):
Statik (Static)
seçin - Site Kök Dizini (Website Root Directory): Proje derleminden sonra oluşan
dist
klasörünü gösterin:- macOS:
/Applications/ServBay/www/servbay-react-demo/dist
- Windows:
C:\ServBay\www\servbay-react-demo\dist
- macOS:
Kaydedin. ServBay entegre web sunucusu ile
dist
içindeki statik dosyaları doğrudan yayımlar.- Ad (Name):
Üretim Sitesine Erişim
Tarayıcınızda yeni tanımlanan üretim alan adına bağlanın:
https://servbay-react.servbay.demo
.Artık optimize edilmiş, derlenmiş prodüksiyon sitesi üzerinden erişim sağlayabilirsiniz. Bu site de ServBay’in otomatik SSL desteğiyle güvenlidir.
Özet
Yukarıdaki adımlarla ServBay kullanarak yerel ortamda bir React projesi oluşturmayı, geliştirme modunda ters proxy ile canlı sunum sağlamayı ve üretim modunda statik dosya yayını ile hazır bir web sitesi sunmayı öğrendiniz. ServBay’in macOS ve Windows desteği, entegre Node.js ortamı, esnek site yapılandırmaları (ters proxy ve statik servis) ve otomatik SSL sertifikası ile React geliştiricileri için kurulumu ve yönetimi son derece kolay bir geliştirme deneyimi sunar. Artık React uygulamanızı bu altyapı üzerinde geliştirebilir, test edebilir ve yayınlayabilirsiniz.