在现代 Web 应用开发中，前端框架和后端框架的选择非常重要。Express.js 是一个流行的 Node.js Web 应用框架，它提供了快速开发 Web 应用的工具和插件。React 是一个流行的 JavaScript 库，用于构建用户界面。它提供了可重用的组件和状态管理工具。在本文中，我们将探讨如何使用 Express.js 和 React 构建 Web 应用。
第一步：搭建 Express.js 后端
首先，我们需要安装 Node.js 和 Express.js。在命令行中输入以下命令：
--- ------- ------- ------
这将安装 Express.js 并将其添加到我们的项目中。接下来，我们将创建一个 Express.js 应用程序。在项目根目录中创建一个名为 server.js 的文件，并输入以下代码：
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- --------- -- ---- ----------- ---
在这个例子中，我们创建了一个 Express.js 应用程序，并将其监听在本地主机的端口 3000 上。当访问根路径时，我们将返回一个 "Hello World!" 消息。
第二步：添加 React 前端
接下来，我们将添加 React 前端。在命令行中输入以下命令：
--- ---------------- ------
这将创建一个名为 client 的新项目，并在其中添加 React。我们可以在 client/src 文件夹中找到 React 应用程序的代码。
在 client/src 中创建一个名为 App.js 的文件，并输入以下代码：
------ ----- ---- --------
------ ------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
--------- -----------
---------
------
--
-
------ ------- ----在这个例子中，我们创建了一个 React 组件，它将渲染一个 "Hello World!" 消息。
第三步：将 React 前端集成到 Express.js 后端
现在，我们需要将 React 前端集成到 Express.js 后端中。我们将使用 create-react-app 提供的打包工具将 React 应用程序构建为静态文件，并将其放置在 Express.js 应用程序的公共目录中。
首先，在命令行中进入 client 目录，并输入以下命令：
--- --- -----
这将使用 create-react-app 提供的打包工具将 React 应用程序构建为静态文件，并将其放置在 client/build 目录中。
接下来，在 server.js 文件中添加以下代码：
----- ------- - ------------------- ----- --- - ---------- ----- ---- - ---------------- ------------------------------------------- ------------------ ------------ ----- ---- -- - --------------------------------- --------------- --------------- --- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- --------- -- ---- ----------- ---
在这个例子中，我们将 client/build 目录设置为静态资源目录，这样 Express.js 应用程序就可以提供 React 应用程序的静态文件。当访问根路径时，我们将返回 React 应用程序的 index.html 文件。
第四步：运行应用程序
现在，我们已经将 React 前端集成到 Express.js 后端中。在命令行中输入以下命令启动应用程序：
---- ---------
这将启动 Express.js 应用程序，并将其监听在本地主机的端口 3000 上。现在，我们可以在浏览器中访问 http://localhost:3000，并看到我们的应用程序正在运行。
总结
使用 Express.js 和 React 构建 Web 应用程序可以提高开发效率和代码质量。在本文中，我们探讨了如何使用 Express.js 和 React 构建 Web 应用程序。我们首先创建了一个 Express.js 后端，然后添加了一个 React 前端。最后，我们将 React 前端集成到 Express.js 后端中。这个过程包括了许多细节，但是通过本文中的示例代码和指导，您应该已经掌握了如何使用 Express.js 和 React 构建 Web 应用程序的基础知识。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f535af2b3ccec22fd597b8