Introdução ao React Native

Prévia do material em texto

Professor:Rodrigo Fontes Cruz
Disciplina: Programação para Disp. Móveis
INTRODUÇÃO REACT NATIVE
OBJETIVO DA AULA
Apresentar os conceitos fundamentais do React Native, destacando suas 
diferenças em relação ao desenvolvimento nativo, híbrido e 
multiplataforma. Demonstrar as ferramentas CLI e Expo, orientando na 
escolha entre elas, e guiar os alunos na criação do primeiro projeto 
prático em React Native.
NA AULA PASSADA....
NA AULA PASSADA....
• Entenda como o cálculo é feito:
• Dividimos o valor do litro do álcool pelo da gasolina.
• Quando o resultado é menor que 0,7, a recomendação é abastecer 
com álcool. Se maior, a recomendação é escolher a gasolina.
• Exemplo: se o álcool custa R$ 3,29 e a gasolina R$ 4,92, o resultado da 
divisão do primeiro pelo segundo é 0,67, menor que 0,7. Portanto, é 
mais vantajoso abastecer com álcool.
• O que é React Native;
• Desenvolvimento Nativo;
• Desenvolvimento Hibrido;
• Desenvolvimento Multiplataforma;
• CLI X Expo;
• Criando o primeiro Projeto;
CONTEÚDO
O que é
React Native? 
Framework React para o 
desenvolvimento mobile
 
