建立並運行 React 專案

什麼是 React？

React 是一個用於構建用戶介面的開源 JavaScript 庫，由 Facebook 維護。它專注於構建視圖層，並通過組件化的方式使開發者可以高效地構建複雜的用戶介面。React 的核心理念是組件和單向資料流，這使得代碼更易於理解和維護。

React 的主要特性和優勢

• 組件化：通過組件來構建用戶介面，使代碼更加模組化和可重用。
• 虛擬 DOM：React 使用虛擬 DOM 來優化性能，只有在必要時才會更新實際的 DOM。
• 單向資料流：資料在組件間單向流動，使應用的狀態管理更加清晰和可預測。
• 強大的社群和生態系統：React 擁有龐大的社群和豐富的第三方庫支援，使得開發更加便捷。

使用 React，可以幫助開發者更高效地構建現代化的、回應迅速的 Web 應用。

使用 ServBay 建立並運行 React 專案

在這篇文章中，我們將使用 ServBay 提供的 Node.js 環境來建立並運行一個 React 專案。我們將使用 ServBay 的『主機』功能來設置 Web 伺服器，並通過反向代理和靜態文件服務來實現專案的訪問。

建立 React 專案

1. 初始化專案

   首先，確保您已經安裝了 ServBay 提供的 Node.js 環境。然後，使用以下命令初始化一個新的 React 專案：

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

2. 安裝依賴

   進入專案目錄並安裝依賴：

   cd servbay-react-app
   npm install

修改 React 專案輸出內容

1. 修改 src/App.js 文件

   打開 src/App.js 文件，修改內容使網頁輸出 "Hello ServBay!"：

   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;

進入開發模式

1. 運行開發伺服器

   啟動開發伺服器並指定端口（例如：8585）：

   npm start -- --port 8585

   這將會在本地啟動一個開發伺服器，並暴露端口 8585。

2. 配置 ServBay 主機反向代理

   使用 ServBay 的『主機』功能，通過反向代理來訪問開發伺服器。在 ServBay 的『主機』設置中，添加一個新的反向代理：

   • 名字：My first React dev site
   • 域名：servbay-react-test.dev
   • 主機類型：反向代理
   • IP：127.0.0.1
   • 端口：8585

   詳細設置步驟請參考添加Nodejs開發的網站。

3. 訪問開發模式

   打開瀏覽器，訪問 https://servbay-react-test.dev，實時查看專案。由於 ServBay 支援自定義域名以及免費的 SSL 證書，您將享受到更高的安全性。

建立生產版本

1. 建立生產版本

   當開發完成後，使用以下命令建立生產版本：

   npm run build

   建立完成後，生成的靜態文件將位於 build 目錄中。

2. 設置靜態文件服務

   使用 ServBay 的『主機』功能，通過靜態文件服務來訪問生產版本。在 ServBay 的『主機』設置中，添加一個新的靜態網站：

   • 名字：My first React production site
   • 域名：servbay-react-test.prod
   • 主機類型：靜態
   • 網站根目錄：/Applications/ServBay/www/servbay-react-app/build

3. 訪問生產模式

   打開瀏覽器，訪問 https://servbay-react-test.prod，查看構建後的生產版本。通過 ServBay 的自定義域名和免費的 SSL 證書，您的網站將具有更高的安全性和可信度。

通過以上步驟，您成功建立並運行了一個 React 專案，並使用 ServBay 提供的功能來管理和訪問您的專案。