Introdução ao React Native

O React, resumidamente, é uma biblioteca para construção de interfaces, muito utilizado em Single Page Applications (SPA), uma arquitetura de front-end que permite que, quando você altere de uma página para outra na sua aplicação, não seja necessário um carregamento completo da mesma, mas sim apenas o conteúdo que é diferente. Isso além de proporcionar uma experiência mais suave ao usuário, dá uma performance muito superior.

E o melhor: tudo isso inteiramente usando JavaScript!

Sim, a interface, os comportamentos…toda a aplicação é codificada usando somente JavaScript, seja ela web ou mobile.

Aliado ao React, existe a lib React Native, que estende o React tradicional para permitir a construção de aplicações móveis usando JavaScript, que é o alvo do tutorial de hoje.

Eu tive a oportunidade de trabalhar no Banco Topázio, onde tanto o Internet Banking quanto o Mobile Banking eram feitos usando ReactJS e React Native, respectivamente e achei muito legal essa experiência. E se você está curioso em saber que outras empresas também usam a stack React, dê uma olhada nessa lista, tenho certeza que conhece boa parte dessas empresas e alguns desses apps até devem estar instalados no seu smartphone exatamente agora.

Como funciona?

A primeira coisa que precisamos entender é que o React Native é multiplataforma. Na abordagem tradicional de desenvolvimento mobile, você desenvolve uma aplicação para Android e outra para iOS, não aproveitando nada exceto alguns assets como imagens e o backend, que é totalmente desacoplado, é claro.

Usando React Native, semelhante ao que tínhamos com Phonegap, mas de uma maneira muito mais poderosa, nós construímos uma aplicação e o React gera os pacotes nativos para as principais plataformas do mercado: Android e iOS (formatos APK e IPA, respectivamente). Essa é a segunda vantagem do React Native frente a outros frameworks mobile multiplataforma, ele gera uma experiência nativa.

Mas como ele funciona exatamente? Ele traduz o JavaScript para Java/Kotlin e Swift/Objective-C?

Não.

Então ele cria uma webview e roda a nossa aplicação como se fosse um site dentro do smartphone?

Também não.

O que acontece, de maneira bem simplificada é que o React Native embute uma dependência chamada JavaScript Core dentro de todos os apps construídos com ele, essencialmente uma VM JavaScript. Essa dependência realiza, de forma nativa, a interpretação do JavaScript React da sua aplicação, permitindo que o smartphone consiga “entender” e executar JavaScript do mesmo jeito que ele já sabe fazer com Java/Kotlin ou Objective-C/Swift, dependendo da plataforma.

Com esse novo poder que o smartphone recebe, ele consegue entender comandos JavaScript para criar componentes e comportamentos nativos na interface das aplicações. Ou seja, o botão de um app criado com React Native é, em essência, o mesmo botão criado com Android Studio ou XCode, por exemplo.

Além disso, o React Native herda do seu pai React duas características muito importantes: organização de código e divisão de responsabilidades.

Primeiro vamos falar de organização do código. O React (e portanto o React Native) segue muito forte o conceito de componentização, ou seja, a gente separa o código da aplicação em pequenos componentes, semelhante ao que fazemos no backend com micro serviços. Por exemplo se eu tenho um botão que é utilizado muito na aplicação, eu posso criar um componente com este botão e utilizá-lo em todos os lugares que ele aparece. Futuramente, se eu precisar corrigir um bug neste botão, eu corrijo no componente e todos os lugares terão essa correção.

E por fim temos a divisão de responsabilidades. Quando usamos React (seja ReactJS ou React Native), o front-end fica somente com a responsabilidade de renderizar a interface corretamente, enquanto todas as regras de negócio ficam no back-end, que será consumido pela nossa aplicação.

Expo

Mas uma coisa é criar interfaces nativas, mas como fica o acesso a APIs nativas do hardware por parte do JavaScript?

Para que você não tenha que ficar instalando e manipulando um monte de bibliotecas nativas e, principalmente, para não ter que ficar utilizando o Android Studio e o XCode, que são extremamente pesados e complexos de mexer para quem não está habituado, foi criado o Expo.

O Expo é uma plataforma para construção de apps nativos com React (comumente chamados React Native). Ele possui conjunto de bibliotecas que lhe oferecerão acesso a recursos nativos de hardware, um utilitário de linha de comando para, dentre outras coisas, lhe permitir criar seus projetos e, ao mesmo tempo, um aplicativo para Android e iOS que substitui os simuladores tradicionais, lhe permitindo fazer testes de maneira mais fácil e fidedigna.

Além de tudo isso, o Expo permite que você consiga testar suas aplicações para plataforma da Apple sem ter um Mac, algo que normalmente não é possível utilizando os concorrentes do React Native.

Assim, você já pode baixar o Expo aí no seu smartphone, procurando por ele na sua loja de apps (Expo Client no iPhone).

Esse aplicativo funcionará como um contâiner de apps, para onde você enviará o seu código React Native para conseguir testá-lo rapidamente, semelhante ao que o Phonegap também possui, para quem já conhece essa outra plataforma. Ou seja, os testes são rápidos pois não há geração de pacotes o tempo todo a não ser quando estamos gerando uma release do app mesmo ou instalação de novas dependências, como veremos mais tarde.

