在本文中，我将向您展示如何使用React，Node和Express创建一个项目。我们将获得前端（React）和后端（节点/Express）相互通信。

我一直在YouTube频道上创建这个Musictalk应用程序。这是一个像Facebook这样的应用程序，但是人们谈论音乐。我认为有很多好的教训也将是有用的博客文章。因此，让我们进入它！

项目设置

因此，我们要设置的方式是，我们将制作一个目录或文件夹，这将是我们的项目。然后，我们将在项目中放置2个文件夹。一个文件夹将是一个React项目 - 这将是我们的前端。我们将调用该文件夹client。

然后，我们将创建另一个称为server的文件夹。这将是一个节点并表示后端，我们在其中编写服务器端代码并​​与数据库进行交互。 （我将在连接到MySQL的地方进行后续文章）

因此，在我们的终端中，我们将通过运行mkdir MusicTalk创建我们的项目文件夹。然后，我们将通过运行cd MusicTalk将目录更改为该文件夹/项目。

React项目 - 客户

接下来，我们将创建我们的React项目 - 我们的前端 - 我们只会称呼客户端。因此，我们将运行，npx create-react-app client。

节点/Express项目 - 服务器

然后，我们将创建将是我们的节点/Express应用程序的文件夹。因此，当我们仍在Musictalk文件夹中时，我们将通过运行mkdir server创建另一个文件夹。

让我们通过运行cd server进入我们的服务器文件夹。

我们将运行npm init来创建一个节点应用程序并创建一个软件包。因此，我们添加到节点应用程序中的任何软件包都将添加到package.json文件中。

它将给我们一些有关package.json文件的提示。大多数人只是击中Enter并通过所有这些。

要注意的一件事是entry point提示。默认情况下应该说index.js。有些人会将其更改为app.js，但大多数将其作为index.js。设置Express应用程序后，我们将通过运行node然后使用文件名来启动服务器。所以node index.js。

代码编辑器中的打开项目

现在，我们可以使用cd ..更改目录，并将一个级别返回我们项目的根源。到达那里后，我们可以通过运行code .打开代码编辑器。

无法使用code .打开VS代码？查看此视频here。

在VS代码中，我们将看到2个文件夹：客户端和服务器。客户是我们的React应用程序。服务器是我们的节点应用。在我们的节点应用程序中，我们看到了我们的package.json。

安装和设置Express

现在，我们想在我们的节点应用中安装Express。 Express是用于创建API的后端节点框架。基本上是用于创建服务器和与服务器通信的方式。我们将通过运行cd server将目录重回服务器，然后运行npm install express。 Express现在将在我们的Package.json文件中。

现在，我们可以创建一个index.js文件 - 这是我们节点应用程序的输入点。

在此文件中，我们可以创建一个称为Express和运行要求的常数（express）。然后制作一个名为app的const并调用Express函数。

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

我们可以console.log表达应用程序，并查看使用它的所有不同方法。当我们在设置索引文件文件后，在终端中运行node index.js时，Console.log将显示在我们的终端中。有一些HTTP方法（app.get，app.post等），一个连接方法（app.connect-我们将在以后的文章中使用它来连接到我们的数据库）。

也是收听方法。我们将使用它来启动服务器，并让它在特定端口上收听请求。由于React默认在端口3000上运行，我们使用端口8080。

app.listen(8080, () => {
      console.log('server listening on port 8080')
})

所以，毕竟，您的index.js文件应该看起来像这样：

//index.js
const express = require('express');
const app = express();

console.log(app)

app.listen(8080, () => {
      console.log('server listening on port 8080')
})

在终端中，我们可以运行node index.js（文件的名称），我们将看到一个非常大的Console。 ð

我们可以使用控制 + c。

添加一条路线

现在让我们添加一条路线！我们将使用Express应用程序在路径'/'（root/homepage）上收听GET请求。

我们可以用：
替换console.log（app）

app.get('/', (req, res) => {
      res.send('Hello from our server!')
})

（req，res）=> {}是一个回调函数，我们可以访问请求和响应作为参数。

当打击“/”路径时，我们正在使用响应对象上的发送方法发送字符串。您也可以发送布尔值或数据。通常，这将是JSON对象或一系列数据。

为API调用添加Axios

现在，我们可以转到我们的客户端React应用程序并安装Axios。然后使用它来向我们的后端提出请求，并开始从我们的后端发送数据到我们的前端。

在VS代码中，我们可以使用单独的终端（Control + Backtick打开终端）。确保我们在客户端文件夹中 - 我们的React应用程序。然后运行npm install axios。

向我们的后端打电话

在我们的app.js中，我们可以删除我们不想要的任何默认内容或样式并创建自己的样式。

我的app.js最终看起来像这样：

//App.js

import axios from 'axios';
import './App.css';

//data will be the string we send from our server
const apiCall = () => {
  axios.get('http://localhost:8080').then((data) => {
    //this console.log will be in our frontend console
    console.log(data)
  })
}

function App() {
  return (
    <div className="App">
      <header className="App-header">

        <button onClick={apiCall}>Make API Call</button>

      </header>
    </div>
  );
}

但是等等！我们将获得可怕的CORS错误ð。

因此，在我们的服务器终端中，我们将使用npm install cors添加CORS软件包。

在我们的index.js中，我们需要并使用它。您的index.js看起来像这样：

//index.js

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

app.use(cors())

app.get('/', (req, res) => {
      res.send('Hello from our server!')
})

app.listen(8080, () => {
      console.log('server listening on port 8080')
})

noow如果我们在客户端终端中使用npm run start运行React应用（在服务器终端启动服务器后），然后单击我们的按钮...

它有效！

结论

因此要结束这篇非常漫长的博客文章ð（但希望有所帮助！），我们：

• 为我们的后端创建一个节点/Express应用
• 配置了我们的服务器
• 为我们的前端创建了一个React应用
• 对我们的服务器进行了API调用
• 从我们的后端发送数据到我们的前端

希望这有所帮助！如果您想要视频版本，可以在此处观看我的YouTube视频：

感谢您的阅读和愉快的编码！