[vc_row][vc_column][vc_column_text]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!
[adrotate banner=”4″]
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:
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![/vc_column_text][/vc_column][/vc_row]
[adrotate banner=”5″]
