React Native
Equipe: Felipe Leal, Irailson Matias, Victor Reis e Paulo Martins
História(Quando e onde surgiu?)
● Surgiu a partir do React, que é uma biblioteca de JavaScript de código aberto para
criar interfaces de usuário;
● É mantido pelo Facebook, Instagram e outras empresas, em conjunto com
desenvolvedores individuais;
● Segundo o Javascript Libscore, o React está sendo utilizado em sites como do
Walmart, Airbnb, Netflix e outros.
História(Quando e onde surgiu?)
● Em 2015, na Reactconf, o Facebook anunciou o módulo React Native, que em
conjunto com o React, possibilita o desenvolvimento de aplicativos para Android
e IOS utilizando componentes de interface de usuário nativos dessas plataformas,
sem precisar de HTML;
Características da Tecnologia
● Baseado no React, possibilita o desenvolvimento para aplicações mobile para
Android e IOS e todo o código é convertido para a linguagem nativa do SO.
● Sua abordagem é com estilos inline utilizando JavaScript, possibilita a
customização de layouts, que é feita por meio do FlexBox.
● Uma de suas funcionalidades é o hot reloading.
● Híbrido ou Nativo?
Características da Tecnologia
● Projetos em RN rodam diretamente no dispositivo do usuário, A partir das
seguintes arquiteturas:
● Android:
○ JSCore Virtual Machine: Destinado ao código JavaScript.
○ Android Runtime: Para o código Java.
● IOS:
○ JSCore Virtual Machine: Destinado ao código JavaScript.
○ Native Runtime: Para códigos Objective-C/Swift.
Características da Tecnologia
● Uma aplicação RN possui 3 importantes threads sendo executadas:
● A 1° é a main thread, utilizada pela aplicação nativa, é responsável pelas
requisições relacionadas à renderização de elementos na tela.
● A 2° é exclusiva do RN, responsável pela execução do código JS que é responsável
pela lógica de negócio da aplicação.
● a 3° e última é a shadow Queue, responsável pelos cálculos referentes ao layout.
Características da Tecnologia
● As threads responsáveis pelo Nativo e JavaScript não se comunicam diretamente,
toda comunicação, requisições, interações com o usuário, etc. É realizada por
meio da Bridge.
○ Toda interação é iniciada pelo lado nativo.
Pontos Fortes Pontos Fracos
Pontos Fortes
● Permite utilizar ECMAScript 6, CSS Flexbox, JSX, diversos pacotes do
NPM e muito mais.
● Permite fazer debug na mesma IDE utilizada para o desenvolvimento
nativo com essas plataformas.
Pontos Fortes
● Programador tem a disposição uma biblioteca de componentes com os
quais ele desenvolve aplicações nativas para Android/iOS
● Um mesmo código, desenvolvemos aplicações para plataformas
diferentes.
Pontos Fracos
● Navegação: difícil e pouco intuitiva
● Estilos: são uma mistura de JavaScript com CSS
● Teste e Compilação: pois é necessário compilar o projeto, processo que
pode levar até 5 minutos e só então enviar o app para um emulador ou
dispositivo.
Expo
Live Reload
Linguagens utilizadas
O stack do React Native é poderoso, pois nos permite utilizar ECMAScript 6, CSS
Flexbox, JSX, diversos pacotes do NPM e muito mais. Sem contar que nos permite
fazer debug na mesma IDE utilizada para o desenvolvimento nativo com essas
plataformas (além de tornar o processo extremamente divertido)
Ferramentas
Durante o desenvolvimento, a aplicação React Native pode ser executada
diretamente no dispositivo com o Expo, sem a necessidade de emuladores.
Expo Cliente
Expo Snack
O Expo é um conjunto de ferramentas que nos permite compilar e enviar a
aplicação para o dispositivo para teste e depuração. Essa ferramenta é
executada a partir de um terminal e a comunicação entre ela e o
dispositivo e feita a partir da leitura de um Qr Code.
Quando a aplicação estiver pronta para ser publicada, você precisará do
Xcode ou do Android Studio para gerar um aplicativo assinado, de acordo
com as exigências de cada plataforma
Exemplo de código fonte
Componentes: É, basicamente, tudo que se vê na tela.
Exemplo de código fonte
Props: São criações de parâmetros para customizar os componentes.
Exemplos de Apps desenvolvidos com a tecnologia
● Facebook, Instagram, UberEats, Walmart, AirBnb, SoundCloud.
Referências
https://tableless.com.br/react-native-construa-aplicacoes-moveis-nativas-com-
javascript/
https://www.organicadigital.com/seeds/o-que-e-react-native/
https://www.devmedia.com.br/exemplo/como-comecar-com-react-native/52
https://medium.com/tableless/o-que-voce-deve-saber-sobre-o-funcionamento-do-react-
native-7e3c610aa268
https://facebook.github.io/react-native/docs/tutorial
