创建 React、Node 和 Express 应用程序

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

如果您想要视频版本，可以在这里观看我的 YouTube 视频：

我一直在我的YouTube频道上创建MusicTalk应用。它有点像Facebook，但人们会讨论音乐。里面有很多很棒的课程，我觉得写成博客文章也很有帮助。那就让我们开始吧！

项目设置

所以，我们设置的方法是创建一个目录，或者说文件夹，作为我们的项目。然后在项目里放两个文件夹。其中一个文件夹是 React 项目，也就是我们的前端。我们把这个文件夹命名为client。

然后，我们将创建另一个名为 的文件夹server。这将是 Node 和 Express 后端，我们将在其中编写服务器端代码并​​与数据库交互。（我将在后续文章中介绍如何连接到 MySQL）

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

React 项目 - 客户端

接下来，我们将创建 React 项目（前端），我们暂且称之为客户端。因此，我们将运行npx create-react-app client。

Node/Express 项目 - 服务器

然后，我们将创建一个文件夹，用于存放 Node/Express 应用。因此，在 MusicTalk 文件夹中，我们将通过运行以下命令来创建另一个文件夹mkdir server。

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

我们将npm init创建一个 Node 应用，并创建一个 package.json 文件来存放依赖项。因此，我们添加到 Node 应用中的任何包都会被添加到 package.json 文件中。

它会给我们一些关于 package.json 文件的提示。大多数人直接按 Enter 键就跳过了。

需要注意的是entry point提示符。默认情况下，它应该显示 index.js。有些人会将其更改为 app.js，但大多数人会保留 index.js。当我们的 Express 应用设置完成后，我们将通过运行node文件名来启动服务器。所以node index.js。

在代码编辑器中打开项目

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

无法使用 VS Code 打开？点击此处code .观看视频。

在 VS Code 中，我们会看到两个文件夹：client 和 server。client 是我们的 React 应用。server 是我们的 Node 应用。在 Node 应用内部，我们可以看到 package.json 文件。

安装和设置 Express

现在我们需要在 Node 应用中安装 Express。Express 是一个用于创建 API 的后端 Node 框架。它主要用来创建服务器以及与服务器通信的方式。我们先运行cd server，然后切换回服务器目录，再运行npm install express。Express 现在会保存在我们的 package.json 文件中。

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

在这个文件中，我们可以创建一个名为 express 的常量并运行 require('express')。然后创建一个名为 app 的常量并调用 express 函数。

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

我们可以 console.log 该 express 应用，并查看它提供的所有不同方法。当我们node index.js完成 index.js 文件的设置后，在终端中运行时，console.log 将会显示在终端中。它包含一些 http 方法（app.get、app.post 等），以及一个连接方法（app.connect——我们将在以后的文章中使用它来连接数据库）。

还有一个 listen 方法。我们将使用它来启动服务器并让它监听特定端口上的请求。由于 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(我们的文件名称)，然后我们会看到一个非常大的 express 应用的 console.log，并且我们的服务器正在监听端口 8080！🎉

我们可以使用 Control + C 退出并关闭服务器。

添加路线

现在让我们添加一条路由！我们将使用 Express 应用监听路径 '/' (root/homepage) 上的 get 请求。

我们可以将 console.log(app) 替换为：

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

(req, res) => {} 是一个回调函数，我们可以在其中访问请求和响应作为参数。

我们使用响应对象的 send 方法，当“/”路径被命中时发送一个字符串。您也可以发送布尔值或数据。通常情况下，发送的数据是一个 JSON 对象或一个数据数组。

添加 Axios 进行 API 调用

现在，我们可以在客户端 React 应用里安装 axios 了。然后使用它向后端发出请求，并开始从后端向前端发送数据。

在 VS Code 中，我们可以使用单独的终端（Ctrl + 反引号打开终端）。确保我们位于客户端文件夹 - 我们的 React 应用。然后运行npm install axios​​。

向我们的后端进行 API 调用

在我们的 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 错误😭。

因此在我们的服务器终端中，我们将添加 cors 包npm install 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')
})

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

有用！

结论

因此，为了总结这篇非常冗长的博客文章😅（但希望对您有所帮助！），我们：

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

希望这有帮助！

感谢您的阅读，祝您编码愉快！