Como Conectar React a uma API Node.js: Projeto de Barbearia com Bootstrap

Você terminou o backend, testou as rotas e viu os dados chegando ao MySQL. E agora: como transformar essa API em uma aplicação que as pessoas consigam usar?

Neste projeto, criamos a interface de um sistema de agendamento para barbearia com React e Bootstrap. O usuário preenche nome, procedimento, data e horário; o frontend envia essas informações para uma API Node.js, que registra o agendamento no banco de dados.

Primeiro, testamos a API

Antes de construir o formulário, conferimos se o backend já estava funcionando. Testamos a rota de cadastro com uma requisição POST e a rota de consulta com GET. Assim, quando começamos a integração com React, já sabíamos que a API conseguia receber e listar agendamentos.

Essa etapa ajuda a localizar erros: se a requisição funciona no cliente REST, mas falha no navegador, podemos concentrar a investigação na comunicação com o frontend.

Organizando a comunicação no api.js

Criamos um arquivo api.js para concentrar a chamada à API. Nele, usamos fetch para enviar os dados do agendamento à rota do backend, com o método POST e o corpo convertido para JSON.

Separar essa comunicação do formulário deixa cada parte do projeto com uma função clara: o componente coleta os dados e apresenta a resposta; o serviço cuida da requisição.

Criando o formulário com React

No componente de agendamento, usamos useState para acompanhar o valor dos campos de nome, procedimento, data e horário. Quando o usuário confirma, reunimos esses valores em um objeto e chamamos a função do api.js.

Também tratamos as respostas para mostrar uma mensagem após o envio e informar quando ocorre um erro. Durante os testes, corrigimos o comportamento dos campos de data e horário e conferimos o registro no MySQL.

Bootstrap, CSS e responsividade

O Bootstrap ajudou a montar a estrutura visual e adaptar a página a telas menores. Também usamos CSS para dar acabamento à interface. No vídeo, mostramos o formulário em uma visualização de celular e o menu hambúrguer da aplicação.

O resultado é uma interface em que o visitante consegue preencher e enviar um agendamento, enquanto o backend recebe e salva os dados.

Assista ao projeto passo a passo

No vídeo editado, você acompanha a criação do frontend e a integração com a API:

Se preferir acompanhar todo o desenvolvimento, com os testes e ajustes feitos durante a aula, assista à live completa:

Esse projeto mostra o próximo passo depois de construir uma API: criar uma interface para que alguém consiga utilizá-la de verdade.