AnúncioApresentando MongoDB 8.0, o MongoDB mais rápido de todos os tempos! Leia mais >

AnúncioVoyage AI se junta ao MongoDB para impulsionar aplicativos de AI mais precisos e confiáveis no Atlas. Saiba mais >

Como usar o MERN Stack: um guia completo

Você precisará acessar um banco de banco de dados do MongoDB Atlas para este tutorial. Se você não tiver uma conta, pode se inscrever gratuitamente para acompanhar.

Comece gratuitamente!

Este tutorial mostrará como criar um aplicação MERN de pilha completa — neste caso, um banco de banco de dados de funcionários — com as ferramentas mais atuais disponíveis. Antes de começar, certifique-se de que está familiarizado com os fundamentos do Node.js e React.js. Você também precisará acessar um banco de banco de dados do MongoDB Atlas para este tutorial. O código completo está disponível no repositório do GitHub.

Tabela de conteúdo

O que é a pilha MERN?
Configurando o projeto
Conectando ao MongoDB Atlas
Configurando o aplicativo React
Configurando o roteador do React
Conectando o front-end ao back-end

O que é a pilha MERN?

A pilha MERN é uma estrutura de desenvolvimento da Web que consiste em MongoDB, Express, React.js e Node.js. É uma das diversas variantes da pilha MEAN.

Ao usar a pilha MERN, você trabalha com React para implementar a camada de apresentação, Express e Node.js para compor a camada intermediária ou de aplicação, e MongoDB para criar a camada de banco de dados.

Neste tutorial de pilha do MERN, utilizaremos essas quatro tecnologias para desenvolver um aplicação básico que seja capaz de registrar as informações dos funcionários e exibi-las usando o front-end do React.

Como começar com a pilha MERN

Para começar, você precisará fazer o seguinte:

Instale o Node.js

Instale o Node.js baixando a versão LTS ou a versão atual.
Observação: a versão usada neste tutorial é v20.11.0

Ter ou instalar um editor de código

Você pode usar qualquer editor de código de sua escolha para este tutorial. No entanto, para esta demonstração, usaremos o Visual Studio Code.

Uma ilustração que descreve um tutorial em vídeo.

Se você é um aluno visual, confira a versão em vídeo deste tutorial.

Configurando o projeto

(Fique à vontade para codificar junto ou baixar o código completo do repositório do GitHub.)

A MERN nos permite criar soluções de pilha completa. Portanto, para aproveitar todo o seu potencial, criaremos um projeto de pilha MERN. Para este projeto, criaremos um back-end e um front-end. O front-end será implementado com React e o back-end será implementado com MongoDB, Node.js e Express. Ligaremos para o cliente front-end e o servidor back-end.

Vamos começar criando um diretório vazio: mern. Essa pasta conterá nossas pastas de cliente e servidor.

Code Snippet

Em seguida, crie uma pasta para o backend e nomeie-a de servidor. Em seguida, inicializaremos o arquivo .json do pacote usando npm init.

Code Snippet

Para usar os módulos ECMAScript, o formato padrão oficialmente suportado para pacote código JavaScript para reutilização, adicionaremos uma linha ao arquivo .json do pacote .

Code Snippet

Também instalaremos as dependências.

Code Snippet

O comando acima instala três pacotes diferentes:

mongodb — o driver de banco de dados de dados do MongoDB que permite que seus aplicativos Node.js se conectem ao banco de banco de dados e trabalhem com dados
Express - a estrutura da Web para Node.js (ela facilitará nossa vida)
cors — um pacote Node.js que permite o compartilhamento de recursos entre origens

Podemos conferir as dependências instaladas no arquivo .json do pacote. Ela deve listar os pacotes junto com suas versões.

Depois de garantirmos que as dependências foram instaladas com sucesso, criamos um arquivo chamado server.js com o seguinte código:

mern/servidor/servidor.js

Code Snippet

Aqui, estamos importando Express e os cors a serem usados. const port = process.env.PORT acessará a variável port do config.env que criaremos a seguir.

Conectando ao MongoDB Atlas

É hora de conectar nosso servidor ao banco de dados. Usaremos o MongoDB Atlas como banco de dados. MongoDB Atlas é um serviço de banco de dados baseado em cloudque oferece segurança e confiabilidade robustas para os dados. O MongoDB Atlas oferece um cluster de nível gratuito que nunca expira e permite que você acesse um subconjunto de recursos e funcionalidades do Atlas.

Siga o guia Introdução ao Atlas para criar uma conta, implantar seu primeiro cluster e localizar a string de conexão do cluster.

