使用 Hapi 和 React 构建现代 Web 应用的完整教程-JavaScript中文网-JavaScript教程资源分享门户

Web 应用的开发是一个复杂的过程，需要前端和后端开发人员通力合作才能完成。在前端开发领域，使用 React 框架可以帮助我们更快速、高效地构建 Web 应用，而在后端开发领域，使用 Hapi 框架可以帮助我们构建具有高可用性、代码规范化、插件化的现代 Web 应用。本文将介绍如何结合使用 Hapi 和 React 构建现代 Web 应用，并提供完整的教程和示例代码。

准备工作

在开始本教程之前，你需要准备以下工具和环境：

Node.js：安装方法可以参考 Node.js 官方网站；
Yarn：安装方法可以参考 Yarn 官方网站；
Hapi：安装方法可以使用 Yarn 或者 npm，执行 yarn add hapi 或 npm install hapi；
React：创建一个新的 React 项目可以使用 create-react-app。

创建 Hapi 服务器

首先，我们需要创建一个 Hapi 服务器。在项目的根目录下创建一个 server.js 文件，然后输入以下代码：

// www.javascriptcn.com code example
const Hapi = require('hapi');

const server = Hapi.server({
  port: 8000,
  host: 'localhost'
});

const startServer = async () => {
  await server.start();
  console.log(`Server running on ${server.info.uri}`);
};

startServer();

这段代码创建了一个监听 8000 端口，主机为 localhost 的 Hapi 服务器，并在控制台输出了服务器运行的地址。现在，可以通过执行 node server.js 命令启动 Hapi 服务器。

创建 React 应用

接下来，我们需要创建一个新的 React 应用。使用 create-react-app 可以帮助我们快速搭建一个 React 应用程序。执行以下命令：

npx create-react-app my-app
cd my-app
yarn start

这样就创建了一个名为 my-app 的 React 应用，并启动了开发服务器。现在我们可以在浏览器中输入 http://localhost:3000 访问我们的应用程序。如果一切正常的话，你应该可以看到一个默认的 React 欢迎界面。

集成 React 到 Hapi 服务器

现在，我们需要将 React 应用程序集成到 Hapi 服务器中。为此，我们将使用 Hapi 插件 inert 和 vision。这两个插件可以帮助我们在 Hapi 服务器中使用静态文件和视图。

先安装插件：

yarn add inert vision

接下来，我们需要在 server.js 文件中注册这两个插件，并将 React 应用程序作为一个静态文件在 Hapi 服务器中提供。修改 server.js 文件如下：

// www.javascriptcn.com code example
const Hapi = require('hapi');
const Path = require('path');

const server = Hapi.server({
  port: 8000,
  host: 'localhost'
});

const startServer = async () => {
  await server.register(require('inert'));
  await server.register(require('vision'));

  server.views({
    engines: {
      jsx: require('hapi-react-views')
    },
    relativeTo: __dirname,
    path: 'views'
  });

  server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
      directory: { path: 'build' }
    }
  });

  await server.start();
  console.log(`Server running on ${server.info.uri}`);
};

startServer();

在这段代码中，我们注册了 inert 和 vision 插件，将 React 应用程序的静态文件路径设置为 build 目录，将 React 组件渲染为 Hapi 视图，并将视图引擎设置为 hapi-react-views。

在项目的根目录下创建一个名为 views 的文件夹，在该文件夹内创建一个名为 index.jsx 的文件，并输入以下代码：

// www.javascriptcn.com code example
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from '../src/App';

const Index = () => {
  const appHtml = renderToString(<App />);
  return (
    <html>
      <head>
        <title>Hapi + React</title>
        <link rel="stylesheet" type="text/css" href="index.css" />
      </head>
      <body>
        <div id="root" dangerouslySetInnerHTML={{ __html: appHtml }} />
        <script src="index.js" />
      </body>
    </html>
  );
};

export default Index;

这段代码中，我们将 React 组件 App 渲染为字符串，并将其包含在 HTML 页面中，同时引入 index.js 和 index.css。

接下来，在 React 应用程序的根目录下执行 yarn build 命令构建应用程序，并将构建后的文件夹 build 移动到项目根目录下。

现在，再次执行 node server.js 命令启动 Hapi 服务器，然后在浏览器中访问 http://localhost:8000，你应该可以看到 React 应用程序在 Hapi 服务器上运行正常。

结语

本文介绍了如何使用 Hapi 和 React 构建现代 Web 应用程序。我们学习了如何创建 Hapi 服务器和 React 应用程序，以及如何将 React 应用程序集成到 Hapi 服务器中。通过学习本文，您应该可以在项目中使用 Hapi 和 React 创建高可用性、规范化、插件化的现代 Web 应用程序。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfa9c7e46428fe9eb702ce

使用 Hapi 和 React 构建现代 Web 应用的完整教程

准备工作

创建 Hapi 服务器

创建 React 应用

集成 React 到 Hapi 服务器

结语

接着读