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.

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Crie um arquivo `ThemeContext.js`.
function solucaoExercicio() {
    console.log("Executando validação de: Context API: Estado Global Simples");
    return true;
}

solucaoExercicio();

// Solução de referência para: Crie um `AuthContext` que guarde um objeto `usuario` (inicialmente `null`).
function solucaoExercicio() {
    console.log("Executando validação de: Context API: Estado Global Simples");
    return true;
}

solucaoExercicio();

// Solução de referência para: Crie uma função `login` que define um objeto `{ nome
function solucaoExercicio() {
    console.log("Executando validação de: Context API: Estado Global Simples");
    return true;
}

solucaoExercicio();