Iniciando no React Native

Published in

Tech Intelipost

8 min readDec 23, 2019

Recomendações

Para você conseguir seguir adiante nesse tutorial é recomendado ter um certo conhecimento de Javascript, é legal também ter noções de HTML e CSS.
Você deve saber também como trabalhar com a linha de comando do Windows!

O que é React Native?

React Native é um framework multi-plataforma baseado no Javascript, utilizado para o desenvolvimento de aplicativos para iOS e Android, os aplicativos criados com o React Native são renderizados como se fossem nativos nas duas plataformas, é necessário apenas criar um único código em JavaScript e fazer pequenos ajustes para garantir que ele se encaixe na interface da sua plataforma selecionada. Esse desenvolvimento multiplataforma economiza tempo e gera uma melhor experiência de desenvolvimento, pois um programador pode desenvolver uma aplicação que pode ser executada em ambas as plataformas, sem a necessidade de desenvolver nativamente para cada uma, o React Native ainda é uma ferramenta nova e está em desenvolvimento, atualmente ela se encontra na sua versão 0.61, mesmo não estando ainda na versão 1.0 ela já é presente nos aplicativos de grandes empresas, como Instagram, iFood, Facebook e Discord.

Vantagens e Desvantagens

Vantagens

Maior eficiência do tempo

O React Native utiliza uma ferramenta chamada de “hot reloading”, essa ferramenta permite que qualquer mudança realizada no código após salva tenha efeito imediatamente tanto no Android e iOS, diferentemente da linguagem nativa de cada um por exemplo, que é necessário recompilar todo o código para conseguir ver as mudanças.
React Native também oferece várias lib’s de funcionalidades já prontas, o que torna desnecessário desenvolver alguns sistemas mais simples e mais utilizados do zero.

É fácil de ler

Muitas frameworks tem estruturas complexas, que se faz necessário um grande tempo de estudo para entender os conceitos iniciais, já o React aposta no oposto, mesmo para aqueles programadores que nunca tiveram contato com o React devem ser capazes de ler e ter uma ideia do que está acontecendo no código.

É Open Source

A comunidade do React Native é grande e não para de crescer, qualquer desenvolvedor pode contribuir para o desenvolvimento do framework ou pedir ajuda em caso de erros ou dúvidas sobre a linguagem.

Reduz Custos

O React Native é leve, baseado no Javascript e requer uma menor quantidade de código para desenvolver aplicativos para os dois sistemas operacionais (Android, iOS), isso traz uma economia, pois não é necessário que as empresas contratem desenvolvedores para duas plataformas diferentes. Com o React Native praticamente 90% do código pode ser reaproveitado pelas duas plataformas, necessitando apenas algumas modificações especificas para cada dispositivo.

CONTRAS

Debug

É extremamente complicado debugar um aplicativo utilizando o React Native, muitas vezes as mensagens de erro apresentada são vagas, ou que não indicam exatamente onde o erro está localizado, o que pode levar dias até descobrir a raiz do problema.

Ainda está em desenvolvimento

Embora o React Native venha com muitas funcionalidades que auxiliam no desenvolvimento, ainda é um framework em desenvolvimento, ou seja, é necessário lidar com alguns bugs que ainda não são corrigidos.

Começando com o React Native

A primeira coisa devemos fazer é instalar o Chocolatey, em resumo, ele é o gerenciador de pacote do Windows, assim como o Ubuntu tem o “apt-get”, e o Mac OS tem o “homebrew”, porém, como o windows não vem nativamente com um, temos que instalá-lo. O Chocolatey vai te ajudar a instalar, atualizar e remover softwares em segundo plano, por meio da linha de comando. Para instalá-lo é bem simples: Vá até seu menu iniciar, procure por “Windows Powershell” e o execute-o como administrador, depois copie e cole no terminal o comando abaixo. Prontinho! Ele irá baixar e instalar automaticamente, sem a necessidade de uma interface complicada de instalação como estamos acostumados.

Executar o WIndows PowerShell como administrador!

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Agora estamos livres para instalar todos os outros programas necessários com o auxilio do Chocolatey! Instale cada um deles no mesmo lugar de antes (PowerShell) ou pode ser até mesmo no CMD do Windows, caso se sinta mais confortável.

Instalar Yarn

Yarn nada mais é que outro Package Manager (gerenciador de pacotes), similar ao Chocolatey, mas muito mais poderoso e vai te auxiliar durante o desenvolvimento do seu aplicativo!

choco install yarn

Instalar Python

O Python é necessário para o funcionamento do build do React Native.

choco install -y python 2

Instalar JDK (Java Development Kit)

O JDK é essencial para o desenvolvimento em Java, o React Native precisa da versão 8.

choco install jdk8

Instalar NVM

O NVM é responsável por gerenciar as versões do Node no seu computador, aqui não tem pra onde correr. Você deve entrar no site e baixar a última versão(nvm-setup.zip), e instalá-la de maneira tradicional. Baixe o arquivo, depois extraia-o e execute o arquivonvm-setup.exe para instalá-lo.

