🚀 Capítulo 04: useState - Controle da Força

🎯 Objetivo da Aula

Ao final desta aula, você entenderá o conceito de Estado (State) no React e saberá como usar o Hook useState para fazer com que a sua tela se atualize automaticamente quando um dado mudar.

---

🏢 O Cenário Prático (Seu Desafio)

Uma nave parada não ganha batalhas! Seu desafio hoje é criar o controle de Velocidade da Nave. Você precisará de um botão para acelerar e ver o número da velocidade subir na tela em tempo real!

---

🧠 Fundamentos: A Teoria Traduzida

No capítulo 2, usamos variáveis comuns. Mas se você tentar mudar o valor de uma variável comum, o React não redesenha a tela. Para que a tela atualize, precisamos usar o Estado.

O que é o useState?

É uma função especial do React (chamada de Hook) que serve para criar uma variável de estado.

• Sintaxe: const [valor, setValor] = useState(valorInicial);
  • valor: É a variável que guarda o dado atual.
  • setValor: É a função que você usa para mudar esse dado.
  • useState(0): Define que o valor começa em 0.

---

📖 Exemplo Guiado: Controle de Velocidade

Vamos criar o velocímetro.

🛠️ Passo a Passo

Abra o arquivo src/App.jsx.

1. No topo do arquivo, importe o useState:

import { useState } from 'react';

2. Altere o componente App:

function App() {
  // Criamos o estado da velocidade começando em 0
  const [velocidade, setVelocidade] = useState(0);
 
  function acelerar() {
    // Para mudar o estado, DEVEMOS usar a função set
    setVelocidade(velocidade + 10);
  }
 
  return (
    <div>
      <h1>🚀 Velocímetro da Nave</h1>
      <p>Velocidade Atual: **{velocidade} km/h**</p>
      
      <button onClick={acelerar}>Acelerar</button>
    </div>
  )
}
 
export default App;

🕹️ Como Executar e Testar no VS Code

1. Salve o arquivo e veja o navegador.
2. Clique no botão “Acelerar” e veja o número mudar na tela instantaneamente!

---

🛠️ Prática Obrigatória 1

Crie um segundo botão chamado “Frear” que diminui a velocidade em 10 a cada clique.

---

🛠️ Prática Obrigatória 2

Melhore a função de frear para que a velocidade nunca fique menor que zero (velocidade negativa não faz sentido aqui!). Dica: use um if (velocidade > 0).

---

🔑 Gabarito de Código/Fórmulas

Prática 1 e 2:

No App.jsx:

function App() {
  const [velocidade, setVelocidade] = useState(0);
 
  function acelerar() {
    setVelocidade(velocidade + 10);
  }
 
  function frear() {
    if (velocidade > 0) {
      setVelocidade(velocidade - 10);
    }
  }
 
  return (
    <div>
      <h1>Velocímetro</h1>
      <p>Velocidade: {velocidade} km/h</p>
      <button onClick={acelerar}>Acelerar</button>
      <button onClick={frear}>Frear</button>
    </div>
  )
}

---

← Capitulo Anterior | Proximo Capitulo →