4.HooksExercicios.md

Exercício: Manipulação de Estado com setTimeout em React ⏳

Instruções 📝

Neste exercício, vamos praticar a manipulação de estado em React utilizando o setTimeout. O objetivo é aprofundar o entendimento sobre operações assíncronas e gerenciamento de estado.

1. Crie um novo projeto React utilizando o comando npm create vite@latest 🚀. Siga os passos para configurá-lo com React, conforme aprendido anteriormente.

2. Modifique o componente App.js para explorar o uso de setTimeout:

   • Importe o hook useState do React no início do seu arquivo 📌.
   • Dentro da função App, defina um estado inicial para um contador 🧮.
   • Implemente um botão que, ao ser clicado, use setTimeout para incrementar o valor do contador após um determinado intervalo de tempo (por exemplo, 5 segundos) ⏱️.
   • Exiba o valor atual do contador em um elemento <p> para visualização do usuário.

3. Personalize o Estilo 💅. Modifique o arquivo de estilo (como App.css) para estilizar seu contador. Seja criativo ao aplicar estilos, explorando diferentes cores, fontes e alinhamentos.

4. Teste seu aplicativo 🧪. Após implementar a funcionalidade, execute o aplicativo e teste o botão. Observe se o contador é incrementado corretamente após o intervalo definido. Isso confirmará o funcionamento adequado do estado e do temporizador.

Quer correção? Compartilhe seu exercício completado na área de comentários da matéria da aula no Classroom para correção e feedback. 🏫