O objetivo deste artigo é passarmos juntos pelos passos de criação da sua primeira app com React Native. Vamos lá!

Configurando a sua máquina

Linux

  1. Instale o Android Studio, pois embora não vamos programar nele, ele será usado para instalar versões do SDK e rodar o emulador
    • No Linux a forma de instalação vai variar da sua distribuição, na dúvida baixe direto do site do Android Studio
      • No Ubuntu: o mais fácil é via Snap sudo snap install android-studio --classic
      • No Manjaro: pasta pesquisar no “add/remove software” por “android studio” e instalar;
  2. Após instalar o Android Studio, chegou a bendita hora de adicionar novas variáveis no PATH
    • vim ~/.bashrc (ou ~/.zshrc ou seja lá o shell que estiver usando)
    • adicione as seguintes linhas no começo do arquivo e salve
      • export ANDROID_HOME=~/Android/Sdk
      • export PATH=$PATH:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools
    • carregue as novas variáveis com source ~/.bashrc
  3. Hora de criar o seu primeiro emulador, clique em “Tools -> AVD Manager” e depois no botão “Create Virtual Device”
  4. Selecione o Pixel 2 e depois a imagem que estiver já instalada. Por fim basta colocar um nome para o device e clicar em “Finish”
  5. Já inicie o emulador, para ao realizar o build, já possamos usar-lo, pois caso contrário o build dará erro

Mac OS

React-Native

Instale globalmente com npm install -g react-native

Hello World

Para testarmos se a configuração está correta, vamos fazer o famoso “hello world”. Entre no terminal e digite react-native init hello-app

O init já criou o boilerplate da nossa app, e a única coisa que precisamos fazer agora é o build de acordo com a plataforma.

Android

react-native run-android

No emulador você pode ativar o live reload, apertando “ctrl+m” e ativando ele. Para testar altere um texto no App.js e salve.

iPhone

react-native run-ios

Saindo do Hello World

Agora com tudo configurado e nosso hello world funcionando, podemos fazer nossa primeira imersão ao mundo do React Native.

Estrutura de pastas

O init faz um bom papel de bootstrap da app, mas é importante entendermos a estruturação básica:

  • /android – pasta usada para compilar a versão Android da app
  • /ios – mesma utilidade da /android só que para o iOS
  • App.js – nosso componente root da app, onde fica o código em si da aplicação
  • app.json – onde fica o nome da sua app
  • index.js – a cola entre a nossa aplicação e o React Native, onde estamos registrando a app

Primeiras mudanças

  • No index.js mude “hello” por “WorldCup2018”
  • No app.json troque o name por “WorldCup2018” e displayName por “World Cup 2018”
  • Por fim no package.json troque o name por “world-cup-2018”

Feitas essas mudanças básicas, vamos agora adicionar a listagem de seleções da Copa de 2018.

Criando uma listagem

Finalizando

Pronto, conseguimos sair do “hello-world”, e temos o começo da nossa primeira app.

No próximo post iremos evoluir, tirando os dados “hard-coded”, por dados de uma API. Até lá!