在前端开发中，使用基于 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 init npm install express --save
上述命令会初始化一个新的 npm 项目，并安装 Express.js。接下来，创建一个名为 server.js 的文件，用于编写 Express.js 应用程序。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
上述代码创建了一个 Express.js 应用程序，并实现了一个简单的路由 /，该路由会返回字符串 Hello World!。同时，该应用程序会在本地监听端口 3000，并输出一条日志。
为了运行 Express.js 应用程序，需要执行以下命令：
node server.js
此时，可以在浏览器中访问 http://localhost:3000 来查看应用程序是否正常运行。如果一切正常，页面会显示字符串 Hello World!。
创建 React 前端应用
接下来，我们需要创建一个 React 应用来实现前端的 UI。同样地，在命令行中进入项目目录，执行以下命令：
npm install -g create-react-app create-react-app client cd client npm start
上述命令分别安装了 create-react-app 工具，用于创建一个新的 React 应用。然后，进入 client 目录，并启动 React 应用。此时，浏览器会默认打开 http://localhost:3000，页面会显示一个 React 应用的示例页面。
现在，我们需要集成 Express.js 后端应用和 React 前端应用。为此，我们需要对 React 应用进行一些修改。
首先，我们需要安装一个代理库，用于将前端请求转发到后端服务。运行以下命令：
npm install http-proxy-middleware --save
然后，我们需要在 package.json 文件中添加代理配置：
-- -------------------- ---- -------
-
------- ---------
---------- --------
---------- -----
-------- -
------- -
--------- -----------------------
-
--
--------------- -
------------------------ ---------
-------- -----------
------------ -----------
---------------- -------
--
---------- -
-------- -------------- -------
-------- -------------- -------
------- -------------- -----
-
-上述配置中，将 /api 路径代理到后端服务的地址。接下来，在 React 应用程序中，使用代理库发送请求。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---- ---- -------------
------ ------------
------ ----- ---- --------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
-------- --
-
-
------------------- -
-----------------
-------------- -- -
---------------
-------- -------------
---
--
------------ -- -
-------------------
---
-
-------- -
------ -
---- ----------------
------- -----------------------
---- ---------- -------------------- ---------- --
---
--------------------
----
---------
------
--
-
-
------ ------- ----上述代码通过 axios 库发送 HTTP GET 请求，并在响应中获取字符串 Hello World!。然后，将该字符串渲染到页面上。
部署应用
最后，我们需要将应用部署到服务器上。这里以 Heroku 为例，介绍如何将应用部署到 Heroku 上。
首先，需要在 Heroku 上创建一个账号，并安装 Heroku CLI 工具。然后，在命令行中登录 Heroku 账户，并创建一个新的应用。
heroku login heroku create myapp
上述命令会创建一个名为 myapp 的新的应用。接下来，需要将代码推送到 Heroku 上。
首先，在 server.js 中添加以下代码：
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}上述代码用于在生产环境中提供静态文件服务，并在其他情况下返回 React 应用程序的 HTML 文件。
然后，在命令行中执行以下命令：
npm run build git init git add . git commit -m "Initial commit" heroku git:remote -a myapp git push heroku master
上述命令会编译 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