DESENVOLVIMENTO NATIVO
NATIVO
DESENVOLVIMENTO NATIVO
• Linguagens totalmente diferentes;
• Códigos diferentes;
• Equipes diferentes;
NATIVO
DESENVOLVIMENTO HIBRIDO
HIBRIDO
DESENVOLVIMENTO HIBRIDO
DESENVOLVIMENTO HIBRIDO - 
WEBVIEW
WebView
DESENVOLVIMENTO HIBRIDO
Desenvolvimento Híbrido
DESENVOLVIMENTO HIBRIDO
app
DESENVOLVIMENTO HIBRIDO
webview
app
DESENVOLVIMENTO HIBRIDO
webview
app
DESENVOLVIMENTO HIBRIDO
Cordova: Conexão entre o APP e os recursos nativo do celular
Ionic: Componentização, interface
DESENVOLVIMENTO HIBRIDO
• Problemas:
• Performance, bem inferior ao Nativo;
• UX – Experiência do Usuário (Gestos, animações, etc);
DESENVOLVIMENTO MULTIPLATAFORMA
MULTIPLATAFORMA
DESENVOLVIMENTO MULTIPLATAFORMA
Sem HTML
Sem CSS
Sem WebView
DESENVOLVIMENTO MULTIPLATAFORMA
Sem HTML
Sem CSS
Sem WebView
Renderização
Nativa
DESENVOLVIMENTO MULTIPLATAFORMA
Biblioteca para criação de interfaces
Rect DOM Web
Rect Native Mobile
DESENVOLVIMENTO MULTIPLATAFORMA
DESENVOLVIMENTO MULTIPLATAFORMA
UIView
android.view
DESENVOLVIMENTO MULTIPLATAFORMA
Funcionalidades
Pacotes
Comunidade
REACT NATIVE
• Quem usa:
CRIANDO O 
PROJETO
CLI X EXPO
• Formas de iniciar um novo Projeto React Native
CLI
• Forma “mais enxuta”. Cria o básico para funcionar e rodar;
CLI
CLI
• Forma “mais enxuta”. Cria o básico para funcionar e rodar;
• Temos acesso ao código nativo;
CLI
AMBIENTE DE DESENVOLVIMENTO
Xcode Android Studio
• IDE – Integrated Development Environment
AMBIENTE DE DESENVOLVIMENTO
AMBIENTE DE DESENVOLVIMENTO
EXPO
• O Expo é um framework e uma plataforma para desenvolvimento de 
aplicações React que fornece um conjunto de ferramentas e serviços 
construídos em torno de plataformas nativas e do React Native, para 
ajudar a desenvolver, implantar e iterar rapidamente em aplicativos iOS, 
Android e web a partir de uma mesma base de código JavaScript e 
TypeScript.
EXPO
• Forma “mais fácil”, mais abstraída de se criar um projeto
EXPO
• Forma “mais fácil”, mais abstraída de se criar um projeto
• Não temos acesso ao código nativo (que não deixa de existir)
• E por não termos acesso... Não podemos criar nem utilizar bibliotecas 
que precisam de código nativo
• Dai o expo provê um cara chamado Expo SDK (Kit de Desenvolvimento)
EXPO SKD
• SDK – Software Development Kit
• Conjunto de ferramentas para o desenvolvimento
• Expo SDK: Conjunto de pacotes para acessar recursos nativos
• Não precisamos lidar com código nativo
• A expo se encarrega das atualizações e compatibilidades
• Somente tenho disponíveis os pacotes da Expo SDK
EXPO
Xcode Android Studio
• Só precisamos do Node instalado
EXPO GO
• Expo Go: Cliente que nos permite rodar nossos apps React Native direto no 
smartphone físico
• Aplicativo que encontramos nas lojas da Apple (App Store) e Android (Google Play)
• O nosso APP vai rodar dentro do Expo Go que esta no seu dispositivo físico
• Mas também temos a possibilidade de montar o ambiente de desenvolvimento na 
nossa maquina e rodar através dos emuladores
EXPO GO
EXPO FLUXOS DE TRABALHO
• Managed Workflow: Fluxo de trabalho padrão com a Expo SDK/Expo Go
• Bare Workflow: Fluxo de trabalho que permite acesso ao código nativo, 
assim se algo que precisamos não tiver implementado no Expo SDK 
podemos sair e ir para esse fluxo de trabalho
EXPO FLUXOS DE TRABALHO
• Managed Workflow:
• Velocidade no desenvolvimento (MVP’s, Protótipos, Freelas, Testes)
• Facilidade para atualizar o projeto (O expo lida com as complexidades)
• Trabalho em equipe (Sem necessidade de configurar o ambiente)
• Bare Workflow:
• Temos todos os benefícios anteriores desde que não hajam alterações 
nas pastas android e ios (quando isso acontece não temos mais a 
possibilidade de rodar o projeto com o Expo Go)
EXPO – PONTO NEGATIVO
• APPs criados com a Expo tendem a ser mais pesados;
• Leva mais tempo para receber as atualizações do RN;
• Vai usar o Bare Workflow? Então...
• Será que preciso mesmo do Expo?
QUAL USAR?
QUAL USAR?
• Tipo do Projeto? (Hobby, teste e estudo | Freela | Comercial)
• O Projeto utiliza muito recurso nativo?
• O tamanho do App é importante?
• Tempo de desenvolvimento é importante?
• https://www.figma.com/file/pxNOQ1DcXCqGMX9lehPP7F/%C3%81rvore-
de-decis%C3%A3o---CLI-vs-Expo?node-id=0%3A1&t=mXO8lsi8RARyggSG-
1 (Crédito @imateus.silva)
https://www.figma.com/file/pxNOQ1DcXCqGMX9lehPP7F/%C3%81rvore-de-decis%C3%A3o---CLI-vs-Expo?node-id=0%3A1&t=mXO8lsi8RARyggSG-1
https://www.figma.com/file/pxNOQ1DcXCqGMX9lehPP7F/%C3%81rvore-de-decis%C3%A3o---CLI-vs-Expo?node-id=0%3A1&t=mXO8lsi8RARyggSG-1
https://www.figma.com/file/pxNOQ1DcXCqGMX9lehPP7F/%C3%81rvore-de-decis%C3%A3o---CLI-vs-Expo?node-id=0%3A1&t=mXO8lsi8RARyggSG-1
CRIANDO APP NO EXPO
CRIANDO APP NO EXPO
yarn create expo-app --template blank 
npm create expo-app --template blank 
npx create-expo-app --template blank 
CRIANDO APP NO EXPO
• assets: na pasta serão armazenados as fonts e imagens 
que são usadas no app; 
• node_modules: Dependências do Projeto;
• App.js: Ponto de Entrada da Aplicação;
• app.json: Arquivo de configuração do App 
(https://docs.expo.dev/versions/latest/config/app/);
• babel.config.js: Configuração do babel;
• package.json: Configurações do Projeto;
• yarn.lock ou package-lock.json: São arquivos de bloqueio 
de dependências que armazenam informações sobre as 
versões exatas das dependências que foram instaladas 
em um projeto ;
https://docs.expo.dev/versions/latest/config/app/
EXECUTANDO DIRETO DO CELULAR
• Expo Go: Cliente do Expo que permite que a gente rode nosso app nos 
nossos dispositivos físicos.
https://expo.dev/client
EXECUTANDO DIRETO DO CELULAR
• Abra a loja de aplicativos do celular (App Store ou Play Store), pesquise 
pelo aplicativo Expo e instale em seu dispositivo.
EXECUTANDO DIRETO DO CELULAR
yarn start
EXECUTANDO DIRETO DO CELULAR
• Por padrão o Expo vai utilizar a Local Area Network, a rede lan, ou seja, 
sua rede local. Desta forma o celular tem que esta na mesma rede do 
computador:
• yarn expo start --lan
• Podemos passar o parâmetro tunnel para deixar acessível a qualquer 
rede. 
• yarn expo start –tunnel
• Desta forma utilizando o ngrok ele vai deixar a porta 19000 online.
O Ngrok é uma ferramenta CLI que te permite criar um túnel seguro, atrás de NATs e 
Firewalls, que expõem serviços locais para a Internet, tudo isso de forma fácil e 
segura.
https://ngrok.com/
https://pt.wikipedia.org/wiki/Network_address_translation
EXECUTANDO DIRETO DO CELULAR
• Escanei o qr-code usando o app do expo
Obs: O celular tem que esta na mesma rede do computador
EXECUTANDO ATRAVÉS DO EMULADOR
• Download e Instalação do Android Studio (developer.android.com/studio)
EXECUTANDOATRAVÉS DO EMULADOR
• Virtual Device Manager
EXECUTANDO ATRAVÉS DO EMULADOR
• Create Device
EXECUTANDO ATRAVÉS DO EMULADOR
EXECUTANDO ATRAVÉS DO EMULADOR
EXECUTANDO ATRAVÉS DO EMULADOR
EXECUTANDO ATRAVÉS DO EMULADOR
EXECUTANDO ATRAVÉS DO EMULADOR
yarn android
FIM
	Slide 1
	Slide 2: OBJETIVO DA AULA
	Slide 3
	Slide 4
	Slide 5
	Slide 6
	Slide 7
	Slide 8: DESENVOLVIMENTO NATIVO
	Slide 9: DESENVOLVIMENTO NATIVO
	Slide 10: DESENVOLVIMENTO HIBRIDO
	Slide 11: DESENVOLVIMENTO HIBRIDO
	Slide 12: DESENVOLVIMENTO HIBRIDO - WEBVIEW
	Slide 13: DESENVOLVIMENTO HIBRIDO
	Slide 14: DESENVOLVIMENTO HIBRIDO
	Slide 15: DESENVOLVIMENTO HIBRIDO
	Slide 16: DESENVOLVIMENTO HIBRIDO
	Slide 17: DESENVOLVIMENTO HIBRIDO
	Slide 18: DESENVOLVIMENTO HIBRIDO
	Slide 19: DESENVOLVIMENTO MULTIPLATAFORMA
	Slide 20: DESENVOLVIMENTO MULTIPLATAFORMA
	Slide 21: DESENVOLVIMENTO MULTIPLATAFORMA
	Slide 22: DESENVOLVIMENTO MULTIPLATAFORMA
	Slide 23: DESENVOLVIMENTO MULTIPLATAFORMA
	Slide 24: DESENVOLVIMENTO MULTIPLATAFORMA
	Slide 25: DESENVOLVIMENTO MULTIPLATAFORMA
	Slide 26: REACT NATIVE
	Slide 27: CRIANDO O PROJETO
	Slide 28: CLI X EXPO
	Slide 29: CLI
	Slide 30: CLI
	Slide 31: AMBIENTE DE DESENVOLVIMENTO
	Slide 32: AMBIENTE DE DESENVOLVIMENTO
	Slide 33: AMBIENTE DE DESENVOLVIMENTO
	Slide 34: EXPO
	Slide 35: EXPO
	Slide 36: EXPO
	Slide 37: EXPO SKD
	Slide 38: EXPO
	Slide 39: EXPO GO
	Slide 40: EXPO GO
	Slide 41: EXPO FLUXOS DE TRABALHO
	Slide 42: EXPO FLUXOS DE TRABALHO
	Slide 43: EXPO – PONTO NEGATIVO
	Slide 44: QUAL USAR?
	Slide 45: QUAL USAR?
	Slide 46: CRIANDO APP NO EXPO
	Slide 47: CRIANDO APP NO EXPO
	Slide 48: CRIANDO APP NO EXPO
	Slide 49: EXECUTANDO DIRETO DO CELULAR
	Slide 50: EXECUTANDO DIRETO DO CELULAR
	Slide 51: EXECUTANDO DIRETO DO CELULAR
	Slide 52: EXECUTANDO DIRETO DO CELULAR
	Slide 53: EXECUTANDO DIRETO DO CELULAR
	Slide 54: EXECUTANDO ATRAVÉS DO EMULADOR
	Slide 55: EXECUTANDO ATRAVÉS DO EMULADOR
	Slide 56: EXECUTANDO ATRAVÉS DO EMULADOR
	Slide 57: EXECUTANDO ATRAVÉS DO EMULADOR
	Slide 58: EXECUTANDO ATRAVÉS DO EMULADOR
	Slide 59: EXECUTANDO ATRAVÉS DO EMULADOR
	Slide 60: EXECUTANDO ATRAVÉS DO EMULADOR
	Slide 61: EXECUTANDO ATRAVÉS DO EMULADOR
	Slide 62