macOS Yerel Ortamında ServBay ile React Projesi Oluşturma ve Çalıştırma

React Nedir?

React, Meta (eski adıyla Facebook) ve topluluk üyeleri tarafından geliştirilen, kullanıcı arayüzleri (UI) oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Bileşen tabanlı yaklaşımı sayesinde, geliştiriciler karmaşık ve sürdürülebilir tek sayfalık uygulamalar (SPA) ve büyük ölçekli web uygulamalarının görünüm katmanını verimli bir şekilde oluşturabilir. React'ın temel avantajları arasında bildirisel programlama yapısı, yüksek performanslı sanal DOM güncelleme mekanizması ve kapsamlı bir topluluk ekosistemi yer alır.

React'ın Temel Özellikleri ve Avantajları

• Bileşen Tabanlı Geliştirme: Karmaşık arayüzleri bağımsız ve tekrar kullanılabilir bileşenlere ayırarak kodun sürdürülebilirliğini ve tekrar kullanımını artırır.
• Bildirisel Görünümler: Arayüz durumunu basitçe tanımlarsınız, DOM'un güncellenmesini React yönetir, böylece UI geliştirme işleri kolaylaşır.
• Sanal DOM (Virtual DOM): DOM'un bellekte tutulan bir kopyası ile çalışarak, farklılıkları tespit eder ve gerçek DOM işlemlerini minimize ederek yüksek performans sağlar.
• Tek Yönlü Veri Akışı: Verilerin yukarıdan aşağıya aktığı bir yapı ile, uygulama durumundaki değişikliklerin takibi ve yönetimi çok daha kolaydır.
• JSX: JavaScript kodu içinde HTML'e benzer bir yapı kullanma imkanı sağlayan bir sözdizimi uzantısıdır, kodun okunabilirliğini artırır.
• Güçlü Ekosistem: React Router, Redux/Zustand/MobX, Material UI gibi pek çok üçüncü parti kütüphane ve büyük bir topluluk desteğine sahiptir. Bu ekosistem; durum yönetimi, yönlendirme, UI bileşenleri ve daha fazlasını kapsar.

React ile geliştiriciler, modern ve yüksek performanslı web uygulamalarını çok daha hızlı ve verimli bir şekilde geliştirebilirler.

ServBay ile React Geliştirme & Üretim Ortamı Kurulumu

ServBay, macOS kullanıcıları için Node.js gibi birçok paket içeren güçlü bir yerel web geliştirme ortamıdır. Bu rehberde, ServBay'in Node.js ortamı ve Websites özelliğinden faydalanarak adım adım bir React projesinin oluşturulması, yapılandırılması ve çalıştırılması anlatılmaktadır. Geliştirme modunda ters proxy, dağıtım (production) modunda ise statik dosya servisinin nasıl kurulacağı örneklendirilmektedir.

Ön Gereksinimler

Başlamadan önce aşağıdakilerin hazır olduğuna emin olun:

1. ServBay'ın Kurulumu: macOS cihazınızda ServBay'ı başarılı bir şekilde yükleyip çalıştırdınız.
2. Node.js Paketi Kurulumu: ServBay arayüzü veya terminal üzerinden Node.js paketini yüklediniz. Ayrıntılı adımlar için ServBay ile Node.js Paketi Kurulumu dokümanını inceleyebilirsiniz. ServBay, Node.js sürüm ve ortam değişkenlerini otomatik olarak yönetir.

React Projesi Oluşturma

Modern frontend projelerini hızla başlatmak için Vite aracını kullanacağız. Vite, hızlı başlatma süresi ve anında Hot Module Replacement (HMR) ile gelişmiş bir deneyim sunar ve klasik create-react-app yerine yeni React projelerinde yaygın olarak tercih edilir.

1. Terminalden Site Kök Dizininize Gidin

   Terminal uygulamanızı açın. ServBay'in önerdiği varsayılan web sitesi kök dizini /Applications/ServBay/www yoludur. Bu dizine geçmek için:

   cd /Applications/ServBay/www

