创建并运行 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 提供的功能来管理和访问您的项目。