Aula 03 🎣
Hooks I: useState e Estado Local
O que vamos aprender hoje? 📚
- O que é o Estado (State)
- Introdução aos Hooks
- Praticando com useState
- Regras dos Hooks
1. O que é o Estado? 🧠
Props vs State ⚖️
- Props: Vêm de fora (Pai). Imutáveis para o componente.
- State: Vem de dentro. Gerenciado pelo próprio componente.
O Poder da Reatividade ⚡
- Mudou o estado?
- O React atualiza a tela!
- Sem
document.getElementById
- Sem
innerHTML
2. Conhecendo os Hooks 🎣
O que são Hooks? 🤔
- Funções especiais do React.
- Permitem "fisgar" (hook into) recursos do React em componentes funcionais.
- Criados na versão 16.8.
useState 🔢
- O Hook mais básico e essencial.
- Permite que o componente "lembre" de dados.
Anatomia do Código 💻
const [valor, setValor] = useState(0);
- valor: O dado atual
- setValor: A função de atualização
- 0: O ponto de partida
3. Regras de Ouro 🛡️
1. Top Level Only 🔝
- Nunca chame hooks dentro de:
if for while
2. Apenas Funções React ⚛️
- Chame hooks apenas em:
- Componentes React
- Hooks Customizados
4. Prática e Fluxo 🔄
Mudando o Estado 🖱️
<button onClick={() => setValor(valor + 1)}>
Clique aqui
</button>
- IMPORTANTE: Nunca faça
valor = valor + 1
🚀 Desafio da Aula
- Criar um sistema de "Like" (Curtir).
- Um botão que incrementa um contador.
- Um botão de "Reset".
Fim da Aula 03 🎓
Próxima Aula: useEffect e Ciclo de Vida!