This content originally appeared on DEV Community and was authored by Paulo Alenquer
Sempre que alguém se depara com o React pela primeira vez, se assusta com os seus hooks e funcionalidades, não é mesmo? Eu mesmo sinto medo de alguns hooks e já fui dormir chorando várias vezes por conta de alguns deles.
Mas fica tranquilo que pelo menos o useState eu posso tentar te ensinar de uma forma simples como se você estivesse no ensino fundamental pela primeira vez.
Em React nós temos vários hooks e um deles é o useState, esse pra mim é o mais simples de entender e aplicar, então vamos ver como que ele funciona.
Criando e iniciando o useState
O que é o useState? useState é um hook do React a qual nos retorna um array com dois elementos, sendo o primeiro o nosso estado e o segundo uma função para alterar o nosso estado. Além disso, podemos passar como argumento, um estado inicial para o nosso estado. Não entendeu ainda? relaxa que eu vou te explicar. Veja no exemplo abaixo:
import { useState } from "react";
export default function Component() {
const [state, setState] = useState(0);
Aqui nós temos o state que é o estado, o setState que é a função para alterar o valor do nosso estado e o useState(0) que é o valor inicial do nosso estado, nesse caso é o 0 (poderia ser qualquer outro valor, como uma string, boolean ou um array de linguiças artesanais).
Utilizando o useState na prática
Para entender melhor como funciona o useState, precisamos também entende-lo na prática. E pra isso vou mostrar um exemplo de useState para fazer um contador simpleszão.
ignore os classNames
Aqui temos um exemplo de um estado que está recebendo um valor inicial de 0
const [counter, setCounter] = useState(0);
e uma função logo abaixo que irá acrescentar 1 para nosso estado toda vez que o botão for clicado
function addCounter() {
setCounter(counter + 1);
}
(para exibir o estado na tela é só adicionar um {} no seu HTML com o estado dentro, no exemplo é o h1).
<h1>{counter}</h1>
Ao clicar no botão (finge que foi clicado duas vezes), automaticamente nosso estado foi exibido na página com o número 2, graças a nossa funçãozinha chamada addCounter que acrescentou 2 vezes.
CONSEGUIMOS, UHUL! criamos um contadorzinho super simples e funcional com o useState! Agora é só praticar com outros exemplos que eu tenho certeza que você vai se sair super bem! ❤️
This content originally appeared on DEV Community and was authored by Paulo Alenquer
Paulo Alenquer | Sciencx (2021-05-09T22:12:24+00:00) Aqui está um tutorial de useState (ou quase). Retrieved from https://www.scien.cx/2021/05/09/aqui-esta-um-tutorial-de-usestate-ou-quase/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.