如何创建一个可以使用React JS和Node.js的前端和后端的应用程序由React前端和Node后端形成的组合可以在

由React前端和Node后端形成的组合可以在开发和编程的世界里带来巨大的成就。该平台提供了一个坚实的组合来开发一个应用程序。

在这篇文章中，我们看看你可以遵循哪些流程，在前端使用React，在后端使用Node来构建和部署一个应用程序。让我们看看你如何使用React JS和Node.js从头开始创建一个网络应用。

在这个过程中你将需要的工具

在这个过程中，你将需要以下工具。

你需要首先确保Node和NPM已经安装在你的计算机系统中。你可以通过互联网下载这两个平台，并找到它们的解决方案。
一旦你的系统中有了这些工具，你就可以选择一个你喜欢的代码编辑器。VSCode编辑器是目前市场上最好的编辑器，被大多数开发者和程序员所青睐。
你需要确保Git已经安装在你的系统中。Git的存在是必要的，你可以用Heroku进行部署。你可以通过互联网下载Git。

使用React和Node.js创建一个应用程序的步骤

创建后端

你需要先为你的项目创建一个文件夹。一旦这个文件夹准备好了，你可以把它拖放到你的代码编辑器中。这样做将创建一个package.json文件，这将使你能够跟踪所有的依赖性。

你将使用Express来创建一个Web服务器，它将运行端口为3001。Heroku将在应用部署时确定代码的值。下面的代码将被运行。

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

最后，我们可以通过在端口3001中提到以下内容来设置应用程序的运行。

npm start

> node server/index.js

Server listening on 3001

创建一个API端点

过程中的下一步是创建一个API端点。这个API端点将有助于给React应用提供数据，对数据进行修改，并发出只有服务器才能发出的命令。

我们将通过向我们的React应用程序发送一条 "来自服务器的你好 "的消息来启动这个操作。下面提到的代码将为这个路由创建正确的端点。

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

服务器将被重新启动，因为已经对Node代码进行了修改。你可以通过在浏览器中运行本地主机API来测试该代码。

创建React前端

过程中的第三步是为你的应用程序创建一个前端。你应该首先打开另一个终端实验室，创建一个新的React项目。

接下来将使用你的React应用程序和所有的依赖项。然后我们将通过运行启动脚本来启动React应用程序。该脚本将与Node服务器的脚本相同。

然后我们将在localhost: 300上输入我们的代码。

cd client
npm start

编译成功!

现在你可以在浏览器中查看客户端。

Local:            http://localhost:3000

进行HTTP请求

这个过程的第四步是创建HTTP请求，与API进行交互。这可以通过Fetch API发出一个简单的GET请求来启动。请求将被发送到后端，数据可以以JSON格式返回。

这里要输入的代码看起来像下面的文字。

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}

export default App;

启动网络部署

现在是时候让你把你的应用程序部署到网络上了。你应该遵循的第一个步骤是删除create-react-app代码中的Git仓库。这是一个必要的步骤，因为你需要将Git repo部署在项目的根部，而不是在 "客户端"。

cd client
rm -rf .git

一旦我们部署了代码，React前端和Node后端代码将在herokuapp的同一领域内提供服务。我们将看到这些代码和请求是如何被Node API处理的。我们需要一个代码，帮助在用户需要时向他们显示我们的React App。

这可以通过添加下面的代码来实现。

// server/index.js
const path = require('path');
const express = require('express');
...
// Have Node serve the files for our built React app
app.use(express.static(path.resolve(__dirname, '../client/build')));

// Handle GET requests to /api route
app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

// All other GET requests not handled before will return our React app
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

上面的代码允许我们的React前端和Node后端都部署在同一个域内。下面的代码将为该项目添加一个新的Git Repo。

git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"