如何将 Node.js 与 React.js 连接起来？

ReactJS是一个开源 JavaScript 库，用于专门为单页应用程序构建用户界面。它广泛用于制作 SPA（单页应用程序），并且拥有庞大的开发者社区。

由于NodeJS的单线程特性，它主要用于非阻塞、事件驱动的服务器。它用于传统网站和后端 API 服务，但在设计时考虑了实时、基于推送的架构。

在本文中，我们将学习如何连接 NodeJS 作为后端和 ReactJS 作为前端。

先决条件：

• React 和 Node.js 的基础知识。
• 已安装 Node.js（版本 12+）。
• 已安装 npm（版本 6+）。

项目结构：这是所有模块和所需文件都准备好时的结构。

后端设置：首先我们将处理我们的后端（NodeJS）部分。在您的工作文件夹中为 NodeJS 和 package.json 文件创建一个名为 app.js 的文件来运行我们需要的所有模块。

安装模块：

• 安装 ExpressJS 是一个 nodeJS 框架：

npm install express

• 安装节点：

npm install nodemon

package.json 文件的配置：在 package.json文件中分别添加 start 和 dev 脚本，这对于运行和动态运行你的 Node.js 应用程序中的代码很重要，如下所示。

HTML

{
 "name": "demoapp",
 "version": "1.0.0",
 "description": "",
 "main": "app.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "node app.js",
   "dev": "nodemon app.js"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "express": "^4.17.1"
 }
}

文件名-app.js：这是应该在 app.js 中编写的用于 NodeJS 的简单 JavaScript 代码。

Javascript

const express = require("express");
const app = express();
  
app.get("/", (req, res) => {
  res.send("Hello World!");
});
  
const PORT = process.env.PORT || 8080;
  
app.listen(PORT, console.log(`Server started on port ${PORT}`));

使用以下命令运行应用程序：

npm run dev

输出：

• 这将是一个控制台输出。

• 现在在浏览器中访问http://localhost:8080/ ，您将看到以下输出。

Filename- app.js：现在为了连接 React 部分，我们必须在 NodeJS 的 app.js 中进行一些更改。我们已经完成了后端部分。

Javascript

const express = require("express");
const app = express();
  
app.post("/post", (req, res) => {
  console.log("Connected to React");
  res.redirect("/");
});
  
const PORT = process.env.PORT || 8080;
  
app.listen(PORT, console.log(`Server started on port ${PORT}`));

前端设置：首先，我们必须通过编写以下命令来创建 React 应用程序并运行您的应用程序。

npx create-react-app demo
cd demo
npm start

输出：现在在浏览器中访问http://localhost:3000/ ，您将看到以下输出。

连接：我们已经完成了前端和后端部分，现在我们必须连接两者。现在为了将 Reactjs 与 Nodejs 连接起来，我们在 react app 文件夹的 package.json 中添加了这一行：

"proxy": "http://localhost:8080

文件名-package.json： package.json 文件位于您的 React 应用文件夹中。这告诉 React 将 API 请求代理到我们项目中使用 Express 构建的 Node.js 服务器。

HTML

{
 "name": "demo",
 "version": "0.1.0",
 "private": true,
 "proxy": "http://localhost:8080",
 "dependencies": {
   "@testing-library/jest-dom": "^5.11.4",
   "@testing-library/react": "^11.1.0",
   "@testing-library/user-event": "^12.1.10",
   "react": "^17.0.1",
   "react-dom": "^17.0.1",
   "react-scripts": "4.0.2",
   "web-vitals": "^1.0.1"
 },
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "eslintConfig": {
   "extends": [
     "react-app",
     "react-app/jest"
   ]
 },
 "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version"
   ]
 }
}

Filename- App.js：对 React 的 app.js 进行了一些更改，以显示它们是连接的。

Javascript

import logo from "./logo.svg";
import "./App.css";
  
function App() {
  return (
    

      

        
          
A simple React app.....
  
        
          Learn React
        
        

          Connected?
        
      
    
  );
}
  
export default App;

现在在一个终端运行 Nodejs 进程npm run dev并在另一个终端同时使用npm start启动 Reactjs 。

输出：我们看到反应输出，我们看到一个“连接”按钮，我们必须点击它。现在，当我们看到控制台服务器端时，我们看到 ReactJS 与 NodeJS 连接。