React e React Native são duas tecnologias de código aberto para a construção de interfaces de usuário. Ambos foram desenvolvidos pelo Facebook e ganharam grande reconhecimento entre os desenvolvedores front-end por suas oportunidades de criar interfaces de usuário interativas. No artigo, descrevemos essas duas tecnologias e explicamos suas diferenças.
React ou ReactJS é uma biblioteca JavaScript usada para construir interfaces de usuário especialmente para a web. O React usa programação declarativa , que permite aos desenvolvedores projetar uma visualização simples para cada estado e, em seguida, delegar a responsabilidade de manter as visualizações do aplicativo consistentes enquanto você precisa se preocupar apenas com o estado.
React é uma biblioteca baseada em componentes, o que significa que você pode construir vários componentes reutilizáveis e, em seguida, usá-los para construir a interface de usuário complexa do aplicativo, enquanto React cuida da renderização de componentes de interface de usuário. Os aplicativos criados com o React podem alterar os dados em partes separadas da página sem recarregar a página inteira. Ele fornece suporte para front-end e do lado do servidor.
React Native é uma estrutura para construir aplicativos nativos de plataforma cruzada para Android e IOS usando React. React Native compila código nativo que permite criar aplicativos móveis verdadeiramente nativos com experiência natural do usuário para
Desenvolver com ReactJS não é como desenvolver aplicativos móveis com React Native, e eles servem a propósitos diferentes. React Native é usado para construir aplicativos móveis nativos, enquanto ReactJS é para construir páginas da web interativas para a web.
O React Native foi personalizado para construir aplicativos de desktop para Mac e Windows (consulte o repositório GitHub para macOS e Windows ), mas antes de tudo, essa estrutura foi projetada para potencializar o desenvolvimento de aplicativos móveis.
Alguns fatos sobre ReactJS:
Classificado em 2 ° e 1 ° lugar nos resultados da pesquisa StackOverflow para desenvolvedores em 2020 nas categorias Most Loved e Most Wanted Web Frameworks, respectivamente.
Classificado em 2º lugar como o Framework da Web mais popular entre os desenvolvedores profissionais em 2020.
De 2016 a 2019 (a última pesquisa) ReactJS classificou-se em primeiro lugar em classificações de índice de conscientização, interesse e satisfação .
Em 2020, React tinha 157 mil estrelas no GitHub , tornando-o o segundo projeto de JavaScript mais popular depois da biblioteca Vue.
Existem cerca de 1 004 379 sites usando React em todo o mundo.
60 608 desenvolvedores no StackShare declararam que usam o React In 2020.
Cerca de 9.000 empresas relataram que usam React em seu Tech Stack , incluindo Uber , Airbnb , Facebook , Netflix , Instagram , Amazon , Twitter . A mediana dos salários dos desenvolvedores do React nos EUA é de 120.000 $ por ano . Os desenvolvedores mais qualificados recebem até US $ 160.000 por ano.
Alguns fatos sobre React Native:
React Native está em 5º lugar no StackOverflow Survey 2020 na categoria de outras estruturas, bibliotecas e ferramentas mais populares entre os desenvolvedores profissionais.
React Native vai com 90,5 k estrelas no GitHub .
Cerca de 1400 empresas declararam usar o React Native no desenvolvimento.
Os aplicativos móveis mais conhecidos que foram desenvolvidos com o React Native são Skype (antes do React Native ser substituído pelo Electron em junho de 2020), Facebook , Instagram , Pinterest , Bloomberg , Discord , Tesla .
React vs React Native – principais diferenças
Como começar e o que você precisa
Como o React é uma biblioteca JavaScript, tudo que você precisa para começar a trabalhar com ela é conectar a biblioteca React na página HTML na tag <script>:
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>Isso é tudo. https://reactjs.org/docs/add-react-to-a-website.html Em seguida, você pode criar seu primeiro React Component e adicioná-lo ao seu site HTML .
A única outra coisa que você precisa para trabalhar com grandes projetos é um bundler. Se você usar para novos projetos instrumentos como um comando create-react-app, Next.js ou Gatsby framework, você já terá um Webpack configurado para empacotar seu aplicativo. Caso contrário, você mesmo precisará configurar um Webpack.
Bundlers compilam todos os arquivos importados com código em um arquivo grande e complexo. Além do Webpack, existem outros bundlers, como Rollup ou Browserify .
React-Native é uma estrutura, então você precisa de um ambiente de desenvolvimento instalado como Xcode para iOS ou Android Studio para Android.
Dependendo do seu sistema operacional de desenvolvimento, você precisa instalar ferramentas adicionais como Node, a interface de linha de comando React Native, um JDK, Watchman, etc. Depois disso, você pode iniciar um novo projeto apenas com uma linha no React Native CLI. Para ver o aplicativo criado, você deve executar um simulador móvel ou usar seus próprios dispositivos.
Como você instala uma estrutura completa, ela vem com várias ferramentas de desenvolvedor prontas para usar , como recarregamento a quente, que permite injetar novas versões dos arquivos editados no tempo de execução, mantendo o aplicativo em execução. Isso se torna especialmente útil se você estiver ajustando a interface.
A migração do ReactJS para o React Native não é algo complicado. Se você está familiarizado com React e JavaScript, leva vários meses para se acostumar com a estrutura React Native e construir seu primeiro aplicativo nativo , é apenas uma maneira diferente de usar o React.
A base das tecnologias
ReactJS é apenas um JavaScript (e um pouco do TypeScript), não há coisas adicionais que você precise saber. Suas habilidades em JavaScript permitem que você se torne um bom desenvolvedor React em algumas horas, quando você se familiarizar com a documentação técnica. O React foca em uma coisa: construir interfaces de usuário interativas para a web via JavaScript.
React Native é uma estrutura que usa React.JS para construir interfaces de usuário móveis. Ele vem com todas as vantagens que o React.js trouxe para você e usa componentes declarativos assim como o React.
Mas React Native não é um framework JavaScript puro, ele também contém código Java, C ++, Objective-C, Objective-C ++. Esse fato é essencial porque a diversidade de linguagens usadas nos permite construir componentes nativos que são de fato nativos. Vamos descobrir o que isso significa.
React Native Bridge ou como obtemos componentes nativos
React usa HTML, CSS e JavaScript.
Tendo isso em mente, temos duas opções de como criar um aplicativo multiplataforma:
- Para fazer um design universal que tenha a mesma aparência para todas as plataformas.
- Para criar um design único para cada plataforma, isso significa diferentes conjuntos de código, diferentes DOM, folhas de estilo, animações, estilos, etc. para manter a experiência nativa do usuário ao usar o aplicativo.
Se quisermos construir um aplicativo nativo com React e escolher a segunda opção, usamos o comando ReactDOM.Render () e tentamos imitar os elementos nativos, mas o resultado geralmente parece um pouco estranho por causa dos pequenos detalhes na IU que parecem errados.
Em contraste, React Native não tenta imitar elementos nativos, ele cria uma ponte entre a linguagem nativa e o código JavaScript. Ele chama as funções e componentes nativos dentro de um ambiente móvel. React Native tem acesso a todas as visualizações e componentes nativos e a cerca de 70 APIs de dispositivos específicos por padrão. Ele aproveita ferramentas nativas para renderizar visualizações da plataforma a partir da qual o aplicativo foi executado.
Como resultado, quando escrevemos com React Native, construímos UIs nativas. Após a compilação do código, todas as visualizações em JavaScript tornam-se componentes nativos. Assim, criamos instâncias UIView como se usássemos linguagens específicas da plataforma (Java ou Objective C).
Mas como o React Native cria instâncias nativas?
Hoje em dia trabalhamos com compiladores que foram projetados para atingir suas próprias plataformas específicas. Assim, o compilador do código Java / Kotlin visa a plataforma Android, o compilador do Obj-C / Swift visa a plataforma iOS. Esses compiladores funcionam muito bem porque foram desenvolvidos para um propósito específico (criar artefatos otimizados para uma determinada plataforma). O React Native também tem esse propósito: usa compiladores existentes para criar UIs nativas.
React Native faz uma conexão entre duas realidades, JavaScript e Native.
Se precisarmos gerenciar a comunicação entre duas linguagens / plataformas diferentes, usamos linguagens interoperáveis, como JSON ou XML. React Native fornece comunicação bidirecional e assíncrona entre elementos JavaScript e Native com o conceito de ponte. Mesmo que as tecnologias sejam diferentes, eles podem se comunicar.
A ponte é construída em C / C ++ e pode ser executada em qualquer plataforma ou sistema operacional. Isso significa que você pode executar o código JavaScript dentro de um programa C / C ++, injetar variáveis, funções e declarar globais para aprimorar o código existente. Isso, por sua vez, fornece ao JavaScript a oportunidade de se comunicar com a realidade nativa e acionar ações no mundo C / C ++ .
Portanto, nosso código JavaScript usa compiladores existentes e componentes nativos gerados e interfaces com recursos nativos. É por isso que os desenvolvedores do React Native afirmam “Escreva uma vez, use em qualquer lugar” – você escreve o código em JavaScript e, em seguida, usa-o em diferentes plataformas, como se você escrevesse com linguagens nativas. Falamos não apenas sobre o ambiente móvel, mas também sobre a construção de aplicativos de desktop .
Outra coisa importante a saber é que você não precisa escrever o código inteiro em JavaScript. Às vezes, é melhor escrever componentes diretamente com idiomas nativos. Algumas razões para isso:
- Você tem a sensação de que a comunicação através da ponte torna o aplicativo mais lento e você deseja melhorar o desempenho do aplicativo. É um caso raro, porém, às vezes acontece.
- Nos casos em que a implementação em JavaScript leva centenas de linhas de código, enquanto com linguagens nativas o código não passa de cem.
DOM Virtual
DOM (modelo de objeto de documento, também conhecido como DOM real) é um modelo de objeto semelhante a uma árvore para uma página HTML. Objetos são elementos HTML como <div>, <html>, <body>, etc. Quando queremos atualizar a página, também precisamos gerar um novo DOM, que por sua vez leva a um recarregamento completo da página. Em outras palavras, se um aplicativo obtém novas informações e deseja exibi-las aos usuários, ele deve recarregar toda a página da Web e atualizar o modelo. O problema do DOM real é que ele não foi projetado para criar UIs dinâmicas. Usar JavaScript e bibliotecas como jQuery ajuda a resolver o problema com a renderização dinâmica, mas nos leva a um novo problema com o desempenho do aplicativo. Assim, não havia uma solução simples que nos permitisse criar aplicativos dinâmicos e manter um alto nível de desempenho.
React mudou as regras do jogo e nos trouxe algo como o DOM virtual , uma cópia abstrata do DOM real. O Virtual DOM pode atualizar as partes separadas da página sem a necessidade de recarregar a página inteira.
O React possui uma cópia da estrutura real do DOM. Quando ocorrem mudanças, ele rastreia as diferenças e atualiza o DOM exibido do navegador em locais que não correspondem à cópia virtual salva, sem influenciar o resto da IU.
É por isso que o React é incrível na criação de interfaces de usuário dinâmicas.
Além disso, o DOM virtual é sobre a re-renderização eficiente do DOM real. O React não verifica todos os valores em uma estrutura de dados em um intervalo regular; em vez disso, ele sabe quando e onde renderizar novamente o aplicativo porque observa o estado de seus componentes. O React pode simplesmente rastrear eventos de mudança de estado e, em seguida, enfileirar a renderização.
Portanto, a árvore virtual é renderizada novamente apenas quando o estado muda. Isso nos permite evitar muitas atualizações desnecessárias da árvore e manter alto o desempenho do aplicativo, atualizando elementos com um estado alterado. Para outras diferenças da árvore, se nada mudou, não fazemos nada. Isso ocorre nos bastidores: não temos que fazer manipulações DOM manuais, não temos que verificar o estado anterior do DOM, não temos que renderizar novamente a página inteira sempre que algum componente muda. Precisamos declarar o que queremos da interface do usuário e o React cuida do resto.
O React torna isso possível porque foi desenvolvido de tal forma que a reconciliação e a renderização são fases distintas . O reconciliador calcula quais partes de uma árvore foram alteradas, enquanto o renderizador é responsável por atualizar o aplicativo com base nessas informações.
E é aqui que chegamos ao React Native. Como o React Native é baseado no React, ele oferece oportunidades semelhantes, incluindo uma nova renderização eficiente do aplicativo. Mas tanto o React quanto o React Native usam seus próprios renderizadores enquanto compartilham o mesmo reconciliador, fornecido pelo núcleo React. O React Native usa APIs nativas para Android e iOS para renderizar componentes em dispositivos móveis, enquanto o React usa marcação HTML e CSS para a web.
A sintaxe
Quando você usa o React, você escreve em JavaScript. Em seguida, React.js renderiza componentes do tipo Html com tags como <p>, <div>, <h1>, etc. Você pode, opcionalmente, usar uma extensão de sintaxe especial para JavaScript que é chamada JSX. JSX é uma sintaxe que se parece com uma linguagem de modelo que não separa lógica e marcação. Isso significa que você colocou marcação em JS, o que pode parecer incorreto à primeira vista, mas o React afirma que essa prática não é tão ruim quanto parece. Após a compilação, não haverá código JSX, apenas funções e objetos JavaScript regulares.
Ao usar o React Native, você deve se familiarizar com sua sintaxe específica. Em vez de renderizar componentes do tipo Html, o React Native renderiza componentes nativos com tags como <view>, <text>, <image>, etc. Aqui está um exemplo de código para exibir “Hello, world!” para React e React Native:
Para ReactJS
function tick() { const element = ( <div> <h1>Hello, world!</h1> </div> ReactDOM.render(element, document.getElementByID(‘root’));}setInterval(tick, 1000);Para React Native:
Import React from 'react';Import {Text, View} from 'react-native';const HelloWorldApp = () => { return ( <View> <Text>Hello, world!</Text> </View> )}Export default HelloWorldApp;React Native não usa HTML e, portanto, não é usado para desenvolvimento web. Em vez disso, com o React Native você pode desenvolver aplicativos para dispositivos móveis (iOS, Android), dispositivos inteligentes (relógios, TVs), realidade aumentada e muito mais, porque usados em tags React Native como <View>, <Text> compilados em idiomas nativos.
No entanto, isso também significa que você não pode usar nenhuma biblioteca que renderize qualquer tipo de HTML, SVG ou Canvas.
Mais uma coisa a saber sobre o React Native é que todos os elementos de contêiner são contêineres Flex por padrão. Para manipular o conteúdo dentro dos contêineres, há um monte de opções diferentes para layouts Flex como justifyContent, alignItems, alignSelf, etc. Você não precisa escrever código para gerenciamento de conteúdo, apenas pegue as opções do Flex e use-as.
Construir aplicativos responsivos usando o Flexbox pode ser um pouco estranho se você trabalha com CSS antes, mas o layout do Flex é bastante simples e conveniente de usar, uma vez que você tenha o conhecimento básico de como funciona.
Você pode usar Reactjs ou React Native para desenvolver um aplicativo do zero ou para adicionar uma única visualização ou componente aos aplicativos existentes.
Sem animação e CSS
Dissemos que o React Native não usa HTML. Bem, React Native também não usa CSS.
Para estilizar os componentes, o React Native usa a API StyleSheet , que é semelhante ao CSS, mas não exatamente igual. Aqui está um exemplo:
const styles = StyleSheet.create({ ExampleView: { flex: 1, justifyContent: “center”, borderRadius: 50/2, backgroundColor: '#000' },});Para obter as opções que costumávamos (como a substituição de estilo), precisamos procurar soluções alternativas que o CSS oferece. Por exemplo, você pode substituir a cor de fundo no exemplo de código anterior, adicionando um subcomponente como este:
<Subcomponent passedStyle={{ backgroundColor: '#fff' }} />E, em seguida, aplique-o ao elemento:
<Imagestyle={[ styles.ExampleView, this.props.passedStyle ]} .../>No entanto, se você realmente precisa de CSS ou apenas gosta da maneira como funciona, você pode usar componentes estilizados que permitem que você escreva código CSS real em arquivos JS. Após a compilação, o texto CSS é convertido em um objeto de folha de estilo React Native.
Além disso, sem CSS não há uma maneira padrão de animar seus componentes. Com o React Native, você precisa aprender uma nova ferramenta chamada Animated . Animated é uma biblioteca que fornece animação suave e fluida, onde você pode combinar animação serial e paralela, manipulando gestos e outros eventos, e fazer coisas bem malucas em geral. É semelhante a uma biblioteca JavaScript muito popular Velocity.js .
Animated funciona fora do React, atualizando diretamente os componentes nativos. O React Native também oferece o uso do driver nativo que permite executar a animação no UI thread sem ter que passar pela ponte em cada frame.
Componentes
React é uma biblioteca baseada em componentes . Um componente é uma classe ou função JavaScript que retorna um elemento React e declara como uma determinada parte da IU deve se parecer. Existem dois tipos de componentes em React.js: componentes de função e componentes de classe. Ao usar componentes de função, você escreve funções JavaScript:
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }Você também pode definir o mesmo componente com classes ES6 :
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Você pode escrever um aplicativo com a mesma funcionalidade usando os dois tipos de componentes. Os componentes de classe têm muito mais recursos do que os componentes de função, no entanto, é mais fácil ler o código escrito com componentes funcionais, o código contém menos linhas e há um ligeiro aumento no desempenho do aplicativo .
O React Native vem com módulos nativos e componentes nativos a partir dos quais os desenvolvedores criam aplicativos.
Os componentes de IU nativos são widgets prontos para uso que fazem parte da plataforma ou estão disponíveis como bibliotecas de terceiros. Se você precisa de um determinado componente, pode procurá-lo no UI Explorer . Você também pode criar seu próprio componente e reutilizá-lo em diferentes partes do aplicativo.
Um Módulo Nativo é apenas um conjunto de funções javascript que dão acesso à API da plataforma quando o React Native ainda não tem o módulo necessário ou quando o React Native não oferece suporte a um recurso nativo que você precisa. Para construir seu próprio módulo, você pode usar algumas ferramentas que ajudam a começar:
- https://github.com/brodybits/create-react-native-module – permite criar um componente de visualização nativo com um único comando;
- https://github.com/react-native-community/bob – uma CLI para definir um exemplo simples de módulos para Android e iOS.
SEO
Os desenvolvedores usam Reactjs para fazer aplicativos da web, o que significa que você deve manter a otimização de SEO em mente . No entanto, a principal característica do Reactjs é fornecer interfaces de usuário dinâmicas, ou seja, o conteúdo das páginas da web muda dependendo das ações do usuário. O bot do Google não é um usuário. Mesmo que ele possa executar scripts e, portanto, ver as informações valiosas que tornam nosso aplicativo mais alto nos resultados de pesquisa do Google, precisamos ajudar o bot do Google a indexar nossa página da web corretamente.
Reactjs e sua comunidade podem oferecer diversas ferramentas e bibliotecas para melhorar o SEO do aplicativo.
- React snap – uma biblioteca de terceiros que pré-renderiza páginas do aplicativo em arquivos HTML estáticos.
- React trata da renderização do lado do cliente e do lado do servidor. A segunda opção é especialmente valiosa para SEO, no entanto, leva mais tempo para escrever o aplicativo com renderização do lado do servidor.
- O React Router é uma biblioteca de roteamento que mantém a URL em sincronia com o que está sendo exibido na página.
Por outro lado, React Native não tem nada a ver com web e SEO. É tudo sobre a construção de interfaces de usuário nativas.
Navegação
Se você trabalha com Reacjs, você deve estar familiarizado com a reagir – router biblioteca que fornece a navegação em eventos de clique. Essa biblioteca ganhou um segundo fôlego após o lançamento do React Router 5, quando o gancho useHistory apareceu.
No entanto, você não pode usar o react-router com o React Native. Para gerenciar a transição entre várias telas, a equipe React Native desenvolveu um Navigator de biblioteca totalmente exclusivo . Além dessa biblioteca, há outra biblioteca React Native Navigation que fornece navegação 100% nativa da plataforma no iOS e Android para aplicativos React Native.
Armazenamento
React usa armazenamento local, enquanto React Native usa AsyncStorage por padrão (mas tem algumas bibliotecas que ajudam a salvar os dados localmente).
O armazenamento local na web significa que os dados não têm data de expiração e persistirão após o fechamento da janela do navegador.
Quando falamos sobre AsynStorage no iOS, ele é apoiado por código nativo que armazena pequenos valores em um dicionário serializado e valores maiores em arquivos separados. No Android, AsyncStorage usa RocksDB ou SQLite com base no que está disponível.
Geralmente é suficiente ter a opção AsyncStorage ao desenvolver com React Native, mas alguns aplicativos podem exigir para manter os dados no dispositivo, aqui você obtém várias opções:
- Para usar bibliotecas especiais para armazenar dados em um dispositivo como Realm ou SQLite .
- Se você estiver usando Redux , você pode usar redux-persist .
Conclusão
No artigo, descobrimos as diferenças entre React e React Native, e aqui está uma breve lista de comparação:
- Para começar a trabalhar com o React, você precisa conectar a biblioteca React na página HTML. Para React Native, você precisa de um ambiente de desenvolvimento instalado como Xcode para iOS ou Android Studio para Android.
- React ajuda a criar aplicativos dinâmicos de aplicativo único de forma eficaz com DOM virtual, enquanto React Native se concentra na construção de aplicativos móveis nativos graças à tecnologia de ponte.
- A base do React é JavaScript (e um pouco do TypeScript), a base do React Native é principalmente o próprio React, mas também contém código Java, C ++, Objective-C, Objective-C ++
- React.js renderiza componentes semelhantes a html com tags como <p>, <div>, <h1>, enquanto React Native renderiza componentes nativos com tags como <view>, <text>, <image>
- Para estilizar os componentes, o React Native usa StyleSheet em vez de CSS quando o React usa CSS.
- Para animar os componentes, o React Native usa uma biblioteca especial Animated.
- Tanto o React quanto o React Native usam componentes reutilizáveis para construir interfaces de usuário complexas.
- Existem bibliotecas para Reactjs para melhorar SEO, enquanto React Native não tem nada a ver com web e SEO
- Para gerenciar a navegação entre as telas, existem react-router para React e Navigator para React Native.
- React usa armazenamento local, enquanto React Native usa AsyncStorage