[vc_row][vc_column][vc_column_text]Antes de construir um projeto utilizando o ecossistema React.js, os desenvolvedores, gerentes de projeto e proprietários de produto precisam conseguir diferenciar seus elementos. O primeiro e principal aspecto para esclarecer os conceitos é diferenciar React Native e React. Essas duas bibliotecas representam lados diferentes do ecossistema React e por consequência suas funcionalidades são diferentes. Portanto, confundir os dois tornará sua pesquisa e desenvolvimento mais lenta.

[adrotate banner=”4″][/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]O que é o ReactJS[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]React.js é uma biblioteca de desenvolvimento web front-end criada pelo Facebook e tem o objetivo de simplificar o processo de construção de interfaces complexas e responsivas. O Facebook tinha o objetivo de construir interfaces escalonáveis rápidas, e o React.js foi a maneira de simplificar o desenvolvimento web utilizando JavaScript.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]O React js permite que os desenvolvedores criem componentes de interface por meio do Document Object Model virtual (representação da árvore de elementos do html). O DOM virtual não precisa de uma resposta do navegador, é por isso que o código é renderizado mais rápido. Para essa tarefa o React utiliza o JSX que é uma combinação de JavaScript e HTML.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]Outra característica do React.js é o uso da programação declarativa, que é o oposto da programação imperativa. Quando você está construindo o front-end de uma aplicação no React, você só precisa escrever o nome do elemento, e o React.js usará automaticamente a sua interface para renderizar o elemento/componente. Portanto, o código é mais curto e leve, você não tem que especificar formas de como e onde o browser deverá renderizar seu componente, como acontece na manipulação de dom manual direto pelo Browser.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]O que é o React Native[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]O React Native é um biblioteca do React.js, adaptado para construir aplicativos móveis, onde permite que os desenvolvedores usem JavaScript, uma linguagem muito utilizada para o desenvolvimento web, também sendo usada para desenvolver aplicativos que possuem uma interface nativa para cada plataforma Android e iOS.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]React Native e ReactJS são a mesma coisa? Ambos possuem princípios estruturais, algoritmos de manipulação do DOM semelhantes, mas não idênticos.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]O objetivo da biblioteca é permitir a construção de interfaces de aplicativos móveis nativos. Inicialmente, o código é escrito em JavaScript (JSX). A principal tarefa do React Native é converter esse código da “web” em linguagens de uso geral. Para um aplicativo iOS (Objective-C), enquanto para Android é convertido para Java. A experiência do usuário é inteiramente nativa, o usuário não será capaz de dizer que um código JavaScript foi usado para desenvolver o aplicativo.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]Comparando as funcionalidades[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]DOM[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]Tanto no React.js quanto no React Native o DOM atualiza apenas os componentes que foram alterados. O DOM compara a versão anterior do documento com uma nova, detecta diferenças e faz alterações especificas onde existiu a alteração. Essa estratégia é mais rápida do que alterar uma árvore do HTML por inteiro. React usa a combinação de JavaScript e HTML para criar e renderizar código front-end.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]O React Native funciona com princípios semelhantes de funcionalidade do DOM no ReactJs. Mas, ele não usa HTML para renderização. Em vez disso, ele usa componentes nativos do Android e iOS. Estruturalmente, esses componentes são semelhantes ao HTML, você pode utilizar as tags <Text> para representação de textos, como se fossem o <p> do html, ou <View> para representar uma <div>. Essa mudança é importante para o desempenho do aplicativo: o uso de componentes nativos torna o sistema final mais responsivo e fluído, dando a sensação ao usuário de estar navegando em um aplicativo escrito em Objective-C, Swift, Java ou Kotlin.

