Idiomas de texto avançado/mern-stack-tutorial

Background Wrapper languages/mern-stack-tutorial

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

Slalom mern-stack-tutorial

Default

lsxl2xv3wufbz9728-Mern-stack.png

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

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 

Vamos começar criando um diretório vazio: 

. Essa pasta conterá nossas pastas de cliente e servidor.

Em seguida, crie uma pasta para o backend e nomeie-a de servidor. Em seguida, inicializaremos o arquivo 

, o formato padrão oficialmente suportado para pacote código JavaScript para reutilização, adicionaremos uma linha ao arquivo 

O comando acima instala três pacotes diferentes:

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 

const port = process.env.PORT acessará a variável port

É 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.

 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 

 variável. Quando terminar, seu arquivo deverá ter uma aparência semelhante ao abaixo. Substitua 

pelo nome de usuário, senha, nome do cluster e ID do projeto do seu banco de dados.

 Ali podemos adicionar o seguinte código para conectar ao nosso banco de dados de dados :

Banco de dados feito. Servidor concluído. Agora é hora dos endpoints da API. Vamos começar criando uma pasta 

 a ela. Navegue de volta ao diretório "server" e crie o novo diretório e arquivo:

 também terá as seguintes linhas de código:

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.

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

, uma maneira moderna de criar um aplicação React. Em um novo terminal dentro do diretório 

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

Em seguida, editaremos o campo de conteúdo no arquivo 

, precisamos adicionar as diretivas Tailwind e excluir todo o resto.

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!

Definimos as rotas da página do aplicação na variável 

 para manter a interface do usuário sincronizada com o URL. 

 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.

Em seguida, vamos criar os componentes que definimos em nossas rotas. Crie uma pasta de 

 . Para cada componente que criarmos, adicionaremos um novo 

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

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

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

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.

Agora, adicionamos o seguinte ao arquivo 

Este é o nosso principal componente de layout. Nossa 

 sempre estará no topo de cada página e a 

 aceitará os componentes filhos que definimos em nossas 

Concluímos o processo de criação de componentes. Também conectamos nosso aplicativo React ao backend usando 

, que fornece maneiras mais limpas e fáceis de lidar com solicitações de http. Em 

 . Quando uma solicitação POST ou PATCH é enviada ao URL, 

 adiciona um novo registro ao banco de dados ou atualiza um registro existente no banco de dados.

Também colocamos o seguinte bloco de código para 

 abaixo do bloco do construtor para carregar um registro existente, se ele existir.

 busca os registros do banco de dados, então usaremos o método 

fetch para recuperar registros do banco de dados.

 Para isso, adicionamos as seguintes linhas de código acima da função 

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

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 

 e, se tiver alguma dúvida, publique-a nos 

Texto formatado2 idiomas/mern-stack-tutorial

Primeiros passos com o MongoDB Atlas

SEO Section Overview-mern-stack-tutorial

Apresentando MongoDB 8.0, o MongoDB mais rápido de todos os tempos! Leia mais &gt;&gt;

Apresentando MongoDB 8.0, o MongoDB mais rápido de todos os tempos! Leia mais &gt;

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

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.

Como usar o MERN Stack: um guia completo

Primeiros passos com o MongoDB Atlas