在前端开发中，React 和 Express 是两个非常热门的技术。React 是一个前端框架，专注于构建用户界面，而 Express 是 Node.js 中的一个 Web 框架，可以用于构建后端 API。React 和 Express 可以结合起来，打造一个完整的全栈 Web 应用。本文将介绍如何使用 React 和 Express 构建全栈 Web 应用，包括如何创建前后端项目、如何实现接口和前端页面的交互、如何进行部署等。
项目准备
为了创建一个完整的全栈 Web 应用，需要准备一个前端项目和一个后端项目。可以使用 create-react-app 工具创建一个简单的 React 项目，使用 Express Generator 创建一个 Express 项目。在创建完两个项目后，可以将两个项目放在同一个文件夹中，即使是在两个独立的文件夹中也可以使用 concurrently 这样的工具一起运行。
后端 API
在 Express 项目中，可以创建一个 API，用于前端调用后端数据。首先需要安装相关的依赖：
npm install --save express body-parser cors
以下是一个简单的 Express API 代码示例：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ---- - ----- --------------------------- ------------------------------- --------- ---- ---- ---------------- --------------------- ----- ---- -- - ---------- -------- ------ ---- --------- --- --- ---------------- -- -- - ------------------- ------- -- --------------------------- ---
这是一个简单的 Express API，它可以监听端口 5000，并在 http://localhost:5000/api/hello 接收 GET 请求，并返回一个 JSON 数据，其中包含 message 字段。
数据库
在实际的应用中，往往需要使用数据库存储数据。可以使用 mongodb 作为数据库。需要安装 mongodb，可以使用官方的安装程序或者通过 Docker 安装。
在 Express 项目中可以使用 mongoose 这个工具来连接 mongodb 数据库。可以安装 mongoose：
npm install --save mongoose
以下是一个简单的 mongoose 连接代码示例：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ---------------- - --------------------------------------- ---------------------------------- - ---------------- ----- ------------------- ----- --- ----- -- - -------------------- -------------- --------------------------- ----------- ---------- --------------- -------- -- - -------------------- ------------ --- -------------- - ---------
这个代码连接了名为 mydatabase 的 mongodb 数据库，可以在代码中修改为自己的数据库名称，并且将端口号、账号密码等设置正确。
前端页面
React 项目中可以使用 axios 等工具调用后端的 API，获取数据并展示到页面上。
在 React 项目中安装 axios：
npm install --save axios
以下是一个简单的 React 代码示例，从 Express API 中获取数据并展示到页面上：
-- -------------------- ---- -------
------ ------ - ---------- -------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ------ -------- - -------------
----- --------- ----------- - ---------------
------------ -- -
----- --------- - ----- -- -- -
----- ------ - ----- --------------------
---------------------
------------------
--
------------
-- ----
-- --------- -
------ ----------------------
-
------ --------------------------
-
------ ------- ----在这个代码中，使用了 React 的 hook 特性 useEffect 和 useState。在组件首次渲染时，会调用 useEffect，执行 fetchData 方法。这个方法调用 axios，请求 Express API，并将返回的数据保存到组件的 state 中。如果数据还在加载中，则需要显示 Loading...；否则，需要将数据展示到页面上。
部署
在开发完成后，需要将应用部署到服务器上。可以使用 Heroku 将应用部署到云端。
首先需要安装 Heroku CLI。在项目根目录中，需创建一个名为 Procfile 的文件，写入以下内容：
web: npm run start
在 package.json 中添加一些 scripts，用于启动、构建和部署应用：
{
"scripts": {
"start": "node index.js",
"build": "react-scripts build",
"heroku-postbuild": "npm install && npm run build"
}
}在项目根目录中，需要创建一个 index.js 文件，用于启动 Express 应用：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- -------- - ----------------
----- --- - ----------
------------------------
-- --------------------- --- ------------- -
------------------------------------------- ------------------
------------ ----- ---- -- -
--------------------------------- --------------- ---------------
---
-
----- ---- - ---------------- -- -----
---------------- -- -- -
------------------- -- --------- -- ---- ----------
---在 Heroku 中创建应用，并通过 Git 将应用的代码上传到远程仓库中。最后，通过命令行工具进行部署：
heroku login heroku create git push heroku master
这样就可以将应用部署到 Heroku 上，通过 Heroku 的 URL 访问应用。
总结
通过本文的介绍，学习了如何使用 React 和 Express 打造全栈 Web 应用。从创建项目、编写后端 API、控制数据库，到编写前端页面、展示数据，以及部署应用，本文详细指导了如何完成全栈 Web 应用的所有步骤。希望本文可以帮助读者学习 React 和 Express，以及如何将这两个技术结合起来，打造完整的全栈应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488258e48841e98946a6fba