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 para comenzar con MongoDB también muestra cómo cargar conjuntos de datos de muestra en tu clúster, incluyendo la base de datos sample_restaurants que se usa 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

Ejecute el siguiente comando desde el directorio react-quickstart/server para crear un archivo llamado server.js:

touch server.js

New-Item -ItemType File server.js

Pega el siguiente código en el archivo:

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}`);
});

Este archivo es el punto de entrada para su back end. Inicia un servidor Express, habilita el uso compartido de recursos de origen cruzado (CORS) para que su cliente React pueda llamar al servidor, y monta las rutas definidas en routes/restaurant.js en la ruta /restaurant. Cree el archivo routes/restaurant.js en un paso posterior.

Establecer variables de entorno

Ejecute el siguiente comando desde el directorio server para crear un archivo llamado config.env:

touch config.env

New-Item -ItemType File config.env

Agrega las siguientes variables al archivo:

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

Ejecute los siguientes comandos desde el directorio server para crear una nueva carpeta llamada db que contiene un archivo connection.js:

mkdir db
touch db/connection.js

mkdir db
New-Item -ItemType File db/connection.js

Pega el siguiente código en el archivo connection.js:

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 su implementación de MongoDB, accede a la base de datos sample_restaurants y pone a prueba la conexión a la base de datos. Exporta la conexión a la base de datos como db. En el siguiente paso, el archivo routes/restaurant.js importa esta conexión db de ../db/connection.js para query la base de datos.

Crear extremos de API del servidor

Ejecute los siguientes comandos desde el directorio server para crear una nueva carpeta llamada routes que contiene un archivo restaurant.js:

mkdir routes
touch routes/restaurant.js

mkdir routes
New-Item -ItemType File routes/restaurant.js

Pega el siguiente código en el archivo restaurant.js:

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 importa la conexión db de db/connection.js, 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

Navega hasta el directorio react-quickstart. Luego, ejecute el siguiente comando 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 lado del cliente.

Instalar Tailwind CSS

Esta aplicación de muestra utiliza el marco de trabajo Tailwind CSS para el formato de la interfaz de usuario. Navegue hasta el directorio client y, a continuación, ejecute el siguiente comando para instalar Tailwind CSS:

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, reemplace el contenido del archivo client/src/index.css con 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 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 es el punto de entrada para tu cliente. Importa el componente de diseño App y el componente RestaurantList, 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

mkdir src/components
cd src/components
New-Item -ItemType File Navbar.jsx
New-Item -ItemType File 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. Envía solicitudes a los endpoints de la API /restaurant definidos en server/routes/restaurant.js. 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. Ejecute el siguiente comando para iniciar el cliente 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: