Seu app finalmente tem rosto — Miniprojeto: seu time na tela

Do console para a tela 📱

Nos checkpoints anteriores você construiu seu app no console: primeiro a ficha de uma pessoa, depois um time inteiro com sua idade média. Funcionava… mas ninguém mostra um console para os amigos.

Hoje seu app ganha rosto. Com React você vai desenhar esse mesmo time na tela: cartões, uma lista, um resumo. Os mesmos dados de sempre, agora visíveis e bonitos.

A ideia: os dados entram como props

Seus componentes recebem o time igual às suas funções recebiam o array:

const equipe = [
  { nome: "Ana", nascimento: 2000 },
  { nome: "Beto", nascimento: 1990 },
  { nome: "Caro", nascimento: 2010 },
];

<Equipe equipe={equipe} anoAtual={2026} />

E dentro do componente você faz o de sempre —calcular a idade, percorrer a lista—, mas em vez de console.log você devolve JSX, que o navegador desenha.

Você o construirá em três passos

Cartao → a ficha de uma pessoa, agora visível.
Equipe → a lista de cartões (com map e key).
EquipeApp → o app completo: cabeçalho, lista e idade média.

Cada exercício renderiza de verdade: quando você clicar em Verificar, verá seu time na tela. Essa é a recompensa. 🎉

🚩 Checkpoint 3 de 4. Você já deu uma cara ao seu app. O último passo será um backend full-stack: sua equipe vai viver em um banco de dados e ser servida por uma API.