Instalar SDK (Command-line)

O Android Studio é um aplicativo não tão leve para o que precisamos aqui, então iremos baixar o SDK apenas da linha de comando. Entre na pagina de download do Android Studio, e faça o download do “Command line tools only.”, depois crie uma pasta chamada Android em seu disco, de modo que fique nesse caminho “C:\Android\Sdk”, após isso extraia o SDK dentro dela.

Instalar o React Native CLI

Por fim, resta instalar o React Native CLI, a ferramenta que vai te permitir criar novos projetos, usar dependências e executar seu aplicativo no seu smartphone ou emulador:

npm install -g react-native-cli

Emulador

GenyMotion

Se você já tem um emulador Android instalado, ou deseja usar seu próprio smartphone, pode pular essa parte! Existem hoje dois principais emuladores que são utilizados: Android Studio e GenyMotion, aqui nesse tutorial iremos utilizar o GenyMotion, ele é gratuito para uso pessoal e você pode fazer o download dele diretamente no site oficial.

Após instalado com um dispositivo baixado.

Atualizar as variáveis de ambiente

Agora você precisa adicionar uma variável de ambiente para o SDK que foi baixado anteriormente. Acesse o Painel de controle→ Sistema →Configurações Avançadas do Sistema→ Variáveis de Ambiente, localize aquele com nome “Path” e adicione um novo endereço, com o final platform-tools. O novo endereço a ser adicionado é o caminho que você criou para o SDK anteriormente, no meu caso o caminho é “C:/users/lucas/AppData/Local/Android/Sdk/platform-tools”

O que é a Expo?

Se você é novo nesse mundo de desenvolvimento mobile, a maneira mais fácil de começar é com o Expo. Com ele não é preciso instalar qualquer uma das principais dependências, ou fazer qualquer configuração complicada de ínicio, ele nos permite começar a desenvolver um aplicativo em React Native em questão de minutos.

Iniciando com o Expo

Você primeiramente deve criar uma conta no site oficial do Expo, depois com sua conta criada é necessário fazer a instalação no seu computador, e é realmente muito simples, lembra do Yarn? ele foi o primeiro programa que instalamos com o Chocolatey, agora ele vai nos auxiliar, tudo o que você precisa fazer é ir no CMD e executar esse comando:

yarn global add expo-cli

E acabou! O Expo agora já está instalado no seu computador, o próximo passo se você não quiser utilizar um emulador é baixar o aplicativo do Expo para Android ou iOS. Ele vai servir de ponte para você visualizar as modificações do seu aplicativo.

Agora vamos realmente começar a desenvolver com o React Native, abra seu CMD e execute o seguinte comando para criar um novo projeto, no qual a última frase é o nome do seu projeto (não se preocupe, é possível alterar depois), aqui no caso irei utilizar “IntelipostReactNative”

expo init IntelipostReactNative

Tela de seleção para criação de um novo projeto!

O template a ser escolhido aqui para nosso tutorial é o tabs, que já vem com algumas telas feitas e componentes feitos.

Agora precisamos entrar dentro da pasta do nosso projeto, para isso utilizamos o cd e o nome da pasta

cd IntelipostReactNative

Depois de entrar na pasta do projeto, vamos executar um único comando, que vai nos permitir iniciar todo o processo de desenvolvimento, lembre-se também de já ter seu emulador funcionando no computador.

expo start

Pronto! Se não houve nenhuma mensagem de erro, você fez tudo certo e agora tudo está pronto para o desenvolvimento do aplicativo!

Desenvolvimento inicial!

É assim que seu app vai vir como padrão se escolhemos a opção tabs na hora de criar o projeto, ele vem com uma interface de navegação com abas bem simples utilizando o react-navigation e uma tela inicial com uma imagem e alguns textos.

Olha só, a tela já nos dá o caminho de cada arquivo que temos que modificar para que surja alterações no aplicativo, então vamos lá na pasta do nosso projeto, abra-o na raiz pelo editor de sua preferência, eu utilizo o VSCode.

Toda tela do nosso aplicativo vai estar localizada dentro dessa pasta screens, cada pasta tem uma função diferente, mas o que importa para a gente nesse momento é alterar os dados presentes naquela tela inicial! Então vamos abrir o HomeScreen.js.

A tarefa agora é personalizar aquela tela inicial do jeito que você quiser, se precisar utilize CRTL + F para achar os textos presentes na tela e alterá-los, você também pode procurar no final onde está os códigos que aplicam as cores e o style das telas, tente até mudar a forma que as imagens aparecem, tudo é válido! O importante aqui é que quando se inicia no aprendizado, não começar com aquela explicação de para que serve e pra onde vai cada linha de código, e sim por meio das mudanças que pouco a pouco você vai realizar no código, por meio dela você vai começar a assimilar o funcionamento de cada função em cada arquivo :D.

Eu comecei a fazer alterações também, para tentar personalizar ele com a cara da Intelipost, no final não ficou o melhor dos mundos, mas no fim conseguimos desenvolver nosso primeiro aplicativo em React Native!