This content originally appeared on DEV Community and was authored by Thailane Lopes Dutra
O que é a MERN Stack?
A MERN Stack é uma stack JavaScript usada para facilitar e agilizar o deployment de aplicações web full-stack. A MERN Stack é composto por 4 tecnologias: MongoDB, Express, React e Node.js.
Ela foi projetada para tornar o processo de desenvolvimento mais simples e fácil. A arquitetura MERN permite que você construa facilmente uma arquitetura de 3 camadas (frontend, backend, banco de dados) inteiramente usando JavaScript e JSON. Com essas quatro tecnologias, você pode criar absolutamente qualquer aplicação que imaginar, tudo o que existe no mundo hoje. Agora, vamos entender cada tecnologia uma por uma.
MongoDB: MongoDB forma o "M" do MERN Stack e funciona muito bem com o ecossistema JavaScript. MongoDB é um banco de dados NoSQL( Não relacional) no qual os dados são armazenados em documentos que consistem em pares chave-valor, compartilhando muitas semelhanças com JSON.
Os dados não são armazenados na forma de tabelas, e é assim que ele se diferencia de outros programas de banco de dados. Exemplo de como dados armazenados no MongoDB se parecem:
Express Js: Express é um framework flexível e leve para aplicações web em Node.js, que fornece um conjunto robusto de recursos para desenvolver aplicações web e móveis. Ele facilita o desenvolvimento rápido de aplicações web baseadas em Node.
O Express ajuda a construir o backend de forma muito fácil, mantendo-se no ecossistema JavaScript. Ele é muito usado para projetos pessoais, pois permite focar no aprendizado de desenvolvimento e na construção de projetos de forma bastante rápida.
Na MERN Stack, o Express será usado como servidor de API no backend, que interage com o banco de dados MongoDB para fornecer dados à aplicação cliente (React).
React Js React é uma biblioteca JavaScript de código aberto usada para construir interfaces de usuário, especificamente para aplicações de página única (SPA). É utilizada para gerenciar a camada de visualização em aplicações web e móveis.
O React permite que você construa interfaces complexas por meio de componentes simples, conectando-os como HTML.
Praticamente todas as empresas de tecnologia modernas, desde startups em estágio inicial até as maiores empresas de tecnologia, como Microsoft e Facebook, utilizam React.
A principal razão pela qual o React é usado é para aplicações de página única (SPA). SPA significa renderizar todo o site em uma única página, em vez de em várias páginas separadas.
Node JS: Node.js é um ambiente de execução JavaScript multiplataforma, construído sobre o motor V8 do Chrome, que permite executar código JavaScript fora do navegador, facilitando a construção de aplicações rápidas e escaláveis.
O principal objetivo do Node.js é simples: ele nos permite escrever o backend em JavaScript, poupando o esforço de aprender uma nova linguagem de programação para executar o backend.
Node.js é a plataforma para a camada de aplicação (camada lógica). Esta camada não será visível para os clientes. É onde as aplicações cliente (React) farão solicitações por dados ou páginas web.
Criando um projeto MERN
Instale o node e o npm.
Crie um cluster no MongoDB.
- Crie o Backend com Node.Js e Express:
mkdir meu-projeto-mern
cd meu-projeto-mern
npm init -y
- Instale as dependências do backend:
npm install express mongoose
Mongoose: é uma biblioteca que facilita a interação com MongoDB.
- Configure a conexão com o servidor:
`const express = require('express');
const mongoose = require('mongoose');
const app = express();
app.use(express.json());
mongoose.connect('mongodb://localhost:27017/seubanco', {
useNewUrlParser: true,
useUnifiedTopology: true,
}).then(() => {
console.log("Conectado ao MongoDB");
}).catch((err) => {
console.error("Erro ao conectar ao MongoDB", err);
});
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(5000, () => {
console.log('Servidor rodando na porta 5000');
});
`
- Crie o Frontend com React:
npx create-react-app client
cd client
npm start
- Conectando o Front ao Back:
useEffect(() => {
fetch('http://localhost:5000/')
.then(response => response.json())
.then(data => console.log(data));
}, []);
- Rodando o projeto:
Use o seguinte comando para rodar o Backend:
node server.js
Use o seguinte comando para rodar o Frontend:
npm start
Agora é só continuar a construção do seu projeto.
Referências: https://www.mongodb.com/resources/languages/mern-stack-tutorial
This content originally appeared on DEV Community and was authored by Thailane Lopes Dutra
Thailane Lopes Dutra | Sciencx (2024-08-21T18:34:08+00:00) Conhecendo a MERN Stack. Retrieved from https://www.scien.cx/2024/08/21/conhecendo-a-mern-stack/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.