Integre o MongoDB com o React

Verifique os pré-requisitos

Para criar o aplicativo Quick Start, você precisa do seguinte software instalado em seu ambiente de desenvolvimento:

Criar um cluster MongoDB Atlas

O MongoDB Atlas é um banco de dados em nuvem gerenciado que hospeda suas implantações do MongoDB. Se você não tiver uma implantação do MongoDB, poderá criar um cluster do MongoDB gratuitamente (nenhum cartão de crédito necessário) concluindo o tutorial MongoDB Get Started. O tutorial de Introdução ao MongoDB também demonstra como carregar conjuntos de dados de amostra em seu cluster, incluindo o banco de dados sample_restaurants usado neste tutorial.

Para se conectar ao cluster MongoDB, você deve usar um URI de conexão. Para aprender como recuperar seu URI de conexão, veja a seção Adicionar sua string de conexão do tutorial de Introdução ao MongoDB.

Crie seus diretórios de projeto

Execute o seguinte comando no seu terminal para criar um diretório para seu projeto denominado react-quickstart:

mkdir react-quickstart
cd react-quickstart

Em seguida, execute os seguintes comandos a partir do diretório react-quickstart para criar uma pasta para o backend denominada server e inicializar o arquivo package.json:

mkdir server
cd server
npm init -y

Modifique seu arquivo package.json

Navegue até o arquivo package.json no diretório react-quickstart/server. Para usar os módulos ECMAScript, o formato padrão para empacotar código JavaScript para reutilização, substitua a linha existente que especifica o campo "type" pela seguinte linha:

"type": "module",

Execute o seguinte comando para instalar as dependências mongodb, express e cors:

npm install mongodb express cors

Este comando instala o MongoDB, o framework web Express e o pacote cors nó.js que permite o compartilhamento de recursos entre origens.

Configure seu servidor web Express

Execute o seguinte comando no diretório react-quickstart/server para criar um arquivo chamado server.js:

touch server.js

New-Item -ItemType File server.js

Cole o seguinte código no arquivo:

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 arquivo é o ponto de entrada para o seu back-end. Ele inicia um servidor Express, permite o compartilhamento de recursos de origem cruzada (CORS) para que seu cliente React possa chamar o servidor e monta as rotas definidas em routes/restaurant.js no caminho /restaurant. Você cria o arquivo routes/restaurant.js em uma etapa posterior.

Definir variáveis de ambiente

Execute o seguinte comando no diretório server para criar um arquivo chamado config.env:

touch config.env

New-Item -ItemType File config.env

Adicione as seguintes variáveis ao arquivo:

MONGODB_URI=<connection URI>
PORT=5050

Substitua o espaço reservado <connection URI> pelo URI de conexão que você salvou em uma etapa anterior.

Conecte seu servidor ao banco de dados

Execute os seguintes comandos do diretório server para criar uma nova pasta chamada db que contém um arquivo connection.js:

mkdir db
touch db/connection.js

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

Cole o código abaixo no arquivo 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 arquivo se conecta à sua implantação do MongoDB, acessa o banco de dados sample_restaurants e testa a conexão com o banco de dados. Ele exporta a conexão com o banco de dados como db. Na próxima etapa, o arquivo routes/restaurant.js importa essa conexão db de ../db/connection.js para fazer query no banco de dados.

Criar pontos de extremidade de API do servidor

Execute os seguintes comandos do diretório server para criar uma nova pasta chamada routes que contém um arquivo restaurant.js:

mkdir routes
touch routes/restaurant.js

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

Cole o código abaixo no arquivo 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 arquivo importa a conexão db de db/connection.js, acessa a coleção restaurants no banco de dados sample_restaurants e define os seguintes pontos de extremidade GET:

• /: recupera todos os restaurantes da coleção de amostras

• /browse: recupera restaurantes que correspondem aos critérios de query, que aplica um filtro para restaurantes em Queens que contêm a palavra "Moon" no nome

Adicione o modelo do React

Navegue até o diretório react-quickstart . Em seguida, execute o seguinte comando para adicionar os arquivos de modelo React usando Vite:

npm create vite@latest client

Este comando solicita que você responda a uma série de perguntas de configuração. Para cada pergunta, escolha as seguintes respostas no menu suspenso:

• Selecione um framework: React

• Selecione uma variante: JavaScript

• Usar rolldown-vite (experimental)?: Não

• Instalar com npm e começar agora?: Não

Após executar o comando, seu projeto tem um diretório client que contém andaime do lado do cliente.

Instalar o Tailwind CSS

Este aplicativo de amostra usa o framework Tailwind CSS para formatação da IU. Navegue até o diretório client e execute o seguinte comando para instalar o Tailwind CSS:

npm install tailwindcss @tailwindcss/vite

Após instalar, navegue até seu arquivo vite.config.js. Adicione o plugin @tailwindcss/vite atualizando as declarações de importação e a array plugins, conforme mostrado nas linhas destacadas:

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()
  ],
})

Em seguida, substitua o conteúdo do arquivo client/src/index.css pela seguinte declaração de importação:

@import "tailwindcss";

Instale o roteador do React

Para habilitar o roteamento de página do lado do cliente para o React, instale o pacote react-router-dom executando o seguinte comando no diretório client:

npm install react-router-dom

Configure o roteador do React

Navegue até o arquivo client/src/main.jsx e cole o seguinte 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 arquivo é o ponto de entrada para o seu cliente. Ele importa o componente de layout App e o componente RestaurantList, configura o roteamento do lado do cliente e define as seguintes rotas:

• /: Renderiza o componente RestaurantList, que chama o ponto de extremidade da API /restaurant/ para exibir todos os restaurantes

• /browse: Renderiza o componente RestaurantList, que chama o ponto de extremidade da API /restaurant/browse para exibir restaurantes filtrados

Criar os componentes

Execute os seguintes comandos a partir do diretório client para criar uma nova pasta denominada components que contém dois arquivos:

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

O arquivo Navbar.jsx configura uma barra de navegação que vincula aos componentes necessários. Cole o seguinte código neste arquivo:

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

O arquivo RestaurantList.jsx é o componente de visualização dos restaurantes e recupera e exibe as informações do restaurante. Ele envia solicitações para os pontos de extremidade da API /restaurant definidos em server/routes/restaurant.js. Cole o seguinte código neste arquivo:

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 fim, navegue até o arquivo client/src/App.jsx. Esse arquivo é o componente de layout principal e garante que o componente Navbar renderiza no topo de cada página acima do componente filho. Cole o seguinte código neste arquivo:

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;

Execute o aplicativo do servidor

Navegue até o diretório react-quickstart/server e execute o seguinte comando para iniciar o servidor:

node --env-file=config.env server

Se bem-sucedido, este comando gera as seguintes informações:

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

Executar o aplicativo cliente

Em uma janela de terminal separada, navegue até o diretório react-quickstart/client. Execute o seguinte comando para iniciar o cliente React:

npm run dev

Se bem-sucedido, este comando gera as seguintes informações:

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

Abra o site do aplicativo

Abra a http://localhost:5173/ URL, recuperado da etapa anterior. A página de destino inicial exibe uma lista de todos os restaurantes na coleção sample_restaurants.restaurants:

Em seguida, navegue até o http://localhost:5173/browse URL para visualizar os restaurantes que correspondem à query de campo name e borough: