如何将 NodeJS 与 ReactJS 连接？

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

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

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

先决条件：

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

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

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

安装模块：

• 安装 ExpressJS 是一个 nodeJS 框架：

npm install express

• 安装 nodemon：

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"
 }
}

Filename- app.js：这里是简单的 JavaScript 代码，应该写在 app.js 中，用于 NodeJS。

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

Filename- 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 连接。