如何将 MongoDB 与 ReactJS 连接起来？

首先，我们无法将 React JS 连接到 MongoDB，因为事情不是这样工作的。首先，我们创建一个 react 应用程序，然后为了后端维护，我们在 node.js 和 express.js 中创建 API，它们在不同的端口上运行，而我们的 react 应用程序在不同的端口上运行。用于将 React 连接到我们通过 API 集成的数据库（MongoDB）。现在看看我们如何创建一个简单的 React 应用程序，它从用户那里获取输入的姓名和电子邮件并将其保存到数据库中。

先决条件：

• NodeJS 安装在你的系统中（安装）
• MongoDB 安装在您的系统中（安装）

Setum 文件和文件夹：一一设置前端和后端所需的文件和文件夹。

• 创建 React 应用程序：要构建一个反应应用程序，请按照以下步骤操作：

第 1 步：使用以下命令创建一个反应应用程序

npx create-react-app foldername

第 2 步：完成后，使用以下命令将目录更改为新创建的应用程序

cd foldername

运行应用程序的步骤：输入以下命令运行应用程序。

npm start

使用 NodeJS 设置后端：为后端设置 NodeJ 以与前端集成。

Step1：使用以下命令在根目录下创建一个文件夹

mkdir backend

第 2 步：完成后，使用以下命令将目录更改为新创建的名为 backend 的文件夹

cd backend

第三步：运行以下命令创建配置文件

npm init -y 

第 3 步：现在使用以下命令安装mongoose MongoDB。

npm i express mongoose mongodb cors

第 4 步：创建一个 index.js 文件

touch index.js

项目结构：它将如下所示：

运行应用程序的步骤：输入以下命令运行应用程序。

nodemon index.js 

示例：现在在以下文件中写下以下代码：

index.js

// To connect with your mongoDB database
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/', {
    dbName: 'yourDB-name',
    useNewUrlParser: true,
    useUnifiedTopology: true
}, err => err ? console.log(err) : 
    console.log('Connected to yourDB-name database'));

// Schema for users of app
const UserSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
    },
    email: {
        type: String,
        required: true,
        unique: true,
    },
    date: {
        type: Date,
        default: Date.now,
    },
});
const User = mongoose.model('users', UserSchema);
User.createIndexes();

// For backend and express
const express = require('express');
const app = express();
const cors = require("cors");
console.log("App listen at port 5000");
app.use(express.json());
app.use(cors());
app.get("/", (req, resp) => {

    resp.send("App is Working");
    // You can check backend is working or not by 
    // entering http://loacalhost:5000
    
    // If you see App is working means
    // backend working properly
});

app.post("/register", async (req, resp) => {
    try {
        const user = new User(req.body);
        let result = await user.save();
        result = result.toObject();
        if (result) {
            delete result.password;
            resp.send(req.body);
            console.log(result);
        } else {
            console.log("User already register");
        }

    } catch (e) {
        resp.send("Something Went Wrong");
    }
});
app.listen(5000);