[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]Animações[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]No React.js, as animações são feitas com componentes externos ou propriedades do css3. Os desenvolvedores podem baixar módulos que disponibilizam formas fáceis de manipular elementos. Os mais comuns são React Animations, React Transition Group, ReactReveal.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]No React Native, você não trabalha com animações CSS. O framework oferece suas próprias ferramentas personalizadas para isso (Animation API). Você pode baixar pacotes para configurar ações aos gestos do usuário, criar animações em camadas e habilitar a experiência do usuário para ser nativa e animada. As principais bibliotecas de animação são react-native-animatable,  react-native-motion, react-native-reanimated, Lottie e a própria Animated API.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]Ferramenta para desenvolvedores[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]O React.js é conhecido por possuir um rico ecossistema – o Facebook lança muitas ferramentas oficiais e a comunidade de usuários também contribui ativamente. Algumas ferramentas de desenvolvimento vêm junto com react logo após a instalação. Tecnicamente, você consegue desenvolver sua aplicação apenas usando o React Developer Tools.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]O React Native também oferece suporte às ferramentas React JS. Se você tem experiência com react, se sentirá familiarizado com o processo de desenvolvimento do React Native, porque já viu muitas ferramentas antes. Você pode usar as ferramentas de desenvolvimento do Chrome e o Redux. O Inspector é diferente do React.js, ainda não é tão maduro. Mesmo assim, a maioria das ferramentas React.js pode ser perfeitamente integrada ao Native também. Como dica para o debug no react-native você pode utilizar o Reactotron ou Flipper[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]Navegação/Rotas[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]Ambos React.js e Native suportam bibliotecas de navegação. Para o React.js, a melhor solução é o react-router, uma biblioteca que é utilizada para fazer o link e navegação entre as páginas. Para o React Native, a melhor alternativa é a utilização do react-navigation, uma biblioteca poderosa que permite que os desenvolvedores desenhem os cenários mais complexos em aplicativos, como criação de abas, rotas aninhadas e Drawer navigaton.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]Código específico da plataforma[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]Com o React.js o front-end  pode ser adaptado para desktops, dispositivos móveis e tablets. Você pode usar bibliotecas react-desktop se estiver desenvolvendo projetos para PCs, e também pode adaptar seu site a diferentes dimensões de tela, sistemas operacionais usando media-queries.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]No React Native, ajustar a interface para o layout responder 100% ao protótipo nas duas plataformas é definitivamente o principal desafio. Se você pretende construir um aplicativo nativo, não um híbrido, o conselho padrão seria escrever um código diferente nas linguagens nativas de cada plataforma (Kotlin para Android, Swift para iOS). O React Native não segue esta abordagem demorada e oferece a mesma base de código para ambas as plataformas.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]Mas é permitido ao desenvolvedor escrever conjuntos de códigos separados para cada plataforma e executá-los em diferentes momentos. Algumas partes do seu código podem ser comuns para iOS e Android, mas recursos específicos das API´s nativas de cada plataforma, por exemplo, podem ser escritos separadamente.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]Publicação[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]Publicar uma aplicação com React Js, é talvez a coisa mais fácil do mundo. Lembra quando você começou a desenvolver e criava uma página HTML e só fazia o upload dela no seu servidor? Então, com o react é a mesma coisa, a diferença é que agora você vai subir um bundle que é todo seu código javascript e jsx compilado e minificado para o seu servidor, basta rodar um npm build ou yarn build no cenário mais básico que podemos imaginar que sua aplicação vai estar pronta para ir para web.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]Com o react native a conversa é mais diferente, existem várias politicas de segurança e privacidade que a Play Store e Apple Store implementam para garantir a segurança dos usuários e também melhorar a qualidade dos apps nas lojas, o processo de build e deploy é mais complexo pois existem várias etapas a ser seguidas antes de ele ser disponibilizado de fato. Porém, existem soluções que auxiliam o desenvolvedor nesse processo quando o app já foi publicado pela primeira vez, como é o caso do CodePush e OTA do Expo.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_top:20;padding_bottom:20″][vc_column][tm_heading tag=”h2″ custom_google_font=”” font_size=”lg:24″]Conclusão[/tm_heading][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]Então, React e React Native são a mesma coisa? Acredito que agora você consiga entender as principais diferenças entre os dois e entender as respectivas vantagens e desvantagens. Vamos resumir a diferença entre ReactJS e React Native em um breve checklist.[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]

• ReactJS é uma biblioteca de desenvolvimento web front-end; Native é uma estrutura de desenvolvimento de aplicativo móvel nativo.
• Uma biblioteca reúne conjuntos de componentes, mas não oferece uma estrutura clara, enquanto um framework fornece a espinha dorsal do aplicativo;
• ReactJS renderiza o código do navegador em um DOM virtual; React Native usa ferramentas nativas para renderizar os componentes em (Java, Objective-C);
• No ReactJS, os aplicativos da web são escritos com JSX – uma combinação de JS e HTML. O React Native não usa HMTL – funciona como um componente nativo.
• React JS usa CSS para estilizar aplicativos, desenvolver animações, etc. React Native usa alguns componentes CSS (Flexbox, por exemplo), mas também oferece suas próprias APIs personalizadas.
• As ferramentas de desenvolvimento, usadas pelo React Native e React JS, podem ser utilizadas em ambas as ferramentas. Os desenvolvedores podem trabalhar na web e em projetos móveis no mesmo ecossistema.

[/vc_column_text][/vc_column][/vc_row][vc_row lg_spacing=”padding_bottom:20″][vc_column][vc_column_text]Se você está considerando construir um aplicativo móvel para seu projeto da web, considere escolher React Js e React Native como os dois componentes principais para sua stack de desenvolvimento.

Leia também:

Introdução à Renderização Web

[adrotate banner=”5″][/vc_column_text][/vc_column][/vc_row]