¿Cómo conectar MongoDB con ReactJS?

En primer lugar, no podemos conectar React JS a MongoDB porque las cosas no funcionan así. Primero, creamos una aplicación de reacción y luego, para el mantenimiento de back-end, creamos una API en node.js y express.js que se ejecuta en un puerto diferente y nuestra aplicación de reacción se ejecuta en un puerto diferente. para conectar React a la base de datos (MongoDB) que integramos a través de API. Ahora vea cómo creamos una aplicación React simple que toma el nombre de entrada y el correo electrónico de los usuarios y lo guarda en la base de datos.

Requisito previo:

• NodeJS instalado en su sistema ( instalar )
• MongoDB instalado en su sistema ( instalar )

Archivos y carpetas de Setum: configuración de los archivos y carpetas necesarios para el frontend y el backend, uno por uno.

• Crear aplicación React: para crear una aplicación React, siga los pasos a continuación:

Paso 1: Cree una aplicación de reacción usando el siguiente comando  

npx create-react-app foldername

Paso 2: una vez que haya terminado, cambie su directorio a la aplicación recién creada usando el siguiente comando  

cd foldername

Paso para ejecutar la aplicación: Ingrese el siguiente comando para ejecutar la aplicación.

npm start

Configuración de backend con NodeJS: configure NodeJs para que Backend se integre con frontend.

Paso 1: Cree una carpeta en el directorio raíz usando el siguiente comando

mkdir backend

Paso 2: una vez que haya terminado, cambie su directorio a la carpeta recién creada llamada backend usando el siguiente comando

cd backend

Paso 3: Ejecute el siguiente comando para crear el archivo de configuración

npm init -y 

 Paso 3: Ahora instale mongoose MongoDB usando el siguiente comando.

npm i express mongoose mongodb cors

Paso 4: Cree un archivo que sea index.js

touch index.js

Estructura del proyecto: Tendrá el siguiente aspecto:

Paso para ejecutar la aplicación: Ingrese el siguiente comando para ejecutar la aplicación.

nodemon index.js 

Ejemplo: Ahora escribe el siguiente código en los siguientes archivos:

índice.js