React Native - Hello World

Imagem para React Native - Hello World

React nativePostado em  4 min de leitura

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: ícone AVD

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.