No mundo do desenvolvimento web moderno, React.js e Node.js são duas das tecnologias mais populares e poderosas. Enquanto o React.js é uma biblioteca JavaScript focada na construção de interfaces de usuário dinâmicas, o Node.js oferece uma plataforma robusta para construir servidores e aplicativos em tempo real.
Neste post, vamos aprender a criar um CRUD (Create, Read, Update, Delete) completo utilizando React.js no front-end e Node.js no back-end. Ao final, você terá a base para construir aplicativos interativos com uma arquitetura moderna, além de usar boas práticas adotadas pelas grandes agências de desenvolvimento.
1. Configuração do Ambiente de Desenvolvimento
Antes de começarmos a codificar, precisamos preparar nosso ambiente de desenvolvimento. Vamos usar o Node.js para o servidor, Express para roteamento e MongoDB como banco de dados. O front-end será feito com React.js.
Instalar Node.js e NPM
Primeiro, instale o Node.js a partir do site oficial. O Node.js vem com o NPM (Node Package Manager), que é a ferramenta para instalar pacotes adicionais.
Criar o Projeto no Node.js (Back-End)
- Criação do Servidor Node.js: Crie uma pasta para o seu projeto e, em seguida, inicialize o projeto com o comando:
mkdir crud-react-node
cd crud-react-node
npm init -y
Instalação de Dependências do Back-End:
No back-end, vamos precisar do Express (framework para Node.js) e do Mongoose (biblioteca para MongoDB):
npm install express mongoose cors body-parser
Configuração do Servidor:
Crie um arquivo chamado server.js e adicione o seguinte código para configurar o servidor Express e a conexão com o banco de dados MongoDB.
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = 5000;
// Middleware
app.use(cors());
app.use(bodyParser.json());
// Conexão com MongoDB
mongoose.connect('mongodb://localhost:27017/crudapp', { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log('Conectado ao MongoDB'))
.catch(err => console.log(err));
// Definir rota inicial
app.get('/', (req, res) => {
res.send('Servidor está funcionando!');
});
// Iniciar servidor
app.listen(port, () => {
console.log(`Servidor rodando na porta ${port}`);
});
Criar o Modelo do Banco de Dados
Vamos criar um modelo simples de “Produto” com o Mongoose. Crie uma pasta chamada models e um arquivo Product.js dentro dela:
const mongoose = require('mongoose');
const productSchema = new mongoose.Schema({
name: { type: String, required: true },
description: { type: String, required: true },
price: { type: Number, required: true }
});
module.exports = mongoose.model('Product', productSchema);
2. Configuração do Front-End (React.js)
Agora, vamos configurar a parte do front-end usando o React.js. Primeiro, crie o projeto React com o create-react-app.
- Criar o Projeto React: Abra o terminal e execute o seguinte comando para criar o projeto:
npx create-react-app client
Depois, vá até o diretório do projeto:
cd client
Instalar Axios para Comunicação com o Back-End:
O Axios é uma biblioteca que facilita as requisições HTTP. Vamos instalá-la no nosso projeto React:
npm install axios
3. Criando o CRUD no Front-End
Agora vamos criar os componentes necessários para o CRUD em React. Vamos ter quatro operações: Criar, Ler, Atualizar e Deletar.
a. Componente App.js
O arquivo App.js vai ser responsável por exibir a lista de produtos e permitir a interação com os formulários de criação e atualização. Vamos adicionar uma estrutura simples de página com navegação:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [products, setProducts] = useState([]);
const [product, setProduct] = useState({ name: '', description: '', price: '' });
const [editing, setEditing] = useState(false);
const [editId, setEditId] = useState(null);
// Função para pegar todos os produtos
const fetchProducts = async () => {
const res = await axios.get('http://localhost:5000/products');
setProducts(res.data);
};
useEffect(() => {
fetchProducts();
}, []);
// Função para criar um novo produto
const handleCreate = async (e) => {
e.preventDefault();
await axios.post('http://localhost:5000/products', product);
fetchProducts();
setProduct({ name: '', description: '', price: '' });
};
// Função para editar um produto
const handleEdit = async (id) => {
const res = await axios.get(`http://localhost:5000/products/${id}`);
setProduct(res.data);
setEditing(true);
setEditId(id);
};
// Função para atualizar um produto
const handleUpdate = async (e) => {
e.preventDefault();
await axios.put(`http://localhost:5000/products/${editId}`, product);
fetchProducts();
setProduct({ name: '', description: '', price: '' });
setEditing(false);
};
// Função para deletar um produto
const handleDelete = async (id) => {
await axios.delete(`http://localhost:5000/products/${id}`);
fetchProducts();
};
return (
<div className="container">
<h1>CRUD em React.js e Node.js</h1>
<form onSubmit={editing ? handleUpdate : handleCreate}>
<input
type="text"
placeholder="Nome do Produto"
value={product.name}
onChange={(e) => setProduct({ ...product, name: e.target.value })}
required
/>
<input
type="text"
placeholder="Descrição"
value={product.description}
onChange={(e) => setProduct({ ...product, description: e.target.value })}
required
/>
<input
type="number"
placeholder="Preço"
value={product.price}
onChange={(e) => setProduct({ ...product, price: e.target.value })}
required
/>
<button type="submit">{editing ? 'Atualizar' : 'Criar'}</button>
</form>
<h2>Produtos</h2>
<ul>
{products.map((product) => (
<li key={product._id}>
{product.name} - {product.description} - ${product.price}
<button onClick={() => handleEdit(product._id)}>Editar</button>
<button onClick={() => handleDelete(product._id)}>Deletar</button>
</li>
))}
</ul>
</div>
);
};
export default App;
b. Estilos Responsivos
Para garantir que a interface seja responsiva, você pode usar o CSS básico com Flexbox ou Grid para garantir que os componentes se ajustem bem em qualquer dispositivo.
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
form input, button {
margin: 10px 0;
padding: 10px;
width: 100%;
max-width: 300px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
4. Conclusão
Agora você tem um CRUD completo rodando com React.js no front-end e Node.js no back-end. Usamos Express para o roteamento no servidor e Axios para as requisições HTTP no cliente. O MongoDB serve como o banco de dados para armazenar os dados dos produtos.
Com esse projeto, você aprendeu a:
- Configurar um servidor Node.js com Express.
- Criar e gerenciar um banco de dados com MongoDB e Mongoose.
- Construir um front-end interativo com React.js, realizando operações de CRUD.
- Utilizar práticas modernas de desenvolvimento, como o uso de Axios para requisições HTTP.
Agora você pode expandir esse projeto adicionando autenticação de usuários, validação de formulários, e até mesmo a integração com outras APIs. Aproveite para explorar novas funcionalidades e criar suas próprias aplicações com React.js e Node.js!
