单页应用(SPA)是一种现代化的 Web 应用程序，与传统的多页应用相比，单页应用具有更好的用户体验和性能优化。在本文中，我们将学习如何使用 Express.js 和 React 来实现一个简单的单页应用。
什么是 Express.js？
Express.js 是一个基于 Node.js 的开放源代码 Web 应用程序框架。它提供了一种方便、灵活和可扩展的方式来编写 Web 应用程序。使用 Express.js，我们可以轻松地创建服务器端程序，同时处理请求和响应。
什么是 React？
React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它遵循组件化编程的哲学，使得我们可以轻松地构建复杂交互式 UI。React 的一个显著特点是它的虚拟 DOM，这使得 React 具有出色的性能和可维护性。
如何使用 Express.js 和 React 实现单页应用？
我们将使用以下步骤来创建一个简单的单页应用。
步骤 1：创建一个新的 Express.js 应用程序
我们首先需要安装 Express.js。在终端中，执行以下命令：
npm install express --save
接下来，创建一个名为 app.js 的文件，输入以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ------------ ----- ---- -- - --------------- -------- -- ---------------- -- -- - -------------------- --- --------- -- ----------------------- --
运行 node app.js，在浏览器中访问 http://localhost:3000，将看到一个简单的“Hello World！”消息。
步骤 2：在 Express.js 中使用 React
接下来，我们需要安装和配置一些 React 相关的库。在终端中，执行以下命令：
npm install react react-dom --save npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev npm install webpack webpack-cli webpack-dev-middleware webpack-hot-middleware --save-dev
现在，我们需要在 app.js 中配置 Webpack 和 Babel。输入以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ----- ------- - ------------------ ----- -------------------- - --------------------------------- ----- -------------------- - --------------------------------- ----- ------------- - --------------------------- ----- -------- - ---------------------- -------------------------------------- - ----------- ------------------------------- --- --------------------------------------- ------------ ----- ---- -- - ---------------------- - -------------- -- ---------------- -- -- - -------------------- --- --------- -- ----------------------- --
现在，我们需要创建一个名为 webpack.config.js 的文件，并输入以下代码：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
-------------- - -
------ -
--------------------------------
----------------------- ----------------
--
------- -
----- ----------------------- ----------
----------- ----
--------- -----------
--
------- -
------ -
-
----- ----------
---- -
------- ---------------
-------- -
-------- ------- --------
-
--
-------- --------------
-
-
--
-------- -
--- ------------------------------------
--
-------- -
----------- ------- -------
-
-此配置文件包括编译 React JSX 代码所需的所有内容。在我们的项目根目录中创建一个名为 src 的文件夹，并创建一个名为 index.jsx 的文件，并输入以下代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
----- --- ------- --------------- -
------ -- -
------ -
-----
--------- -----------
------
-
-
-
-------------------- --- --------------------------------接下来，我们需要创建 index.html 文件，并输入以下代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------- --- ----- -----------
-------
------
---- ----------------
------- --------------------------
-------
-------现在，我们已经创建了一个简单的单页应用。在终端中，运行 node app.js，在浏览器中访问 http://localhost:3000，将看到我们的 React 组件“Hello World！”消息。
步骤 3：实现路由
现在，我们已经创建了一个非常基本的单页应用。如果我们想要添加更多的页面，该怎么办？答案是：实现路由。
我们可以使用 React Router 来实现路由。在终端中执行以下命令，安装 React Router：
npm install react-router-dom --save
接下来，我们需要再次更新 webpack.config.js，用于支持 React Router。修改 entry 和 output 属性：
-- -------------------- ---- ------- ------ - -------------------------------- ----------------------- ---------------- -- ------- - ----- ----------------------- ---------- ----------- ---- --------- ----------- --
添加 target 属性：
target: 'web'
添加 devServer 属性：
devServer: {
contentBase: './public'
}修改 module 属性：
-- -------------------- ---- -------
------- -
------ -
-
----- ----------
---- -
------- ---------------
-------- -
-------- ------- --------
-
--
-------- --------------
-
-
-最后，我们需要更新 index.jsx 文件：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ -
------------- -- -------
------
----
- ---- ------------------
----- ---- ------- --------------- -
------ -- -
------ -
-----
-------------
----
--------- -----------------------------
-----
------
-
-
-
----- ----- ------- --------------- -
------ -- -
------ -
-----
--------------
----
--------- -----------------------
-----
------
-
-
-
----- --- ------- --------------- -
------ -- -
------ -
--------
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
---------
-
-
-
-------------------- --- --------------------------------此代码添加了两个新的组件：Home 和 About。我们还导入了 React Router 的 BrowserRouter、Route 和 Link 组件，并将它们用于渲染我们的路由。
现在，我们已经完成了一个基本的单页应用程序，使用 Express.js 和 React，加上 React Router，我们还实现了路由。
结论
在本文中，我们学习了如何使用 Express.js 和 React 来创建一个简单的单页应用程序。我们了解了 Express.js 和 React 的基本概念，学习了如何使用它们来构建现代化的 Web 应用程序。我们还使用 React Router 实现了路由，使得我们的应用程序具有更好的可扩展性和用户体验。如果您正在学习 Web 开发或打算创建单页应用程序，这篇文章应该对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671de97e2e7021665ef4415d