< 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:26
    Dentro da pasta essa é "src"
    foi criada uma pasta "components"
  • 0:26 - 0:30
    que vai receber todos
    os componentes criados.
  • 0:30 - 0:35
    O "App' é o único componente
    que fica fora da pasta "components",
  • 0:35 - 0:40
    porque ele é App
    é o componente principal.
  • 0:40 - 0:44
    Crie aqui um exemplo ".jsx".
  • 0:44 - 0:52
    Lembrando que o "E"
    tem que começar sempre maiúsculo.
  • 0:52 - 0:58
    Com o projeto "Exemplo.jsx" aberto,
    temos a seguinte estrutura.
  • 0:58 - 1:01
    Primeiro,
    estou importando o "useState",
  • 1:01 - 1:02
    ou seja,
  • 1:02 - 1:09
    é o hook que vai fazer
    a manipulação da minha variável.
  • 1:09 - 1:12
    Aí eu tenho a minha função,
    que é o "Exemplo",
  • 1:12 - 1:18
    abaixo dela estou declarando
    uma constante que vai receber
  • 1:18 - 1:21
    "contador" e o "setContador"
  • 1:21 - 1:24
    e o tipo é o "useState"
  • 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