05-React Native

Prévia do material em texto

C
React Native
onceitos React Native
 
O React Native é uma versão do framework React para
desenvolvimento de interfaces para dispositivos móveis, como
smartphones e tablets. Dessa forma, com uma única codebase, é
possível construir aplicações para os sistemas operacionais Android e
iOS. Além disso, é possível controlar operações e comportamentos
diferentes para cada tipo de sistema operacional.
 
Todo código-fonte gerado é convertido para interface nativa. O JavaScript
utilizado para construir a aplicação não é transpirado, pois o JavaScript
Core é injetado na aplicação para que ela entenda JavaScript. O
diagrama macro abaixo representa o processo de reconhecimento do
código-fonte até sua leitura pelo sistema operacional.
O código-fonte produzido em linguagem JavaScript é “empacotado” pelo
Metro Bundler, ferramenta responsável por criar pacotes chamados
“bundle”. Cada um destes é transmitido pelo recurso Bridge, que permite
que o código nativo (Java ou Objective-C) e o código JavaScript se
comuniquem. Sem a Bridge, não há como o código nativo enviar qualquer
informação para o código JavaScript e vice-versa. Por fim, essa relação é
entendida pelo Sistema Operacional para executar operações.
 
Para construção de interfaces, utiliza-se o JSX (Javascript XML), onde sua
forma de escrita se assemelha com o já conhecido HTML, mas com
particularidades. O que é chamado, por exemplo, de <h1> no HTML, seu
equivalente em JSX pode ser tanto um componente <Text> quanto um
componente <Title> ou um componente criado inteiramente pelo
desenvolvedor, com atributos próprios e funcionalidades distintas.
 
Configuração de SDK
 
Para preparação do ambiente, será necessário instalar alguns programas
para o correto funcionamento do framework. Neste procedimento, serão
listados os passos para instalação de programas para usuário que utilizam
Windows como sistema operacional, podendo ser facilmente portado para
os demais sistemas operacionais, como Linux e MacOS, por exemplo.
São os programas:
 
