React Native - Hello World

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)

• Node
• Watchman
• Xcode

Android (Windows/Linux/Mac)

• Node
• Watchman
• Java SE Development Kit (JDK)
• Android Studio

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.