-
O useState é um tipo de hook
que manipula o estado da variável.
-
Para usá-la,
precisamos de uma estrutura
-
de pastas organizada.
-
Vamos ver como funciona?
-
No projeto
temos a seguinte estrutura.
-
Dentro da pasta essa é "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 é App
é 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 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"
-
e 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
-
aonde está o componente
está em "components/Exemplo".
-
Observem que agora ele apareceu
aqui na minha tela,
-
o contador iniciando de zero
-
e agora vamos fazer na prática
como o useState realiza sua ação.
-
Por exemplo,
-
clicando em aumentar
ele vai aumentando,
-
diminuir, ele vai diminuir
essa é a ação do useState.
-
Isso é manipular o estado da variável.
-
A váriavel está em quatro,
foi para três.
-
Agora tem quatro, três,
agora tem cinco,
-
agora tem três, dois
e isso é como o useState
-
manipula suas variáveis.
-
E assim manipulamos o useState
em suas variáveis
-
de uma forma rápida e dinâmica.
