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:47Lembrando que o UI
-
0:47 - 0:50tem que começar sempre maiúsculo.
-
0:52 - 0:54Com o projeto.
-
0:54 - 0:56Por exemplo, o JSX aberto,
-
0:56 - 0:59temos a seguinte estrutura Primeiro
-
0:59 - 1:02estou importando
é o existente, ou seja, -
1:02 - 1:07é o RU que vai fazer
a manipulação da minha variável. -
1:09 - 1:13Aí eu tenho a minha função,
que é o exemplo abaixo dela. -
1:14 - 1:15Estou declarando uma
-
1:16 - 1:17uma constante que vai
-
1:17 - 1:20receber o contador e o sete contador
-
1:21 - 1:24é o tipo O é o existente
-
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 |