Aprendendo React Native #1 – Configurações Iniciais

De volta a escrever (pra quem não me conhece tenho um blog desatualizado que criei em 2010) e voltando com tudo no aprendizado de React Native. Mas antes precisamos configurar e instalar algumas coisas.

Eu iria publicar um artigo já mostrando um exemplo prático usando React Native (ainda vou, está ficando pronto) mas pelo tanto de coisas que precisei configurar e instalar só pra começar a programar o básico decidi antes fazer esse artigo.

Fiz baseado na documentação do React Native, que pode ser vista aqui (irei usar a opção sem o Expo, que é outra ferramenta útil pra começar no RN mas quero começar de maneira “pura”, sem auxílios externos). Se o seu inglês é bom pode seguir o guia original, vou basicamente traduzir o processo e colocar alguns prints do que fiz em meu note.

PS: Se você já trabalha, conhece ou já tem um ambiente pronto pra usar o React ou React Native pode pular este artigo e ir direto para um exemplo prático aqui.

Antes um pouco de explicações básicas sobre tudo que será instalado e utilizado posteriormente.

Conceitos

• React Native é uma biblioteca Javascript criada pelo Facebook em 2015 para desenvolvimento de aplicativos mobile, para Android e iOS. Com ele usando o mesmo código fonte (e algumas pequenas modificações) é possível publicar o mesmo app tanto na loja da Apple Store quanto na loja da Google. Ele foi criado usando a base do React, que é outro framework Javascript, mas utilizado para desenvolvimento de páginas Web, que será estudado e posteriormente descrito com exemplos práticos aqui futuramente.
• Node JS é um ambiente de execução de Javascript server-side, ou seja, é basicamente um servidor Web baseado em Javascript. Ele é muito mais poderoso que isso mas a grosso modo é isso.
• Android Studio é um ambiente de desenvolvimento integrado (IDE), seguindo os mesmos moldes de outras como Visual Studio, Visual Studio Code, Sublime, Atom, etc. Ele é um ambiente feito para desenvolvimento nativo de aplicações para Android, utiliza como linguagem o Java. Não irei usá-lo pra programar, já que farei em React Native mas preciso instalá-lo para utilizar suas dependências para que a aplicação rode (mesmo que eu rode direto em um dispositivo físico preciso instalar o Android Studio).
• Python é uma linguagem de programação bastante conhecida, de alto nível, interpretada, de script, imperativa, orientada a objetos, funcional, de tipagem dinâmica e forte. Foi lançada por Guido van Rossum em 1991.
• JDK é a sigla para Java Development Kit e é um SDK (kit de desenvolvimento de software), para desenvolvimento de aplicações em geral, de diversos tamanhos, meio que utilizado em todo tipo de aplicação hoje em dia que utiliza a JVM, máquina virtual do Java.
• Chocolatey é um gerenciador de pacotes para o Windows, parecido com o npm e o Yarn.

Instalações e Configurações no Android Studio

Com o Chocolatey citado acima é bem fácil instalar quase todos os itens com exceção do Android Studio, que será instalado da maneira clássica (famoso NNF).

Se você já tem instalado em seu sistema o Node.JS se certifique que é a versão 8.3 ou maior, e se já tem o JDK certifique que é a 8.0 ou maior, do contrário, uma vez tendo instalado o Chocolatey, basta abrir o prompt de comando do Windows mesmo, em modo de administrador, e executar.

choco install -y nodejs.install python2 jdk8

Agora a parte meio chata, as configurações no Android Studio. Na hora de instalar o editor o tutorial do site do RN diz pra selecionar uma instalação customizada mas pra mim não teve essa opção, só esta tela e os botões pra continuar e instalar.

Ao instalar o Android Studio ele automaticamente instala o último SDK disponível. O RN exige que seja utilizado o SDK do Android Pie (9.0). Para isso é necessário abrir o SDK Manager, que pode ser acessado pela tela de boas vindas do Android Studio, ao clicar em Configure.

Note que veio instalado o 10.0 mas preciso instalar o 9.0 também.

Agora é necessário configurar uma variável do sistema para trabalhar com o RN. Digite na pesquisa do Windows variáveis do sistema e irá aparecer uma sugestão escrita Editar as variáveis de ambiente do sistema. Na tela que abrir clique em Variáveis de Ambiente… no rodapé. Clique em Novo para criar uma variável de usuário para trabalhar com o Android.

