WEB CAP16 2025 VA04 REACT HOOK USESTATE
-
0:08 - 0:11O useState é um tipo de hook
que manipula o estado da variável. -
0:11 - 0:13Para usá-la,
precisamos de uma estrutura -
0:13 - 0:15de pastas organizada.
-
0:15 - 0:16Vamos ver como funciona?
-
0:16 - 0:21No projeto
temos a seguinte estrutura. -
0:21 - 0:26Dentro da pasta essa é "src"
foi criada uma pasta "components" -
0:26 - 0:30que vai receber todos
os componentes criados. -
0:30 - 0:35O "App' é o único componente
que fica fora da pasta "components", -
0:35 - 0:40porque ele é App
é o componente principal. -
0:40 - 0:44Crie aqui um exemplo ".jsx".
-
0:44 - 0:52Lembrando que o "E"
tem que começar sempre maiúsculo. -
0:52 - 0:58Com o projeto "Exemplo.jsx" aberto,
temos a seguinte estrutura. -
0:58 - 1:01Primeiro,
estou importando o "useState", -
1:01 - 1:02ou seja,
-
1:02 - 1:09é o hook que vai fazer
a manipulação da minha variável. -
1:09 - 1:12Aí eu tenho a minha função,
que é o "Exemplo", -
1:12 - 1:18abaixo dela estou declarando
uma constante que vai receber -
1:18 - 1:21"contador" e o "setContador"
-
1:21 - 1:24e o tipo é o "useState"
-
1:24 - 1:27e o início dela é zero.
-
1:27 - 1:30Aqui eu estou declarando o meu
-
1:30 - 1:33e existente contador
e quando recebo a variável -
1:34 - 1:37e o sete contador
e quando eu altera a variável -
1:37 - 1:40e a minha variável
vai iniciar em zero, -
1:40 - 1:43na minha tela
vai aparecer o seguinte -
1:43 - 1:46um h1 recebendo o contador,
-
1:47 - 1:51então iniciando em zero
e temos dois botões. -
1:51 - 1:56Esses botões
estão fazendo um evento de onclick -
1:56 - 2:01e está pegando o sete contador
e no primeiro -
2:01 - 2:04está adicionando que é aumentar
e no segundo está diminuindo. -
2:06 - 2:09Vamos ver agora
como funciona isso na prática. -
2:09 - 2:11Bem, primeiro
-
2:11 - 2:14eu preciso
agora chamar o meu exemplo. -
2:15 - 2:18Não é p meu componente
-
2:19 - 2:20e importá lo
-
2:21 - 2:23import
-
2:23 - 2:25with.
-
2:25 - 2:28Exemplo.
-
2:29 - 2:32From.
-
2:32 - 2:34E passar o caminho
-
2:34 - 2:38aonde está o componente
está em componentes barra. -
2:38 - 2:41Exemplo.
-
2:41 - 2:44Observem que agora ele apareceu
-
2:45 - 2:47aqui na minha tela,
-
2:47 - 2:49o contador iniciando de zero
-
2:49 - 2:52e agora vamos fazer na prática
como inexistente. -
2:54 - 2:55Realiza sua ação,
-
2:55 - 2:59por exemplo, clicando em aumentar
ele vai aumentando, diminuir, -
3:00 - 3:03ele vai diminuir essa ação
existente. -
3:03 - 3:07Isso é manipular
o estado da variável a variável. -
3:07 - 3:12Isso em quatro foi para três, agora
tem quatro, três agora tem cinco, -
3:13 - 3:16agora tem três, dois e isso
-
3:16 - 3:19é como o existente
manipula suas variáveis -
3:20 - 3:23e assim manipulamos o existente
-
3:23 - 3:26em suas variáveis
de uma forma rápida e dinâmica.
- Title:
- WEB CAP16 2025 VA04 REACT HOOK USESTATE
- Video Language:
- Portuguese, Brazilian
- Duration:
- 03:29
![]() |
camila00 edited Portuguese, Brazilian subtitles for WEB CAP16 2025 VA04 REACT HOOK USESTATE | May 20, 2025, 5:43 PM |
![]() |
camila00 edited Portuguese, Brazilian subtitles for WEB CAP16 2025 VA04 REACT HOOK USESTATE | May 20, 2025, 5:41 PM |
![]() |
camila00 edited Portuguese, Brazilian subtitles for WEB CAP16 2025 VA04 REACT HOOK USESTATE | May 20, 2025, 5:22 PM |
![]() |
camila00 edited Portuguese, Brazilian subtitles for WEB CAP16 2025 VA04 REACT HOOK USESTATE | May 20, 2025, 4:50 PM |
![]() |
camila00 edited Portuguese, Brazilian subtitles for WEB CAP16 2025 VA04 REACT HOOK USESTATE | May 20, 2025, 4:46 PM |
![]() |
camila00 edited Portuguese, Brazilian subtitles for WEB CAP16 2025 VA04 REACT HOOK USESTATE | May 20, 2025, 4:42 PM |
![]() |
camila00 edited Portuguese, Brazilian subtitles for WEB CAP16 2025 VA04 REACT HOOK USESTATE | May 20, 2025, 4:40 PM |
![]() |
camila00 edited Portuguese, Brazilian subtitles for WEB CAP16 2025 VA04 REACT HOOK USESTATE | May 20, 2025, 4:27 PM |