Aprendendo React Native #2 – Obtendo dados da API do Covid-19

Neste artigo mostro como obter dados de uma API pública com dados atualizados do Covid-19, o Corona Vírus. Estes dados serão exibidos em uma tela de celular, usando React Native. Será necessário também ter instalado em sua máquina o Node.js e um celular com Android pra testar (não usarei nem o Expo nem o Android Studio, pra simplificar o exemplo, apesar deste último ser necessário estar instalado em sua máquina).

Em um artigo anterior desta série mostrei como realizar as configurações para rodar uma aplicação básica do React Native em uma tela de celular Android, confira o artigo caso precise configurar ou instalar algo, esse artigo já supõe o seu prévio conhecimento inicial destas configurações, além é claro do conhecimento básico de Javascript.

Agora imaginando que você irá criar seu projeto no caminho C:\Users\<SeuUsuário>\Desktop, rode o seguinte comando (ele irá criar uma pasta para o projeto automaticamente).

npx react-native init ExemploCovid

Citei no artigo anterior do problema que tive no VS Code após criar o projeto, caso você tenha o mesmo problema dê uma passada lá que coloquei a solução que encontrei.

Agora entre em seu editor de códigos de preferência, eu utilizo o Visual Studio Code, e abra a pasta do seu projeto, você terá uma visão parecida com essa, talvez com menos arquivos mas é pra ser algo como isso.

Entendendo o básico do React Native

Ao abrir o arquivo App.js temos o código padrão gerado, após mandar o React criar o projeto. Se você quiser pode fazer um backup do código pra fins de aprendizado, vou seguir o exemplo com uma tela vazia. Caso queira o código fonte desse arquivo basta rodar novamente o comando pra criar o projeto, apontando pra outra pasta.

PS: Ao final do artigo terá o código fonte completo para download no Github.

Começando com a estrutura básica padrão de um arquivo em React Native:

Primeira coisa pra começar a desenvolver pro React Native é importar a biblioteca do React para poder utilizar o JSX (Javascript XML), que é basicamente uma extensão de sintaxe baseada em XML para fins de simplicidade e elegância do código. É possível não utilizar JSX para montar a sintaxe usando React ou mesmo React Native, mas é o que o mercado utiliza e a forma mais facilitada para escrever códigos em RN, então vou seguir com ele.

Como bem explicado na documentação do JSX, ao invés de separar tecnologias artificialmente colocando markup e lógica em arquivos separados, o React separa conceitos com unidades pouco acopladas chamadas “componentes” que contém ambos.

Note que o primeiro import busca da biblioteca do React enquanto o segundo busca do próprio RN, para montar os campos que serão exibidos no celular.

Depois é declarado uma classe que neste caso funciona e poderia ser igual a uma função do Javascript (lembrando que no fim das contas é tudo Javascript), que por sua estende (herda) do objeto Component.

Logo no início desta classe chamo o método render(), que é uma chamada obrigatória e necessária no início de cada componente, como explicado na documentação do link. Dentro do render tenho a minha função, e é aí que entra o JSX, onde utilizo os componentes do RN para renderizar uma View com um Text dentro dela exibindo o clássico Hello World.

Pra mandar rodar em seu Android (já conectado via USB ao seu computador e configurado corretamente seguindo o artigo anterior) basta digitar no terminal:

npx react-native run-android

Após alguns segundos o resultado deverá aparecer em seu celular.

Tranquilo né? Agora vamos incrementar essa classe incluindo um pouco de CSS.

Notou no segundo import uma referência a StyleSheet? É a forma de dizer ao arquivo que iremos utilizar CSS.

Ao final do arquivo, criei o seguinte CSS

E adicionei chamada a ele em minha View.

Resultado:

Como dá pra ver, CSS definitivamente não é o meu forte! Mas tudo bem, a intenção foi só mostrar como aplicar CSS a um arquivo JS em RN. Daí pra ficar bonito depende da criatividade (e skill) da pessoa.

Agora que uma parte básica do básico foi explicado vamos de fato ao exemplo do título do artigo, finalmente. Recomendo fortemente a leitura de alguns dos links postados, principalmente da documentação do React Native, que é bem completa.

Obtendo os dados da API

Irei utilizar os dados desta API. Começando vou usar o conceito de state, que é a forma do RN usar variáveis mutáveis, ou seja, variáveis que irão sofrer alterações de valor durante o ciclo de vida da aplicação. Pra fins de simplicidade irei declarar dentro do state apenas 4 variáveis e iniciá-las com valores vazios.

Agora a parte mais importante enfim que é a obtenção dos valores da API e atribuição nas variáveis declaradas anteriormente. Antes disso eu vou buscar a rota da API que utilizarei no exemplo no Postman (app muito útil para buscar APIs, o Insomnia também é muito bom) e mostrar o resultado, pra facilitar o entendimento dos campos a serem buscados e exibidos no celular.

Acompanhe a explicação após a imagem.

Declarei o método que logo de cara usa a API Fetch, desenvolvida pela Mozilla mas muito utilizada no RN, inclusive na documentação é usada um exemplo com ele, que é responsável por fazer requisições HTTP e perfeita pra este exemplo.

É utilizado o método GET, indicando que é uma requisição de obtenção de dados. Logo em sequencia é capturado o retorno do JSON de resposta desta API (exibida na imagem do Postman) e, utilizando o método setState, é setado os valores desta API para as variáveis criadas anteriormente no state. E no final é incluindo um bloco catch caso dê erro pra exibir no console.

Agora só precisamos exibir esses valores em tela, pra isso basta incluir as variáveis dentro do render().

O método de obtenção de dados e consequentemente as variáveis do state são preenchidas. Dentro do Text é possível concatenar texto simples com variáveis usando as chaves e o this.state. Abaixo vemos o resultado.

Note que no rodapé da tela apareceu um warning, abrindo ele vemos o seguinte texto: “Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method” .

Não é desculpa pra encerrar o artigo mas como está muito grande vou deixar pra incrementar o aplicativo e também procurar como resolver esse warning para a próxima parte. Caso algum desenvolvedor React saiba do que se trata comenta aí mas eu suspeito o que possa ser.

É isso, espero ter clareado as dúvidas iniciais de quem está começando com React Native e se ficou alguma dúvida, tem sugestões ou críticas posta aí.

O projeto pode ser baixado aqui. Se você nunca baixou nada do Github, basta clicar ali em Clone or Download (botão verde a direita) e em Download ZIP.