Por que eu devo ler este artigo:React Native é um dos frameworks para o desenvolvimento de aplicações mobile mais utilizados atualmente e, consequentemente, muito solicitado em oportunidades de emprego.

Para quem já conhece o React, entender o React Native é fácil. Trata-se de um framework para o desenvolvimento de aplicações mobile que utiliza componentes nativos em lugar de web, como é o caso do React. Por esse motivo para aprender React Native é fundamental que você já tenha familiaridade com certos conceitos do React, como componentes, JSX, props e state, por exemplo. Sendo esse o seu caso, esse artigo será uma forma direta de começar com o React Native.

Conhecendo o projeto

Ao longo deste artigo criaremos o projeto que pode ser utilizado abaixo.

Execute o código

Será um "hello world" com o React Native, que é um tipo de projeto ideal para a preparação de um ambiente de desenvolvimento e escrita de um primeiro código.

Preparando o ambiente

Há mais de uma forma para criar um aplicativo React Native e executá-lo. Aqui criaremos o projeto a partir da ferramenta create-react-native-app e executaremos no celular a partir do aplicativo Expo. Dessa forma colocaremos a mão no código em poucos passos.

Primeiro passo: Node.js

Node.js é fundamental para o desenvolvimento com React Native. É através dele que vamos instalar e gerenciar os pacotes e as bibliotecas que usaremos no projeto. Além disso, é através dele que construiremos o projeto, convertendo código JavaScript para uma linguagem que uma plataforma como Android/iOS entenda.

O Node.js pode ser baixado na sua página oficial. Iremos instalar sua versão LTS, como ilustra a Figura 1.

Página do Node.js
Figura 1. Página do Node.js

Após fazer o download do Node.js, basta instalar no seu computador.

Caso você não tenha familiaridade com o Node.js, apesar de ele ser instalado como qualquer outro programa, o Node.js não será acessado diretamente. Tudo o que queremos que ele faça será passado para ele via comando através do terminal.

Segundo passo: Visual Studio Code

Para escrevermos o código precisamos de um editor de texto. Nós usaremos o Visual Studio Code, que possui ótimos recursos que facilitarão isso, tais como diferenciar cores para palavras-chaves e autocomplete.

O Visual Studio Code pode ser baixado na sua página oficial, como vemos na Figura 2. A instalação é tão fácil quanto a de qualquer outro programa.

Página do Visual Studio Code
Figura 2. Página do Visual Studio Code

Terceiro passo: Expo

O Expo é um aplicativo que facilita o aprendizado do React Native principalmente no acesso aos recursos nativos da plataforma, eliminando a necessidade de instalar bibliotecas manualmente logo de início.

Para baixar o Expo basta acessar a loja do seu celular, ou Play Store ou App Store, e instalá-lo, como vemos na Figura 3.

Página do Expo
Figura 3. Página do Expo na Play Store

Criando o App

Agora que o ambiente está preparado abriremos o terminal para começar. Nesse passo vamos instalar create-react-native-app, a partir da qual criaremos o projeto.

Com o terminal aberto, vamos navegar até a raiz da unidade C:/ com o seguinte comando:

cd c:/

Agora vamos instalar o create-react-native-app com o seguinte comando:

npm install -g create-react-native-app

Caso você não seja familiar ao Node.js, npm é o seu gerenciado de pacotes. Com o comando acima, estamos pedindo para o npm instalar o create-react-native-app e deixá-lo disponível como um comando nativo do terminal.

Ao utilizar o comando install do gerenciador de pacotes npm, passamos o parâmetro -g para instalar essa ferramenta de forma global e deixar pronta para ser utilizada em uma próxima vez que precisarmos criar um novo app.

Após instalar, é hora de criarmos o projeto. Digite o comando create-react-native-app seguido do nome do projeto, no caso HelloWorld. Vai ficar da seguinte forma:

create-react-native-app HelloWorld

Ao executar esse comando, a pergunta do Código 1 vai aparecer na tela.

? How would you like to start
      Default new app
      Template from expo/examples
    
Código 1. Pergunta sobre o Expo

Basta selecionar a primeira opção ("Default new app") pressionando a tecla enter. Com isso uma nova pergunta vai aparecer. Dessa vez perguntando se você quer instalar o expo-cli globalmente. Digite 'Y'.

O Expo CLI é quem vai criar o projeto quando nós executamos o comando create-react-native-app.

Depois de alguns instantes o projeto estará criado. Vamos agora navegar para a pasta onde ele foi criado e iniciar a aplicação.

Executando no Android

Primeiro, digite o seguinte código para entrar na pasta do projeto:

cd HelloWorld

Agora, inicie o servidor digitando o seguinte código:

expo start

Ao iniciar o servidor aparecerá um QR Code no terminal.

QRCode no terminal
Figura 4. QRCode no terminal

Abra o Expo no seu celular e toque na opção Scan QR Code. Escaneie o QR Code e com isso o seu aplicativo será executado, como mostra a Figura 5.

Executando o aplicativo
Figura 5. Executando o aplicativo

Executando no iOS (ou Android)

Diferente do outro método que só funciona no Android, este servirá tanto no Android quanto no iOS.

O primeiro passo é criar uma conta no site do Expo (Figura 6) ou no próprio aplicativo do seu celular (Figuras 7 e 8).

Criando o cadastro pelo site
Figura 6. Criando o cadastro pelo Site.
Criando o cadastro pelo iPhone
Figura 7. Criando o cadastro pelo iPhone.
Criando o cadastro pelo Android
Figura 8. Criando o cadastro pelo Android.

Com a conta criada precisamos fazer o login no terminal. Para isso digite o seguinte comando.

expo login

