使用 ServBay 在 macOS 本地环境中创建和运行 React 项目

什么是 React？

React 是一个由 Meta（前身为 Facebook）及其社区维护的开源 JavaScript 库，专门用于构建用户界面（UI）。它以组件化的方式构建交互式 UI，使得开发者能够高效地创建复杂且可维护的单页应用（SPA）或大型 Web 应用的视图层。React 的核心优势在于其声明式编程范式、高效的虚拟 DOM 更新机制以及强大的社区生态系统。

React 的主要特性和优势

组件化开发： 将复杂的 UI 拆分为独立、可重用的组件，提高代码的可维护性和复用性。
声明式视图： 简单描述 UI 的状态，React 会负责更新 DOM 以匹配该状态，简化 UI 开发逻辑。
虚拟 DOM (Virtual DOM)： 在内存中维护一个 DOM 的虚拟表示，通过比较差异来最小化对实际 DOM 的操作，显著提升性能。
单向数据流： 数据自顶向下流动，使得应用的状态变化更易于追踪和理解。
JSX： 一种 JavaScript 语法扩展，允许在 JavaScript 代码中书写类似 HTML 的结构，增强代码的可读性。
强大的生态系统： 拥有庞大的社区支持和丰富的第三方库（如 React Router, Redux/Zustand/MobX, Material UI 等），覆盖状态管理、路由、UI 组件等各个方面。

使用 React，开发者可以更快速、更高效地构建现代化的、高性能的 Web 应用。

使用 ServBay 搭建 React 开发和生产环境

ServBay 是一个强大的本地 Web 开发环境，为 macOS 用户提供了包括 Node.js 在内的多种软件包。本指南将详细介绍如何利用 ServBay 的 Node.js 环境以及网站（Websites）功能，一步步创建、配置并运行一个 React 项目，包括设置开发模式的反向代理和生产模式的静态文件服务。

前提

在开始之前，请确保您已经完成以下准备工作：

安装 ServBay： 您的 macOS 系统上已成功安装并运行 ServBay。
安装 Node.js 软件包： 通过 ServBay 的界面或命令行安装了 Node.js 软件包。您可以参考 ServBay 安装 Node.js 软件包的文档获取详细步骤。ServBay 会自动管理 Node.js 的版本和环境变量。

创建 React 项目

我们将使用现代化的前端构建工具 Vite 来快速创建一个 React 项目。Vite 提供了极快的冷启动速度和即时热模块更新（HMR），显著提升开发体验，已成为创建新 React 项目的主流选择之一（替代了传统的 create-react-app）。

打开终端并导航到网站根目录
打开您的终端应用程序。 ServBay 推荐的默认网站根目录是 /Applications/ServBay/www。切换到此目录：
bash
```
cd /Applications/ServBay/www
```
1
使用 Vite 创建新的 React 项目
执行以下命令，使用 create-vite 脚手架创建一个名为 servbay-react-demo 的新项目，并选择 react 模板：
bash
```
npx create-vite servbay-react-demo --template react
```
1
- npx 是 npm 包执行器，允许您运行 npm 注册表上的命令行工具，而无需全局安装它们。这确保您始终使用最新版本的 create-vite。
- create-vite 是 Vite 官方的项目脚手架工具。
- servbay-react-demo 是您项目文件夹的名称。
- --template react 指定使用 React 模板来初始化项目结构。
按照屏幕上的提示完成项目创建。
进入项目目录并安装依赖
进入新创建的项目目录，并使用 npm 安装项目所需的依赖包：
bash
```
cd servbay-react-demo
npm install
```
1
2
- 您也可以使用 yarn install 或 pnpm install 如果您更喜欢 Yarn 或 pnpm 作为包管理器。

修改 React 项目内容 (可选)

为了验证设置是否成功，我们可以简单修改项目的首页内容。

打开 src/App.jsx 或 src/App.tsx 文件
使用您喜欢的代码编辑器打开项目目录下的 src/App.jsx（如果您选择了 JavaScript 模板）或 src/App.tsx（如果您选择了 TypeScript 模板）文件。

修改内容

找到渲染主要内容的代码部分，将其修改为显示 "Hello ServBay!"：

javascript

// ... 其他导入 ...
import './App.css';

function App() {
  // ... 其他代码 ...
  return (
    <>
      {/* ... 其他元素 ... */}
      <h1>Hello ServBay!</h1>
      {/* ... 其他元素 ... */}
    </>
  );
}

export default App;

保存文件。

进入开发模式

在开发阶段，我们通常会运行一个本地开发服务器，它提供了热模块更新（HMR）等功能，使得开发过程更加便捷。ServBay 可以通过反向代理（Reverse Proxy）将外部请求转发到这个开发服务器。