Agora que você tem a string de conexão, volte para o diretório do servidor e crie um arquivo config.env. Nesse ponto, atribua a string de conexão a uma nova variável Atlas variável. Quando terminar, seu arquivo deverá ter uma aparência semelhante ao abaixo. Substitua < username >, < password >, < clusterName > e < projectId > pelo nome de usuário, senha, nome do cluster e ID do projeto do seu banco de dados.

mern/servidor/config.env

Code Snippet

Crie uma pasta no diretório do servidor chamada db e, dentro dela, um arquivo chamado connection.js. Ali podemos adicionar o seguinte código para conectar ao nosso banco de dados de dados :

MERN/server/db/connection.js

Code Snippet

Pontos de extremidade da API do servidor

Banco de dados feito. Servidor concluído. Agora é hora dos endpoints da API. Vamos começar criando uma pasta de rotas e adicionando record.js a ela. Navegue de volta ao diretório "server" e crie o novo diretório e arquivo:

Code Snippet

O arquivo routes/record.js também terá as seguintes linhas de código:

MERN/server/routes/record.js

Code Snippet

import express from "express";

// This will help us connect to the database
import db from "../db/connection.js";

// This help convert the id from string to ObjectId for the _id.
import { ObjectId } from "mongodb";

// router is an instance of the express router.
// We use it to define our routes.
// The router will be added as a middleware and will take control of requests starting with path /record.
const router = express.Router();

// This section will help you get a list of all the records.
router.get("/", async (req, res) => {
  let collection = await db.collection("records");
  let results = await collection.find({}).toArray();
  res.send(results).status(200);
});

// This section will help you get a single record by id
router.get("/:id", async (req, res) => {
  let collection = await db.collection("records");
  let query = { _id: new ObjectId(req.params.id) };
  let result = await collection.findOne(query);

if (!result) res.send("Not found").status(404);
  else res.send(result).status(200);
});

// This section will help you create a new record.
router.post("/", async (req, res) => {
  try {
    let newDocument = {
      name: req.body.name,
      position: req.body.position,
      level: req.body.level,
    };
    let collection = await db.collection("records");
    let result = await collection.insertOne(newDocument);
    res.send(result).status(204);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error adding record");
  }
});

// This section will help you update a record by id.
router.patch("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };
    const updates = {
      $set: {
        name: req.body.name,
        position: req.body.position,
        level: req.body.level,
      },
    };

let collection = await db.collection("records");
    let result = await collection.updateOne(query, updates);
    res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error updating record");
  }
});

// This section will help you delete a record
router.delete("/:id", async (req, res) => {
  try {
    const query = { _id: new ObjectId(req.params.id) };

const collection = db.collection("records");
    let result = await collection.deleteOne(query);

res.send(result).status(200);
  } catch (err) {
    console.error(err);
    res.status(500).send("Error deleting record");
  }
});

export default router;

Se você executar o aplicação neste ponto, receberá a seguinte mensagem em seu terminal à medida que a conexão for estabelecida. Observe que estamos usando a funcionalidade de variável de ambiente integrada das versões mais recentes do Node.js.

Code Snippet

Isso é tudo para o back-end. Agora, começaremos a trabalhar no front-end.

Configurando o aplicativo React

Para o frontend, usaremos o Vite, uma maneira moderna de criar um aplicação React. Em um novo terminal dentro do diretório mern , vamos configurar isso:

Code Snippet

Existem algumas dependências adicionais que serão usadas em nosso projeto. Começaremos com o Tailwind CSS.

Code Snippet

Em seguida, editaremos o campo de conteúdo no arquivo tailwind.config.js .

Code Snippet

No arquivo src/index.css, precisamos adicionar as diretivas Tailwind e excluir todo o resto.

Code Snippet

Por fim, instalaremos oReact-router-dom.

Code Snippet

O Tailwind é uma estrutura CSS baseada em utilitários que permite adicionar estilos CSS utilizando nomes de classe predefinidos. E o React Router adiciona roteamento de página do lado do cliente ao React!

Configurando o roteador do React

Dentro de src/main.jsx, adicionaremos o seguinte código:

mern/ cliente/src/main.jsx

Code Snippet

Definimos as rotas da página do aplicação na variável roteador e usamos o RouterProvider para manter a interface do usuário sincronizada com o URL. O RouterProvider ajuda com transições contínuas ao alternar entre componentes. Basicamente, ele só recarregará ou atualizará o componente que precisa ser alterado, em vez de atualizar ou recarregar a página inteira. Embora o React Router não seja uma necessidade, ele é importante se você deseja que seu aplicativo seja responsivo.

