Introdução ao React Native

Text Material Preview

1ºAula
React Native I
Objetivos de aprendizagem
Ao término desta aula, vocês serão capazes de: 
• entender o que é o React Native e quando utilizar ele, além de instalar as dependências para começar um novo 
projeto e já poder testar.
Olá, 
Bem-vindos(as) à disciplina Programação para Dispositivos 
Móveis. Para iniciar os nossos estudos, vamos mostrar os 
detalhes da plataforma que utilizaremos para desenvolver 
dispositivos móveis.
Nesta aula, estudaremos sobre a ferramenta React 
Native, vamos aprender também a instalar as dependências da 
ferramenta e como iniciar um novo projeto.
Leia atentamente esta aula e se tiver alguma dúvida, use os 
recursos que estão na sua área do aluno.
Bons estudos!
6Programação para Dispositivos Móveis
Seções de estudo
1- O que é React Native?
2- Instalação
3- Primeiro Projeto
1- O que é React Native?
Nesta disciplina ,você é convidado a explorar o mundo do 
desenvolvimento mobile, que por muito tempo fi cou restrito a 
desenvolvedores que detinham o conhecimento específi co das 
linguagens de programação nativas dos dispositivos móveis. 
Hoje, estão disponíveis no mercado diversas ferramentas que 
permitem que um mesmo código seja desenvolvido e que 
possa ser utilizado em multiplataformas (principalmente em 
Android e IOS).
Galante (2019) apresenta os melhores frameworks para o 
desenvolvimento de aplicativos. São eles: React Native, Ionic, 
Xamarin, Adobe PhoneGap, Flutter, Corona SDK, Jquery 
Mobile, Native Scripts e Mobile Angular UI.
Cada framework tem suas peculiaridades que devem ser 
levadas em consideração quando você for desenvolver um 
projeto, essa escolha cuidadosa pode facilitar ainda mais no 
decorrer do seu desenvolvimento (GALANTE, 2019).
Para esta disciplina o framework React Native foi 
escolhido para ser demonstrado, o que não desmerece o 
funcionamento e as vantagens dos outros, aqui é dado 
o pontapé inicial para o mundo do desenvolvimento 
multiplataforma para dispositivos móveis.
Pinho e Escudelario (2020) defi nem o React Native 
como um framework composto de ferramentas, baseadas no 
que há de melhor do desenvolvimento front-end (HTML, 
CSS e JS), que possibilitam o desenvolvimento de aplicações 
mobile nativas, para plataformas Android e IOS.
Citam ainda que é considerada a melhor opção do 
mercado, no quesito desenvolvimento mobile híbrido em 
JavaScript. Ela permite utilizar: ECMAScript 2015+ (ES6+), 
CSS Grid e Flexbox, JSX, além de contar com pacotes do 
npm.
O React Native é baseado no React, que é uma biblioteca 
JavaScript do Facebook para desenvolver interfaces com o 
usuário, porém direcionado para o navegador. Dessa forma 
permite que o conhecimento e facilidade de desenvolver 
em JavaScript possa ser aplicado para desenvolver um 
código compartilhado entre plataformas móveis distintas. 
(EISENMAN, 2015).
Uma primeira boa impressão pode ser obtida ao acessar 
o site offi cial do React Native (https://reactnative.dev), isso 
se dá pela diversidade de aplicações que são descritas como 
casos de uso utilizando esse framework, alguns deles podem 
ser observados na Figura 1. Alguns desses, inclusive, você 
pode ter instalado no seu dispositivo móvel.
Figura 1 – Quem está usando React Native? Fonte: FACEBOOK, 2020.
A grande vantagem do React Native é que ele converte 
o código desenvolvido para a linguagem nativa do sistema 
operacional do dispositivo, diferentemente de outras 
plataformas que criam uma webview e renderiza a aplicação 
sobre ela. Dessa forma a performance é otimizada, já que a 
aplicação estará rodando em código nativo e não dentro de 
um ‘navegador’ emulado dentro da aplicação (PINHO e 
ESCUDELARIO 2020).
O React Native então é capaz de traduzir o código em 
JavaScript para Elementos Nativos, deixando o visual muito 
mais fl uido de acordo com o dispositivo utilizado. Você 
pode então utilizar ferramentas que já está familiarizado 
para trabalhar com o JavaScript e desenvolver aplicações 
totalmente funcionais (EISENMAN, 2015).
Eisenman (2015) diz que quem já trabalhou com 
desenvolvimento mobile pode se assustar com a facilidade, já 
que a equipe de desenvolvimento do React Native o preparou 
com ferramentas robustas e não deixa a desejar quando o 
assunto é reportar erros, visto que as mensagens de erros 
são muito bem especifi cadas, o que torna a experiência de 
desenvolvimento muito mais rápida e agradável.
O debug é uma das ferramentas que estão incorporadas, 
através de um navegador todas as mensagens são exibidas, 
sejam os erros causados pela execução do código ou por logs 
que você pode ter inserido. 
Figura 2 – Interesse ao longo do tempo. Fonte: TRENDS, 2020.
A primeira menção do React Native foi em janeiro de 
2015, segundo o Google Trends, fazendo uma pesquisa 
pelos termos React Native, Android Development e IOS 
7
Development entre 1º de janeiro de 2014 e 1º de junho de 
2020 é possível, na Figura 2, observar como a pesquisa por 
React Native cresceu ao longo do tempo em detrimento do 
desenvolvimento em linguagem nativa.
Pinho e Escudelario (2020) destacam as vantagens do 
React Native transformar o código JavaScript em código 
nativo:
● Carregamento mais rápido da aplicação;
● Experiência mais fl uida do usuário;
● Mais segurança;
● Melhor integração entre as funções nativas do 
celular, tais como câmera e GPS.
● Melhor performance.
Eles apontam ainda as difi culdades do antigo 
desenvolvimento, visto que para um determinado projeto 
pudesse estar em duas plataformas (Android e IOS, por 
exemplo) você deveria ter desenvolvedores que estivessem 
aptos a desenvolver especifi camente para essas plataformas 
(Java/Kotlin para Android e Objective-C/Swift para iOS).
Se uma empresa quisesse desenvolver deveria pagar caro 
para manter várias equipes de desenvolvimento e este seria 
demorado, visto que não é possível reaproveitar o código de 
uma linguagem para outra.
Se essa mesma empresa optar por desenvolver com 
React Native o código é 100% reaproveitado, não precisa 
manter equipes distintas de desenvolvimento, o que fará 
com que o tempo e custo da produção de um projeto para 
multiplataforma se torne bem menor.
Para fi nalizar essa contextualização é importante 
salientar que o ecossistema do React Native está em constante 
evolução, seus mantenedores sempre estão em contato com 
a comunidade disponibilizando os lançamentos, discutindo e 
propondo funcionalidades.
2- Instalação
Para que o React Native funcione corretamente 
ferramentas precisam estar instaladas em seu ambiente de 
trabalho para que possam ser utilizadas corretamente. Algumas 
delas você já pode e deve ter utilizado, talvez você precisa 
ajustar alguns detalhes de versão para não ter problemas na 
execução. Abaixo, você verá quais são elas. (LEBENSOLD, 
2018).
1. Node 
Essa ferramenta habilita o seu computador a executar 
localmente códigos em JavaScript. Para instalar você deve 
acessar o site do Node.js (https://nodejs.org/en/) fazer o 
download e executar o instalador em sua máquina.
2. NPM
 O NPM é um gerenciador de pacotes que por meio de 
linhas de comando instala local e globalmente pacotes que 
estão disponíveis, sejam frameworks, bibliotecas, códigos de 
terceiros. Ao fazer a instalação do Node, por padrão o NPM 
também já é instalado.
3. Expo
No lançamento do React Native criar o ambiente de 
trabalho era bem complexo e desgastante, o Expo é um 
conjunto de ferramentas que fornece todo o ecossistema 
para criar, testar e rodar a aplicação, bem mais simplifi cado. 
(PINHO e ESCUDELARIO 2020).
Para instalar o Expo, você irá precisar antes ter o Node.js 
e o NPM devidamente instalados. Depois disso basta executar 
o código abaixo no terminal:
npm install expo-cli --global
Com isso, o Expo já estará instalado em sua máquina de 
maneira global, podendo ser executado em qualquer pasta que 
você quiser. Veremos como utilizar para iniciar o projeto na 
próxima seção.
Com o Expo é muito fácil de testar o seu projeto antes de 
colocar ele para produção, você pode instalar a aplicaçãono 
seu dispositivo móvel (Android Figura 3 e iOS Figura 4) para 
que vinculando com seu projeto ele rode sem a necessidade 
de instalar um simulador na sua máquina, que por vezes pode 
demandar muito dela.
Figura 3 – Aplicativo do Expo na Google Play.
Fonte: https://play.google.com/. Acesso em: 09/12/2020.
Figura 4 – Aplicativo do Expo na App Store.
Fonte: https://apps.apple.com/. Acesso em: 09/12/2020.
8Programação para Dispositivos Móveis
Com essas ferramentas instaladas já é possível iniciar um 
projeto novo (Seção 3) com o React Native.
3- Primeiro Projeto
Com as ferramentas devidamente instaladas é possível 
iniciar um novo projeto para o React Native. Primeiro, você 
deve escolher o diretório que o projeto será alocado. Com 
o terminal aberto e com a pasta devidamente selecionada o 
Expo será utilizado (Figura 5) para criar toda a estrutura de 
pastas e arquivos que um projeto em React Native depende 
para funcionar.
O seguinte código deve ser executado:
expo init nome-do-projeto 
Com isso o Expo criará um novo projeto já preparado 
para produção, e criará uma pasta com o nome-do-projeto 
que você escolher.
 
Figura 5 – Iniciando um novo projeto com o Expo.Fonte: Acervo pessoal.
O Expo dá a opção de criar um projeto utilizando 
um template já pronto, quando é escolhido ele realiza o 
download de todos os arquivos necessários para iniciar o 
desenvolvimento. Na Figura 6 mostra os tipos de template 
que podem ser escolhidos, pode iniciar um projeto em branco 
(blank) ou já com a navegação em abas (tabs). Não se assuste, 
como o download de toda a estrutura deve ser feito, esse 
processo pode demorar algum tempo.
Figura 6 – Seleção do template do Expo. Fonte: Acervo pessoal.
Ao fi nal da instalação, o seu projeto já está pronto para 
ser desenvolvido, na Figura 7 pode ser observado ainda os 
próximos passos que devem ser realizados para começar a 
utilizar. Primeiro, você precisa ‘subir’ para a pasta do projeto 
com o comando cd nome-do-projeto, e depois você pode 
executar com a ajuda do aplicativo Expo através do comando 
npm start, ou utilizar diretamente no dispositivo que você 
quer com os comandos npm run android, npm run ios, 
npm run web.
 
Figura 7 – Seleção do template do Expo. Fonte: Acervo pessoal.
Para não ter que instalar simuladores, nesta disciplina 
somente será utilizado o aplicativo Expo (para Android ou 
iOS). Então em todos os exemplos será executado o comando 
npm start, que irá criar um servidor http que vai gerenciar o 
arquivo e os acessos ao projeto pelo aplicativo. Na Figura 8, 
você pode observar que ele vai mostrar em qual url vai ser 
executado o Expo DevTools, se tudo estiver correto seu 
navegador irá abrir com a tela da Figura 9.
Figura 8 – npm start. Fonte: Acervo pessoal.
No Expo DevTools é possível encontrar o QR Code que 
fará a ligação com o aplicativo instalado no seu dispositivo 
móvel, mas também poderão ser encontrados do lado direito 
todos os logs, erros e warnings que ocorrerem durante a 
execução.
Figura 9 – Expo DevTools. Fonte: Acervo pessoal.
9
No dispositivo móvel com o Expo instalado você deverá 
fazer a leitura do QR Code (Scan QR Code) Figura 10. Ele 
irá vincular o seu projeto ao seu dispositivo, uma vantagem 
da utilização do Expo é que conforme você atualiza o código 
e salva, ele já atualiza o aplicativo em tempo real. Também 
na Figura 10 tem-se o aplicativo rodando e pronto para ser 
alterado, veremos como fazer isso nas próximas aulas.
Figura 10 – Aplicativo Expo / Projeto rodando no aplicativo. 
Fonte: Acervo pessoal.
Chegamos ao fi nal da primeira aula. Vamos recordar?
Retomando a aula
1- O que é React Native?
Na primeira seção, vimos o que é o React Native e suas 
vantagens.
2- Instalação
Na segunda seção, as dependências para começar um 
projeto foram apresentadas.
3- Primeiro Projeto
Na última seção, aprendemos a iniciar um projeto com o 
Expo e já começar a testar ele o aplicativo Expo instalado no 
dispositivo móvel.
GALANTE, V. R. In: Melhores frameworks para 
o desenvolvimento de aplicativos, 2019. Disponível em: 
https://usemobile.com.br/framework-desenvolvimento-
aplicativos-2019/. Acesso em: 20 jun. 2020.
FACEBOOK. In: React Native Learn once, write 
anywhere, 2020. Disponível em: https://reactnative.dev/. 
Acesso em: 20 jun. 2020.
TRENDS. In: Interesse ao longo do tempo 
React Native x Android Development x IOS 
Development, 2020. Disponível em: https://trends.
google.com/trends/explore?date=2014-01-01%20
2020-06-01&geo=US&q=React%20Native,Android%20
development,IOS%20development. Acesso em: 20 jun. 
2020.
Vale a pena acessar
PINHO, D. M.; ESCUDELARIO, B. React Native 
Desenvolvimento de aplicativos mobile com React. Editora Casa do 
Código, São Paulo, 2020.
EISENMAN, B. Learning React Native: Building Native 
Mobile Apps with JavaScript. O’Reilly Media, 2015.
BODUCH, A. React and React Native. Packt 
Publishing, 2017.
LEBENSOLD, J. React Native Cookbook: Bringing the 
Web to Native Platforms. O’Reilly Media, 2018.
Vale a pena ler
Vale a pena
Minhas anotações