2. Vite ile Yeni React Projesi Oluşturun

   Aşağıdaki komutu çalıştırarak create-vite aracı ile servbay-react-demo adında yeni bir proje oluşturun ve react şablonunu seçin:

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

   • npx npm paketlerini global yüklemeden anında çalıştırmaya yarar ve her zaman en güncel create-vite sürümünü kullanmanızı sağlar.
   • create-vite Vite’in resmi proje başlatıcısıdır.
   • servbay-react-demo oluşturulacak proje klasörünüzün adıdır.
   • --template react React şablonunun kullanılacağını belirtir.

   Ekrandaki yönergeleri takip ederek proje kurulumunu tamamlayın.

3. Proje Dizinine Girin ve Bağımlılıkları Yükleyin

   Hazırladığınız proje dizinine girin ve npm ile gerekli bağımlılıkları yükleyin:

   cd servbay-react-demo
   npm install

   • Dilerseniz, paket yöneticisi olarak Yarn ya da pnpm kullanıyorsanız yarn install veya pnpm install komutlarını da tercih edebilirsiniz.

React Proje İçeriğini Düzenleme (İsteğe Bağlı)

Kurulumu başarıyla tamamlayıp tamamlamadığınızı kontrol etmek için ana sayfa içeriğini hızlıca değiştirebiliriz.

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

   Proje dizininde, kullandığınız şablona göre (JavaScript veya TypeScript) src/App.jsx veya src/App.tsx dosyasını favori kod editörünüzle açın.

2. İçeriği Düzenleyin

   Ana içeriği oluşturan render bölümünü bulun ve "Hello ServBay!" metni ile değiştirin:

   // ... diğer importlar ...
   import './App.css';
   
   function App() {
     // ... diğer kodlar ...
     return (
       <>
         {/* ... diğer elemanlar ... */}
         <h1>Hello ServBay!</h1>
         {/* ... diğer elemanlar ... */}
       </>
     );
   }
   
   export default App;

   Dosyanızı kaydedin.

Geliştirme Moduna Geçiş

Geliştirme aşamasında, sıcak modül güncelleme (HMR) gibi kolaylıklar sunan bir yerel geliştirme sunucusu kullanılır. ServBay, dış isteklerin geliştirme sunucunuza yönlendirilmesini sağlayan bir ters proxy sunucusu ile çalışabilir.

1. Terminalde Geliştirme Sunucusunu Başlatın

   servbay-react-demo proje kök dizininde aşağıdaki komut ile Vite geliştirme sunucusunu belirli bir portta (ör: 8585) başlatın:

   npm run dev -- --port 8585

   • npm run dev komutu, genellikle Vite geliştirme sunucusunu başlatan dev script’ini çalıştırır.
   • -- --port 8585 ile ilgili portu belirtmiş olursunuz.

   Sunucu başladığında genellikle terminalde örneğin http://localhost:8585 gibi bir adres gösterilir. Terminal penceresini açık bırakın, sunucuyu kapatmayın.

2. ServBay’de Site Ters Proxy’sini Yapılandırın

   ServBay uygulamasını açın ve Websites bölümüne gidin. Yeni bir web sitesi eklemek için ekle düğmesine tıklayın ve aşağıdaki gibi ayarlayın:

   • Ad (Name): ServBay React Dev (Açıklayıcı bir isim)
   • Alan Adı (Domain): servbay-react-dev.servbay.demo (ServBay markasına uygun demo alan adı)
   • Site Türü (Site Type): Ters Proxy (Reverse Proxy) olarak seçin
   • Proxy IP: 127.0.0.1 (Sunucu yerel olarak çalışıyor)
   • Proxy Portu: 8585 (Başlattığınız geliştirme sunucusunun portu)

   Kaydedin. ServBay, dahili web sunucusunda (Caddy veya Nginx) servbay-react-dev.servbay.demo alan adına gelen istekleri http://127.0.0.1:8585 adresine yönlendirir.

   ServBay’de web sitesi eklemeye dair detaylı adımlar için ServBay Web Sitesi Yönetimi dokümanını inceleyebilirsiniz.

