Voltar para: Games com Phaser + Reactjs

Nesta aula vamos explorar um dos conceitos mais importantes do React: Estado (State).

Se componentes são os blocos de construção da interface, o estado é o que faz a interface mudar.

Sem estado, uma aplicação React seria apenas uma página estática.

🎯 Objetivos da Lição

Ao final da aula, o aluno será capaz de:

Entender o conceito de estado em interfaces
Compreender o que é useState
Criar estados em componentes React
Atualizar estado corretamente
Entender como React re-renderiza a interface
Utilizar estados em eventos
Construir um contador interativo

📖 Parte 1 – O que é Estado em uma Aplicação

Estado é simplesmente:

informação que pode mudar ao longo do tempo dentro da interface.

Exemplos de estado:

pontuação de um jogo
número de itens no carrinho
usuário logado
texto digitado em um campo
menu aberto ou fechado

Essas informações mudam durante o uso da aplicação.

🔹 Exemplo sem estado

<h1>Pontuação: 0</h1>

Esse valor nunca mudará.

🔹 Exemplo com estado

<h1>Pontuação: {pontos}</h1>

Agora a interface depende de uma variável que pode mudar.

Quando o valor muda, React atualiza a tela automaticamente.

📖 Parte 2 – O Hook useState

Para criar estado em React usamos Hooks.

O mais básico é:

useState

Ele pertence à biblioteca React.

Sintaxe básica

const [estado, setEstado] = useState(valorInicial);

Estrutura explicada

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

Significa:

Parte	Função
contador	valor atual do estado
setContador	função que atualiza o estado
0	valor inicial

📖 Parte 3 – Importando useState

Antes de usar, precisamos importar.

import { useState } from "react";

📖 Parte 4 – Criando o Primeiro Estado

Exemplo simples:

import { useState } from "react";function Contador() {  const [contador, setContador] = useState(0);  return (
    <div>
      <h1>{contador}</h1>
    </div>
  );
}

Neste exemplo:

Estado inicial = 0

📖 Parte 5 – Atualizando Estado

Para alterar o estado usamos a função setEstado.

setContador(5);

Isso faz o React:

atualizar o valor
renderizar novamente o componente

📖 Parte 6 – Re-renderização

Quando o estado muda, o React:

1️⃣ executa novamente o componente
2️⃣ recalcula o JSX
3️⃣ atualiza apenas o necessário na tela

Esse processo usa o Virtual DOM.

React compara:

estado antigo
vs
estado novo

E altera somente o necessário.

📖 Parte 7 – Atualizando com base no valor anterior

Muitas vezes precisamos atualizar baseado no valor anterior.

Exemplo errado:

setContador(contador + 1);

Pode causar inconsistências em alguns casos.

Forma recomendada:

setContador(prev => prev + 1);

Aqui prev representa o valor anterior.

📖 Parte 8 – Exemplo Completo: Contador

import { useState } from "react";const Contador = () => {  const [contador, setContador] = useState(0);  const aumentar = () => {
    setContador(prev => prev + 1);
  };  const diminuir = () => {
    setContador(prev => prev - 1);
  };  return (
    <div>      <h1>Contador</h1>      <h2>{contador}</h2>      <button onClick={aumentar}>+</button>      <button onClick={diminuir}>-</button>    </div>
  );
};export default Contador;

📖 Parte 9 – Eventos no React

Eventos funcionam parecido com HTML, mas em camelCase.

Exemplo:

<button onClick={funcao}>

Evento mais comum:

onClick

📖 Parte 10 – Exemplo com botão

<button onClick={() => setContador(contador + 1)}>
  Aumentar
</button>

Cada clique altera o estado.

React atualiza automaticamente a tela.

📖 Parte 11 – Múltiplos Estados

Um componente pode ter vários estados.

Exemplo:

const [nome, setNome] = useState("");
const [idade, setIdade] = useState(0);
const [logado, setLogado] = useState(false);

📖 Parte 12 – Estado com Objetos

Também podemos armazenar objetos.

const [jogador, setJogador] = useState({
  nome: "David",
  vidas: 3,
  pontos: 0
});

Atualizando:

setJogador({
  ...jogador,
  pontos: jogador.pontos + 10
});

...jogador copia os valores existentes.

📖 Parte 13 – Estado com Arrays

Arrays também são comuns.

const [itens, setItens] = useState([]);

Adicionando item:

setItens([...itens, "espada"]);

📖 Parte 14 – Regras importantes do useState

✔ Não modificar estado diretamente

Errado:

contador = 5

Correto:

setContador(5)

✔ Estado deve ser imutável

Sempre criar novo valor, nunca alterar diretamente.

✔ useState só pode ser usado dentro de componentes

Não pode ser usado fora.

🎯 Atividade Prática – Sistema de Pontuação

Vamos criar um contador de pontos para um jogo.

Arquivo

src/components/Score.jsx

Código

import { useState } from "react";const Score = () => {  const [pontos, setPontos] = useState(0);  const adicionar = () => {
    setPontos(prev => prev + 10);
  };  const remover = () => {
    setPontos(prev => Math.max(prev - 5, 0));
  };  const resetar = () => {
    setPontos(0);
  };  return (    <div>      <h1>Pontuação</h1>      <h2>{pontos}</h2>      <button onClick={adicionar}>+10</button>      <button onClick={remover}>-5</button>      <button onClick={resetar}>Reset</button>    </div>  );
};export default Score;

📌 Usando no App.jsx

import Score from "./components/Score";function App() {
  return <Score />;
}export default App;

🧠 Conceitos Fixados

Após essa aula o aluno aprende:

conceito de estado
hook useState
atualização de estado
re-renderização
eventos em React
estado com objetos
estado com arrays

📝 Critérios de Avaliação

Critério	Peso
Estado criado corretamente	2
Atualização de estado	2
Uso de eventos	2
Interface atualizando corretamente	2
Organização do código	2

Total: 10 pontos

🚀 Desafio Extra

Melhorias possíveis:

1️⃣ Impedir pontuação negativa

2️⃣ Salvar pontuação no LocalStorage

3️⃣ Criar animação de pontuação

4️⃣ Criar sistema de vidas do jogador

5️⃣ Criar componente Score separado

🎓 Conclusão

O estado é o coração das aplicações React.

Sem estado:

interfaces são estáticas

Com estado:

interfaces se tornam dinâmicas e interativas

O useState é o primeiro passo para criar aplicações reais com React.