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

Configurações necessárias

Como é o primeiro splash na tecnologia, iremos usar o create-react-native-app (CRNA), que além de ser uma alternativa ao tradicional react-native init, facilita em muito o build e desenvolvimento da aplicação, já que não precisamos instalar o Xcode/Android Studio para fazer os builds, porém tem um tradeoff de não podermos utilizar de cara módulos nativos (uma comparação das vantagens e desvantagens, pode ser encontrada neste comentário).

O primeiro passo é instalar globalmente o CRNA: yarn global add create-react-native-app (caso não tenha o yarn instalado, basta seguir o procedimento que está na docs dele)

Por fim, instale no seu smartphone o Expo. Com ele conseguiremos testar código diretamente no dispositivo.

Começando

Vamos usar o boilerplate do CRNA, para isso execute no seu terminal: create-react-native-app world-cup

Agora entre na pasta do projeto e inicie o servidor de desenvolvimento: cd world-cup && yarn start

Uma vez iniciado o servidor, você verá um QR Code no terminal. Use a câmera do seu celular, e uma vez lido o QR Code irá aparecer um aviso para abrir no Expo. Abra o Expo e após a criação do bundle o aplicativo estará rodando no seu celular com live reload habilitado, basta alterar o código em App.js para ver o app recarregando.

Antes de avançarmos, é importante entendermos alguns arquivos que o CRNA gerou para nós, principalmente, se esse é o seu primeiro contato com React Native:

  • App.js: é onde está o nosso aplicativo, que por enquanto é basicamente um “hello world”;
  • App.test.js: um teste automatizado com o jest, que faz uma simples assertion se a app foi renderizada;
  • .watchmanconfig: o arquivo de configuração do Watchman, que faz o live reload acontecer;
  • app.json: onde você pode mudar o nome da app, ícone e diversas outras configurações;
  • package.json: aqui já temos os scripts de build para Android e iOS, além do test, start e por fim o eject, que pode ser usado para “ejetar” as configurações de build, para a sua aplicação;
  • README.md: diversas informações sobre o que foi boostrapped ao usar o CRNA.

Criando uma listagem

Agora que entendemos a estrutura básica do projeto, chegou a hora de finalmente fazermos a primeira implementação, que será a listagem com os países participantes da Copa do Mundo da Rússia.

O código acima está hospedado no Expo, e você pode visualizar o resultado no simulador. Abaixo, algumas explicações sobre o código:

  • Basicamente estamos criando um componente React, que tem um método render, que irá renderizar componentes do React Native:
    • A View tem o uso semelhante a uma div, e estamos usando para fazer o wrapper da nossa tela e também do header, que possui apenas o componente Text
    • Estamos fazendo uso do FlatList, que já possui diversos comportamentos de lista embutido. E usamos ele com duas colunas, passando no data a nossa lista de países e o renderItem com outro Text
  • Para estilizar usamos JavaScript, definindo atributos e valores que foram criados para serem semelhantes com os do CSS, exceto pelo fato de precisarmos escrever eles com camelCase
  • O estilo do componente é setado pela propriedade style, que recebe um objeto com os atributos setados. Quando falamos propriedade, são as props do React (a forma de passar atributos/métodos para outros componentes)
  • Os componentes utilizados já vem junto com o React Native, e portanto já são compatíveis com o iOS e Android

Para rodar esse código no seu celular, basta sobrescrever o seu App.js, com o código mostrado acima.

Resumindo

Pronto, conseguimos ver a facilidade que o CRNA nos traz no fluxo de desenvolvimento, e temos o começo da nossa primeira app.

E como você viu, não é complexo criar uma aplicação usando o React Native, até por isso que ele ganhou tanta tração e é hoje uma das soluções mais usadas para criar aplicações mobile.

Se você já tem um background com React, deve ter percebido que no final o React Native é “apenas” um conjunto de componentes nativos, e a ponte entre o seu código JS e o código nativo. A forma de escrever as apps é similar usada para aplicações Web, portanto o seu conhecimento prévio, principalmente de organização de código e criação de componentes, será reaproveitado aqui.

Agora caso você não tenha conhecimentos com React, o importante a ser nota neste primeiro exemplo, é que os componentes se comunicam através de props,  que são usadas na criação do componente, para setar comportamentos internos, como a FlatList que tem a prop numColumns.  E um último detalhe, é que no App.js, quando usamos <Text> </Text>, estamos usando a sintaxe JSX, que parece com HTML, mas neste caso em vez de <div>, estamos usando componentes fornecidos pelo React Native.

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