Hapi 和 React 的完美集成-JavaScript中文网-JavaScript教程资源分享门户

Hapi 是一个流行的 Node.js 后端框架，而 React 是一个用于构建用户界面的 JavaScript 库。它们是两种不同的技术，但它们可以完美地集成在一起，提供完整的全栈应用开发体验。本文将介绍如何在 Hapi 中使用 React，并提供一些示例代码和实践指南。

安装

在使用 Hapi 和 React 之前，您需要安装它们。您可以使用以下命令在您的项目中安装它们：

npm install hapi react react-dom

创建 Hapi 应用

首先，我们需要创建一个基本的 Hapi 应用程序。我们将创建一个简单的 HTTP 服务器，它将接收 GET 请求并响应 "Hello, World!"。

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

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

server.route({
    method: 'GET',
    path: '/',
    handler: (request, h) => {
        return 'Hello, World!';
    }
});

server.start().then(() => {
    console.log(`Server running at ${server.info.uri}`);
});

运行该代码，您应该可以在控制台上看到 "Server running at http://localhost:3000"。

集成 React

现在，我们将在 Hapi 应用程序中引入 React 并创建一个基本的 React 应用程序。我们将在服务器端渲染 React 组件，并将结果发送到客户端。

// www.javascriptcn.com code example
const Hapi = require('hapi');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

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

server.route({
    method: 'GET',
    path: '/',
    handler: (request, h) => {
        const element = React.createElement('h1', null, 'Hello, World!');
        const content = ReactDOMServer.renderToString(element);
        return `
            <html>
                <head>
                    <title>Hello, World!</title>
                </head>
                <body>
                    ${content}
                </body>
            </html>
        `;
    }
});

server.start().then(() => {
    console.log(`Server running at ${server.info.uri}`);
});

在这个更新过的代码中，我们将 React、ReactDOMServer 库引入并在请求处理程序中使用。我们创建了一个包含 "Hello, World!" 的 h1 元素，并使用 ReactDOMServer.renderToString() 将其呈现为字符串。我们将这个字符串嵌入到 HTML 模板中并返回给客户端。

通过运行该代码，您应该能够看到一个包含 "Hello, World!" 的页面。

使用 JSX

现在，我们已经成功集成了 React 和 Hapi 并编写了一个简单的服务器端渲染 React 应用程序。但是，我们可以更进一步并使用 JSX 语法来编写表达式。

我们需要安装为 Babel 提供 JSX 支持的 babel-preset-react。

npm install babel-preset-react --save-dev

然后，我们需要在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

{
    "presets": ["@babel/preset-react"]
}

现在我们可以使用 JSX 语法来编写我们的组件：

// www.javascriptcn.com code example
const Hapi = require('hapi');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

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

server.route({
    method: 'GET',
    path: '/',
    handler: (request, h) => {
        const element = <h1>Hello, World!</h1>;
        const content = ReactDOMServer.renderToString(element);
        return `
            <html>
                <head>
                    <title>Hello, World!</title>
                </head>
                <body>
                    ${content}
                </body>
            </html>
        `;
    }
});

server.start().then(() => {
    console.log(`Server running at ${server.info.uri}`);
});

客户端渲染

现在，我们已经学习了如何在服务器端渲染 React 组件，并在 Hapi 应用程序中使用它们。但是，对于大型应用程序，服务器端渲染可能不够快，需要更快的响应时间和更优秀的用户体验。幸运的是，您可以在客户端上使用 React，并在浏览器中呈现您的应用程序。

为此，您需要使用一个 JavaScript 包管理器，如 npm 或 Yarn，安装 React 和 ReactDOM。然后，您可以编写一个简单的 HTML 文件，该文件包含在浏览器中加载的 JavaScript 文件。

以下示例演示如何在客户端上使用 React：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
    <head>
        <meta charSet="utf-8" />
        <title>Hello, World!</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="/static/index.js"></script>
    </body>
</html>

然后，我们将使用 webpack 来打包我们的客户端代码，并将其作为单个 JavaScript 文件提供。在命令行中输入以下命令来安装必需的包：

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react react react-dom -D

我们还需要在项目根目录中创建一个 webpack.config.js 文件，并添加以下内容：

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

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'public/static')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            }
        ]
    }
};

这个配置文件告诉 webpack 如何打包我们的代码，并将输出文件放在 public/static 目录中。

我们现在已经准备好编写我们的第一个 React 应用程序了。创建一个名为 index.js 的文件，并添加以下内容：

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

这个代码片段告诉 React 将 <h1> 标签呈现到页面中带有 id 值为 "root" 的 div 元素中。

接下来，我们将使用 webpack 打包我们的代码。在命令行中输入以下命令：

npx webpack --config webpack.config.js

这会生成一个名为 public/static/index.js 的文件。现在，我们可以启动 Hapi 服务器，并将我们的静态文件提供给客户端。在 Hapi 服务器中添加以下代码：

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

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

server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
        directory: {
            path: Path.join(__dirname, 'public')
        }
    }
});

server.start().then(() => {
    console.log(`Server running at ${server.info.uri}`);
});

我们将该代码添加到我们的现有 Hapi 应用程序中。该代码将静态文件夹中的所有文件提供给客户端。

现在你可以运行该应用程序并查看客户端渲染的 React 应用程序。访问地址为 http://localhost:3000。

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

Hapi 和 React 的完美集成

安装

创建 Hapi 应用

集成 React

使用 JSX

客户端渲染

接着读