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 dependência 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 dependências 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, porém não utilizaremos as versões sugeridas, pois após a versão 11x ocorreram alguns conflitos entre o Node.js e o Expo-CLI e enquanto eles não são resolvidos vamos utilizar uma versão mais antiga.

Na Figura 1 vemos a página onde conseguimos baixar a versão 10.13.0 do Node.js. Ao carregar a página, procure pelo instalador referente ao seu sistema operacional. Caso seja Windows ou MacOS, selecione o que tem a palavra Installer.

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 Apple 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 a dependência 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 dependência de forma global e deixar pronta para ser utilizada em uma próxima vez que precisarmos criar um novo app.

Com essa dependência instalada, é hora de criarmos o projeto. Digite o comando create-react-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.

'expo-cli' não é reconhecido como um comando interno
ou externo, um programa operável ou um arquivo em lotes.
This command requires Expo CLI.
Do you want to install it globally [Y/n]?
Código 1. Pergunta sobre o Expo

Nesse caso vamos escolher y e com isso o Expo CLI será instalado. O Expo CLI é quem vai criar o projeto quando nós executamos o comando create-react-native-app.

Após a instalação do Expo CLI, precisamos escolher o template que vamos utilizar na nossa aplicação. Algumas opções vão aparecer, como vemos na Figura 4.

Opções de instalação do Expo
Figura 4. Opções de instalação do Expo

Vamos explicar as três primeiras:

  • Blank → cria um aplicativo apenas com uma tela;
  • Blank ( TypeScript ) → o mesmo do anterior, porém com suporte ao TypeScript;
  • Tabs → Cria um app com tabs (abas) já com as dependências necessárias para utilizar esse layout de aplicativo.

Vamos escolher a opção blank, que criará o aplicativo com a estrutura de pastas básica e um arquivo com apenas um texto padrão.

Continuando, o próximo passo é definir o nome (name) do projeto, que vai aparecer abaixo do ícone do seu App após instalado no celular e um nome para a URL de publicação (slug). Para isso usamos o conteúdo do Código 2.

? Choose a template: expo-template-blank
? Please enter a few initial configuration values.
Read more: https://docs.expo.io/versions/latest/workflow/configuration/ » 50% completed
{
  "expo": {
    "name": "<The name of your app visible on the home screen>",
    "slug": "teste1"
  }
}
Código 2. Definindo o nome do projeto

Normalmente o slug já vem preenchido. Basta digitar o name e pressionar a tecla Enter.

Depois de alguns instantes o projeto estará criado. Vamos agora navegar para a pasta onde ele foi criado e iniciar a aplicação da forma como o comando que acabamos de executar nos recomenda, como mostra o Código 3.

Your project is ready at C:/Helloworld

To get started, you can type:

cd HelloWorld
npm start


C:/>
Código 3. Iniciando a aplicação

Executando a aplicação

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

cd HelloWorld

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

npm start

Ao iniciar o servidor aparecerá um QR Code 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

Caso algum erro ocorra, como o da Figura 6, 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 6. 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 7.

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

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

Estrutura de arquivos
Figura 8. 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 9.

Atualização após a codificação
Figura 9. 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 9.

Atualização após a codificação
Figura 9. 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 precisa importar o React da dependência react.

Linha 2 - Para essa tela vamos usar uma <View>, que é o container principal da nossa tela. Em <Text> foram colocados o texto e o StyleSheet, que é o objeto que nos permite criar o estilo na nossa tela. Esses elementos pertencem ao React Native e, portanto, vamos importar do react-native.

Linha 4 - Criamos o componente funcional, 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 deste arquivo, seguida da palavra function e o nome da função.

Linha 5 - Utilizamos a palavra return para retornar a nossa tela para a aplicação

Linha 6 - Todo conteúdo da nossa tela precisa está dentro de um container, que nesse caso é <View>. Atribuímos a propriedade container do objeto styles, que é quem possui o estilo dessa view.

Linha 7 - Sempre que for escrever um texto ele precisa estar dentro da tag <Text>. Atribuímos a propriedade title do objeto styles..

Linha 8 - Mais um texto dentro da tag <Text>.

Linha 9 - Fechamento da tag <View>.

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

Conclusão

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