如何为React设置一个Node.js Express服务器

React是一个JavaScript库，用于构建用户界面，并使用可重用的UI组件开发单页应用程序。React用于构建可以与后端服务器通信的前端应用程序。

简介

本指南将开发一个简单的React应用程序，并使用Node.js服务器将其连接到服务器构建。我们将使用create-react-app 命令引导React应用，然后通过设置代理将其连接到Node.js。

前提条件

要跟上这篇文章，具备以下条件将很有帮助。

• 对[Node.js]、[Express]、[npm]和[React.js]有经验。
• 安装了[Node.js]。
• 一个文本编辑器，最好是[VS Code]。
• 一个网络浏览器，在这种情况下是[谷歌浏览器]。

设置文件夹结构

第一步是为我们的案例创建一个根文件夹，demoreactapp ，以保存我们的应用程序的所有文件。然后，我们将有client 目录，它将容纳所有React App的文件。

node_modules 文件夹将包含我们的server.js 文件的所有 NPM 包。node_modules 文件夹将在我们安装NPM包时自动生成。

接下来将需要创建一个server.js 文件。该文件将包含一个Express服务器，它将作为我们的后端。package.json 文件是在终端运行npm init -y 命令时自动生成的。

创建React应用程序

从终端，使用cd 命令浏览到根目录，并运行以下命令。

$cd demoreactapp
$npx create-react-app client

上述命令将在根目录下创建一个名称为client 的 React 应用程序。

设置Express服务器

下一步是在文件server.js 中创建一个Express服务器。

从终端浏览到根目录并运行下面提到的命令。

$npm init -y

该命令将自动生成package.json 文件。接下来将需要运行下面的命令来安装Express，它将作为一个依赖关系保存在package.json 。

$npm install express --save

现在编辑文件server.js ，如下所示。

const express = require('express'); //Line 1
const app = express(); //Line 2
const port = process.env.PORT || 5000; //Line 3

// This displays message that the server running and listening to specified port
app.listen(port, () => console.log(`Listening on port ${port}`)); //Line 6

// create a GET route
app.get('/express_backend', (req, res) => { //Line 9
  res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' }); //Line 10
}); //Line 11

第1行和第2行--需要Express并允许我们在我们的server.js 文件中使用它。

第3行 - 它将设置Express服务器的运行端口。

第6行 - 将在控制台显示一条信息，表明服务器正在按预期工作。

第9至11行 - 它将设置一个GET route ，稍后我们将从我们的客户端React App中获取。

设置代理

在这一步，当我们运行create-react-app 命令时，Webpack开发服务器被自动生成了。我们的react App正在前端的Webpack开发服务器上运行。

我们可以将客户端的API请求代理到服务器端的API上。服务器端的API（Express服务器）将在5000端口运行。

Webpack开发服务器（WDS）是一个帮助开发者对Web应用的前端进行修改的工具，并将其渲染到浏览器上，而不需要刷新浏览器。

与其他做同样工作的工具相比，它的独特之处在于捆绑内容不以文件的形式写入磁盘，而是存储在内存中。当人们试图对代码和样式进行调试时，这一优势是至关重要的。

首先，设置代理浏览客户目录并定位其package.json 文件。在它上面添加下面这行。

"proxy":"http://localhost:5000"

修改后的package.json 文件将如下图所示。

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

修改后的package.json 文件将让webpack代理API请求到运行在5000端口的Express后端服务器。

从React调用Express后端服务器

首先是浏览到client/src ，并编辑文件App.js ，使其显示如下。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
state = {
    data: null
  };

  componentDidMount() {
    this.callBackendAPI()
      .then(res => this.setState({ data: res.express }))
      .catch(err => console.log(err));
  }
    // fetching the GET route from the Express server which matches the GET route from server.js
  callBackendAPI = async () => {
    const response = await fetch('/express_backend');
    const body = await response.json();

    if (response.status !== 200) {
      throw Error(body.message) 
    }
    return body;
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">{this.state.data}</p>
      </div>
    );
  }
}

export default App;

在componentDidMount() 里面，函数callBackendAPI() 被调用。这个函数将获取之前在Express服务器中创建的路由，然后set{data: null} ，以获取请求-响应。

在render函数内部包含this.state.data 的那一行，它将新的数据渲染到DOM上

运行应用程序

我们导航到根目录demoreactapp ，并运行下面的命令。

$cd demoreactapp
$node server.js

运行完文件server.js ，接下来我们将进入我们的浏览器，"http://localhost:5000/express_backend"，下面的信息将被显示。

以上显示了我们的Express服务器正在按预期工作，我们创建的GET route ，并且可以从客户端获取路由。

另外，注意URL路径与我们在server.js 文件中设置的GET route 的路径相同。

接下来，在终端中浏览到client 目录，并运行以下命令。

$cd client
$npm start

上面的命令将运行React Dev服务器，它运行在3000端口，并自动在Web浏览器中打开。

将会显示下面的屏幕，上面有一条信息。

server.js 最后，我们将从GET route 中获取的数据渲染到我们的前端React App，如上图所示。

如果Express服务器断开了连接，React服务器将继续运行。然而，与后台的连接将丢失，并且不会显示任何东西。

结论

Express后台可以做很多事情，比如调用数据库，但在本指南中，我们集中讨论了如何从客户端的React App快速连接到后台的Express服务器。