React Native: Evoluindo o código
05.06
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:
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:
Dada essa nova organização, chegou a hora de refatorarmos a nossa aplicação.
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
.
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.
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:
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:
async/await
, para melhorar a legibilidade do códigofetch
, que já vem com o React Native, e está globalmente declarada, por isso não precisamos fazer um import
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
:
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çõescomponentDidMount
, 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çõesstate
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
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á!
Presidente de Portugal no encerramento No último dia aconteceu a trilha FullSTK, focada...
Eita, sô! Chegamos ao décimo aniversário da Vizir! Chegamos em um momento...
Terceiro dia de evento. Fila para entrar, muita gente de novo, mas faz parte! Tudo...
Palco principal do WebSummit, as luzes dele são legais! No primeiro dia, ou melhor,...
Estamos contratando Desenvolvedores(as)! Apaixonados por resolver problemas reais e que...