Criando componentes

Em seguida, vamos criar os componentes que definimos em nossas rotas. Crie uma pasta de componentes dentro da pasta src . Para cada componente que criarmos, adicionaremos um novo .js arquivo dentro da pasta de componentes . Neste caso, adicionaremos Navbar.jsx, RecordList.jsx e ModifyRecord.jsx.

Code Snippet

Os instantâneos abaixo mostram como cada arquivo se pareceria.

Navbar.jsx

No componente navbar.js, criaremos uma barra de navegação que nos vinculará aos componentes necessários usando o código a seguir.

MERN/client/src/components/Navbar.jsx

Code Snippet

RecordList.jsx

O código a seguir servirá como um componente de visualização de nossos registros. Ele buscará todos os registros em nosso banco de dados de dados por meio de um método GET.

mern/cliente/src/components/RecordList.jsx

Code Snippet

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Record = (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.record.name}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.position}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      {props.record.level}
    </td>
    <td className="p-4 align-middle [&:has([role=checkbox])]:pr-0">
      <div className="flex gap-2">
        <Link
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 h-9 rounded-md px-3"
          to={`/edit/${props.record._id}`}
        >
          Edit
        </Link>
        <button
          className="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3"
          color="red"
          type="button"
          onClick={() => {
            props.deleteRecord(props.record._id);
          }}
        >
          Delete
        </button>
      </div>
    </td>
  </tr>
);

