在 Web 开发中，单页面应用（SPAs）已经变得越来越流行，因为它们可以提供更好的用户体验，并且在实现上也更加简单。Express.js 是一个流行的 Node.js Web 应用程序框架，而 React 是一个用于构建用户界面的 JavaScript 库。使用这两个工具，我们可以创建一个简单的单页面应用，支持路由和状态管理。
准备工作
首先，我们需要安装 Node.js 和 npm 。然后，使用以下命令安装最新版本的 Express.js：
npm install express
接下来，我们需要创建一个新的项目目录，并在其中创建两个子目录，一个用于 Express.js 服务器，另一个用于 React 应用程序代码和资源。
mkdir myapp && cd myapp mkdir server && mkdir client
我们还需要安装一些 React 相关的依赖项，包括 React、React-DOM 和 React-Router-DOM。运行以下命令安装它们：
npm install react react-dom react-router-dom
创建 Express.js 服务器
接下来，我们将创建一个简单的 Express.js 服务器，用于向客户端提供静态文件和处理应用程序 API 的请求。
在 server 目录中创建一个文件名为 server.js 的文件。我们将使用 express.static 中间件来提供客户端代码和资源，因此需要指定客户端代码目录。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ---- - ---------------- -- ----- ----- ---------- - -------------------- ----- --------- --------- ------------------------------------ ---------------------- ----- ---- -- - --------------- --- ---------------- -- -- - ------------------- -- --------- -- ---- ---------- ---
上面的代码启动 Express.js 服务器，使用 express.static 中间件来提供 clientPath 目录下的静态文件，同时响应 /api/health 路径的请求。如果一切设置正确，这个服务器应该能在浏览器中访问。
创建 React 应用程序
React 应用程序代码将在 client 目录中编写。下面是一个简单的示例，它将创建一个包含两个页面的应用程序：主页和关于页面。
首先，我们需要在 client 目录中运行以下命令来创建 React 应用程序的基本结构：
npx create-react-app myapp
该命令会生成一个名为 myapp 的目录，其中包含一个预配置的 React 应用程序。
接着，我们需要安装 Redux 和 React-Redux。运行以下命令安装它们：
npm install redux react-redux
现在，我们来更改和添加下面的文件和目录：
src/App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
------ - -------- - ---- -------------------
------ - --------- - ---- --------------------
------ -------- ----- -
------ -
--------
------ ----- -------- -------------------- --
------ ----- ------------- --------------------- --
---------
--
-这里的 App 组件定义了应用程序的基本路由。它使用 Switch 和 Route 组件来定义两个路由：主页和关于页面，分别渲染 HomePage 和 AboutPage 组件。
src/pages/HomePage.js
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---------- -
------ -
-----
-------- ---------
---------- -- --- ---- ---------
------
--
-这个组件只是一个简单的静态页面，它用于展示主页的内容。
src/pages/AboutPage.js
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ----------- -
------ -
-----
--------- ---------
---------- -- --- ----- ---------
------
--
-这个组件也是一个简单的静态页面，它用于展示关于页面的内容。
src/store.js
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - ---
-------- ------------- - ------------- ------- -
------ ------------- -
--------
------ ------
-
-
------ ----- ----- - ---------------------上面定义了 Redux store 的代码。它只是简单地创建了一个名为 store 的全局单例 Store 实例。更复杂的示例代码会涉及到如果在不同环境下创建 store。
src/index.js
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ - -------- - ---- --------------
------ - --- - ---- --------
------ - ----- - ---- ----------
----------------
---------------
--------- --------------
---- --
-----------
-----------------
-------------------------------
--这里的 index.js 文件将应用程序渲染到页面上，并使用 BrowserRouter 和 Provider 组件来提供应用程序的路由和状态数据。BrowserRouter 组件用于定义应用程序路由配置，而 Provider 组件用于在应用程序中提供 Redux store。
在项目根目录中运行以下命令构建静态文件：
cd client npm run build
上面的命令会生成一个名为 build 的目录，其中包含 React 应用程序的所有静态文件。这些文件将由 Express.js 服务器使用。
最后，在 server.js 文件中添加以下代码：
app.get('*', (req, res) => {
res.sendFile(path.join(clientPath, 'index.html'));
});这里的 * 表示 Express.js 服务器将处理应用程序中所有的路径，并将 clientPath/index.html 文件发送到客户端。
现在，我们已经完成了使用 Express.js 和 React 创建单页面应用程序的步骤。只需要在控制台运行以下命令，然后在浏览器中打开 http://localhost:3001，即可查看应用程序的主页：
node server/server.js
总结
在本文中，我们学习了如何使用 Express.js 和 React 创建单页面应用程序。我们使用了一个简单的示例来展示如何在 Express.js 服务器中提供静态文件和响应应用程序 API 请求。我们还学习了如何使用 React 和 React-Router-DOM 构建一个双页面应用程序，并用 Redux 管理应用程序的状态。这个示例代码可以用作一个起点，用于在更大的应用程序中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5e57695c405902ee3d2a2