如何将 NodeJS 与 ReactJS 连接？

ReactJS 是一款用于构建用户界面的 JavaScript 库，而 NodeJS 是一款服务器端运行的 JavaScript 环境，我们可以使用它来构建后端应用程序。在本文中，我们将介绍如何使用 NodeJS 和 ReactJS 进行连接。

使用 Create React App 进行初始化

首先，我们需要使用 Create React App 初始化一个 ReactJS 项目。您可以在命令行中执行以下命令：

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

安装 Express

接下来，我们将使用 Express 框架来搭建 NodeJS 服务器。您可以在命令行中运行以下命令来安装 Express：

npm install express --save

创建服务器端代码

在项目根目录下创建一个名为 server.js 的文件。在该文件中我们需要使用以下代码：

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

app.use(express.static('build'));

app.get('*', (req, res) => {
  res.sendFile(__dirname + '/build/index.html');
});

const port = process.env.PORT || 3001;
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

在这段代码中，我们使用 express.static 函数将 build 目录作为静态文件目录，这是使用 Create React App 构建 ReactJS 应用程序时默认生成的文件夹。我们还使用 app.get 函数来捕获所有 GET 请求，并返回该 ReactJS 应用程序的 index.html 文件。

在 ReactJS 应用程序中使用 Axios

接下来，我们将使用 Axios 库来发送 HTTP 请求。您可以在命令行中执行以下命令来安装 Axios：

npm install axios --save

我们可以在 ReactJS 组件中使用 Axios 库来获取数据或向服务器发送数据。例如，下面的代码将从服务器中获取数据：

import React, { Component } from 'react';
import axios from 'axios';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    axios.get('/data').then((response) => {
      this.setState({
        data: response.data,
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.data.map((item) => (
          <div key={item.id}>{item.text}</div>
        ))}
      </div>
    );
  }
}

export default MyComponent;

在 ReactJS 应用程序中使用 API

最后，我们还可以在 ReactJS 应用程序中使用 API。我们可以将 API 请求封装到一个函数中，然后在组件中使用该函数。例如，下面的代码将从服务器中获取数据：

import axios from 'axios';

export function getData() {
  return axios.get('/data').then((response) => {
    return response.data;
  });
}

我们可以在组件中使用该函数来获取数据：

import React, { Component } from 'react';
import { getData } from './api';

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    getData().then((data) => {
      this.setState({
        data: data,
      });
    });
  }

  render() {
    return (
      <div>
        {this.state.data.map((item) => (
          <div key={item.id}>{item.text}</div>
        ))}
      </div>
    );
  }
}

export default MyComponent;

这就完成了 NodeJS 和 ReactJS 的连接。

结论

在本文中，我们介绍了如何使用 NodeJS 和 ReactJS 进行连接。我们使用 Express 框架搭建了一个 NodeJS 服务器，并使用 Axios 库来发送 HTTP 请求，使用 API 来获取数据。希望这篇文章能够对您有所帮助，感谢您的阅读。