export default function RecordList() {
  const [records, setRecords] = useState([]);

// This method fetches the records from the database.
  useEffect(() => {
    async function getRecords() {
      const response = await fetch(`http://localhost:5050/record/`);
      if (!response.ok) {
        const message = `An error occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const records = await response.json();
      setRecords(records);
    }
    getRecords();
    return;
  }, [records.length]);

// This method will delete a record
  async function deleteRecord(id) {
    await fetch(`http://localhost:5050/record/${id}`, {
      method: "DELETE",
    });
    const newRecords = records.filter((el) => el._id !== id);
    setRecords(newRecords);
  }

// This method will map out the records on the table
  function recordList() {
    return records.map((record) => {
      return (
        <Record
          record={record}
          deleteRecord={() => deleteRecord(record._id)}
          key={record._id}
        />
      );
    });
  }

// This following section will display the table with the records of individuals.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Employee Records</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">
                  Position
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Level
                </th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
                  Action
                </th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              {recordList()}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

Record.jsx

O código a seguir servirá como um componente de formulário para criar ou atualizar registros. Esse componente enviará um comando de criação ou um comando de atualização ao nosso servidor.

mern/cliente/src/components/Record.jsx*

Code Snippet

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";

export default function Record() {
  const [form, setForm] = useState({
    name: "",
    position: "",
    level: "",
  });
  const [isNew, setIsNew] = useState(true);
  const params = useParams();
  const navigate = useNavigate();

useEffect(() => {
    async function fetchData() {
      const id = params.id?.toString() || undefined;
      if(!id) return;
      setIsNew(false);
      const response = await fetch(
        `http://localhost:5050/record/${params.id.toString()}`
      );
      if (!response.ok) {
        const message = `An error has occurred: ${response.statusText}`;
        console.error(message);
        return;
      }
      const record = await response.json();
      if (!record) {
        console.warn(`Record with id ${id} not found`);
        navigate("/");
        return;
      }
      setForm(record);
    }
    fetchData();
    return;
  }, [params.id, navigate]);

// These methods will update the state properties.
  function updateForm(value) {
    return setForm((prev) => {
      return { ...prev, ...value };
    });
  }

// This function will handle the submission.
  async function onSubmit(e) {
    e.preventDefault();
    const person = { ...form };
    try {
      let response;
      if (isNew) {
        // if we are adding a new record we will POST to /record.
        response = await fetch("http://localhost:5050/record", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      } else {
        // if we are updating a record we will PATCH to /record/:id.
        response = await fetch(`http://localhost:5050/record/${params.id}`, {
          method: "PATCH",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(person),
        });
      }

if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
    } catch (error) {
      console.error('A problem occurred with your fetch operation: ', error);
    } finally {
      setForm({ name: "", position: "", level: "" });
      navigate("/");
    }
  }

// This following section will display the form that takes the input from the user.
  return (
    <>
      <h3 className="text-lg font-semibold p-4">Create/Update Employee Record</h3>
      <form
        onSubmit={onSubmit}
        className="border rounded-lg overflow-hidden p-4"
      >
        <div className="grid grid-cols-1 gap-x-8 gap-y-10 border-b border-slate-900/10 pb-12 md:grid-cols-2">
          <div>
            <h2 className="text-base font-semibold leading-7 text-slate-900">
              Employee Info
            </h2>
            <p className="mt-1 text-sm leading-6 text-slate-600">
              This information will be displayed publicly so be careful what you
              share.
            </p>
          </div>

<div className="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 ">
            <div className="sm:col-span-4">
              <label
                htmlFor="name"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Name
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="name"
                    id="name"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="First Last"
                    value={form.name}
                    onChange={(e) => updateForm({ name: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div className="sm:col-span-4">
              <label
                htmlFor="position"
                className="block text-sm font-medium leading-6 text-slate-900"
              >
                Position
              </label>
              <div className="mt-2">
                <div className="flex rounded-md shadow-sm ring-1 ring-inset ring-slate-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                  <input
                    type="text"
                    name="position"
                    id="position"
                    className="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-slate-900 placeholder:text-slate-400 focus:ring-0 sm:text-sm sm:leading-6"
                    placeholder="Developer Advocate"
                    value={form.position}
                    onChange={(e) => updateForm({ position: e.target.value })}
                  />
                </div>
              </div>
            </div>
            <div>
              <fieldset className="mt-4">
                <legend className="sr-only">Position Options</legend>
                <div className="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
                  <div className="flex items-center">
                    <input
                      id="positionIntern"
                      name="positionOptions"
                      type="radio"
                      value="Intern"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Intern"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionIntern"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Intern
                    </label>
                    <input
                      id="positionJunior"
                      name="positionOptions"
                      type="radio"
                      value="Junior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Junior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionJunior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Junior
                    </label>
                    <input
                      id="positionSenior"
                      name="positionOptions"
                      type="radio"
                      value="Senior"
                      className="h-4 w-4 border-slate-300 text-slate-600 focus:ring-slate-600 cursor-pointer"
                      checked={form.level === "Senior"}
                      onChange={(e) => updateForm({ level: e.target.value })}
                    />
                    <label
                      htmlFor="positionSenior"
                      className="ml-3 block text-sm font-medium leading-6 text-slate-900 mr-4"
                    >
                      Senior
                    </label>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
        </div>
        <input
          type="submit"
          value="Save Employee Record"
          className="inline-flex items-center justify-center whitespace-nowrap text-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-slate-100 hover:text-accent-foreground h-9 rounded-md px-3 cursor-pointer mt-4"
        />
      </form>
    </>
  );
}

Agora, adicionamos o seguinte ao arquivo src/App.jsx.

mern/cliente/src/App.jsx

Code Snippet

Este é o nosso principal componente de layout. Nossa Navbar sempre estará no topo de cada página e a Saída aceitará os componentes filhos que definimos em nossas rotas no arquivo principal.jsx anteriormente.

Conectando o front-end ao back-end

Concluímos o processo de criação de componentes. Também conectamos nosso aplicativo React ao backend usando fetch, que fornece maneiras mais limpas e fáceis de lidar com solicitações de http. Em Record.jsx, anexamos o seguinte código ao bloco onSubmit(e) . Quando uma solicitação POST ou PATCH é enviada ao URL, o fetch adiciona um novo registro ao banco de dados ou atualiza um registro existente no banco de dados.

Code Snippet

Também colocamos o seguinte bloco de código para Record.jsx abaixo do bloco do construtor para carregar um registro existente, se ele existir.

Code Snippet

Finalmente, recordList.jsx. RecordList.jsx busca os registros do banco de dados, então usaremos o método GET de fetch para recuperar registros do banco de dados. Para isso, adicionamos as seguintes linhas de código acima da função recordList () em recordList.jsx.

Code Snippet

Depois de fechar tudo, para iniciar o aplicativo, siga as etapas abaixo:

Certifique-se de que o aplicativo do servidor ainda esteja em execução. Se não estiver, inicie-o executando o seguinte comando no diretório do servidor:

Code Snippet

Em um novo terminal, acesse o diretório do cliente e execute o comando:

Code Snippet

Essa é a aparência da página inicial do componente de registro depois de adicionarmos os registros de “Jesse Hall”, “Kushagra Kesav” e “Stanimira Vlaeva” por meio do botão “Criar funcionário”.

É assim que a tela que permite adicionar um funcionário será:

Parabéns por criar seu primeiro aplicação MERN . Para obter mais ideias e conceitos avançados, visite nosso Centro do Desenvolvedor e, se tiver alguma dúvida, publique-a nos fóruns da nossa comunidade.

Primeiros passos com o MongoDB Atlas

Teste gratuitamente

Saiba mais