Integrar MongoDB con React

Verifique los requisitos previos

Para crear la aplicación Quick Start, necesitas tener instalados los siguientes programas en tu entorno de desarrollo:

Crea un clúster de MongoDB Atlas

MongoDB Atlas es un servicio de base de datos en la nube completamente gestionado que aloja tus implementaciones de MongoDB. Si no tienes una implementación de MongoDB, puedes crear un clúster de MongoDB de forma gratuita (no se requiere tarjeta de crédito) completando el tutorial Introducción a MongoDB. El tutorial Get Started de MongoDB también demuestra cómo cargar conjuntos de datos de muestra en tu clúster, incluido el sample_restaurants base de datos que se emplea en este tutorial.

Para conectarte a tu clúster de MongoDB, debes usar un URI de conexión. Para saber cómo recuperar tu URI de conexión, consulta la sección Agrega tu cadena de conexión del tutorial Primeros pasos de MongoDB.

Cree sus directorios de proyecto

Ejecute el siguiente comando en su terminal para crear un directorio para su proyecto llamado react-quickstart:

mkdir react-quickstart
cd react-quickstart

A continuación, ejecuta los siguientes comandos desde el directorio react-quickstart para crear una carpeta para el back end llamada server e inicializar el archivo package.json:

mkdir server
cd server
npm init -y

Modifica tu archivo package.json

Navega al archivo package.json en el directorio react-quickstart/server. Para utilizar módulos ECMAScript, el formato estándar para empaquetar código JavaScript reutilizable, sustituya la línea existente que especifica el campo "type" por la siguiente línea:

"type": "module",

Ejecute el siguiente comando para instalar las dependencias mongodb, express y cors:

npm install mongodb express cors

Este comando instala MongoDB, el Marco Web Express y el paquete cors de Node.js que permite el uso compartido de recursos con origen cruzado.

Configura tu servidor web Express

Crea un archivo llamado 'server.js' en tu directorio 'react-quickstart/server' y pega el siguiente código:

import express from "express";
import cors from "cors";
import restaurants from "./routes/restaurant.js";
const PORT = process.env.PORT || 5050;
const app = express();
app.use(cors());
app.use(express.json());
app.use("/restaurant", restaurants);
// start the Express server
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

Establecer variables de entorno

En el directorio server, cree un archivo config.env que almacene las siguientes variables:

MONGODB_URI=<connection URI>
PORT=5050

Reemplaza el marcador de posición <connection URI> con el URI de conexión que guardaste en un paso anterior.

Conecta tu servidor a la base de datos

En el directorio server, crea un subdirectorio llamado db. Agrega un nuevo archivo llamado connection.js a este subdirectorio y pega el siguiente código:

import { MongoClient } from "mongodb";
const uri = process.env.MONGODB_URI || "";
const client = new MongoClient(uri);
try {
// Connect the client to the server
await client.connect();
// Send a ping to confirm a successful connection
await client.db("admin").command({ ping: 1 });
console.log(
   "Pinged your deployment. You successfully connected to MongoDB!"
);
} catch(err) {
   console.error(err);
}
let db = client.db("sample_restaurants");
export default db;

Este archivo se conecta a tu implementación de MongoDB, accede a la base de datos sample_restaurants y pone a prueba la conexión a la base de datos.

Crear extremos de API del servidor

En el directorio server, crea un subdirectorio llamado routes. Cree un archivo llamado restaurant.js en el subdirectorio routes y pegue el siguiente código:

import express from "express";
import db from "../db/connection.js";
// Creates an instance of the Express router, used to define our routes
const router = express.Router();
// Gets a list of all the restaurants
router.get("/", async (req, res) => {
  let collection = await db.collection("restaurants");
  let results = await collection.find({}).toArray();
  res.send(results).status(200);
});
// Lists restaurants that match the query filter
router.get("/browse", async (req, res) => {
  try {
    let collection = await db.collection("restaurants");
    let query = {
      borough: "Queens",
      name: { $regex: "Moon", $options: "i" },
    };
    let results = await collection.find(query).toArray();
    res.send(results).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error browsing restaurants");
  }
});
export default router;

Este archivo accede a la colección restaurants en la base de datos sample_restaurants y define los siguientes endpoints GET:

• /: Recupera todos los restaurantes de la colección de muestras

• /browse: Recupera restaurantes que cumplen los criterios de la query, la cual filtra los restaurantes de Queens que contienen la palabra "Moon" en el nombre

Añadir la plantilla de React

En el directorio react-quickstart, ejecute los siguientes comandos para agregar los archivos de plantilla de React utilizando Vite:

npm create vite@latest client

Este comando le solicita que responda a una serie de preguntas de configuración. Para cada pregunta, elige las siguientes respuestas del menú desplegable:

• Selecciona un framework: React

• Selecciona una variante: JavaScript

• ¿Usar rolldown-vite (Experimental)?: No

• ¿Instalar con npm y empezar ahora?: No

Después de ejecutar el comando, tu proyecto tiene un directorio client que contiene la base del front-end.

Instalar Tailwind CSS

Esta muestra de aplicación utiliza el marco CSS Tailwind para el formato de la Interfaz de Usuario. Para instalarlo, navega al directorio client creado en el paso anterior y ejecuta el siguiente comando:

