在前端开发中，使用基于 JavaScript 的框架和库来开发 WEB 应用已成为主流。而 Express.js 和 React 作为最流行的基于 JavaScript 的框架和库之一，已经被广泛应用于 WEB 应用的开发中。本文将介绍如何使用 Express.js 和 React 创建完整的 WEB 应用。
环境准备
在开始创建 WEB 应用之前，需要准备好以下环境：
- Node.js：安装 Node.js 后，可以通过 npm（Node.js 的包管理器）来安装 Express.js 和 React。
- 代码编辑器：可以使用任何你喜欢的代码编辑器，如 Visual Studio Code、Sublime 等。
创建 Express.js 后端应用
首先，我们需要创建一个 Express.js 应用来作为后端服务。在命令行中进入项目目录，执行以下命令：
--- ---- --- ------- ------- ------
上述命令会初始化一个新的 npm 项目，并安装 Express.js。接下来，创建一个名为 server.js 的文件，用于编写 Express.js 应用程序。
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
上述代码创建了一个 Express.js 应用程序，并实现了一个简单的路由 /，该路由会返回字符串 Hello World!。同时，该应用程序会在本地监听端口 3000，并输出一条日志。
为了运行 Express.js 应用程序，需要执行以下命令：
---- ---------
此时，可以在浏览器中访问 http://localhost:3000 来查看应用程序是否正常运行。如果一切正常，页面会显示字符串 Hello World!。
创建 React 前端应用
接下来，我们需要创建一个 React 应用来实现前端的 UI。同样地，在命令行中进入项目目录，执行以下命令：
--- ------- -- ---------------- ---------------- ------ -- ------ --- -----
上述命令分别安装了 create-react-app 工具，用于创建一个新的 React 应用。然后，进入 client 目录，并启动 React 应用。此时，浏览器会默认打开 http://localhost:3000，页面会显示一个 React 应用的示例页面。
现在，我们需要集成 Express.js 后端应用和 React 前端应用。为此，我们需要对 React 应用进行一些修改。
首先，我们需要安装一个代理库，用于将前端请求转发到后端服务。运行以下命令：
--- ------- --------------------- ------
然后，我们需要在 package.json 文件中添加代理配置：
-
------- ---------
---------- --------
---------- -----
-------- -
------- -
--------- -----------------------
-
--
--------------- -
------------------------ ---------
-------- -----------
------------ -----------
---------------- -------
--
---------- -
-------- -------------- -------
-------- -------------- -------
------- -------------- -----
-
-上述配置中，将 /api 路径代理到后端服务的地址。接下来，在 React 应用程序中，使用代理库发送请求。
------ ------ - --------- - ---- --------
------ ---- ---- -------------
------ ------------
------ ----- ---- --------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
-------- --
-
-
------------------- -
-----------------
-------------- -- -
---------------
-------- -------------
---
--
------------ -- -
-------------------
---
-
-------- -
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
---
--------------------
----
---------
------
--
-
-
------ ------- ----上述代码通过 axios 库发送 HTTP GET 请求，并在响应中获取字符串 Hello World!。然后，将该字符串渲染到页面上。
部署应用
最后，我们需要将应用部署到服务器上。这里以 Heroku 为例，介绍如何将应用部署到 Heroku 上。
首先，需要在 Heroku 上创建一个账号，并安装 Heroku CLI 工具。然后，在命令行中登录 Heroku 账户，并创建一个新的应用。
------ ----- ------ ------ -----
上述命令会创建一个名为 myapp 的新的应用。接下来，需要将代码推送到 Heroku 上。
首先，在 server.js 中添加以下代码：
-- --------------------- --- ------------- -
----------------------------------------
----- ---- - ----------------
------------ ----- ---- -- -
------------------------------------ --------- -------- ---------------
---
-上述代码用于在生产环境中提供静态文件服务，并在其他情况下返回 React 应用程序的 HTML 文件。
然后，在命令行中执行以下命令：
--- --- ----- --- ---- --- --- - --- ------ -- -------- ------- ------ ---------- -- ----- --- ---- ------ ------
上述命令会编译 React 应用程序，并将代码推送到 Heroku 上。最后，在浏览器中访问 https://myapp.herokuapp.com 来查看应用程序是否正常运行。
结论
在本文中，我们介绍了使用 Express.js 和 React 创建完整的 WEB 应用的步骤。通过本文，你可以掌握以下技能：
- 创建 Express.js 后端应用
- 创建 React 前端应用
- 集成 Express.js 和 React 应用
- 部署应用到 Heroku 等云服务器
希望本文对你有所帮助。如果你想深入学习 Express.js 和 React 的更多内容，可以去官方网站学习。相信你会越来越喜欢使用 Express.js 和 React 来开发 WEB 应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67299f162e7021665e251f29