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:

1. ServBay’in Kurulması: ServBay’i sisteminize başarıyla yükleyip çalıştırmalısınız.
2. 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-appin yerine geçmiştir).

1. 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:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Vite ile Yeni React Projesi Oluşturun

   Aşağıdaki komutla, servbay-react-demo isimli, react şablonuna sahip yeni bir proje başlatınız:

   npx create-vite servbay-react-demo --template react

   • npx: 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 daima create-vitein 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.

3. 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:

   cd servbay-react-demo
   npm install

   • İsterseniz yarn install veya pnpm install da kullanabilirsiniz; tercihinize göre farklı bir paket yöneticisi seçebilirsiniz.

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.

1. src/App.jsx veya src/App.tsx Dosyasını Açın

   Kullandığınız editörden, proje klasörünüzde bulunan src/App.jsx (JavaScript şablonu seçtiyseniz) veya src/App.tsx (TypeScript şablonu seçtiyseniz) dosyasını açın.

2. İçeriği Değiştirin

   Ana içerik kısmını bulun ve ekrana "Hello ServBay!" yazacak şekilde düzenleyin:

   // ... 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;

   Dosyayı 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.

1. 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):

   npm run dev -- --port 8585

   • npm run dev, proje package.json dosyasındaki dev 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.

2. 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 istekleri http://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.

3. 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.

1. Üretim Dosyalarını Derleyin

   Proje kök dizininde, aşağıdaki komutla üretim derlemesini başlatın:

   npm run build

   Bu komut, package.json dosyasındaki build 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 projede dist klasörüne yazar. Derleme tamamlandığında terminalde başarı iletisi görürsünüz.

2. 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

   Kaydedin. ServBay entegre web sunucusu ile dist içindeki statik dosyaları doğrudan yayımlar.

3. Ü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.