O último checkpoint 🚀
Seu time percorreu um caminho: começou como uma ficha no console, cresceu para um time com estatísticas, e no React você lhe deu um rosto na tela. Mas tudo isso vivia no código: se você recarrega, some. Os apps de verdade lembram.
Hoje você fecha o ciclo: seu time passa para um banco de dados (SQL) e é servido por uma API (Node). Isso é full-stack.
A viagem de um dado
Quando sua tela pede o time, o dado faz esta viagem:
[ Banco de dados ] → [ API / servidor ] → [ Interface ]
SQL (a tabela) Node (o handler) React (③)
- O banco de dados guarda o time de forma permanente. Você o consulta com SQL.
- A API (um handler do Express) lê esses dados e os devolve como JSON.
- A interface (seu componente do React do checkpoint anterior) os desenha.
Você vai construir da base para cima
- SQL: consulte seu time e sua idade média na tabela
equipe. - Node: escreva os handlers que servem a lista e a estatística como JSON.
Cada handler recebe (req, res). Nos testes nós o chamamos com uma requisição e uma
resposta simuladas (crearReq/crearRes), como um Express de brinquedo. 👇
Exemplos
Um handler em ação — clique em Executar
function listarEquipe(req, res) {
res.json([
{ nome: "Ana", idade: 26 },
{ nome: "Beto", idade: 36 },
]);
}
// Nos testes ele é chamado com req/res simulados:
const res = crearRes();
listarEquipe(crearReq(), res);
console.log("Estado:", res.statusCode);
console.log("Corpo:", res.body);