React Projesi Oluşturma ve Çalıştırma

React Nedir?

React, Facebook tarafından bakımı yapılan, kullanıcı arayüzleri oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Görünüm katmanını oluşturmaya odaklanır ve bileşen tabanlı yaklaşımı sayesinde geliştiricilerin karmaşık kullanıcı arayüzlerini verimli bir şekilde inşa etmelerini sağlar. React'in temel felsefesi bileşenler ve tek yönlü veri akışıdır; bu da kodun daha anlaşılır ve bakımı kolay olmasını sağlar.

React'in Ana Özellikleri ve Avantajları

• Bileşen Tabalı: Kullanıcı arayüzünü bileşenler aracılığıyla oluşturur, bu da kodun daha modüler ve yeniden kullanılabilir olmasını sağlar.
• Sanal DOM: React, performansı optimize etmek için sanal DOM kullanır ve yalnızca gerekli olduğunda gerçek DOM'u günceller.
• Tek Yönlü Veri Akışı: Veriler, bileşenler arasında tek yönlü olarak akar ve bu da uygulamanın durum yönetimini daha net ve öngörülebilir kılar.
• Güçlü Topluluk ve Ekosistem: React, geniş bir topluluğa ve zengin üçüncü taraf kütüphane desteğine sahiptir, bu da geliştirmenin daha kolay olmasını sağlar.

React kullanarak, geliştiriciler modern ve hızlı yanıt veren web uygulamalarını daha verimli bir şekilde inşa edebilirler.

ServBay Kullanarak React Projesi Oluşturma ve Çalıştırma

Bu makalede, ServBay'in sağladığı Node.js ortamını kullanarak bir React projesi oluşturup çalıştıracağız. ServBay'in 'host' özelliğini kullanarak bir web sunucusu ayarlayacağız ve ters proxy ve statik dosya hizmeti üzerinden projeye erişeceğiz.

React Projesi Oluşturma

1. Projeyi Başlatma

   İlk olarak, ServBay tarafından sağlanan Node.js ortamını kurduğunuzdan emin olun. Ardından, aşağıdaki komutlarla yeni bir React projesi başlatın:

   cd /Applications/ServBay/www
   npx create-react-app servbay-react-app

2. Bağımlılıkları Yükleme

   Proje dizinine girin ve bağımlılıkları yükleyin:

   cd servbay-react-app
   npm install

React Projesi Çıktısını Değiştirme

1. src/App.js Dosyasını Değiştirme

   src/App.js dosyasını açın ve içeriği değiştirerek "Hello ServBay!" yazısını web sayfasında çıkacak şekilde ayarlayın:

   import React from 'react';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <h1>Hello ServBay!</h1>
         </header>
       </div>
     );
   }
   
   export default App;

Geliştirme Moduna Girme

1. Geliştirme Sunucusunu Çalıştırma

   Geliştirme sunucusunu çalıştırın ve portu belirtin (örneğin: 8585):

   npm start -- --port 8585

   Bu, yerel olarak bir geliştirme sunucusu başlatacak ve port 8585'i açacaktır.

2. ServBay'de Host Ters Proxy Ayarlarını Yapma

   ServBay'in 'host' özelliğini kullanarak geliştirme sunucusuna ters proxy ile erişim sağlayın. ServBay'in 'host' ayarlarında yeni bir ters proxy ekleyin:

   • Adı: My first React dev site
   • Alan Adı: servbay-react-test.dev
   • Host Türü: Ters Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Detaylı ayarlar için Nodejs geliştirme sitesi ekleme adımlarını inceleyin.

3. Geliştirme Modunu Ziyaret Etme

   Tarayıcınızı açın ve https://servbay-react-test.dev adresine gidin, projeyi gerçek zamanlı izleyin. ServBay, özelleştirilmiş alan adları ve ücretsiz SSL sertifikalarını desteklediği için daha yüksek güvenlik avantajlarından yararlanabilirsiniz.

Üretim Sürümü Oluşturma

1. Üretim Sürümünü Oluşturma

   Geliştirme tamamlandığında, aşağıdaki komutla üretim sürümünü oluşturun:

   npm run build

   Bu işlem tamamlandığında, oluşturulan statik dosyalar build dizininde yer alacaktır.

2. Statik Dosya Hizmetini Ayarlama

   ServBay'in 'host' özelliğini kullanarak üretim sürümünü statik dosya hizmeti aracılığıyla erişilebilir hale getirin. ServBay'in 'host' ayarlarında yeni bir statik site ekleyin:

   • Adı: My first React production site
   • Alan Adı: servbay-react-test.prod
   • Host Türü: Statik
   • Site Kök Dizin: /Applications/ServBay/www/servbay-react-app/build

3. Üretim Modunu Ziyaret Etme

   Tarayıcınızı açın ve https://servbay-react-test.prod adresine gidin, oluşturulan üretim sürümünü inceleyin. ServBay'in özelleştirilmiş alan adları ve ücretsiz SSL sertifikaları sayesinde, web siteniz daha yüksek güvenlik ve güvenilirlik seviyesine sahip olacaktır.

Yukarıdaki adımlarla, bir React projesini başarıyla oluşturup çalıştırdınız ve ServBay'in sağladığı özellikleri kullanarak projenizi yönetip erişebilir hale getirdiniz.