Primeiro App com React Native

Fique por dentro

React Native � um dos frameworks para o desenvolvimento de aplicaç�es mobile mais utilizados atualmente e, consequentemente, muito solicitado em oportunidades de emprego.

O React Native � um framework para desenvolvimento de aplicaç�es mobile. Ele utiliza o React para criar aplicativos, por isso pra quem j� possui conhecimentos pr�vios de React entender React Native ser� mais f�cil. A diferença � que o React Native utiliza componentes nativos em lugar de web, como � o caso do React. Mas n�o se preocupe pois no guia de React Native voc� ter� todo conte�do necess�rio mesmo sem conhecer React.

Neste artigo voc� dar� o primeiro passo para se tornar um programador React Native que � preparar o ambiente.

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.

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.

Entenda no Flow abaixo como o Node � executado.

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.

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.

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 Expo, 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 Expo com o seguinte comando:

npm install --global expo-cli

C�digo 1. Instalando o Expo

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 expo-cli 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 --global para instalar essa ferramenta de forma global e deixar pronta para ser utilizada em uma pr�xima vez que precisarmos criar um novo app.

O Expo CLI � quem vai executar o projeto e exibi-lo no seu celular.

Ap�s instalar, � hora de criarmos o projeto. Digite o comando expo init seguido do nome do projeto, no caso HelloWorld. Vai ficar da seguinte forma:

expo init HelloWorld

C�digo 2. Criando o projeto.

Ao executar esse comando, a pergunta da Figura 4 vai aparecer na tela.

Figura 4. Criando um novo projeto com Expo.

Basta selecionar a primeira opç�o ("blank") pressionando 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.

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.

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.

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).

Figura 6. Criando o cadastro pelo Site.

Figura 7. Criando o cadastro pelo iPhone.

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.

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.

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.

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.

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.

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.

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.

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 ;)

Primeiro app com React Native

Neste artigo daremos o primeiro passo com o React Native preparando um ambiente de desenvolvimento com os recursos necessários para criar aplicativos com esse framework.