• Chocolatey;
• Chocolatey é um gerenciador de pacotes do Windows.
Possibilita instalar dependências e ferramentas no sistema com
poucos comandos através do terminal.
• Está disponível para download no endereço:
<https://chocolatey.org/>
• Em modo administrador, será necessário executar o comando
no Windows PowerShell: Get-ExecutionPolicy. 
• Caso o retorno deste comando seja “Restricted”, execute este
comando no Windows PowerShell: Set-ExecutionPolicy
AllSigned. Do contrário, não será necessário.
• Por fim, ainda no Windows PowerShell, execute: Set-
ExecutionPolicy Bypass -Scope Process -Force;
[System.Net.ServicePointManager]::SecurityProtocol =
[System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
iex ((New-Object
System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
• Se tudo estiver ocorrendo normalmente, execute o comando:
choco. Pode ser que seja necessário reiniciar o terminal.
• Node.js 14 (LTS);
• O Node.js é um runtime JavaScript desenvolvido para criar
aplicações robustas e escaláveis usando JavaScript.
• Está disponível para download no endereço:
<https://nodejs.org>
• Com o terminal ainda aberto, execute o comando: choco install
-y nodejs-lts
• JDK 11 (LTS);
• O JDK (Java Development Kit) é o pacote que inclui tudo o que
é necessário para escrever aplicações usando a linguagem de
programação Java.
• A versão 11 do JDK não é obrigatória, mas é a mais
recomendada, uma vez que a versão 8 é a próxima versão a ser
depreciada e a 15 não é LTS (até então) e apresenta problemas.
• Com o terminal ainda aberto, execute o comando: choco install
-y openjdk11
• Yarn (até então já instalado);
• Android Studio e dependências.
• O Android Studio será utilizado para construir, administrar
dispositivos virtuais (emuladores) e manter sua SDK
disponibilizada para que seja possível criar as aplicações React
Native para Android.
• Está disponível em: <https://developer.android.com/studio/>
• Antes de instalar a ferramenta, certifique-se de executar os
seguintes passos:
• Crie uma pasta em um local desejado para instalação da
SDK (Ex.: C:\Android\Sdk). Este diretório e caminho não
deverão conter espaços ou caracteres especiais.
• No Painel de Controle do Windows, abra “Sistema e
Segurança” ou “Sistema”
• Clique em “Configurações avançadas do sistema” e
selecione “Variáveis de ambiente”
• Clique no botão “Nova variável de ambiente”, indique o
nome da variável como ANDROID_HOME, adicione o
caminho utilizado acima (Ex.: C:\Android\Sdk) como
segundo parâmetro e clique em OK.
• Faça o mesmo processo para criar a variável
JAVA_HOME, caso o Chocolatey não tenha criado
automaticamente. Para descobrir o caminho do JDK, seu
caminho padrão é: C:\Program Files\OpenJDK\openjdk-11.
[SUA_VERSÃO].
• Ainda na mesma janela de "Variáveis de ambiente" no
Windows, clique na variável PATH e então em "Editar".
Você deve adicionar esses quatro novos caminhos no fim
da lista, caso não existam:
• %ANDROID_HOME%\emulator
• %ANDROID_HOME%\tools
• %ANDROID_HOME%\tools\bin
• %ANDROID_HOME%\platform-tools
• [SEU_CAMINHO_YARN] (geralmente instalado em
%AppData%\Yarn\bin)
• Se sua versão do Windows for menor que a 10 sempre
coloque ponto-e-vírgula ";" no final dos caminhos para eles não
se juntarem.
• O processo de instalação poderá seguir e, enquanto navega pelo
wizard de instalação, alguns pontos são importantes de serem
observados:
• O SDK é o pacote que vai possibilitar o build do app React
Native. 
• O Intel HAXM melhora a performance da emulação.
• O Android Virtual Device vai criar um emulador pronto para
execução.
• Prossiga com o que se pede até a finalização da instalação.
• Para realizar a criação de um dispositivo virtual, realize o
procedimento descrito em:
<https://developer.android.com/studio/run/managing-avds>. Ao canto
superior direito estará disponível a seleção de linguagem para o
Português.
 
Primeiro projeto React Native
 
Após todo processo de instalação e preparação do ambiente, é chegada a
hora de colocar a mão na massa para criar o primeiro projeto React
Native. Abra uma sessão no terminal ou utilize a criada automaticamente
pelo Visual Studio Code ao abrir um diretório. Para executar comandos
(pacotes do Node), utiliza-se a sintaxe: npx <comando>. 
 
Para criar um projeto React Native basta apenas um comando: npx react-
native init <nome do projeto>. Ao executá-lo, serão baixadas todas as
dependências do seu projeto e haverá apenas uma observação a ser feita
no App.js: este arquivo contempla a sua aplicação e regras de negócio e
pode ser componentizado/fragmentado em diversas partes. A princípio,
mantenha uma estrutura simples, como o exemplo da imagem abaixo:
Neste arquivo, são importadas as bibliotecas ou módulos necessários
para seu correto funcionamento. A constante App retorna um componente
visual View que possui estilo definido em styles.container, que por sua vez,
também possui um componente Text, também estilizado definido em
styles.texto. 
 
A sequência de diretórios a seguir é criada toda vez em que um projeto
novo é criado. São eles:
 
•
__tests__
•
Diretório para arquivos de testes.
•
android
•
Diretório que contém o projeto Android, como se tivesse sido
criado pelo Android Studio.
•
ios
•
Diretório que contém o projeto iOS, como se tivesse sido
criado pelo XCode.
•
node_modules
•
Diretório que contém todas as bibliotecas ou módulos que são
utilizados pelo projeto, sendo dependências de
desenvolvimento ou de projeto.
 
Bem como os arquivos:
 
•
.buckconfig
•
Um arquivo .buckconfig permite várias configurações de flag e
aliás para qualquer projeto (além do Android) dentro do
diretório raiz.
•
.editorconfig
•
Consiste em um formato de arquivo para definir estilos de
codificação e uma coleção de plug-ins de editores de texto
que permitem aos editores ler o formato do arquivo e aderir
aos estilos definidos.
•
.eslintrc
•
Um arquivo de configuração do ESLinter que possui regras
de análise de código paragarantir que determinado padrão
está sendo seguido ao codificar.
•
.flowconfig
•
Um arquivo de configuração do Flow, um verificador de tipos
estáticos para o código JavaScript
•
.gitattributes
•
O arquivo gitattributes é um arquivo de texto simples que
fornece atributos para nomes de caminho.
•
.gitignore
•
O arquivo gitignore é um arquivo de texto que informa ao Git
quais arquivos ou pastas devem ser ignorados em um projeto
para evitar seu versionamento.
•
.prettierrc
•
Semelhante ao arquivo .eslintrc, este arquivo possui regras
para formatação de código-fonte.
•
.whatchmanconfig
•
Um arquivo de configuração utilizado pelo programa
watchman, que detecta alterações nos arquivos editados e os
envia para build e reload no dispositivo, sem a necessidade
de atualizá-lo manualmente.
•
App.js
•
Arquivo contendo o módulo principal da sua aplicação. Toda
lógica e regra de negócio está contida aqui.
•
app.json
•
Arquivo de configurações com atributos referentes ao
aplicativo, geralmente seu nome.
•
babel.config.js
•
Arquivo de configuração do Babel, transpilador de código
JavaScript. O React Native usa o Babel para converter a
sintaxe do React e a sintaxe ES5+ mais recente em código
que pode ser executado em um ambiente JavaScript que não
oferece suporte a esses recursos.
•
index.js
•
Ponto de entrada para invocação do módulo App.js,
registrando-o como componente pelo AppRegistry. Neste
arquivo é definido o nome da aplicação e seu componente
principal para execução.
•
metro.config.js
•
Arquivo de configuração do Metrô: um “empacotador” de
JavaScript. Ele pega um arquivo de entrada e várias opções e
retorna um único arquivo JavaScript que inclui todo o seu
código e suas dependências.
•
package.json
•
Arquivo de configuração e dependências do projeto.
•
yarn.lock
•
Arquivo de controle do Yarn.
ReactJS e React Native
 
Alguns pontos importantes entre o React Native e o ReactJS devem ser
notados nesta disciplina:
 
• ReactJS – Biblioteca Javascript. Manipula a DOM para atualizar
componentes na tela.
• React Native é um framework cross-platform, permitindo que você crie
aplicações multiplataforma.
• O React Native implementa o ReactJS!
• Componentização é um fator presente em sua arquitetura, permitindo
reusabilidade. Todos os componentes visuais são “convertidos” nos
componentes visuais nativos.
• A folha de estilo (CSS) também é compreendida e implementada no
React Native, possuindo API específica para animações e bibliotecas
personalizadas.
Hot reload: todas as modificações ocorrem em praticamente tempo real
para visualização.
 
 
 
Atividade extra
 
Como atividade extra, recomendo a leitura do artigo “Understanding
Functional Components vs. Class Components in React” disponível em:
<https://translate.google.com/translate?
sl=en&tl=pt&u=https://www.twilio.com/blog/react-choose-functional-
components> e já traduzido para o português do Brasil. Com isto, será
possível obter uma visão geral sobre os Class Components e Functional
Components, além de adiantar brevemente os demais conteúdos que
serão vistos nas aulas posteriores.
 
 
 
Referências Bibliográficas
 
React Native Dev. Disponível em: <https://reactnative.dev/docs/getting-
started>. Acesso em: 03, mar. de 2021.
Ir para questão