Blog

Como treinar programação: criando uma Pokédex com Reactjs Hooks

A imagem mostra uma pokeball, que ilustra o material que utilizaremos para saber como treinar programação
Desenvolvimento / Desenvolvimento de Software / Programação / Tutoriais

Como treinar programação: criando uma Pokédex com Reactjs Hooks

Provavelmente você já tenha escutado isso antes, mas, para se tornar um bom programador, é necessário “codar” e praticar muito. Mas você sabe como treinar programação de uma maneira divertida? É o que vamos descobrir neste artigo!

De fato, você só se tornará um bom dev. desenvolvendo. Porém, não precisamos tornar nossos exercícios maçantes, chatos e desinteressantes. Então, o que sempre busco fazer quando treino, é fazer algo que me interessa, algo que eu ache divertido, além de praticar. Então (como o geek que sou), trouxemos hoje uma pokédex criada em React JS, utilizando a pokeAPI, disponível neste link.

A Pokédex (palavra comum no vocabulário dos amantes de Pokémon) é uma enciclopédia virtual que detém todas as espécies de pokémon.

Configurando a estrutura básica

O primeiro passo para criar uma pokédex em React JS é criar uma estrutura básica para o projeto. Utilizaremos o comando:

Como treinar programação parte 1

Para criar uma estrutura básica de projeto utilizando React, vamos limpar a estrutura do projeto, deixando-o mais enxuto e básico. Então, removeremos tudo que não for utilizado. 

No fim, a nossa estrutura de pastas ficará assim:

Como treinar programação parte 2

O que nos interessa são as pastas dentro do src:

  • Assets: onde guardamos nossos recursos (como imagens e fontes);
  • Components: (como o nome sugere) é onde guardamos nossos componentes react;
  • Services: é onde mantemos nossas configurações de chamada à API;
  • Styles: onde ficam nossos estilos;
  • App.jsx: é o mais importante, pois é onde mais nos concentraremos.

Obs: não utilizaremos Index.jsx.

Após a limpeza, queremos que o nosso arquivo App.Jsx esteja assim:

Como treinar programação parte 3

Bibliotecas utilizadas para treinar programação no desenvolvimento da pokédex

Na criação deste projeto, utilizei algumas bibliotecas que estou familiarizado e que são muito eficientes:

  • Axios – conexão com a API;
  • Styled components – Css em javascript;
  • Polished – mais uma lib de estilização.

Configurando o axios

Para seguir com o desenvolvimento da pokédex em React JS, instalar o axios é fundamental. Então, executaremos o comando:

yarn add axios

Depois, criaremos um arquivo dentro da pasta services de nome api.js.

Dentro dela, criaremos a instância do axios, configurando para que nossa url base seja a da pokeAPI. Sendo assim, todas nossas chamadas à API terão este endereço.

Como treinar programação parte 4

Criando a Pokédex

Fala sério! Existe como treinar programação de uma forma mais legal? Chegou a hora de começarmos o projeto! Então, no nosso arquivo App.js começaremos pensando primeiro em nossos estados.

Teremos 4 estados:

  • pokemon: estado que armazenará o resultado da busca na API;
  • typedPokemon: estado responsável pelo input;
  • error: estado responsável pelos erros;
  • isLoading: estado responsável pelo carregamento.

Como treinar programação parte 5

Como teremos um elemento de input, é necessário criarmos uma função para tratarmos deste elemento.

Como treinar programação parte 6

Temos uma função que recebe o evento, que será a mudança no elemento input. Esse elemento possui um valor, dentro de target.value, o valor digitado dentro do input. Logo, armazenaremos este valor dentro do typedPokemon, com o setTypedPokemon. Isso porque não podemos modificar o estado diretamente em React JS.

Indo para o html da página, temos a estrutura abaixo:

Como treinar programação parte 7

Os elementos mais importantes serão o form e input (que nos concentraremos). Form será responsável por submeter nossa requisição para a API, com a função handleSubmit (que será criada logo a seguir). 

Nosso input recebe o valor de typedPokemon, que definimos na função handleChange.

Agora, criaremos nossa função para buscar os pokémons da API. Como citada anteriormente, esta se chamará handleSubmit:

Como treinar programação parte 8

Temos uma função assíncrona desta vez. Como teremos uma chamada à API, temos uma ação que levará um tempo até ser finalizada. Dessa forma, precisaremos que esta ação termine para podermos começar a outra.

Recarregamento

Recebemos como parâmetro um evento, que seria o formulário sendo submetido. Porém, só o utilizaremos para prevenir o comportamento padrão do html quando ocorre um submit, que é o recarregamento da página. Então, executamos o event.preventDefault() para não haver recarregamento.

Com uma tratativa básica de erros, sairemos da função (caso o estado de typedPokemon não exista) e setaremos o nosso estado de loading como verdadeiro.

Como tentaremos acessar um serviço externo, envolveremos a lógica de busca em um bloco try/catch. Caso haja sucesso, criaremos uma constante chamada response que busca da API o nome do pokémon. Esta resposta será setada no estado pokémon. Assim, setaremos o erro para null e o loading para false.

Caso haja falha, setaremos o erro para pokémon não encontrado (porém podendo ser setado para receber o erro com error.message), setando loading para false e setando pokemon para null novamente.

Mostrando o resultado em tela

Chegou a hora de, finalmente, demonstrarmos os resultados em tela. Neste momento, teremos:

Como treinar programação parte 9

Na lógica, caso pokémon exista e esteja em loading, demonstraremos o spinner (que será disponibilizado ao final do artigo). Caso não esteja em loading mostraremos o resultado com um card

  • pokemon.name – Nome do pokemon;
  • pokemon.sprites[‘front_default] – Imagem em sprites do pokemon;
  • pokemon.height – Altura do pokemon;
  • pokemon.weight – Peso do pokemon;
  • pokemon.type – Tipo do pokemon;
  • pokemon.id – Id do pokemon.

Finalizando o App

Ao final, podemos estilizar o app como desejarmos. Entretanto, este não é o foco deste artigo, por isso, não iremos nos aprofundar na estilização neste momento.

No fim, o app teve este resultado: 

Como treinar programação parte 10

Que tal? Percebemos, neste artigo, que treinar programação não é tão difícil quando construímos algo divertido enquanto treinamos!

Fazendo algo que curtimos, treinamos o seguinte:

  • Manuseio de estados;
  • Funções assíncronas;
  • Tratativa de erros;
  • Tratativa de dados de API.

Veja também:

Como criar snippets no VSCode

Galeria de tutoriais da Luby

Agora já sabe como treinar programação? Divertindo-se! Espero que você treine por aí também. Caso você queira, pode acessar o projeto desenvolvido neste link.

Porém, qualquer dúvida pode me chamar nos comentários!

Comment (1)

  1. […] no ReactJS, os componentes baseados em funções são mais utilizados. Portanto, vamos começar esse tutorial […]

    8 de junho de 2022 at 11:35
    |Reply

Leave your thought here

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the comparison bar
Compare