Entendendo o useState React
O useState é um “Hook” que foi implementado a pouco tempo no React, basicamente é uma nova forma de você utilizar o estado de uma aplicação, sem a necessidade de criar uma classe para isso.
Vamos agora desvendar um pouco a utilização dessa nova funcionalidade que com certeza irá facilitar para escrevermos códigos muitos mais simplificados e elegantes no React.
Primeiro vamos criar um novo projeto React, siga os passos abaixo:
Após a criação do projeto, entre na pasta que ele criou e vamos executar o código de inicialização, veja abaixo:
Agora só falta abrir o projeto em nossa IDE, irei utilizar o Visual Studio Code e já vamos poder colocar a mão na massa.
Vamos abrir o nosso arquivo App.js que está dentro da pasta src, para fins de explicação não iremos criar componentes e utilizaremos apenas o App.js para fazermos nosso código mesmo. Iremos alterar o código do arquivo para deixar ele da seguinte forma:
Deixamos nosso código bem básico, apenas com um texto na tela, com uma div com className="App" para facilitar a estilização e exportando uma função, em nosso arquivo não há nenhuma classe, ou seja, ele é um componente funcional.
Mas se caso quiséssemos criar um estado dentro dele, como faríamos isso?
Ai que o useState vai nos ajudar veja:
Começando importando o useState e mantendo todo o código da mesma forma. Agora vamos criar um estado para salvar uma simples lista de ToDo e dando a possibilidade da criação de mais ToDo.
Bom com isso nosso estado para armazenar os ToDo e para salvar o texto de adicionar novos ToDo já está criado, porem precisamos construir um campo de input, um botão para realizar a inserção de ToDo e um campo para vermos nossos ToDo existentes, vamos então criar oque falta:
Criamos oque faltava para nossa aplicação de ToDo, podemos já ver os ToDo e adicionar mais, caso você se sinta a vontade adicione mais funcionalidades, por exemplo, remover e editar os ToDo e até mesmo a opção de completar uma tarefa, agora fica a sua escolha.
Agradeço por você ter lido e aceito qualquer critica que deseje fazer, tenha uma ótima semana e vamos aprender juntos :), abaixo está meu GitHub caso queira entrar em contato.
