Quando o React Native foi anunciado, as primeiras reações foram extremamente positivas. Tradicionalmente, quando pensamos em tecnologias da web no espaço móvel, coisas como Apache Cordova vêm à mente, o que nos permite empacotar sites ou aplicativos da web como aplicativos para plataformas móveis. Neste tutorial para iniciantes, daremos uma olhada na arquitetura do React Native, a filosofia por trás do React Native e como ele difere de outras soluções no mesmo espaço. Ao final do artigo, teremos transformado um aplicativo React “Hello World” em um React Native.
Vamos começar dizendo que React Native é uma tecnologia relativamente nova. Está oficialmente disponível desde março de 2015, tendo estado em beta privado desde o início desse ano, e usado internamente no Facebook por um tempo antes disso. O ditado 'Roma não foi construída em um dia' geralmente se aplica à tecnologia também. Ferramentas como grunt e plataformas como Node.js levaram anos para amadurecer. No mundo da web, as coisas estão mudando rapidamente e com um grande número de estruturas, pacotes e ferramentas saindo todos os dias, desenvolvedores tendem a ficar um pouco mais céticos e não querem entrar em todos os movimentos da moda apenas para perceber que acabaram em uma situação de aprisionamento de fornecedor. Veremos o que torna o React Native especial, por que é uma tecnologia que vale a pena ser explorada e abordaremos alguns casos em que nem todos são unicórnios e arco-íris.
Sob o capô
Ao falar sobre tecnologias da web em dispositivos móveis, as soluções disponíveis geralmente se enquadram em uma das seguintes categorias.
Agrupando aplicativos da web em um navegador da web móvel
O aplicativo da web reside em um navegador móvel, normalmente chamado de WebView. Sem nenhuma grande refatoração, um site ou aplicativo da web funciona no dispositivo móvel. Podemos precisar considerar eventos do navegador móvel, como tocar ou ouvir as alterações de orientação do dispositivo e a tela menor para uma experiência completa do usuário, mas temos uma versão móvel funcional com o mínimo de esforço. Cordova / PhoneGap é a opção mais popular nesta categoria. Infelizmente, essa opção tem uma grande desvantagem: em alguns casos, os aplicativos desenvolvidos com o Cordova são significativamente mais lentos do que os aplicativos nativos, especialmente para aplicativos gráficos pesados. Em outros casos, o sistema operacional móvel não fornece, de fato, todos os recursos do WebView que estão disponíveis no navegador móvel. A experiência do usuário também pode ser diferente de aplicativos nativos; isso pode acontecer devido ao aplicativo ou à própria plataforma. Esse problema pode variar de barras de rolagem que não parecem iguais a um atraso perceptível ao tocar nos elementos.
Compilando para tecnologias nativas
Uma solução completamente diferente é criar uma base de código nativa no final. Isso acontece ao transformar o código-fonte original em outra linguagem de programação. Trocamos desempenho nativo por uma camada de abstração com algumas incertezas. Em casos de soluções de código fechado, não temos certeza do que acontece por baixo do capô e com que tipo de caixa preta estamos lidando. Em outros casos, não temos certeza de quanto a próxima atualização do sistema operacional móvel quebrará nosso código e quando correções ou atualizações estarão disponíveis. Um exemplo popular desta categoria seria Haxe .
Usando uma camada JavaScript
Aqui, usamos o mecanismo JavaScript do ambiente móvel e executamos nosso JavaScript lá. Os controles nativos são mapeados para objetos e funções JavaScript, portanto, quando chamávamos uma função chamada fancyButtonRightHere(), um botão aparecia na tela. NativeScript ou Appcelerator Titanium são exemplos bem conhecidos dessa categoria.
O React Native pode ser classificado como algo da terceira categoria. Para as versões iOS e Android, React Native usa JavaScriptCore sob o capô, que é o mecanismo JavaScript padrão no iOS. JavaScriptCore também é o mecanismo de JavaScript nos navegadores Safari da Apple. OS X e desenvolvedores iOS podem interagir diretamente com ele, se quiserem.
Uma grande diferença é que React Native executa o código JavaScript em um thread separado, para que a interface do usuário não bloqueie e as animações sejam suaves e suaves.
Reação é o principal recurso
É importante notar que o “React” no React Native não é colocado lá por acidente. Para React Native, precisamos entender o que exatamente o React oferece. Os conceitos a seguir funcionam da mesma forma no React e no React Native, embora esses exemplos de código sejam ajustados para serem executados no navegador.
Ponto de entrada de renderização único
Quando examinamos um componente React simples, a primeira coisa que podemos notar é que o componente tem um render função. Na verdade, o React gera um erro se não houver uma função de renderização definida dentro do componente.
var MyComponent = function() { this.render = function() { // Render something here }; }; O especial é que não mexemos com os elementos DOM aqui, mas retornamos uma construção baseada em XML que representa o que será renderizado no DOM. Essa construção baseada em XML é chamada de JSX.
var MyComponent = function() { this.render = function() { return Hello there ; }; }; Um transformador JSX especial pega todo o código que parece XML e o converte em funções. Esta é a aparência do componente após a transformação:
var MyComponent = function() { this.render = function() { return React.createElement('div', { className: 'my-component' }, 'Hello there'); }; }; A maior vantagem é que, ao dar uma olhada rápida no componente, sempre sabemos o que ele deve fazer. Por exemplo, um componente pode renderizar vários componentes. Não podemos renderizar nossos componentes em qualquer outro lugar que não dentro de render função, então nunca há a preocupação de não sabermos exatamente de onde veio nosso componente renderizado.
Fluxo de Dados Unidirecional
Para construir o conteúdo de um componente, React fornece propriedades ou adereços para breve. Semelhante aos atributos XML, passamos os adereços diretamente para um componente e podemos usar os adereços dentro do componente construído.
var Hello = function(props) { this.render = function() { return Hello {props.name} ; }; }; var Greeter = function() { this.render = function() { return } }; Isso faz com que nossos componentes fiquem em uma estrutura semelhante a uma árvore, e só podemos passar dados ao construir elementos filho.
Renderizar novamente nas alterações
Além dos adereços, os componentes também podem ter um estado interno. O exemplo mais proeminente desse comportamento seria um contador de cliques que atualiza seu valor quando um botão é pressionado. O número de cliques em si seria salvo no estado.
Cada uma das mudanças de prop e estado aciona uma renderização completa do componente.
DOM Virtual
Agora, quando tudo é refeito quando os adereços ou o estado mudam, como o próprio React está tendo um desempenho tão bom? O ingrediente mágico é o “Virtual DOM”. Sempre que algo precisa ser renderizado novamente, uma representação virtual do DOM atualizado é gerada. O Virtual DOM consiste em representações leves de elementos modelados a partir da árvore de componentes, tornando o processo de gerá-los muito mais eficiente do que gerar elementos DOM reais. Antes de aplicar as mudanças ao DOM real, verificações são feitas para determinar onde exatamente na árvore de componentes as mudanças aconteceram, um diff é criado e apenas aquelas mudanças específicas são aplicadas.
que tipo de entidade é um llc
Primeiros passos com este tutorial nativo do React
Existem certos pré-requisitos que os iniciantes precisarão configurar para desenvolver para o React Native. Como o iOS foi a primeira plataforma com suporte, e aquela que abordamos neste tutorial, precisamos do macOS e do Xcode, pelo menos a versão 6.3. Node.js também é necessário. O que ajuda é instalar Vigia por meio do gerenciador de pacotes Brew com brew install watchman. Embora isso não seja necessariamente necessário, ajuda ao lidar com muitos arquivos dentro de nosso projeto React Native.
Para instalar o React Native, simplesmente precisamos instale o aplicativo de linha de comando React Native com npm install -g react-native-cli. Chamando o react-native O comando então nos ajuda a criar um novo aplicativo React Native. Em execução react-native init HelloWorld cria uma pasta chamada HelloWorld em que o código clichê pode ser encontrado.
Transformando um aplicativo React
Com o React sendo o recurso-chave e os princípios fundamentais provenientes da biblioteca React, vamos dar uma olhada no que precisamos para transformar um aplicativo React “Hello World” mínimo em um React Native.
Usamos alguns recursos do ES2015 neste exemplo de código, especificamente classes. É totalmente viável manter React.createClass ou use uma forma de função semelhante ao padrão de módulo popular.
var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content')); Etapa 1: abraçar os módulos CommonJS
Na primeira etapa, precisamos alterar o requerimento do módulo React para usar react-native em vez de.
var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content')); O que geralmente faz parte do pipeline de ferramentas ao desenvolver um aplicativo da web React é uma parte integrante do React Native.
Etapa 2: Não há DOM
Não é de surpreender que não haja DOM no celular. Onde usamos anteriormente, precisamos usar e, onde usamos , o componente de que precisamos aqui é.
import React from ‘react'; import {View, Text, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(‘hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content')); Embora seja bastante conveniente colocar texto diretamente em elementos, no mundo nativo o texto não pode ser colocado diretamente em um. Para isso, precisamos inserir um componente.
import React from ‘react'; import {View, Text, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(‘hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } React.render(, document.getElementById('content')); Etapa 3: Estilos Inline são o caminho a percorrer
O React Native nos permite usar a modelagem do Flexbox em vez de brincar com float e inline-block que estamos tão familiarizados no mundo da web. O interessante é que o React Native não usa CSS.
import React from ‘react'; import {View, Text, StyleSheet, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(‘hi!'); } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(, document.getElementById('content')); Usar estilos embutidos parece desconcertante para os iniciantes. É semelhante à transição que os desenvolvedores do React tiveram que passar ao serem confrontados com JSX e anteriormente usando mecanismos de modelagem como Handlebars ou Jade.
A ideia é que não temos folhas de estilo globalmente na forma como usamos CSS. Declaramos as folhas de estilo diretamente no nível do componente e, portanto, temos todas as informações de que precisamos para ver o que nosso componente faz, o layout que ele cria e os estilos que se aplica.
import React from ‘react'; import {Text} from ‘react-native'; var Headline = function(props) { this.render = () => {props.caption}; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline; Etapa 4: Tratamento de eventos
O equivalente a clicar em páginas da web é tocar em um elemento no dispositivo móvel. Vamos mudar nosso código para que o 'alerta' apareça quando tocarmos no elemento.
import React from ‘react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('Hi!') } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(, document.getElementById('content')); Em vez de os eventos estarem disponíveis diretamente nos componentes, precisamos usar explicitamente os elementos que acionam os eventos, em nosso caso, um evento de toque ao pressionar a visualização. Existem diferentes tipos de componentes tocáveis disponíveis, cada um deles fornecendo um feedback visual diferente.
Etapa 5: personalizar o comportamento em todas as plataformas
É possível detectar em qual plataforma o aplicativo React Native está sendo executado, acessando o valor de Platform.OS. Digamos que, no exemplo acima, desejamos exibir uma mensagem de alerta diferente com base na plataforma em que estamos executando. Podemos fazer assim:
... clickMe() { var message = ‘'; if(Platform.OS == ‘ios') { message = ‘Welcome to iOS!'; } else if(Platform.OS == ‘android') { message = ‘Welcome to Android!'; } Alert.alert(message); } ... Como alternativa, o select também está disponível, o que fornece uma sintaxe semelhante a um switch:
… clickMe() { Alert.alert(Platform.select({ ios: ‘Welcome to iOS!', android: ‘Welcome to Android!' }) ); } ... Etapa 6: Fontes personalizadas e react-native link
Para adicionar uma fonte personalizada, precisamos pular alguns obstáculos. Em primeiro lugar, certifique-se de que o nome completo da fonte e o nome do arquivo da fonte são os mesmos: o iOS usará o nome completo da fonte para selecioná-la, enquanto o Android usará o nome do arquivo.
Portanto, se o nome completo da fonte for myCustomFont, certifique-se de que o nome do arquivo da fonte seja myCustomFont.ttf.
Depois disso, precisamos criar uma pasta de ativos e apontar o npm para ela. Podemos fazer isso criando a pasta primeiro, em assets/fonts no diretório raiz do aplicativo. Qualquer outro diretório serve, mas este é o nome convencional usado para o diretório de fontes.
Podemos dizer ao npm onde temos nossos ativos adicionando um Assets propriedade na seção de integração npm do React, rnpm:
'rnpm': { 'Assets': [ './assets/fonts/' ] } Depois de fazer tudo isso, podemos finalmente executar react-native link. Isso copiará as fontes para os diretórios corretos e adicionará o xml necessário a info.plist no iOS.
Uma vez feito isso, podemos usar nossa fonte apenas referenciando-a em qualquer folha de estilo pelo seu nome completo. Vamos usá-lo em nosso Text elemento:
ember js tutorial para iniciantes
import React from ‘react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('Hi!') } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(, document.getElementById('content')); Etapa 7: Movendo Coisas
O React Native usa as mesmas regras do Flexbox para o layout de componentes. Digamos que desejamos posicionar nosso botão na parte inferior da tela: vamos envolver nosso TouchableOpacity com um contêiner View:
Hello {this.props.name}. Please click me. E agora vamos definir o container estilo, juntamente com os outros estilos já definidos:
container: { flex: 1, justifyContent: 'center', alignItems: 'center' } Vamos nos concentrar em justifyContent e alignItems. Essas duas propriedades controlam como o componente é alinhado respectivamente ao longo de seu eixo primário e seu eixo secundário. Por padrão, o eixo primário é o vertical e o eixo secundário é o eixo horizontal (você pode alterar isso definindo a propriedade flexDirection para row).
justifyContent tem seis valores possíveis, pode ser definido como:
flex-startposicionará todos os elementos juntos, no início da caixa delimitadora do componente.flex-endirá posicionar todos os elementos no final.centerposicionará todos os elementos no centro da caixa delimitadora.space-arounddistribuirá os componentes uniformemente e centralizará os componentes em suas caixas delimitadoras criadas.space-evenlytambém distribuirá os componentes uniformemente, mas tentará deixar uma quantidade igual de espaço entre os componentes e os outros limites.space-betweenirá espalhar os componentes, mantendo o espaçamento entre os componentes adjacentes igual.
alignItems pode ser definido com quatro valores possíveis: flex-start, flex-end, center e stretch. Os três primeiros se comportam como para justifyContent, enquanto stretch irá definir o componente para ocupar todo o espaço disponível ao longo do eixo, de forma que o eixo seja completamente preenchido.
Então, como queremos nosso TouchableOpacity para ser exibido na parte inferior e centralizado ao longo do eixo horizontal, podemos alterar o estilo assim:
container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' } Mais informações sobre os valores justifyContent e alignItems pode ter pode ser encontrado Aqui e Aqui .
Etapa 8: registrando o aplicativo
Ao desenvolver com React para o navegador, precisamos apenas definir um ponto de montagem, chamar React.render e deixar o React fazer sua mágica. No React Native, isso é um pouco diferente.
import React from ‘react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from ‘react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: ‘Welcome to iOS!', android: ‘Welcome to Android!' })); } render() { return ( Hello {this.props.name}. Please click me. ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return ; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; }); Temos que registrar o componente para o lado Objective-C das coisas, o que é feito usando o AppRegistry objeto. O nome que fornecemos deve corresponder ao nome dentro do projeto Xcode.
Nosso aplicativo Hello World React Native tem significativamente mais linhas de código do que sua contraparte da web, mas, por outro lado, o React Native leva a separação de interesses um pouco mais longe, especialmente porque os estilos são definidos com o componente.
Como observação lateral, não devemos religar o clickMe método para o this contexto no render , especialmente se nosso aplicativo React (nativo) se tornar um pouco mais complexo. Ele religa o método em cada chamada de renderização, que pode se tornar bastante. A alternativa é vincular o método dentro do construtor.
Executando o aplicativo
Para executar o aplicativo, precisamos substituir o conteúdo de index.ios.js arquivo com o trecho de código de nosso aplicativo transformado da última etapa. Então, só precisamos abrir o projeto Xcode e pressionar o grande botão Executar. Primeiro, um terminal será aberto com o servidor React Native e, em seguida, a janela do simulador aparecerá. O servidor React Native cria um pacote, que o aplicativo nativo buscará. Isso permite um ciclo de desenvolvimento rápido semelhante ao do desenvolvimento da web, em que as alterações serão refletidas quase que instantaneamente no simulador.
Para Android, é suficiente adicionar o seguinte ao seu package.json arquivo, em scripts:
'android-linux': 'react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android' E então execute npm run android-linux. Certifique-se de que android/app/src/main/assets diretório existe de antemão.
Depois que o terminal aparecer, nosso aplicativo aparecerá no simulador. Pressionar CMD + D mostrará um menu de desenvolvimento. Clicar na caixa exibirá um alerta. A versão iOS:
E o Android renderiza algo assim:
Para distribuição, ter um aplicativo que aponta para um servidor de desenvolvimento local não funcionaria para nós. Por esse motivo, podemos criar o pacote para uso quando o servidor React Native não estiver sendo executado com o comando react-native bundle. Nesse caso, precisamos atualizar o didFinishLaunchingWithOptions método de AppDelegate para usar o pacote offline.
Este aplicativo de exemplo também é disponível no Github .
Trabalhando com React Native
Outra coisa que vale a pena mencionar é que não usamos apenas os conceitos do React e JavaScript para nossos aplicativos móveis, mas alguns dos fluxos de trabalho aos quais os desenvolvedores da Web estão acostumados também estão disponíveis com o React Native. Quando viemos do desenvolvimento web, estamos acostumados a desenvolver ferramentas, inspecionar elementos e recarregar ao vivo.
A maneira como o React Native funciona é que ele coloca todos os nossos arquivos JavaScript em um pacote. Este pacote é servido a partir de um servidor ou em pacote junto com o aplicativo. O primeiro é incrivelmente útil para desenvolvimento no Simulador, pois podemos habilitar o recarregamento ao vivo. O menu do desenvolvedor que o React oferece não é de forma alguma tão poderoso quanto as Ferramentas do desenvolvedor do Chrome, mas fornece uma experiência de desenvolvedor muito semelhante à da web com recarregamento ao vivo e depuração com as ferramentas de desenvolvedor / depurador do Chrome (ou Safari).
Os desenvolvedores da Web estão familiarizados com JSFiddle ou JSBin, um playground online para testes rápidos da Web. Há sim um ambiente semelhante que nos permite experimentar o React Native em um navegador da web.
React Native: Uma escolha sólida e moderna
Eu tinha originalmente sugerido uma abordagem mais cautelosa para React Native. Hoje, é uma escolha madura e sólida.
Uma das grandes vantagens do React é que ele não impõe no seu fluxo de trabalho, uma vez que apenas representa a camada de visualização. Você quer definir seu próprio pipeline de Grunt? Ou você prefere usar o Webpack? E você usará o Backbone.js para as necessidades do seu modelo? Ou você quer ir com objetos JavaScript simples? As respostas a todas essas perguntas dependem totalmente de você, porque o React não impõe nenhuma restrição a essas escolhas. Como o site oficial colocou: “Como o React não faz suposições sobre o resto de sua pilha de tecnologia, é fácil testá-lo em um pequeno recurso em um projeto existente.”
Até certo ponto, isso também é verdadeiro para o React Native. Os desenvolvedores móveis podem integrar o React Native como parte de seu aplicativo, tirar proveito do fluxo de trabalho de desenvolvimento inspirado na web e optar por integrar a biblioteca em uma escala maior, se necessário.
Em qualquer caso, uma coisa é certa: React Native não vai embora . O Facebook tem uma grande aposta em ter vários aplicativos do React Native em lojas de aplicativos. A comunidade em torno do React Native é enorme e continua a crescer.
qual das seguintes ferramentas de visualização de dados é usada para organizar dados quantitativos?Relacionado: Construir um scanner QR: um tutorial de câmera nativa do React
Compreender o básico
O que é React Native?
React Native é uma estrutura para construir aplicativos nativos iOS e Android usando JavaScript. É baseado nos mesmos conceitos do React, mas usa componentes nativos em vez de componentes da web para renderizar uma interface de usuário (UI).
O que é React?
React é uma biblioteca JavaScript de front-end, projetada em torno do conceito de uso de visualizações declarativas para eficiência e previsibilidade.
O que é melhor quando se trata de React Native vs Native?
Se você oferece suporte a mais de uma plataforma, o React Native oferece uma vantagem sólida em termos de reutilização do código principal de seu aplicativo. Você ainda pode ter que fornecer algum código específico da plataforma, mas certamente será menos para escrever e manter do que se você escrevesse um aplicativo nativo para cada plataforma.
O que é um aplicativo nativo?
Um aplicativo nativo é aquele que é compilado e executado diretamente em sua plataforma de destino. Por padrão, ele terá uma 'aparência e comportamento' que se encaixam na plataforma. O React Native tem como objetivo dar a você essa mesma aparência nativa, ao mesmo tempo em que oferece portabilidade extra e uma metodologia familiar.