在终端中启动开发服务器
在项目根目录 servbay-react-demo 中，执行以下命令启动 Vite 开发服务器，并指定一个端口（例如：8585）：
bash
```
npm run dev -- --port 8585
```
1
- npm run dev 运行项目 package.json 文件中定义的 dev 脚本，通常就是启动 Vite 开发服务器。
- -- --port 8585 将端口参数传递给 Vite 命令。
开发服务器启动后，通常会在终端中显示本地访问地址，例如 http://localhost:8585。请保持终端窗口打开，不要关闭此服务器。
在 ServBay 中配置网站反向代理
打开 ServBay 应用程序界面。导航到 网站 (Websites) 功能区。点击添加按钮创建一个新的网站配置：
- 名称 (Name)： ServBay React Dev (一个描述性的名字)
- 域名 (Domain)： servbay-react-dev.servbay.demo (使用 ServBay 品牌相关的演示域名)
- 网站类型 (Site Type)： 选择 反向代理 (Reverse Proxy)
- 代理 IP (Proxy IP)： 127.0.0.1 (开发服务器运行在本地)
- 代理端口 (Proxy Port)： 8585 (与您启动开发服务器时指定的端口一致)
保存配置。ServBay 会自动应用更改，并配置内置的 Web 服务器（Caddy 或 Nginx）将指向 servbay-react-dev.servbay.demo 的请求转发到 http://127.0.0.1:8585。
关于如何在 ServBay 中添加网站的详细步骤，请参考 ServBay 网站管理文档。
访问开发网站
打开您的浏览器，访问您刚刚配置的域名：https://servbay-react-dev.servbay.demo。
- 得益于 ServBay 的强大功能，您的本地开发网站自动配置了 SSL 证书（由 ServBay User CA 或 ServBay Public CA 签发），因此您可以通过 HTTPS 安全地访问。有关 ServBay SSL 功能的更多信息，请参考使用 SSL 保护您的网站。
- 现在，您在代码编辑器中修改项目文件并保存时，浏览器中的页面应该会自动更新，这就是热模块更新（HMR）在工作。

构建生产版本

当您的 React 项目开发完成并准备部署时，您需要生成一个优化后的生产版本。

在终端中构建生产版本
在项目根目录 servbay-react-demo 中，执行以下命令进行生产构建：
bash
```
npm run build
```
1
这个命令会运行项目 package.json 文件中定义的 build 脚本。对于基于 Vite 的 React 项目，它会将您的源代码编译、打包并优化成一组静态文件（HTML, CSS, JavaScript, 静态资源等），通常输出到项目根目录下的 dist 文件夹中。构建完成后，终端会显示构建成功的消息。
在 ServBay 中设置静态文件服务
生产构建生成的 dist 文件夹包含了可以直接通过 Web 服务器提供的静态文件。在 ServBay 中，我们可以配置一个静态网站来指向这个目录。
打开 ServBay 应用程序界面，导航到 网站 (Websites) 功能区。点击添加按钮创建一个新的网站配置：
- 名称 (Name)： ServBay React Prod (一个描述性的名字)
- 域名 (Domain)： servbay-react.servbay.demo (使用 ServBay 品牌相关的演示域名，与开发域名区分)
- 网站类型 (Site Type)： 选择 静态 (Static)
- 网站根目录 (Website Root Directory)： /Applications/ServBay/www/servbay-react-demo/dist (指向您项目构建后生成的 dist 文件夹)
保存配置。ServBay 会配置内置的 Web 服务器直接提供 dist 目录中的静态文件。
访问生产网站
打开您的浏览器，访问您刚刚配置的生产域名：https://servbay-react.servbay.demo。
现在您看到的是经过优化和构建的生产版本网站。同样，这个网站也通过 ServBay 自动获得了 SSL 支持。

总结

通过以上步骤，您已经成功地使用 ServBay 在 macOS 本地环境中创建了一个 React 项目，并分别配置了开发模式的反向代理和生产模式的静态文件服务。ServBay 简化了本地开发环境的搭建和管理，特别是其内置的 Node.js 支持、灵活的网站配置（包括反向代理和静态服务）以及自动 SSL 功能，为 React 开发者提供了极大的便利。您可以继续在此基础上进行开发、测试和部署您的 React 应用。

使用 ServBay 在 macOS 本地环境中创建和运行 React 项目 ​

什么是 React？ ​

React 的主要特性和优势 ​

使用 ServBay 搭建 React 开发和生产环境 ​

前提 ​

创建 React 项目 ​

修改 React 项目内容 (可选) ​

进入开发模式 ​

构建生产版本 ​

总结 ​