-
O useState é um tipo de hook
que manipula o estado da variável.
-
Para usá-la,
precisamos de uma estrutura
-
e de pastas organizadas.
-
Vamos ver como funciona?
-
No projeto
temos a seguinte estrutura,
-
dentro da pasta "src"
foi criada uma pasta "components",
-
que vai receber todos
os componentes criados.
-
O "app" é o único componente
que fica fora da pasta "components",
-
porque ele é o componente principal.
-
Crie aqui um exemplo ".jsx".
-
Lembrando que o "E"
tem que começar sempre maiúsculo.
-
Com o projeto "Exemplo.jsx" aberto,
temos a seguinte estrutura.
-
Primeiro,
estou importando o useState,
-
ou seja,
-
é o hook que vai fazer
a manipulação da minha variável.
-
Aí eu tenho a minha função,
que é o "Exemplo",
-
abaixo dela,
-
estou declarando
uma constante que vai receber
-
"contador" e o "setContador"
e o tipo é o "useState"
-
e o início dela é zero.
-
Aqui eu estou declarando
o meu "useState".
-
"Contador" é quando eu recebo
a variável
-
e o "setContador"
é quando eu altero a variável.
-
E a minha variável
vai iniciar em zero.
-
Na minha tela,
vai aparecer o seguinte,
-
um "h1" recebendo o contador
iniciando em zero
-
e temos dois botões.
-
Esses botões
estão fazendo um evento de "onClick"
-
que está pegando o "setContador"
e no primeiro está adicionando,
-
que é aumentar,
e no segundo está diminuindo.
-
Vamos ver agora
como funciona isso na prática.
-
Bem, primeiro,
-
eu preciso agora chamar
o meu "Exemplo"
-
no "app", meu componente,
e importá-lo.
-
"Import", "Exemplo from"
e passar o caminho
-
onde está o componente.
-
Está em "components/Exemplo".
-
Observem que agora ele apareceu
aqui na minha tela,
-
o contador iniciando em zero,
-
e agora vamos fazer na prática
como o useState realiza a sua ação.
-
Por exemplo,
-
clicando em aumentar
ele vai aumentando,
-
diminuir,
ele vai diminuindo.
-
Essa é a ação do useState.
-
Isso é manipular o estado da variável.
-
A variável está em quatro,
foi para três.
-
Agora está em quatro, três,
agora está em cinco,
-
agora está em três, dois.
-
E isso é como o useState
manipula suas variáveis.
-
E assim, manipulamos o useState
e suas variáveis
-
de uma forma rápida e dinâmica.
