< Return to Video

WEB CAP16 2025 VA04 REACT HOOK USESTATE

  • 0:08 - 0:11
    O usestate é um tipo de hook
    que manipula o estado da variável.
  • 0:11 - 0:13
    Para usá-la,
    precisamos de uma estrutura
  • 0:13 - 0:15
    de pastas organizada.
  • 0:15 - 0:16
    Vamos ver como funciona?
  • 0:16 - 0:21
    No projeto
    temos a seguinte estrutura.
  • 0:21 - 0:24
    Dentro da pasta essa é C.
  • 0:24 - 0:26
    Foi criada uma pasta components
  • 0:26 - 0:29
    que vai receber todos os componentes
    criados.
  • 0:30 - 0:32
    O AP é o único componente
  • 0:32 - 0:36
    que fica fora da pasta components
    porque ele é web.
  • 0:36 - 0:39
    Ele é o componente principal.
  • 0:40 - 0:41
    Crie aqui
  • 0:41 - 0:44
    um exemplo ponto JSX.
  • 0:44 - 0:47
    Lembrando que o UI
  • 0:47 - 0:50
    tem que começar sempre maiúsculo.
  • 0:52 - 0:54
    Com o projeto.
  • 0:54 - 0:56
    Por exemplo, o JSX aberto,
  • 0:56 - 0:59
    temos a seguinte estrutura Primeiro
  • 0:59 - 1:02
    estou importando
    é o existente, ou seja,
  • 1:02 - 1:07
    é o RU que vai fazer
    a manipulação da minha variável.
  • 1:09 - 1:13
    Aí eu tenho a minha função,
    que é o exemplo abaixo dela.
  • 1:14 - 1:15
    Estou declarando uma
  • 1:16 - 1:17
    uma constante que vai
  • 1:17 - 1:20
    receber o contador e o sete contador
  • 1:21 - 1:24
    é o tipo O é o existente
  • 1:24 - 1:27
    e o início dela é zero.
  • 1:27 - 1:30
    Aqui eu estou declarando o meu
  • 1:30 - 1:33
    e existente contador
    e quando recebo a variável
  • 1:34 - 1:37
    e o sete contador
    e quando eu altera a variável
  • 1:37 - 1:40
    e a minha variável
    vai iniciar em zero,
  • 1:40 - 1:43
    na minha tela
    vai aparecer o seguinte
  • 1:43 - 1:46
    um h1 recebendo o contador,
  • 1:47 - 1:51
    então iniciando em zero
    e temos dois botões.
  • 1:51 - 1:56
    Esses botões
    estão fazendo um evento de onclick
  • 1:56 - 2:01
    e está pegando o sete contador
    e no primeiro
  • 2:01 - 2:04
    está adicionando que é aumentar
    e no segundo está diminuindo.
  • 2:06 - 2:09
    Vamos ver agora
    como funciona isso na prática.
  • 2:09 - 2:11
    Bem, primeiro
  • 2:11 - 2:14
    eu preciso
    agora chamar o meu exemplo.
  • 2:15 - 2:18
    Não é p meu componente
  • 2:19 - 2:20
    e importá lo
  • 2:21 - 2:23
    import
  • 2:23 - 2:25
    with.
  • 2:25 - 2:28
    Exemplo.
  • 2:29 - 2:32
    From.
  • 2:32 - 2:34
    E passar o caminho
  • 2:34 - 2:38
    aonde está o componente
    está em componentes barra.
  • 2:38 - 2:41
    Exemplo.
  • 2:41 - 2:44
    Observem que agora ele apareceu
  • 2:45 - 2:47
    aqui na minha tela,
  • 2:47 - 2:49
    o contador iniciando de zero
  • 2:49 - 2:52
    e agora vamos fazer na prática
    como inexistente.
  • 2:54 - 2:55
    Realiza sua ação,
  • 2:55 - 2:59
    por exemplo, clicando em aumentar
    ele vai aumentando, diminuir,
  • 3:00 - 3:03
    ele vai diminuir essa ação
    existente.
  • 3:03 - 3:07
    Isso é manipular
    o estado da variável a variável.
  • 3:07 - 3:12
    Isso em quatro foi para três, agora
    tem quatro, três agora tem cinco,
  • 3:13 - 3:16
    agora tem três, dois e isso
  • 3:16 - 3:19
    é como o existente
    manipula suas variáveis
  • 3:20 - 3:23
    e assim manipulamos o existente
  • 3:23 - 3:26
    em 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

Portuguese, Brazilian subtitles

Incomplete

Revisions Compare revisions