Este artigo é o segundo de uma série, caso queira conferir o primeiro acesse esse link.

Na segunda parte iremos realizar as seguintes evoluções no nosso código:

  • Componentizar: separar o código que hoje está em apenas um arquivo, em pequenos e reusáveis componentes
  • Consumir dados de uma API: utilizaremos a Fetch API, que já vem com o React Native

Componentizando

Hoje estamos colocando todo o código no App.js, que é o fluxo natural para iniciar, porém não o ideal. Para melhorar o nosso código iremos componentizar. E o uprimeiro passo é identificar o que faz sentido ser um componente.

A ilustração abaixo, mostrar como iremos dividir a nossa página inicial em componentes:

  1. Header
  2. TeamsList
  3. TeamItem

Dada essa nova organização, chegou a hora de refatorarmos a nossa aplicação.

Header, nosso primeiro componente

Crie o arquivo Header.js em uma nova pasta src/components/.

O nosso Header.js traz um conceito importante no desenvolvimento de aplicações React/React Native, stateless components (também chamados de functional components). Eles são definidos como funções puras, e assim não podem ter state, o que em termos práticos, resulta em componentes que não podem ser re-renderizados pelo React, que justamente não é uma necessidade do nosso Header, que precisa apenas mostrar o texto passado via props no atributo title.

TeamItem

Antes de criar o TeamsList, vamos criar o componente que irá ter a informação do nome da seleção.


Ele é mais um stateless component, pois é apenas visual e não possuirá nenhuma lógica.

TeamsList

Já nosso terceiro componente será stateful (também chamado class component), pois precisaremos gerenciar o state dos times, já que numa próxima refatoração, virão de uma API, e não mais hardcoded.

Com os 3 novos componentes, nossa App.js ficará da seguinte forma:

Consumindo a API

Criamos para esse exemplo uma API no Apiary, onde temos o endpoint teams, que retorna a lista das seleções participantes do mundial.

Vamos criar um objeto que terá a função getAll, que retornará os dados do Apiary. Crie o arquivo TeamsApi.js dentro de uma nova pasta src/api/:

No código acima, estamos:

  • Usando o async/await, para melhorar a legibilidade do código
  • Fazendo um GET para a nossa api, através da lib fetch, que já vem com o React Native, e está globalmente declarada, por isso não precisamos fazer um import
  • Retornando um objeto com o método getAll

Vamos atualizar o componente TeamsList.js, para utilizar a api que criamos:


O código acima ilustra a necessidade que falamos anteriormente, desse componente precisar ser stateful, pois utilizamos o state para renderizar ou não a nossa lista de seleções.

Se é a primeira vez que você vê o uso do state, ele é um estado a nível de componente, e através, da mudança dele que o React faz o re-render do componente.

Para você entender melhor, segue uma explicação do que estamos fazendo nesta nova versão do TeamsList.js:

  • Iniciando um state default, com uma lista vazia de countries e com a flag loading igual a true, para mostrarmos o ActivityIndicator (um novo módulo que estamos importando), durante o carregamento da lista de seleções
  • Estamos usando o método de lifecycle o componentDidMount, que ocorre logo após o componente ser montado, para chamar o nosso getAll,que é executado de forma assíncrona, por isso que ao abrir o aplicativo visualizamos o loading, e só após alguns instantes a lista de seleções
  • Após recebermos a lista de seleções, atualizamos o state por meio do método setState, pois é utilizando ele que o React fica ciente que precisa fazer o re-render, e assim iremos visualizar a lista de seleções e não mais o loading. O novo state terá o countries setado com o que retornou do Apiary e a flag loading igual a false
  • Por fim temos o render, que irá mostrar um loading, usando o ActivityIndicator quando a requisição não tiver terminado, e irá mostrar a lista de seleções após o this.state.loading for false. Outro detalhe aqui, é que como não temos mais a key no objeto da seleção, temos que passar uma função para o keyExtractor, com a nova key que será o code

Para finalizar, no TeamItem, além de mostrar o nome da seleção, vamos também mostrar a bandeira do país, utilizando o componente Image:

Neste componente o que mais mudamos além da adição da Image, foi o estilo dele, pois precisamos adicionar uma View para abraçar a bandeira e nome do país, e também setar o flex do texto para 3 e o da flag para 1, para que a bandeira ocupe 1/4 do espaço.

Com isso finalizamos este artigo. E o nosso aplicativo, está conforme abaixo (entrando no link do Snack, você pode visualizar o código completo):

 

No próximo artigo, iremos exibir os detalhes sobre a seleção em uma nova tela. Até lá!