---
url: 'https://www.corbado.com/pt/blog/aplicacao-crud-react-express-mysql'
title: 'Aplicação CRUD com React, Node.js, Express e MySQL'
description: 'Este tutorial ensina como criar uma aplicação CRUD básica usando React no frontend e Express no backend com um banco de dados MySQL.'
lang: 'pt'
author: 'Lukas'
date: '2025-06-17T16:14:25.720Z'
lastModified: '2026-04-15T06:02:46.921Z'
keywords: 'CRUD, full-stack, tutorial, Sequelize, Axios, TailwindCSS'
category: 'Engineering'
---
# Aplicação CRUD com React, Node.js, Express e MySQL
Neste tutorial abrangente, você aprenderá a criar uma aplicação CRUD (Create, Read,
Update, Delete) full-stack usando [React](https://www.corbado.com/blog/react-passkeys) para o front-end e
[Node.js](https://www.corbado.com/blog/nodejs-passkeys) com Express para o back-end, tudo alimentado por um banco
de dados [MySQL](https://www.corbado.com/blog/passkey-webauthn-database-guide). Utilizaremos tecnologias como
[React](https://www.corbado.com/blog/react-passkeys) Router, Axios e TailwindCSS para aprimorar a experiência do
usuário.
## 1. Visão Geral do Projeto
Desenvolveremos uma aplicação full-stack onde os usuários podem gerenciar tutoriais. Cada
tutorial terá os seguintes atributos:
- **ID**: Identificador único
- **Título**: Nome do tutorial
- **Descrição**: Informações detalhadas
- **Status de Publicação**: Indica se o tutorial está publicado
Os usuários podem realizar as seguintes ações:
- **Criar** um novo tutorial
- **Recuperar** todos os tutoriais ou um específico por ID
- **Atualizar** tutoriais existentes
- **Excluir** tutoriais
- **Pesquisar** tutoriais por título
A seguir, você encontrará algumas capturas de tela de exemplo:
### 1.1 Adicionar um Novo Tutorial
### 1.2 Exibir Todos os Tutoriais
### 1.3 Editar um Tutorial
### 1.4 Pesquisar Tutoriais por Título
## 2. Arquitetura
A aplicação segue uma arquitetura cliente-servidor:
- **Backend**: [Node.js](https://www.corbado.com/blog/nodejs-passkeys) com Express lida com APIs RESTful e
interage com o banco de dados [MySQL](https://www.corbado.com/blog/passkey-webauthn-database-guide) usando o
Sequelize ORM.
- **Frontend**: [React](https://www.corbado.com/blog/react-passkeys).js se comunica com o backend via Axios para
requisições HTTP e usa o React Router para navegação.
## 3. Implementação do Backend
### 3.1 Configuração da Aplicação Node.js
1. **Crie o Diretório do Projeto:**
```bash
mkdir react-node-express-mysql-crud
cd react-node-express-mysql-crud
```
2. **Inicialize a Aplicação Node.js:**
```bash
npm init -y
```
3. **Instale as Dependências:**
```bash
npm install express sequelize mysql2 cors --save
```
4. **Use a Sintaxe ESModule** Adicione a seguinte linha ao seu arquivo package.json:
```json
{
"type": "module"
// ...
}
```
### 3.2 Configure o MySQL & Sequelize
1. **Crie o Arquivo de Configuração (`app/config/db.config.js`):**
```javascript
export default {
HOST: "localhost",
USER: "root",
PASSWORD: "root",
DB: "db",
PORT: 8081,
dialect: "mysql",
pool: {
max: 5,
min: 0,
acquire: 30000,
idle: 10000,
},
};
```
2. **Inicialize o Sequelize (`app/models/index.js`):**
```javascript
import dbConfig from "../config/db.config.js";
import Sequelize from "sequelize";
import Tutorial from "./tutorial.model.js";
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
pool: dbConfig.pool,
port: dbConfig.PORT,
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = Tutorial(sequelize, Sequelize);
export default db;
```
3. **Defina o Modelo do Tutorial (`app/models/tutorial.model.js`):**
```javascript
export default (sequelize, Sequelize) => {
const Tutorial = sequelize.define("tutorial", {
title: {
type: Sequelize.STRING,
},
description: {
type: Sequelize.STRING,
},
published: {
type: Sequelize.BOOLEAN,
},
});
return Tutorial;
};
```
Se você não tiver um banco de dados [MySQL](https://www.corbado.com/blog/passkey-webauthn-database-guide) para
desenvolvimento local, pode usar o Docker para criar um contêiner MySQL temporário:
```bash
docker run --rm -p 3306:3306 \
-e MYSQL_ROOT_PASSWORD=root \
-e MYSQL_DATABASE=db \
mysql:8
```
### 3.3 Defina Rotas e Controladores
1. **Crie o Controlador (`app/controllers/tutorial.controller.js`):**
```javascript
import db from "../models/index.js";
const Op = db.Sequelize.Op;
const Tutorial = db.tutorials;
// Cria e salva um novo Tutorial
export const create = (req, res) => {
// Valida a requisição
if (!req.body.title) {
res.status(400).send({
message: "O conteúdo não pode estar vazio!",
});
return;
}
// Cria um Tutorial
const tutorial = {
title: req.body.title,
description: req.body.description,
published: req.body.published ? req.body.published : false,
};
// Salva o Tutorial no banco de dados
Tutorial.create(tutorial)
.then((data) => {
res.send(data);
})
.catch((err) => {
res.status(500).send({
message: err.message || "Ocorreu um erro ao criar o Tutorial.",
});
});
};
// Recupera todos os Tutoriais
export const findAll = (req, res) => {
// Permite uma condição de filtro via parâmetro de consulta
const title = req.query.title;
const condition = title ? { title: { [Op.like]: `%${title}%` } } : null;
Tutorial.findAll({ where: condition })
.then((data) => {
res.send(data);
})
.catch((err) => {
res.status(500).send({
message: err.message || "Ocorreu um erro ao recuperar os tutoriais.",
});
});
};
// Encontra um único Tutorial pelo ID
export const findOne = (req, res) => {
const id = req.params.id;
// Encontra o Tutorial pela chave primária
Tutorial.findByPk(id)
.then((data) => {
if (data) {
res.send(data);
} else {
res.status(404).send({
message: `Não foi possível encontrar o Tutorial com id=${id}.`,
});
}
})
.catch((err) => {
res.status(500).send({
message: "Erro ao recuperar o Tutorial com id=" + id,
});
});
};
// Atualiza um Tutorial pelo ID
export const update = (req, res) => {
const id = req.params.id;
// Atualiza o Tutorial com o ID especificado
Tutorial.update(req.body, {
where: { id: id },
})
.then((num) => {
if (num == 1) {
res.send({
message: "Tutorial foi atualizado com sucesso.",
});
} else {
res.send({
message: `Não foi possível atualizar o Tutorial com id=${id}. Talvez o Tutorial não tenha sido encontrado ou req.body esteja vazio!`,
});
}
})
.catch((err) => {
res.status(500).send({
message: "Erro ao atualizar o Tutorial com id=" + id,
});
});
};
// Exclui um Tutorial pelo ID
export const deleteOne = (req, res) => {
const id = req.params.id;
// Exclui o Tutorial com o ID especificado
Tutorial.destroy({
where: { id: id },
})
.then((num) => {
if (num == 1) {
res.send({
message: "Tutorial foi excluído com sucesso!",
});
} else {
res.send({
message: `Não foi possível excluir o Tutorial com id=${id}. Talvez o Tutorial não tenha sido encontrado!`,
});
}
})
.catch((err) => {
res.status(500).send({
message: "Não foi possível excluir o Tutorial com id=" + id,
});
});
};
// Exclui todos os Tutoriais
export const deleteAll = (req, res) => {
// Exclui todos os Tutoriais
Tutorial.destroy({
where: {},
truncate: false,
})
.then((nums) => {
res.send({ message: `${nums} Tutoriais foram excluídos com sucesso!` });
})
.catch((err) => {
res.status(500).send({
message: err.message || "Ocorreu um erro ao remover todos os tutoriais.",
});
});
};
// Encontra todos os Tutoriais publicados
export const findAllPublished = (req, res) => {
// Encontra todos os Tutoriais com published = true
Tutorial.findAll({ where: { published: true } })
.then((data) => {
res.send(data);
})
.catch((err) => {
res.status(500).send({
message: err.message || "Ocorreu um erro ao recuperar os tutoriais.",
});
});
};
```
2. **Configure as Rotas (`app/routes/tutorial.routes.js`):**
```javascript
import * as tutorials from "../controllers/tutorial.controller.js";
import express from "express";
export default (app) => {
let router = express.Router();
// Cria um novo Tutorial
router.post("/", tutorials.create);
// Recupera todos os Tutoriais
router.get("/", tutorials.findAll);
// Recupera um único Tutorial com id
router.get("/:id", tutorials.findOne);
// Atualiza um Tutorial com id
router.put("/:id", tutorials.update);
// Exclui um Tutorial com id
router.delete("/:id", tutorials.deleteOne);
// Exclui todos os Tutoriais
router.delete("/", tutorials.deleteAll);
// Encontra todos os Tutoriais publicados
router.get("/published", tutorials.findAllPublished);
app.use("/api/tutorials", router);
};
```
### 3.4 Execute o Servidor
1. **Crie o Arquivo do Servidor (`server.js`):**
```javascript
import express from "express";
import cors from "cors";
import db from "./app/models/index.js";
import tutorialRoutes from "./app/routes/tutorial.routes.js";
const app = express();
const corsOptions = {
origin: "http://localhost:5173",
};
app.use(cors(corsOptions));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// Rota simples
app.get("/", (req, res) => {
res.json({ message: "Bem-vindo à Aplicação de Tutoriais." });
});
// Rotas
tutorialRoutes(app);
// Sincroniza o banco de dados
db.sequelize.sync().then(() => {
console.log("Banco de dados sincronizado.");
});
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Servidor está rodando na porta ${PORT}.`);
});
```
2. **Inicie o Servidor:**
```bash
node server.js
```
**Saída:**
```
Servidor está rodando na porta 8080.
Banco de dados sincronizado.
```
## 4. Implementação do Frontend
Esta é a arquitetura:
Alternativamente, você pode usar o Redux:
### 4.1 Estrutura de arquivos
Sua estrutura final de arquivos ficará assim:
```
frontend/
├─ index.html
├─ package.json
├─ postcss.config.js
├─ tailwind.config.js
├─ vite.config.js
├─ src/
│ ├─ App.jsx
│ ├─ main.jsx
│ ├─ index.css
│ ├─ services/
│ │ └─ tutorial.service.js
│ └─ pages/
│ ├─ AddTutorial.jsx
│ ├─ Tutorial.jsx
│ └─ TutorialsList.jsx
```
### 4.2 Crie a Aplicação React
Execute os seguintes comandos para configurar uma nova aplicação React usando o Vite:
```bash
npm create vite@latest frontend -- --template react
cd frontend
npm i
npm i react-router-dom axios
npm install -D tailwindcss autoprefixer
npx tailwindcss init -p
```
Finalmente, configure a opção de conteúdo do Tailwind no arquivo de configuração
`tailwind.config.js`:
```js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
```
Em seguida, abra [src](https://www.corbado.com/glossary/src)/index.css (o Vite criou este arquivo para você) e
adicione as diretivas do Tailwind:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### 4.3 Inicialize o layout da Aplicação
O componente `App.jsx` configura as rotas do React Router e define uma barra de navegação
básica do Tailwind. Navegaremos entre:
- `/tutorials` – lista de tutoriais
- `/add` – formulário para criar novo tutorial
- `/tutorials/:id` – edição de um único tutorial
```jsx
import { Routes, Route, Link, BrowserRouter } from "react-router-dom";
import TutorialsList from "./pages/TutorialsList";
import AddTutorial from "./pages/AddTutorial";
import Tutorial from "./pages/Tutorial";
function App() {
return (
{/* BARRA DE NAVEGAÇÃO */}
{/* ROTAS */}
} />
} />
} />
} />
);
}
export default App;
```
### 4.4 Crie o Serviço de Dados
Este serviço lida com as requisições HTTP do Axios para o nosso backend Node/Express
([http://localhost:8080/api](http://localhost:8080/api)). Atualize a baseURL se o seu
servidor estiver rodando em um endereço ou porta diferente.
```js
import axios from "axios";
const http = axios.create({
baseURL: "http://localhost:8080/api",
headers: {
"Content-Type": "application/json",
},
});
const getAll = () => {
return http.get("/tutorials");
};
const get = (id) => {
return http.get(`/tutorials/${id}`);
};
const create = (data) => {
return http.post("/tutorials", data);
};
const update = (id, data) => {
return http.put(`/tutorials/${id}`, data);
};
const remove = (id) => {
return http.delete(`/tutorials/${id}`);
};
const removeAll = () => {
return http.delete("/tutorials");
};
const findByTitle = (title) => {
return http.get(`/tutorials?title=${title}`);
};
export default {
getAll,
get,
create,
update,
remove,
removeAll,
findByTitle,
};
```
### 4.5 Componente para Adicionar Item
Um componente para criar novos tutoriais em `src/pages/AddTutorial.jsx`. Ele permite
inserir título e descrição e, em seguida, chama `TutorialService.create()`.
```jsx
import React, { useState } from "react";
import TutorialService from "../services/tutorial.service";
function AddTutorial() {
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [submitted, setSubmitted] = useState(false);
const saveTutorial = () => {
const data = { title, description };
TutorialService.create(data)
.then((response) => {
console.log(response.data);
setSubmitted(true);
})
.catch((e) => {
console.log(e);
});
};
const newTutorial = () => {
setTitle("");
setDescription("");
setSubmitted(false);
};
return (
{submitted ? (
Tutorial enviado com sucesso!
) : (
Adicionar Tutorial
setTitle(e.target.value)}
/>
setDescription(e.target.value)}
/>
)}
);
}
export default AddTutorial;
```
### 4.6 Componente de Lista de Tutoriais
Um componente em `src/pages/TutorialsList.jsx` que:
- Exibe uma barra de pesquisa para filtrar por título do tutorial
- Lista os tutoriais à esquerda
- Mostra o tutorial selecionado à direita
- Fornece um botão para remover todos os tutoriais
```jsx
import { useState, useEffect } from "react";
import TutorialService from "../services/tutorial.service";
import { Link } from "react-router-dom";
function TutorialsList() {
const [tutorials, setTutorials] = useState([]);
const [currentTutorial, setCurrentTutorial] = useState(null);
const [currentIndex, setCurrentIndex] = useState(-1);
const [searchTitle, setSearchTitle] = useState("");
useEffect(() => {
retrieveTutorials();
}, []);
const onChangeSearchTitle = (e) => {
setSearchTitle(e.target.value);
};
const retrieveTutorials = () => {
TutorialService.getAll()
.then((response) => {
setTutorials(response.data);
console.log(response.data);
})
.catch((e) => {
console.log(e);
});
};
const refreshList = () => {
retrieveTutorials();
setCurrentTutorial(null);
setCurrentIndex(-1);
};
const setActiveTutorial = (tutorial, index) => {
setCurrentTutorial(tutorial);
setCurrentIndex(index);
};
const removeAllTutorials = () => {
TutorialService.removeAll()
.then((response) => {
console.log(response.data);
refreshList();
})
.catch((e) => {
console.log(e);
});
};
const findByTitle = () => {
TutorialService.findByTitle(searchTitle)
.then((response) => {
setTutorials(response.data);
setCurrentTutorial(null);
setCurrentIndex(-1);
console.log(response.data);
})
.catch((e) => {
console.log(e);
});
};
return (
);
}
export default Tutorial;
```
### 4.8 Execute a aplicação
```bash
npm run dev
```
Agora você pode acessar a aplicação em [http://localhost:5173](http://localhost:5173).
Abra essa URL no seu navegador. Você pode navegar para:
- `/tutorials` – ver todos os tutoriais
- `/add` – adicionar um tutorial
- `/tutorials/:id` – editar um tutorial específico
(Certifique-se de que seu back-end Node/Express esteja rodando em
[http://localhost:8080](http://localhost:8080) ou atualize a baseURL em
tutorial.service.js de acordo.)
## 5. Conclusão
Você construiu com sucesso uma aplicação CRUD full-stack usando React,
[Node.js](https://www.corbado.com/blog/nodejs-passkeys), Express e MySQL. Este projeto demonstra como configurar
uma API RESTful com Node.js e Express, gerenciar dados com o Sequelize ORM e criar um
frontend responsivo com React e TailwindCSS.
Bom código e até o próximo tutorial!