随着 Web 应用程序越来越复杂，需要使用一种全栈开发框架来提高开发效率。Express.js 是一个非常流行的 Node.js Web 框架，而 React.js 是一个快速构建复杂 UI 的 JavaScript 库。将这两种技术组合起来，可以创建功能强大的全栈应用程序。本文将介绍如何使用 Express.js 和 React.js 创建全栈应用程序的详细指南，并附带示例代码。
前置知识
在开始本文之前，您需要掌握以下知识：
- Node.js 知识基础
- npm 包管理器
- JavaScript 基础
- React.js 基础
- Express.js 基础
环境配置
在开始使用 Express.js 和 React.js 构建全栈应用程序之前，需要先安装 Node.js 和 npm。在安装完成 Node.js 和 npm 后，我们可以使用以下命令在终端中安装 create-react-app：
npm install -g create-react-app
安装完成 create-react-app 后，我们可以使用以下命令在终端中创建一个新的 React.js 应用程序：
create-react-app my-app
创建完成后，进入 my-app 目录并运行以下命令启动 React.js 应用程序：
cd my-app npm start
在应用程序启动后，我们应该能够在浏览器中看到一个指向 http://localhost:3000 的 URL。
安装完成 React.js 后，我们可以使用以下命令在终端中安装 Express.js：
npm install express
创建 Express.js 应用程序
完成了 React.js 和 Express.js 的安装之后，我们可以开始创建我们的全栈应用程序了。首先，我们需要在我们的项目根目录中创建一个名为 server.js 的文件。server.js 文件将包含我们的 Express.js 代码，用于处理我们的服务器端逻辑。
这里是一个简单的 Express.js 应用程序示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ---- - ----- ------------ ----- ---- -- - --------------- -------- --- ---------------- -- -- - ------------------- --------- -- ---- ---------- ---
在上面的示例中，我们使用 require 导入了 Express.js 模块，并创建了一个 Express.js 应用程序实例。接下来，我们使用 app.get() 方法定义了我们的根路由。当用户访问 http://localhost:3001/ 时，服务器将返回“Hello world”。
最后，我们使用 app.listen() 方法设置服务器端口并启动 Express.js 应用程序。
集成 React.js
现在我们已经创建了一个简单的 Express.js 服务器，接下来我们需要将 React.js 集成进来。我们将使用 React.js 命令行工具 create-react-app 生成的默认项目。
首先，我们需要在 Express.js 应用程序中设置静态文件路径，以便我们可以在客户端中提供 React.js 应用程序的资源：
app.use(express.static('client/build'));接下来，我们需要创建一个名为 client 的文件夹，其中包含用 create-react-app 生成的默认 React.js 项目。我们可以使用以下命令将 React.js 项目复制到 client 文件夹中：
cp -r /path/to/my-app/build client/
在复制完成后，我们可以在 server.js 文件中使用以下代码启动 Express.js 服务器：
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '/client/build/index.html'));
});在上面的代码中，我们使用 app.get() 方法将所有 get 请求路由到 client/build/index.html 文件。如果请求的路由无效，则返回 index.html 文件，React.js 应用程序将负责渲染正确的内容。
完整的示例代码
下面是创建一个使用 Express.js 和 React.js 的全栈应用程序的完整示例代码。
server.js：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ---- - ----- ---------------------------------------- ------------ ----- ---- -- - --------------- -------- --- ------------ ----- ---- -- - --------------------------------- ----------------------------- --- ---------------- -- -- - ------------------- --------- -- ---- ---------- ---
React.js 代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
---- ----------------
--------- ----------
------
--
-
------ ------- ----总结
本文详细介绍了如何使用 Express.js 和 React.js 创建全栈应用程序，并提供了示例代码和步骤，以便您可以轻松开始。通过将这两种技术组合起来，可以创建出功能强大的 Web 应用程序，使得软件开发变得更为高效和便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64606c81968c7c53b021c067