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:

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:

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:

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.

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 teremos um elemento de input, é necessário criarmos uma função para tratarmos deste elemento.

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:

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:

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:

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: 

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!