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).