npm install tailwindcss @tailwindcss/vite

Después de instalar, dirígete a tu archivo vite.config.js. Añade el plugin @tailwindcss/vite actualizando las declaraciones de importación y el arreglo plugins, como se muestra en las líneas resaltadas:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
plugins: [
   react(),
   tailwindcss()
  ],
})

A continuación, navegue hasta el archivo client/src/index.css y añada la siguiente instrucción de importación:

@import "tailwindcss";

Instalar el enrutador React

Para habilitar el enrutamiento de páginas del lado del cliente a React, instala el paquete react-router-dom ejecutando el siguiente comando en el directorio client:

npm install -D react-router-dom

Configura el enrutador de React

Navega al archivo client/src/main.jsx y pega el siguiente código:

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import RestaurantList from "./components/RestaurantList";
import "./index.css";
const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "/",
        element: <RestaurantList />,
      },
    ],
  },
  {
    path: "/browse",
    element: <App />,
    children: [
      {
        path: "/browse",
        element: <RestaurantList />,
      },
    ],
  },
]);
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

Este archivo configura el enrutamiento del lado del cliente y define las siguientes rutas:

• /: Renderiza el componente RestaurantList, que llama al endpoint de la API /restaurant/ para mostrar todos los restaurantes

• /browse: Renderiza el componente RestaurantList, que llama el endpoint de API /restaurant/browse para mostrar restaurantes filtrados

Crear los componentes

Ejecuta los siguientes comandos desde el directorio client para crear una nueva carpeta llamada components que contenga dos archivos:

mkdir src/components
cd src/components
touch Navbar.jsx RestaurantList.jsx

El archivo Navbar.jsx configura una barra de navegación que enlaza a los componentes requeridos. Pegue el siguiente código en este archivo:

import { NavLink } from "react-router-dom";
export default function Navbar() {
  return (
    <div>
      <nav className="flex justify-between items-center mb-6">
        <NavLink to="/">
          <img
            alt="MongoDB logo"
            className="h-10 inline"
            src="https://d3cy9zhslanhfa.cloudfront.net/media/3800C044-6298-4575-A05D5C6B7623EE37/4B45D0EC-3482-4759-82DA37D8EA07D229/webimage-8A27671A-8A53-45DC-89D7BF8537F15A0D.png"
          ></img>
        </NavLink>
      </nav>
    </div>
  );
}

El archivo RestaurantList.jsx es el componente de visualización de los restaurantes, y recupera y muestra la información del restaurante. Pegue el siguiente código en este archivo:

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
const Restaurant = (props) => (
  <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.restaurant.name}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.restaurant.borough}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.restaurant.cuisine}
    </td>
  </tr>
);
export default function RestaurantList() {
  const [restaurants, setRestaurants] = useState([]);
  const location = useLocation();
  // Fetches the restaurants from the database
  useEffect(() => {
    async function getRestaurants() {
      // Determines which endpoint to call based on current route
      const endpoint =
        location.pathname === "/browse"
          ? "http://localhost:5050/restaurant/browse"
          : "http://localhost:5050/restaurant/";
      const response = await fetch(endpoint);
      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const restaurants = await response.json();
      setRestaurants(restaurants);
    }
    getRestaurants();
    return;
  }, [location.pathname]);
  // Maps each restaurant on the table
  function restaurantList() {
    return restaurants.map((restaurant) => {
      return <Restaurant restaurant={restaurant} key={restaurant._id} />;
    });
  }
  // Retrieves the dynamic title based on current route
  const getTitle = () => {
    return location.pathname === "/browse"
      ? 'Filtered Restaurants (Queens, containing "Moon")'
      : "All Restaurants";
  };
  // Displays the restaurants table
  return (
    <>
      <h3 className="text-lg font-semibold p-4">{getTitle()}</h3>
      <div className="border rounded-lg overflow-hidden">
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Name
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Borough
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Cuisine
                </th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              {restaurantList()}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

Por último, navega hasta el archivo client/src/App.jsx. Este archivo es el componente principal del diseño y asegura que el componente Navbar se renderice en la parte superior de cada página, por encima del componente secundario. Pega el siguiente código en este archivo:

import { Outlet } from "react-router-dom";
import Navbar from "./components/Navbar";
const App = () => {
  return (
    <div className="w-full p-6">
      <Navbar />
      <Outlet />
    </div>
  );
};
export default App;

Ejecutar la aplicación del servidor

Navega al directorio react-quickstart/server y ejecuta el siguiente comando para iniciar el servidor:

node --env-file=config.env server

Si es exitoso, este comando muestra la siguiente información:

Pinged your deployment. You successfully connected to MongoDB!
Server listening on port 5050

Ejecutar la aplicación cliente

En una ventana de terminal separada, navegue al directorio react-quickstart/client. Ejecuta el siguiente comando para arrancar el front end de React:

npm run dev

Si es exitoso, este comando muestra la siguiente información:

VITE v7.2.4  ready in 298 ms
➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

Abre el sitio de la aplicación

Abre la URL http://localhost:5173/, recuperada del paso anterior. La página de inicio inicial muestra una lista de todos los restaurantes de la colección sample_restaurants.restaurants:

Luego, navegue a la URL http://localhost:5173/browse para ver los restaurantes que coinciden con la query de campo name y borough: