使用 Express.js 和 React 构建单页面应用的完整指南

在现代 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，请使用以下命令进行安装：

--- ------- ----- ---------

我们可以通过创建一个简单的 React 组件来了解 React 是如何工作的。在下面的示例中，我们创建了一个名为 Hello 的组件，它将使用 props 属性来渲染欢迎消息。

------ ----- ---- --------

-------- ------------ -
  ------ ---------- -------------------
-

------ ------- ------

在上述代码中，我们使用 ES6 的语法来定义了 Hello 组件。组件使用了 props 属性来获取传递给它的数据，并返回了一个包含欢迎消息的 h1 标签。最后，我们通过 export 关键字将组件导出，以便在其他文件中使用。

构建单页面应用

现在，我们已经了解了 Express.js 和 React 的基本概念。接下来，我们将会使用这两个工具来构建一个单页面应用程序。我们将使用以下工具：

  • Express.js：用于服务器端渲染和路由。
  • React：用于构建 UI 组件。
  • React Router：用于创建客户端路由。
  • Webpack：用于构建和打包应用程序。

安装依赖

在开始之前，我们需要安装下面的依赖项：

  • 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 文件，该文件将用于加载我们的客户端代码和其他资源。

最终版本

现在，我们已经设置了服务器端和客户端的代码，将其集成在一起，并使其可以进行构建。通过运行以下代码来启动我们的应用程序：

--- --- -----

上述代码将启动一个 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

阅读全文

精选内容

相关推荐

    暂无