Essa variável deverá apontar para o caminho físico onde está localizado o Android SDK, que por padrão é instalado em C:\Users\<SeuUsuário>\AppData\Local\Android\Sdk.

Mas confirme que o seu SDK está localizado mesmo nesse caminho, caso não encontre procure no Android Studio, indo na mesma tela de configurações acessada anteriormente e olhando o caminho no alto da tela.

Agora volte a tela de variáveis de ambiente e clique em editar na linha escrita Path, no grid de cima, de variáveis de usuário.

Clique em Novo e adicione o caminho para o platform-tools, que geralmente por padrão fica em C:\Users\<SeuUsuário>\AppData\Local\Android\Sdk\platform-tools. Neste trecho o artigo diz que o caminho é outro mas aqui e pelas pesquisas que fiz ele geralmente fica no AppData mesmo. Aproveite e confirme que dentro desta pasta o arquivo adb.exe está incluído. Caso não esteja instale aqui.

Criação de um projeto e execução no Android

Para criar seu projeto do RN basta digitar no terminal:

npx react-native init NomeProjeto

A primeira vez vai demorar alguns minutos pra criar o projeto (no meu teste baixou por volta de 300mb de conteúdo, ele baixa um template básico pra auxiliar, além dos arquivos que compõem a estrutura inicial do React Native).

Estou usando a versão 1.44.2 do Visual Studio Code. Abrindo o arquivo App.js pra mim apareceu o seguinte erro, não sei se pra vocês também irá aparecer o erro abaixo.

O problema aparentemente só ocorre no VS Code (no Sublime ou Atom não). Como prefiro usar o VS Code tentei resolver, ao pesquisar me deparei com uma resposta que me ajudou. Precisei desabilitar a pré-validação de Javascript do VS Code para resolver esse problema, indo em File > Preferences > Settings> Extensions > TypeScript e desabilitando a opção Enable/disable JavaScript validation.

Ao desmarcar essa opção as validações pré-criadas para Javascript deixam de funcionar, mas ao menos o erro é corrigido. Para voltar a validar o seu código fonte sugiro usar o ESLint. Basta baixá-lo pelo botão lateral esquerdo de extensões, procurando na busca e clicando em Install, ou instalando via algum gerenciador de pacote, como o npm por exemplo.

Nesta parte final do artigo irei usar este post que explica como rodar o RN no dispositivo físico, passe lá dar uma olhada caso fique alguma dúvida, vou só citar um resumo aqui.

Finalmente, agora basta configurar seu celular Android para aceitar depuração via USB. Para fazer isso, primeiro é necessário habilitar o modo desenvolvedor nele.

Pra isso vá nas configurações do celular até encontrar Sistema, depois toque em Sobre o dispositivo e desça até a opção Número da versão. Toque 7 ou mais vezes nessa opção até aparecer que o modo desenvolvedor foi ativado.

Agora volte uma opção, novamente em Sistema, desça em Avançado e abra Opções do desenvolvedor, o novo item que apareceu no menu. Finalmente desça até Depuração e ative a Depuração USB.

Agora conecte seu celular no USB do seu computador, abra uma janela de comando e cheque se o mesmo está habilitado para ser utilizado para o RN, incluindo o texto adb devices, deverá aparecer algo tipo isso.

Se tudo deu certo é pra aparecer device, como na imagem acima. Isso significa que há um dispositivo conectado, para testes só devemos ter um conectado por vez.

Para rodar uma aplicação já criada no RN em seu celular basta digitar no terminal

npx react-native run-android

PS: Eu obtive erros que a variável JAVA_HOME não estava definida (mas estava) nas variáveis de ambiente, ao tentar rodar o comando acima pelo VS Code. Fechei o VS Code e rodei o mesmo comando no Powershell e funcionou, a tela abriu em meu celular. Neste artigo tem algumas dicas do que fazer caso você passe pelo menos erro.

Tudo correndo bem deve aparecer esta tela em seu celular,

Após abrir o aplicativo, fechei o Powershell e abri o VS Code, rodei o comando acima e não deu erro, devia ser algo que o Powershell instalou quando rodou e o VS Code não, sei lá.

Enfim, é isso, dúvidas comentem aí, o próximo artigo será mão na massa mostrando uma aplicação básica rodando com React Native buscando dados de uma API.