5.setInterval()setTimeout()Exercicios.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.

Segue aqui uma parte do exercício, o restante é com você😁:

import { useState } from 'react';

function App() {
  const [contador, setContador] = useState(0);

  const incrementarApos5Segundos = () => {
    // Implemente o setTimeout para incrementar o contador aqui
  };

  return (
    <div>
      <h1>Contador: {contador}</h1>
      <button onClick={()=> incrementarApos5Segundos()}>Incrementar Após 5 Segundos</button>
      {/* Adicione a exibição do contador e estilize seu componente */}
    </div>
  );
}

export default App;

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