Se você está aprendendo React e Node.js, uma das maiores dúvidas é:

Como os dados saem do formulário, passam pela API e são salvos no banco de dados?

Neste projeto Full Stack vamos construir uma aplicação completa de agendamento, utilizando React no Front-end, Node.js e Express no Back-end e MySQL como banco de dados.

Mais importante do que decorar código, é entender como as tecnologias trabalham juntas.

Projeto funcionando

Antes de começar a codificar, é importante visualizar o resultado final.

O sistema permite:

Informar o nome do cliente.
Escolher o procedimento.
Definir data e horário.
Enviar os dados para uma API.
Salvar as informações no banco de dados MySQL.
Retornar uma mensagem de confirmação para o usuário.

Esse é um excelente projeto para quem quer entender como funciona uma aplicação Full Stack na prática.

Tecnologias utilizadas

React

No Front-end utilizamos:

JSX
Componentes
useState
Inputs controlados
Eventos
Fetch API

Node.js + Express

No Back-end utilizamos:

Express
Rotas POST
Funções assíncronas
JSON
Tratamento de erros

Banco de dados MySQL

No banco de dados utilizamos:

Tabela de agendamentos
INSERT
MySQL2
Create Connection

Estrutura do projeto

O projeto é dividido em duas partes:

Front-end

React responsável por:

Formulário
Captura dos dados
Comunicação com a API
Exibição das respostas

Back-end

Node.js responsável por:

Receber as informações
Processar os dados
Salvar no MySQL
Retornar uma resposta para o React

São dois servidores diferentes se comunicando entre si.

Instalando os pacotes

No Back-end utilizamos:

Express

Responsável pela construção da API.

MySQL2

Responsável pela comunicação com o banco de dados.

Cors

Permite que o Front-end consiga acessar o servidor Node.js.

Nodemon

Facilita o desenvolvimento reiniciando automaticamente o servidor.

Criando a API com Express

Criamos uma rota POST responsável por receber os dados do formulário:

Nome
Procedimento
Dia
Hora

Esses dados chegam através do JSON enviado pelo React.

Depois fazemos a desestruturação das informações para trabalhar com elas no servidor.

Conectando ao banco MySQL

Utilizamos o pacote mysql2 e criamos uma conexão com:

Usuário
Senha
Database

Depois disso, o Node.js passa a ter acesso ao banco de dados.

Inserindo os dados

Utilizamos um INSERT com parâmetros:

Nome
Procedimento
Dia
Hora

Essa abordagem evita SQL Injection e torna a aplicação mais segura.

Após salvar os dados, retornamos uma mensagem para o usuário.

Testando a API

Antes de conectar o React ao Back-end, utilizamos o Thunder Client.

Isso permite validar:

Se a rota está funcionando.
Se o banco está recebendo os dados.
Se a resposta está sendo retornada corretamente.

Essa etapa é muito importante para depurar aplicações.

Criando o formulário em React

No Front-end utilizamos useState para armazenar:

nome
procedimento
dia
hora
mensagem

Cada input é controlado pelo React através do onChange.

HandleSubmit e preventDefault

Criamos uma função handleSubmit para:

Impedir o comportamento padrão do formulário.
Capturar os dados.
Fazer a chamada da API.

Essa função é responsável por iniciar todo o fluxo do sistema.

Enviando os dados com Fetch API

Utilizamos:

método POST
headers
Content-Type application/json
JSON.stringify()

Os dados são enviados para o servidor Node.js.

Tratando a resposta da API

Após receber a resposta do servidor:

Se tudo estiver correto, mostramos a mensagem de sucesso.
Se ocorrer algum problema, exibimos uma mensagem de erro.

Isso melhora a experiência do usuário.

Criando os componentes

O projeto foi separado em componentes:

AgendamentoForm

Responsável pelo formulário.

Resposta

Responsável por exibir a mensagem retornada pela API.

Essa separação deixa o código mais organizado e facilita a manutenção.

Teste final

No final do projeto realizamos:

✅ Teste do formulário.

✅ Comunicação Front-end e Back-end.

✅ Inserção no banco MySQL.

✅ Validação dos dados.

✅ Confirmação do registro salvo.

Tudo funcionando em uma aplicação Full Stack completa.

O que você aprendeu

React
JSX
useState
Inputs controlados
Eventos
Fetch API
Node.js
Express
API REST
CORS
MySQL
Thunder Client
Comunicação Front-end + Back-end
INSERT no banco de dados
Componentização

Vídeo deste projeto

🎥 Assista ao vídeo:

Live completa (1h30)

📺 Live original:

Conclusão

Construir aplicações Full Stack não significa decorar centenas de comandos.

Significa entender como as peças se conectam.

React cuida da interface.

Node.js recebe as informações.

MySQL armazena os dados.

E juntos eles permitem criar sistemas reais.

Aqui no Desvendando o Código, a ideia não é apenas ensinar programação.

É ajudar você a entender como a tecnologia funciona.

Como Criar um Sistema Completo com React, Node.js e MySQL | Projeto Full Stack