在现代 Web 开发中，单页面应用（Single Page Application，SPA）已经成为了一个常见的开发方式。SPA 的优点在于用户交互流畅、响应速度快，用户体验较为友好。在本篇文章中，我们将会介绍如何使用 Express.js 和 React 构建一款 SPA。
Express.js
Express.js 是一个基于 Node.js 平台的 Web 应用开发框架。它提供了简单易用的 API，能够快速地创建 Web 服务器。要搭建一个简单的 Express.js 服务器，您只需要安装 Node.js 和 Express 并添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ -------- ----- ---- - --------------- -------- -- ---------------- -------- -- - -------------------- --- --------- -- ---- ------- --
在上述代码中，我们使用 express() 创建了一个 Express.js 应用程序，然后使用 app.get() 方法创建了一个路由，当访问根路径时，服务器会返回 "Hello World!" 的响应。最后，我们通过 app.listen() 方法将应用程序绑定到端口 3000 上并启动了服务器。
React
React 是一个流行的 JavaScript 库，它可以用来构建用户界面。React 提供了一种声明式的编程模型，让代码易于编写、测试、理解和维护。如果您尚未安装 React，请使用以下命令进行安装：
npm install react react-dom
我们可以通过创建一个简单的 React 组件来了解 React 是如何工作的。在下面的示例中，我们创建了一个名为 Hello 的组件，它将使用 props 属性来渲染欢迎消息。
import React from 'react';
function Hello(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Hello;在上述代码中，我们使用 ES6 的语法来定义了 Hello 组件。组件使用了 props 属性来获取传递给它的数据，并返回了一个包含欢迎消息的 h1 标签。最后，我们通过 export 关键字将组件导出，以便在其他文件中使用。
构建单页面应用
现在，我们已经了解了 Express.js 和 React 的基本概念。接下来，我们将会使用这两个工具来构建一个单页面应用程序。我们将使用以下工具：
- Express.js：用于服务器端渲染和路由。
- React：用于构建 UI 组件。
- React Router：用于创建客户端路由。
- Webpack：用于构建和打包应用程序。
安装依赖
在开始之前，我们需要安装下面的依赖项：
expressreactreact-domreact-router-domwebpackwebpack-cliwebpack-dev-middlewarewebpack-hot-middlewarebabel-corebabel-loaderbabel-preset-envbabel-preset-reactbabel-preset-stage-0html-webpack-plugin
您可以使用以下命令来安装所有依赖项：
npm install --save express react react-dom react-router-dom webpack webpack-cli webpack-dev-middleware webpack-hot-middleware babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 html-webpack-plugin
服务器端渲染
首先，我们需要创建一个 Express.js 应用程序，该应用程序将用于服务器端渲染。在 server.js 文件中，我们需要启动一个 Express 服务器，并将其绑定到 localhost:3000 端口上：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------------- ---------------- -- ------ --------------------------- -- -- - ------------------- --------- -- ---- - - ----------------- ---
接下来，我们需要为 Express.js 应用程序添加路由。在这里，我们将为"/" 创建一个路由，并为"/about" 创建另一个路由。
-- -------------------- ---- -------
------------ ----- ---- -- -
----------
--------- -----
------
------
--------- -----------
-------
------
---- -------------------
------- ----------------------------
-------
-------
---
---在上述代码中，我们为根路径创建了一个路由，并向客户端返回了一个 HTML5 文档，其中包括一个 div 标签和一个指向/dist/app.js 的脚本。这是我们稍后生成的客户端代码。
我们还将创建另一个路由来处理"/about" 路径。当用户访问 "/about" 时，服务器将向客户端返回一个包含从服务器获取的有关页面的信息的 HTML 文档。这种技术称为“服务器端渲染”（SSR），它有助于改进应用程序的性能和搜索引擎优化（SEO）。
-- -------------------- ---- -------
----------------- ----- ---- -- -
----------
--------- -----
------
------
------------ ----------
-------
------
--------- -------
----- --- - ----- ------- ------- -- -------- --------
-------
-------
---
---在上述代码中，我们为关于我们页面创建了一个路由，并向客户端返回了包含有关页面的信息的 HTML 文档。
客户端渲染
接下来，我们需要为客户端设置我们的 React 应用程序。我们将创建一个名为 App 的组件，并使用 React Router 来处理客户端路由。
在 client.js 文件中，我们需要为客户端代码创建一个入口点。应用程序进入此文件，从那里加载所有必需的组件并将其呈现到 DOM 中的 appRoot 元素中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ --------------- ---- -------------------
------ --- ---- --------
----- ----------- - -----------------------------------
-------
---------------
---- --
-----------------
-----------
--在上述代码中，我们使用 render() 方法将我们的 App 组件呈现到 rootElement 元素中。而 BrowserRouter 是用于处理客户端路由的组件。
现在，我们已经设置了客户端渲染的入口点，我们需要使用 Webpack 来构建我们的应用程序。您可以使用下面的 Webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ --------------------
------- -
----- ----------------------- --------
--------- ---------
----------- ---
--
------- -
------ -
-
----- --------
-------- -----------------
---- -
------- ---------------
-------- -
-------- ------- -------- ----------
-
-
-
-
--
-------- -
--- -------------------
------ --- -----
--------- -----------------
--------- ----------------
---
-
--在上述代码中，我们配置了 Webpack 的入口点（./src/client.js）和输出（dist/app.js）。我们还创建了一个用于处理 JavaScript 的 Loader，并向 Babel 提供了一组预设，以便我们可以在任何浏览器中使用最新的 JavaScript 特性。
我们还使用 HtmlWebpackPlugin 生成了一个 HTML5 文件，该文件将用于加载我们的客户端代码和其他资源。
最终版本
现在，我们已经设置了服务器端和客户端的代码，将其集成在一起，并使其可以进行构建。通过运行以下代码来启动我们的应用程序：
npm run start
上述代码将启动一个 Express.js 服务器，并启动 Webpack 进程。当您访问 http://localhost:3000/ 时，服务器将向您提供 React 应用程序。如果您访问 http://localhost:3000/about，则服务器将使用服务器端渲染向您提供“关于我们”页面。
此外，当您修改您的代码时，Webpack 将自动重新构建您的应用程序。
结论
在本文中，我们探讨了如何使用 Express.js 和 React 构建一个单页面应用程序。我们了解了服务器端渲染和客户端渲染，并使用 Webpack 和其他工具使其能够顺畅运行。希望这篇文章能够帮助您构建更好的 Web 应用程序。下面是项目代码的 Github 链接：https://github.com/username/repo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672db7eceedcc8a97c85bb38