Para ver na prática o React native, vamos para o nosso Hello world. A documentação(Getting Started) explica bem os passos de instalação e para rodar os projetos, mas você também pode ver aqui abaixo e conferir um exemplo em nexus-react-native - hello-world.
Pré-requisitos
- Node - Interpretador de código JavaScript que funciona do lado do servidor.
- Watchman - Ferramenta do Facebook para observar as alterações no sistema de arquivos. É altamente recomendável que você o instale para um melhor desempenho.
- Xcode - Ambiente de desenvolvimento integrado e software livre da Apple Inc.
- JDK - Significa Kit de Desenvolvimento Java, e é um conjunto de utilitários que permitem criar sistemas de software para a plataforma Java.
- Android Studio - Ambiente de desenvolvimento integrado para desenvolver para a plataforma Android.
- react-native-cli - Permite instalar a interface do React Native via linha de comando.
IOS (Mac)
Android (Windows/Linux/Mac)
Android Studio
Instalação
Escolha uma configuração custom
quando solicitado ao selecionar o tipo de instalação. Certifique-se de que esses itens estejam marcados:
Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device
Instalando o Android SDK
O Android Studio instala o último SDK do Android por padrão. Uma aplicação React Native, no entanto, requer o SDK do Android 6.0 (Marshmallow) em particular. SDKs Android adicionais podem ser instalados através do SDK Manager no Android Studio.
O SDK Manager pode ser acessado em Appearance & Behavior → System Settings → Android SDK
.
Selecione a guia Plataformas SDK
dentro do SDK Manager, em seguida marque a caixa ao lado de Show Package Details
no canto inferior direito. Procure e expanda a entrada do Android 6.0 (Marshmallow), então verifique se os seguintes itens estão marcados:
Google APIs
Android SDK Platform 23
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image
Em seguida, selecione a guia SDK Tools
e marque a caixa ao lado de Show Package Details
aqui também. Procure e expanda a entrada Android SDK Build-Tools
, então verifique se o 23.0.1 está selecionado.
Variáveis de ambiente (Android)
Se vai utilizar a plataforma Android, precisa ter algumas variáveis de sistema.
No caso do Mac e Linux basta adicionar no arquivo $HOME/.bash_profile
:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
ou se for no Windows, configure a variavel ANDROID_HOME
. Veja aqui como configurar uma variavel de ambiente no windows.
Criando a aplicação
Tendo os pré-requisitos instalados e no caso do Android, as variáveis de ambiente configuradas. Agora podemos criar o nosso hello world com o cli
do React native.
Se ainda não tem o cli
instalado, basta instalar pelo npm
.
npm install -g react-native-cli
Agora basta executar o comando init
, com o nome do projeto.
react-native init helloworld
Rodando a aplicação
IOS
No IOS é bem simples, basta entrar na pasta do projeto e executar run-ios
.
cd helloworld
react-native run-ios
Android
No caso do Android, teremos que iniciar um dispositivo Android antes de executar run-android
. Podendo ser um dispositivo físico ou você pode usar um dispositivo virtual que permite que você simule um dispositivo Android em seu computador.
Usando um dispositivo físico - Se você tem um dispositivo físico, você pode usá-lo para o desenvolvimento no lugar de um AVD conectando-o ao seu computador usando um cabo USB e seguindo as instruções aqui.
Usando um dispositivo virtual - Você pode ver a lista de dispositivos virtuais de Android (AVDs) disponíveis abrindo o AVD Manager
no Android Studio. Procure um ícone que se pareça com isto:
Android Studio AVD Manager - Se você acabou de instalar o Android Studio, provavelmente será necessário criar um novo AVD. Selecione Create Virtual Device
, depois escolha qualquer telefone na lista e clique em Next
.
Com o dispositivo pronto, podemos continuar.
cd helloworld
react-native run-android
Conclusão
Pode parecer complicado no começo (me refiro ao Android :D). Mas tem uma solução mais rápida com o Create React Native App
.
É a maneira mais fácil de começar a criar um novo aplicativo React Native. Ele permite que você inicie um projeto sem instalar ou configurar ferramentas - não é necessária nenhuma instalação Xcode ou Android Studio.
Precisará do Node instalado e instalar:
npm install -g create-react-native-app
E depois:
create-react-native-app helloworld
cd helloworld
npm start
Instale o aplicativo do Expo client no seu telefone iOS ou Android e conecte-se à mesma rede sem fio que o seu computador. Usando o aplicativo Expo, analise o código QR do seu terminal para abrir seu projeto.