随着 Web 技术的迅猛发展，Web 应用程序的需求量越来越大。为了提升用户体验和交互性，以及加强应用程序的可维护性和可扩展性，前端技术日新月异，其中包括了方便快捷的前端框架 React 和后端框架 Express.js。本文主要介绍如何利用这两个框架构建 Web 应用程序。
前提条件
在介绍使用 Express.js 和 React 构建 Web 应用程序之前，我们需要确保以下前提条件已经满足：
- 你熟悉 JavaScript 和 ECMAScript 6 标准。
- 你已经安装了 Node.js 和 npm。
- 你已经了解了 Express.js 和 React 要点。
Express.js
Express.js 是一个基于 Node.js 的轻量级 Web 应用程序框架，它提供了一些工具和函数，帮助开发者快速建立基于 Web 的应用程序。使用 Express.js 构建复杂的 Web 应用程序变得更加容易。
下面是如何使用 Express.js 创建一个简单的 HTTP 服务器：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ----- ---- -- - ---------------- -------- -- ---------------- -- -- - ------------------- ------- -- ---- ------ --
通过上述代码，我们可以在本地主机的 3000 端口上启动一个 HTTP 服务器。我们可以使用 URL “http://localhost:3000/” 来访问该服务器，输出 “Hello, World!” 字符串。
React
React 是一个用于构建用户界面的 JavaScript 库。它专注于使开发者能够构建高性能、交互性强的 Web 应用程序。React 采用组件化开发的方式，将用户界面分解成小而独立的部分，使得开发者可以更加轻松地管理和维护代码。
下面是一个简单的 React 组件实例，用于输出一个“Hello, World!”的文本：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------- -
------ -
-----
---------- -----------
------
--
-
------ ------- ------Express.js 和 React 实战
接下来，将介绍如何使用 Express.js 和 React 一起构建 Web 应用程序，下述应用程序将是一个简单实用的 To-Do 应用程序。
步骤 1：创建 Express.js 后端
首先，我们需要创建一个 Express.js 服务器。我们可以使用 Express 应用程序生成器创建一个新的应用程序，并安装相关依赖项：
$ npm install express-generator -g $ express my-app --view=ejs $ cd my-app $ npm install
上述代码将安装 express-generator 工具，用于快速生成一个新的 Express.js 应用程序。我们在创建应用程序的过程中使用了 --view 参数指定了视图引擎为 ejs，并安装所有依赖项。
步骤 2：创建 React 前端
现在我们可以创建一个新的 React 应用程序，用于作为 To-Do 应用程序的前端界面。我们可以使用 create-react-app 工具创建一个新的 React 应用程序：
$ npx create-react-app my-app-frontend $ cd my-app-frontend
上述代码将在本地创建一个新的 React 应用程序，并自动安装所有必要的依赖项。
步骤 3：连接 React 前端和 Express.js 后端
我们需要通过一些手段让 Express 后端与 React 前端进行通信，可以通过 CORS 或者 Proxy 来实现这一功能。
- CORS 方式
我们可以使用 CORS（跨源资源共享）方式连接 Express 后端和 React 前端。使用 CORS 方式连接时，需要在 Express.js 后端应用程序中启用 CORS 响应头。我们可以安装 cors 依赖项，并修改 Express.js 后端应用程序代码：
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
// 设置路由- Proxy 方式
我们还可以使用代理方式来连接 Express.js 后端和 React 前端。我们可以修改 React 前端应用程序中的 package.json 文件，添加一个 proxy 属性指向 Express.js 后端应用程序的地址：
-- -------------------- ---- -------
-
------- ------------------
-------- ------------------------
---------- -
-- ---
--
--------------- -
-- ---
-
-步骤 4：实现 To-Do 功能
现在我们已经成功地将 Express.js 后端和 React 前端连接在一起了，接下来我们就可以实现 To-Do 功能了。
我们可以根据 To-Do 的需求编写相应的后端 API。下面是一个简单的后端 API 范例，我们可以使用 POST 方式将新的 To-Do 标题添加到列表中：
app.post('/api/todo', (req, res) => {
const { title } = req.body;
const id = Date.now().toString();
todos[id] = { id, title };
res.json({ id, title });
});我们还需要创建相应的 To-Do 组件，用于呈现 To-Do 列表和允许用户添加新的 To-Do。下面是一个简单的 To-Do 组件，用于显示 To-Do 标题列表和输入框：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ------ -
----- ------- --------- - -------------
----- ------- --------- - -------------
----- -------- - --- -- -
-------------------
----- ---- - - ----- --
------------------ -
------- -------
-------- - --------------- ------------------ --
----- ---------------------
--
----------- -- -----------
----------- -- -
-------------
------------------- ------
---
--
------ -
-----
--------- ---------
----- --------------------
------
-----------
------------------ - --- ----- -----
-------------
------------- -- -------------------------
--
------- --------------------------
-------
----
----------------- -- -
--- -------------------------------
---
-----
------
--
-
------ ------- -----我们将 Todo 组件导出，并将其放置到路由中，从而在 Web 应用程序中呈现所有 To-Do 列表。
结论
通过本文，你已经可以使用 Express.js 和 React 构建一个简单的 To-Do 应用程序了。我们学习了如何使用 Express.js 创建后端 API，如何使用 React 创建前端用户界面，以及如何将前端和后端进行连接。希望本文可以帮助你更好地了解前端和后端的工作原理，并能够更好地利用这些知识构建出更多的实用的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d694011e808aa2689f887