单页应用（SPA）已成为当今 Web 开发中的常见实践。它的主要特点是减少页面的刷新，提高用户体验。前端技术的发展让 SPA 的技术栈变得更加多样，其中以 React 为代表的前端框架成为了很多开发者的首选。而 Express.js 则是一个流行的后端框架，它可以用来搭建 RESTful API 服务器。本文将介绍如何使用 Express.js 和 React 构建 SPA。
技术栈
我们将使用以下技术：
- 前端：React、React Router、Axios
- 后端：Express.js、MySQL
- 其他：Webpack、Babel
前端
我们将使用 React 和 React Router 搭建前端部分。其中，Axios 是一个基于 Promise 的 HTTP 客户端，用来获取后端服务器的数据。以下是前端部分的代码示例：
App.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
----- --- ------- --------- -
-------- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
---------
--
-
-
------ ------- ----Home.js
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- ---- ------- --------- -
------------------ -
-------------
---------- - -
-------- --
--
-
------------------- -
------------------------------------- -- -
--------------- -------- ------------- ---
---
-
-------- -
------ -
-----
-------------
---------------------------
------
--
-
-
------ ------- -----About.js
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -- -- -
------ -
-----
--------------
------- -- - ------ --- ----- ---- ---------- --- ----------
------
--
--
------ ------- ------这里的代码中有一些可能需要额外解释的地方：
BrowserRouter：用来渲染应用程序路由。这个组件需要包裹每个应用界面。Switch：用来在多条路由之间选择一个匹配的。它会从顶部开始遍历路由，直到找到一个匹配的为止。Route：用来渲染匹配路由的组件。componentDidMount：在组件渲染后调用，用来获取数据并设置状态。/api/hello是我们后端服务器路由的一个示例地址。
后端
我们将使用 Express.js 和 MySQL 构建后端部分。以下是后端部分的代码示例：
server.js
-- -------------------- ---- -------
----- ------- - -------------------
----- ----- - -----------------
----- ---------- - -----------------------
----- ---- - ----------------
----- --- - ----------
---------------------------
----------------
----- ---------- - ------------------------
----- ------------
----- -------
--------- ---
--------- ---------
---
---------------------- -- -
-- ----- ----- ----
-------------------------
---------------- -- -- ------------------- -----------
---
--------------------- ----- ---- -- -
------------------------ - ---- ------- ----- -------- -- -
-- ----- ------ ----------------------
-----------------------------
---
---这里的代码也有一些需要解释的地方：
app.use：用来注册中间件。body-parser：中间件用来解析请求体的数据。cors：解决跨域问题的中间件。mysql：用来与数据库进行交互的工具。connection.query：用来执行 SQL 语句。
Webpack 配置
我们将使用 Webpack 和 Babel 来打包和转换我们的代码。以下是常用的 Webpack 配置：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- -------------------- --------
--------- ------------
----------- ---
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- -
------------------------------------------- - ------ ---- ---
---------------------------------
-
-
-
-
-
--
-------- -
----------- ------- -------
--
---------- -
------------------- -----
------------ --------
-
--代码中还有一些需要解释的部分：
entry：入口文件。output：打包后的输出路径和文件名。module.rules：Webpack 的规则列表。用于指示哪些文件需要经过哪些 loader 处理。babel-loader：转换 JS 和 JSX。@babel/preset-env、@babel/preset-react：预设配置。@babel/plugin-proposal-class-properties：方便使用箭头函数。@babel/plugin-transform-runtime：避免编译生成重复代码。resolve.extensions：在 import 模块时不用加后缀。
运行应用
下面是启动应用的具体步骤：
- 安装依赖包：
npm install react react-dom react-router-dom axios express mysql body-parser cors webpack webpack-cli babel-loader @babel/core @babel/cli @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react webpack-dev-server --save-dev npm install mysql --save
- 启动前端和后端：
# 前端 npm start # 后端 node server.js
- 在浏览器中打开 http://localhost:8080。
总结
本文介绍了如何使用 Express.js 和 React 构建 SPA。这个简单的示例应用程序包含了前后端的代码样例，可以让读者更好地理解这个技术栈的使用方法。希望这份指南对你的学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e4b2848841e9894ad3898