Pular para conteúdo

Exercícios de Fixação – Aula 09 🌐

Exercício 01: Criando um Contexto de Tema

  1. Crie um arquivo ThemeContext.js.
  2. Configure um contexto que guarde o valor 'light' ou 'dark'.
  3. Use o Provider para envolver sua aplicação.

Exercício 02: Consumindo o Tema

Crie um componente Cabecalho que use o hook useContext para ler o tema atual e mudar a cor de fundo do header (ex: preto para dark, branco para light).


🟡 Nível: Intermediário

Exercício 03: Alterando o Contexto

Adicione uma função toggleTheme ao seu contexto. No componente Configuracoes, crie um botão que, ao ser clicado, alterna o tema globalmente. Observe como todos os componentes que usam o contexto mudam de cor ao mesmo tempo.

Exercício 04: Contexto de Autenticação (Simulado)

  1. Crie um AuthContext que guarde um objeto usuario (inicialmente null).
  2. Crie uma função login que define um objeto { nome: 'Admin', logado: true }.
  3. Na Navbar, mostre "Bem-vindo, Admin" se houver usuário, ou um botão "Entrar" se estiver null.