3. Geliştirme Sitesini Ziyaret Edin

   Tarayıcınızda az önce ayarladığınız alan adını açın: https://servbay-react-dev.servbay.demo

   • ServBay’in gelişmiş özellikleri sayesinde geliştirici siteniz otomatik SSL sertifikası (ServBay User CA veya ServBay Public CA tarafından imzalanmış) ile korunmuş olur ve HTTPS ile güvenli bağlantı sağlanır. Daha fazla bilgi için ServBay ile Sitenizi SSL ile Koruma dokümanına bakabilirsiniz.
   • Kod editöründe dosyalarınızı değiştirip kaydettiğinizde sayfa tarayıcıda otomatik olarak güncellenecektir; bu Hot Module Replacement (HMR) özelliğidir.

Üretim Ortamı İçin Derleme

React projenizi tamamladığınızda ve dağıtıma hazır olduğunda, optimize edilmiş bir üretim sürümü oluşturmanız gerekir.

1. Terminalde Üretim Derlemesini Oluşturun

   Proje kökünde aşağıdaki komutu çalıştırın:

   npm run build

   Bu komut, package.json dosyasında tanımlı build script’ini çalıştırır. Vite tabanlı React projelerinde kaynak kodunuzu derler, paketler ve optimize edilmiş statik dosyalar (HTML, CSS, JS, medya dosyaları) olarak genellikle dist klasörüne çıkarır. Derlemeyi başarıyla tamamladığında terminalde bir bildirim göreceksiniz.

2. ServBay ile Statik Dosya Sunumu Ayarlayın

   Üretim derlemesi sonucu oluşan dist klasörü doğrudan bir web sunucusu tarafından servis edilebilen dosyaları içerir. ServBay’de bu dizini gösterecek şekilde statik site tanımlayabiliriz.

   ServBay uygulamasında Websites bölümüne gidin ve aşağıdaki gibi yeni bir web sitesi ekleyin:

   • Ad (Name): ServBay React Prod (Açıklayıcı bir isim)
   • Alan Adı (Domain): servbay-react.servbay.demo (Üretim ve geliştirme ortamınız için farklı bir demo domain)
   • Site Türü (Site Type): Statik (Static) seçili olmalı
   • Site Kök Dizini (Website Root Directory): /Applications/ServBay/www/servbay-react-demo/dist (Dağıtım dosyalarını içeren klasör)

   Kaydedin. ServBay dahili web sunucusunu ayarlayarak, dist klasöründeki dosyaları doğrudan ziyaretçilere sunmaya başlar.

3. Üretim Sitesini Ziyaret Edin

   Tarayıcıda belirlediğiniz üretim domainine gidin: https://servbay-react.servbay.demo

   Artık optimize edilmiş ve derlenmiş üretim sürümünü görüyorsunuz. Bu site de ServBay sayesinde otomatik olarak SSL destekli yayınlanmaktadır.

Özet

Yukarıdaki adımların ardından, ServBay ile macOS ortamında bir React projesi başarıyla oluşturup hem geliştirme modunda ters proxy hem de üretim modunda statik dosya servislerini yapılandırdınız. ServBay, yerel geliştirme ortamını kurma ve yönetme süreçlerini önemli ölçüde kolaylaştırır; özellikle dahili Node.js desteği, esnek site yapılandırmaları (ters proxy ve statik servis) ve otomatik SSL özellikleriyle React geliştiricileri için büyük bir avantaj sunar. Bundan sonra React uygulamanızda geliştirme, test ve dağıtım işlemlerine devam edebilirsiniz.