Instalando e Configurando React Native no Ubuntu 18.04
O React Native é um framework, criado pela equipe do Facebook, baseado no React, para desenvolvimento mobile multi-plataforma (Android/ios). Algumas das vantagens em criar suas aplicações com React Native são:
- React native permite que você crie aplicativos nativos para as plataformas Android e ios.
- Tem uma melhor integração com os recursos do dispositivo (câmera, giroscópio, biometria, etc)
- Acesso nativo a todas APIs
- Permite que você utilizar quase que 100% o mesmo código para criar aplicativos em ambas plataformas.
- Recurso de Live Reloading ao fazer alterações do código seu aplciativo automagicamente carrega as alterações o que permite maior produtividade do desenvolvedor.
- Performance. A arquitetura do React native é otimizada para ter a melhor performance nos dispositivos.
Instalação
1. NodeJS
Como o React Native é um framework em JavaScript, é necessário que você tenha o Nodejs instalado. Caso você não tenha o NodeJS, clique aqui e veja o artigo em que mostro como fazer isso.
2. JDK
Geralmente, aplicativos nativos para Android são criados em Java. Então Java Development Kit é necessário.
Execute no Terminal,
sudo add-apt-repository ppa:openjdk-r/ppa
sudo apt updatesudo apt install openjdk-8-jdk
3. ANDROID STUDIO
Para o desenvolvimento Android no React Native é necessário ter o Android Studio instalado. Na instalação estou usando o gerenciador de pacotes SNAP que já vem por default no Ubuntu 18.04.
Execute no Terminal:
sudo snap install android-studio --classicAo finalizar a instalação, abra o Android Studio e siga as instruções. Durante o processo o Android Studio ira baixar e instalar o Android SDK mais recente por padrão.
4. ANDROID SDK
O desenvolvimento em React Native com código nativo, requer o SDK do Android versão 6.0 (Marshmallow) com requisito. SDKs adicionais para Android podem ser instalados por meio do SDK Manager no Android Studio.
O SDK Manager pode ser acessado na tela Bem-vindo ao Android Studio. Clique em Configure e selecione SDK Manager.
Android SDK > SDK Platforms
Em seguida, marque a caixa ao lado de “Show Packages Details” no canto inferior direito. Procure na lista por Android 6.0 (Marshmallow) e verifique se os itens a seguir estão marcados:
- Google APIs
- Android SDK Platform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
Clique em Apply e depois Ok, na tela de confirmação, para instalar as dependências.
5. CONFIGURANDO A VARIÁVEL DE AMBIENTE ANDROID_HOME
As ferramentas React Native exigem que algumas variáveis de ambiente sejam configuradas para criar aplicativos com código nativo.
No terminal e abra o arquivo:
Estou utilizando o editor nano … mas você pode usar o editor de sua preferencia.
sudo nano $HOME/.bashrc“.bashrc” pra que serve este arquivo?
Possui as mesmas características do .bash_profile mas é executado por shells que não requerem autenticação (como uma seção de terminal no X).
Os comandos deste arquivo são executados no momento que o usuário inicia um shell com as características acima.
Copie e cole as seguintes linhas no final do arquivo
#VARIÁVEL DE AMBIENTE DO ANDROID SDKexport ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
Após as alterações para salvar e sair do Editor:
Pressione Ctrl + O (Gravar)
Pressione Enter
Pressione Ctrl + x (Sair do Editor)
6. WATCHMAN
O Watchman é uma ferramenta essencial para uso do recurso do Live Reload. Ele é o responsável por ficar “observando” as alterações código.
Antes de prosseguir, vamos instalar algumas dependências para que não ocorra problemas durante o processo. Abra o terminal e execute o comando.
sudo apt install -y autoconf automake build-essential libtool pkg-config libssl-dev python-devAgora vamos ao Watchman, execute as linhas a seguir no terminal
cd ~git clone https://github.com/facebook/watchman.gitcd watchmangit checkout v4.9.0./autogen.sh./configure --enable-lenientmakesudo make install
7. REACT NATIVE CLI
CLI que significa command-line interface (interface de linha de comando), ele é resumidamente uma interface que suporta passagem de parâmetros via linha de comando em terminais e/ou semelhantes.
Para instalar o React Native CLI podemos usar o npm. No terminal, execute o comando:
npm install -g react-native-cliAgora que temos o React Native CLI devidamente instalado, podemos criar um novo projeto. Crie uma pasta no diretório Home (ou onde você preferir), no meu caso eu criei uma pasta com o nome Projetos.
Acesse o diretório e execute o comando e espere alguns segundos.
react-native init NomeDoProjeto
Agora você pode abrir o diretório com o seu editor de códigos favorito e começar a trabalhar. Eu, particularmente, utilizo o Visual Studio Code em meus projetos. Mas existem outros muito bons, como o WebStorm e o Atom/Nuclide.
Não existe a “melhor IDE” e sim a qual você se sente mais confortável e consiga produzir com qualidade.
Bons códigos!
