如何将 Node.js 与 React.js 连接起来？(1)

📌 相关文章

📜 如何将 Node.js 与 React.js 连接起来？(1)

📅 最后修改于: 2023-12-03 15:09:06.233000 🧑 作者: Mango

如何将 Node.js 与 React.js 连接起来？

Node.js 和 React.js 是两个非常流行的 JavaScript 技术，Node.js 作为服务端技术，而 React.js 则是一款前端 UI 框架。有时候，我们需要将这两个技术进行结合，以便能够实现更为复杂的应用程序。那么，如何将 Node.js 与 React.js 连接起来呢？下面将为你介绍一些常见的方法。

使用 Express 搭建 Node.js 服务器

首先，我们需要使用 Express 搭建 Node.js 服务器，以便能够处理前端页面请求并提供数据。以下是搭建 Express 服务器的基本步骤：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

在这个简单的示例中，我们创建了一个 Express 应用程序，监听本地 3000 端口。当用户访问服务器根目录时，会返回一段文本信息。

使用 React.js 构建前端页面

接下来，我们需要使用 React.js 来构建前端页面。以下是一个基本的 React.js 示例：

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World!</h1>
      </div>
    );
  }
}

export default App;

在这个示例中，我们创建了一个简单的 React 组件，返回了一个包含 "Hello World!" 文字的 div 元素。

在 Node.js 服务器中提供 React.js 前端页面

有了 Node.js 服务器和 React.js 前端页面之后，我们需要将它们进行连接。首先，我们需要安装以下依赖项：

npm install --save react react-dom express body-parser

然后，我们需要将 React.js 组件渲染到 Node.js 服务器中提供的一个路由中：

const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App');

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<App />);

  res.send(`
    <html>
      <head>
        <title>React on Node.js</title>
      </head>
      <body>
        <div id="root">${html}</div>
      </body>
    </html>
  `);
});

app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

在这个示例中，我们使用了 React DOM 服务器渲染库的 renderToString() 方法将 React 组件转换成 HTML 字符串，并将其嵌入到服务器返回的 HTML 中。我们还提供了一个 public 目录，其中包含我们将在 index.html 文件中引用的静态资源。

在前端页面中请求 Node.js 服务器数据

最后，我们需要在前端页面中请求 Node.js 服务器数据。以下是一个使用 Fetch API 请求服务器数据的示例：

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('/data')
      .then((res) => res.json())
      .then((data) => {
        this.setState({
          data: data,
        });
      });
  }

  render() {
    return (
      <div>
        <h1>Hello World!</h1>
        {this.state.data && (
          <p>{this.state.data}</p>
        )}
      </div>
    );
  }
}

export default App;

在这个示例中，我们在 componentDidMount() 方法中使用 Fetch API 发送 GET 请求，并更新组件状态以包含从服务器返回的数据。

以上就是将 Node.js 与 React.js 进行连接的基本步骤。当然，你还可以使用其他的技术来实现这个目标。无论如何，这些核心技术都是值得学习的。