Spring e React - 2026

25 - Cadastrar

Nesta etapa, vamos implementar a função responsável por cadastrar uma nova pessoa na API, utilizando o método POST.

Criamos a função cadastrar, que envia os dados do objeto pessoa para o backend:

// Cadastrar
const cadastrar = () => {
    fetch("http://localhost:8080/cadastrar", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(pessoa)
    })
    .then(retorno => retorno.json())
    .then(p => {
        setPessoas(vetor => [...vetor, p]);
        setPessoa({id:null, nome:"", cidade:""});
    });
}

Explicando passo a passo:

• method: "POST" – define que estamos enviando dados para a API.
• headers – informa que o conteúdo enviado está no formato JSON.
• body: JSON.stringify(pessoa) – converte o objeto pessoa para JSON antes de enviá-lo.
• setPessoas – adiciona a nova pessoa cadastrada na lista já existente, atualizando a tabela automaticamente.
• setPessoa – limpa o formulário após o cadastro.

Por fim, vinculamos a função ao botão de cadastro:

<input type="button" onClick={cadastrar} value="Cadastrar" className="btn btn-primary" />

Dessa forma, ao clicar no botão, os dados são enviados para a API, armazenados no banco e exibidos automaticamente na tabela.

No vídeo abaixo, mostro como implementar a função de cadastro e integrar o formulário com o backend, concluindo o fluxo de inserção de dados na aplicação.