-
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 sete contador
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.
-
Não é p meu componente
-
e importá lo
-
import
-
with.
-
Exemplo.
-
From.
-
E passar o caminho
-
aonde está o componente
está em componentes barra.
-
Exemplo.
-
Observem que agora ele apareceu
-
aqui na minha tela,
-
o contador iniciando de zero
-
e agora vamos fazer na prática
como inexistente.
-
Realiza sua ação,
-
por exemplo, clicando em aumentar
ele vai aumentando, diminuir,
-
ele vai diminuir essa ação
existente.
-
Isso é manipular
o estado da variável a variável.
-
Isso em quatro foi para três, agora
tem quatro, três agora tem cinco,
-
agora tem três, dois e isso
-
é como o existente
manipula suas variáveis
-
e assim manipulamos o existente
-
em suas variáveis
de uma forma rápida e dinâmica.