Ao executar esse comando insira o usuário e a senha.

c:\HelloWorld>expo login
  ? Username/Email Address: seu_usuario
  ? Password: [input is hidden]
  
  Success. You are now logged in as seu_usuario

O mesmo deve ser feito no seu celular, caso ainda não tenha sido feito.

Fazendo login no celular
Figura 9. Fazendo login no celular.

Agora que você já está logado tanto no terminal quanto no celular, basta executar o seguinte comando:

expo start

No seu celular vai aparecer o nome do projeto. Basta clicar e ele vai abrir o aplicativo no seu celular.

Executando o aplicativo
Figura 10. Executando o aplicativo

Erro comum

Caso algum erro ocorra, como o da Figura 11, verifique se tanto o seu celular quanto o seu computador estão conectados à internet e na mesma rede local. É possível utilizar em redes diferentes, porém em alguns casos podem não funcionar, por isso o recomendado é utilizar, tanto o celular quando o computador na mesma rede.

Erro de execução em caso de falha na conexão
Figura 11. Erro de execução em caso de falha na conexão

Escrevendo ‘Hello World’

Agora vamos modificar um pouco o código do aplicativo para exiba a mensagem Hello World.

O primeiro passo para isso é abrir a pasta do projeto no Visual Studio Code para editarmos os arquivos dele no editor.

Abra o Visual Studio Code e pressione as teclas Ctrl + k Ctrl + o. Ao fazer isso, precisamos selecionar a pasta onde está o projeto. Navegue até c:/, selecione a pasta HelloWorld e clique em “Selecionar pasta”, como mostra a Figura 12.

Seleção da pasta
Figura 12. Seleção da pasta

Dessa forma vamos abrir a pasta do projeto no workspace, que é a barra a direita como mostra a Figura 13. Essa é a estrutura de arquivos e pastas criadas.

Estrutura de arquivos
Figura 13. Estrutura de arquivos

Nesse momento vamos nos atentar para apenas o arquivo App.js, que é onde está o código da tela do aplicativo que vamos editar. Ao abri-lo encontramos a seguinte estrutura presente no Código 4.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
   <View style={styles.container}>
   <Text>Open up App.js to start working on your app!</Text>
   </View>
 );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
Código 4. Arquivo App.js

Vamos alterar o texto dentro de <Text>, na Linha 7 para Hello World. Não se preocupe com a estrutura agora, pois no próximo tópico vamos entender linha por linha. Vai ficar como no Código 5. assim:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
Código 5. Alterações no arquivo App.js

Basta salvar e instantaneamente a tela do seu celular vai atualizar, como vemos na Figura 14.

Atualização após a codificação
Figura 14. Atualização após a codificação

Vamos inserir um estilo para o texto “Hello World”. Para isso, na Linha 7 vamos alterar a tag <Text> como mostra o Código 6.

<Text style={styles.title}>Hello World</Text>
Código 6. Alterações na tag text

No passo anterior definimos o nome do estilo que o texto Hello World vai ter, agora precisamos criar esse estilo. Para isso, depois da Linha 18 insira o Código 7.

title:{
  fontSize:28
}
Código 7. Criando o estilo

Para fechar vamos inserir mais um texto depois da Linha 7, como mostra o Código 8.

<Text>with Expo.io</Text>
Código 8. Alterações na linha 7 do arquivo App.js

Missão cumprida. Parabéns! Este é seu primeiro app com React Native e a aparência dele é apresentada na Figura 15.

Atualização após a codificação
Figura 15. Atualização após a codificação

Com o seu aplicativo criado, o próximo passo é conhecer um pouco da estrutura usada na criação de uma tela do aplicativo.

Explicando o arquivo

Agora que você já imprimiu “Hello World” no seu celular, vamos entender melhor o que está sendo feito neste arquivo.

Linha 1 - Todo arquivo da sua aplicação que retorna uma tela é um componente. Para criá-lo precisamos importar o componente React da biblioteca react.

Linha 2 - Para nosso componente App vamos utilizar alguns componentes nativos. Para criar containers utilizaremos <View>. Para inserir textos <Text>, sem ele não conseguimos exibir textos. Para estilizar nossos componentes StyleSheet. Esses componentes nativos pertencem ao React Native e, portanto, vamos importar da biblioteca react-native.

Linha 4 - Criamos o componente funcional App, que é basicamente uma função comum JavaScript. Utilizamos a palavra export para importar essa função em outro arquivo. Em seguida, a palavra default diz que esta é a função principal (nesse caso o componente principal) deste arquivo, seguida da palavra function e o nome da função.

Linha 5 - Utilizamos a palavra return para exibir o nosso componente na tela da aplicação.

Linha 6 - Todo conteúdo exibido na nossa tela precisa estar dentro de um container, que nesse caso é o componente <View>. Para estilizar este componente, utilizamos a propriedade style. O valor atribuído a style será styles.container, ou seja, o atributo container do objeto styles.

Linha 7 - Sempre que for escrever um texto ele precisa estar dentro do componente <Text>. Para estilizar atribuímos o atributo title do objeto styles..

Linha 8 - Mais um texto dentro do componente <Text>.

Linha 9 - Fechamento do componente <View>.

Linha 12 - Criamos uma constante que vai armazenar o estilo da nossa tela. Para criá-lo precisamos utilizar o componente StyleSheet, que importamos do react-native e chamar o método create, que vai receber como parâmetro o objeto com o estilo do nosso componente.

Conclusão

Nesse artigo aprendemos a preparar o ambiente de desenvolvimento, criar o primeiro App e conhecer um pouco dos componentes usados para a construção de uma tela utilizando o React Native. Não deixe de conferir o código completo ;)