🧪 Mini Projeto: Carregando Dados de uma API Assíncrona com React (com Loading e Erro)

✨ Introdução

Você já precisou carregar dados de uma API em React e ficou na dúvida:

“Como eu mostro um loading?”
“E se a API falhar?”
“Como deixo isso limpo e reaproveitável?”

A resposta está aqui!

Neste post, você vai criar um mini-projeto React completo, com:

Requisição assíncrona com fetch
Estado de carregamento (loading)
Tratamento de erro
Lista de dados real

Vamos colocar a mão no código? 🚀

💡 O que vamos construir?

Uma pequena aplicação que:

Busca usuários fictícios de uma API pública (jsonplaceholder)
Mostra um spinner de carregamento
Exibe um erro amigável, caso algo falhe
Renderiza a lista final de usuários

🛠️ Etapa 1: Estrutura base do componente

🧪 Etapa 2: Interface e renderização condicional

Agora vamos exibir:

O loading enquanto carrega
A mensagem de erro se der problema
A lista de usuários quando tudo estiver ok

✅ Resultado final

Estado	O que aparece
🔄 Antes da resposta da API	“Carregando usuários…”
❌ Se a API falhar	“Erro: …”
✅ Se der tudo certo	Lista com nome + e-mail

📌 Bônus: dicas para aprimorar

Troque a API para uma sua ou um endpoint real
Use axios com interceptors se quiser mais controle
Crie um hook reutilizável useFetch() para deixar o código ainda mais limpo
Mostre um spinner animado em vez de texto de loading

📣 Conclusão

Neste mini-projeto, você aplicou uma chamada assíncrona real com React, usando fetch, useEffect e tratamento de estado de carregamento e erro.

Agora você consegue:

Lidar com qualquer API externa
Criar interfaces mais amigáveis
Evitar que seu app trave ou quebre

💡 Dica: Esse padrão serve para praticamente qualquer integração com APIs REST — refatore, reaproveite e escale.

E se quiser levar isso adiante, que tal criar:

Uma busca filtrável
Um painel de administração
Ou conectar com uma API real sua com Node.js?

Quer uma solução personalizada para sua empresa, entre em contato abaixo! 🚀