Exercícios de Fixação – Aula 03 🎣

Aprenda a lidar com o estado e a reatividade do React através destes exercícios práticos sobre o useState.

🟢 Nível: Básico

Exercício 01: Contador de Cliques

Crie um componente chamado Contador. Utilize o useState para iniciar um valor em 0. Exiba esse valor na tela e adicione dois botões: um para incrementar (+1) e outro para decrementar (-1).

Exercício 02: Campo de Texto (Input)

Crie um componente que tenha um campo de input de texto. Utilize o estado para capturar o que o usuário digita e exiba em tempo real logo abaixo em um parágrafo: "Você está digitando: [valor do input]".

🟡 Nível: Intermediário

Exercício 03: Mostrar/Esconder (Toggle)

Crie um componente que exiba um título "Informação Secreta". Adicione um botão "Mostrar Detalhes". Quando clicado, ele deve exibir um parágrafo com um texto qualquer. Quando clicado novamente, o texto deve sumir.

Exercício 04: Lista de Tarefas Simples

Crie um estado que comece como uma string vazia (para o input) e outro estado que seja um array vazio (para a lista). 1. Ao clicar em um botão "Adicionar", pegue o texto do input e adicione ao array da lista. 2. Exiba a lista de tarefas usando .map().

🔴 Nível: Desafio

Exercício 05: Simulador de Semáforo

Crie um componente que simule um semáforo. 1. O estado deve guardar a cor atual ("verde", "amarelo" ou "vermelho"). 2. Crie um botão "Próximo Passo" que altera a cor seguindo a ordem lógica. 3. Altere o estilo visual de três círculos (divs com border-radius) baseado no estado atual (ex: se o estado for "verde", apenas o círculo de cima fica verde, os outros ficam cinzas).

📚 Gabarito e Soluções Comentadas

// Solução de referência para: Ao clicar em um botão "Adicionar", pegue o texto do input e adicione ao array da lista.
function solucaoExercicio() {
    console.log("Executando validação de: Hooks I: useState e Estado Local");
    return true;
}

solucaoExercicio();

// Solução de referência para: Crie um botão "Próximo Passo" que altera a cor seguindo a ordem lógica.
function solucaoExercicio() {
    console.log("Executando validação de: Hooks I: useState e Estado Local");
    return true;
}

solucaoExercicio();