Outra opção é não usar o seu smartphone, mas sim um simulador/emulador, como ensino neste tutorial.

Criando seu primeiro projeto

Caso prefira, você pode assistir ao vídeo abaixo ao invés de ler o restante deste tutorial. Depois, volte aqui pois tem mais lições no blog do que no canal.

Além de instalar o app no seu smartphone, para criarmos nosso primeiro projeto React Native você vai precisar instalar o expo-cli na sua máquina de desenvolvimento. Esse pacote contém o core do react-native que vamos precisar para criar apps, bem como outras ferramentas de linha de comando. Instale-o globalmente com permissão de administrador no terminal (sudo em ambientes Unix).

Essa instalação demora um bocado, não se assuste.

Uma vez finalizada a instalação, rode o comando abaixo para criar o seu primeiro projeto React Native dentro de uma pasta à sua escolha, onde neste exemplo abaixo ele terá o nome reactnative01.

Após rodar este comando, ele lhe perguntará qual template você deseja para o seu projeto, eu escolhi a opção blank (em branco).

Novamente você terá de esperar um bocado enquanto o app cria todo o arcabouço de um projeto React Native na sua máquina.

Uma vez finalizada a criação do projeto, você pode entrar na pasta do mesmo e rodar um npm start para fazê-lo funcionar. Ao fazer isso, será iniciado o Metro Bundler no seu navegador, que é um serviço que vai ficar olhando para o seu projeto e enviando as alterações para o Expo Client que deve estar instalado no seu smartphone.

Repare no canto inferior direito do Metro Bundler que ele possui um QRCode. O mesmo QRCode deve aparecer na sua janela de terminal onde rodou o npm start. Esse QRCode serve para ser scaneado pela câmera do seu smartphone (ou com algum app de leitor de QRCode) que deve abrir automaticamente o app do Expo. Todo o conteúdo do seu projeto será enviado pela primeira vez ao Expo em uma primeira instalação um pouco demorada. Para que esse procedimento funcione, tanto a sua máquina de desenvolvimento quanto o seu celular devem estar na mesma rede wifi.

Caso não funcione pelo QRCode, você pode pelo app do Expo para adicionar novo app e digitar manualmente o endereço que também aparece ali no Metro Bundler, um pouco acima do QRCode. O resultado é um app com tela branca e a frase “Open up App.js to start working on your app!”, que é o que faremos a seguir.

Atenção: falhas na sua aplicação também aparecerão no Metro Bundler, então vale a pena gastar um tempo explorando esse camarada aí. Outro ponto de atenção é que se o seu smartphone e o computador de desenvolvimento não estiverem na mesma rede, você pode usar o modo túnel do Metro Bundler (fica logo acima do endereço manual), mas não recomendo por ser mais lento.

Entendendo o projeto

Agora abra a pasta do seu projeto no Visual Studio Code ou similar, para que a gente dê uma olhada em tudo que foi criado automaticamente pra gente.

Alguns itens da estrutura você vai reconhecer de cara, como node_modules, package.json, etc. Alguns, no entanto, são novos e essenciais entendermos o seu funcionamento. Se dermos uma olhada no app que subiu no seu smartphone, ele sugere que a gente altere o arquivo App.js.

Se abrirmos o referido arquivo, devemos encontrar algo parecido com isso:

Esse arquivo representa justamente aquela tela de app que está aparecendo no smartphone e ela se chama App. Dentro dele, nós temos duas partes, primeiro uma função homônima ao arquivo (App) que nada mais faz do que retornar a interface a ser renderizada pelo navegador, em linguagem JSX (XML dentro de JavaScript), com alguns tratamentos especiais que veremos mais tarde. Depois, um objeto de estilo.

Por ora, vamos fazer uma pequena alteração nesta função principal, mudando o ligeiramente o retorno que ela traz dentro de uma tag Text para apresentar o clássico Hello World, como abaixo (o restante do arquivo App.js deixe como estava).

Basta salvar o arquivo e automaticamente você verá que a tela do app no seu smartphone já vai mudar de aparência, como abaixo.

Atenção: enquanto você estiver desenvolvendo o seu app usando o Expo no smartphone, ele não vai desligar a tela do dispositivo. Isso porque o Metro Bundler ficará em comunicação constante com o mesmo. Sim, isso vai consumir mais bateria, mas é o preço que se paga por desenvolver rapidamente. Se por um acaso você desligar a tela do dispositivo ou sair do app, ele perderá a conexão com o Metro Bundler e a próxima vez que você rodar irá demorar novamente, o que não é legal.

Agora olhando para o segundo bloco deste App.js, você deve estar vendo o objeto de estilo desta tela. Você pensar neles como classes CSS, mas não são, embora alguns nomes de propriedades sejam muito parecidos. Falaremos de estilos mais tarde.

Para fazer um rápido exercício que nos permita entender melhor como os estilos funcionam, altere este segundo bloco de código (deixando o restante como estava) para mudar a cor de fundo da aplicação.

Que cor ficou? Faça aí no seu código, não vou lhe entregar spoilers…

E aí, o que achou desta breve introdução de React Native?

Preparado para mais? Então acessa esse post!

Gostou do tutorial de hoje? Conheça meu curso online de Node.js clicando no banner abaixo.