É comum que nós, seres humanos, nos confundamos com diversas coisas. Essa confusão pode surgir devido a variadas características dos objetos. Uma das formas mais corriqueiras de confusão envolve os nomes das coisas.
Geralmente, o primeiro contato com algo novo se dá por meio de seu nome. Seja uma pessoa, um animal, um produto ou um software, a busca inicial se baseia no nome, para depois explorar suas funcionalidades, aplicações e histórico.
Qual a razão para essa introdução?
É frequente a confusão entre os termos (nomes) React e React Native. Leigos que se deparam com esses nomes podem presumir, em muitos casos, que React Native seja uma extensão do React. Mesmo alguns profissionais da área podem ter a mesma impressão, caso não tenham conhecimento prévio sobre o tema.
Mas, afinal, o que são essas ferramentas? Por que a confusão é tão comum, e não com outros termos?
React e React Native são, na verdade, dois frameworks distintos. A similaridade nos nomes, com apenas uma palavra adicional, induz ao erro à primeira vista. Se você se identifica com essa confusão, chegou ao lugar certo para desvendar o mistério por trás deles.
Vamos explorar suas particularidades.
React
React é uma biblioteca JavaScript utilizada para a criação de aplicações web de página única. Destaca-se como uma das bibliotecas mais populares para o desenvolvimento de interfaces de usuário (frontend) para a web, sendo considerada por muitos como a mais relevante no momento. É desenvolvida e mantida pelo Facebook, sendo também conhecida como ReactJS.
Com experiência em React, posso afirmar que é uma ferramenta elegante e de fácil aprendizado e construção. Sendo uma biblioteca, permite construir o que se deseja, utilizando seus recursos com bastante liberdade. Não há regras rígidas a serem seguidas ao desenvolver aplicações com React, o que confere flexibilidade ao processo.
O React oferece diversos recursos interessantes. Vejamos alguns deles:
#1. Componentes
Em React, tudo é um componente. É como um bloco de construção de uma aplicação web. Componentes maiores podem ser formados pela combinação de componentes menores. Cada componente possui seu próprio estado e controle, gerenciando a interface do usuário e determinando o que será exibido aos usuários com base em seu estado.
Os componentes são a base do React e são reutilizáveis. Desenvolva uma vez e use em diferentes partes da aplicação.
É crucial que os componentes sejam criados com atenção aos detalhes. Isso facilita a manutenção à medida que a aplicação cresce. Um componente com código excessivo pode se tornar um fardo para manter. Componentes React devem ser pequenos e concisos, tornando a vida dos desenvolvedores mais fácil ou mais difícil.
#2. DOM Virtual
É comum observar elementos como um carregador dentro de um botão ou o contador de curtidas em redes sociais aumentando instantaneamente. No início da web, era necessário recarregar toda a página para obter as informações atualizadas. Hoje, atualizações pontuais ocorrem sem afetar o restante da página. Como isso é possível?
Como mencionado anteriormente, tudo em React é um componente. Os navegadores mantêm a estrutura DOM para os elementos de uma aplicação web. Quando uma parte da aplicação precisa ser atualizada, a atualização é realizada através de manipulações do DOM. O React otimiza esse processo.
O React cria um DOM virtual (uma cópia do DOM) para todos os seus componentes. Para atualizar algo em uma aplicação web, o React compara o DOM real com o DOM virtual. Se houver alguma alteração, o React dispara a atualização do componente afetado.
#3. Fluxo de Dados Unidirecional
A divisão de uma aplicação em componentes menores exige um mecanismo para o fluxo de dados entre eles.
O React permite a passagem de dados de um componente para outro em uma única direção. Os dados fluem de componentes pais para componentes filhos, e os componentes filhos não podem modificar esses dados. Não há como enviar dados de volta para o componente pai, já que o fluxo de dados é unidirecional.
A princípio, a falta de um fluxo de dados multidirecional pode parecer limitante. No entanto, o fluxo unidirecional confere maior controle sobre o fluxo de dados entre os componentes.
Visão geral
Existem outros recursos importantes como JSX e Renderização Condicional, mas eles são secundários em comparação com os recursos principais que vimos acima. Com React, é possível criar diversos tipos de aplicações web. A comunidade React é vasta, com uma grande variedade de pacotes disponíveis para auxiliar no desenvolvimento.
React Native
React Native é um framework JavaScript usado para o desenvolvimento de aplicações móveis multiplataforma. Assim como o React, é desenvolvido e mantido pelo Facebook.
Essa afirmação pode surpreender algumas pessoas.
Seria possível criar aplicações móveis para Android e iOS com um único framework?
Para quem não acompanha as novidades do mundo da tecnologia, isso pode ser uma novidade. Sim, é possível criar aplicações multiplataforma (Android e iOS) usando o React Native, e existem outros frameworks que seguem essa mesma linha.
React Native é um dos mais populares nesse segmento, embora não seja o mais utilizado devido a algumas limitações do JavaScript em aplicações nativas. No entanto, ele se destaca em várias áreas do desenvolvimento. Grandes empresas como Facebook, Instagram e Flipkart utilizam o React Native. Isso não significa que você deve usá-lo, mas indica que é possível criar aplicações de nível profissional para várias plataformas com ele.
Mencionei o termo “aplicações nativas” no parágrafo anterior. O que isso significa? Uma aplicação nativa é aquela desenvolvida especificamente para uma plataforma. Aplicações Android para celulares Android, aplicações iOS para celulares iPhone e aplicações Windows para Windows.
O que o “Native” significa no React Native? Ele cria uma aplicação nativa adaptada tanto para Android quanto para iOS, com base nas suas necessidades. As aplicações desenvolvidas com React Native são nativas, da mesma forma que as aplicações criadas com Android Studio para Android e com ferramentas de desenvolvimento nativo para iOS.
Talvez tenha sido por isso que o nome React Native foi escolhido, mas isso é apenas uma suposição.
O React Native possui diversos recursos interessantes. Vamos explorar alguns dos principais:
#1. Multiplataforma
É possível criar aplicações móveis para Android e iOS simultaneamente com uma única base de código. Isso resulta em uma grande economia de tempo e dinheiro para as empresas.
#2. Hot ou Live Reload
Se você tem experiência com aplicações React ou React Native, provavelmente já conhece esse recurso. Ele recarrega toda a aplicação com as novas atualizações ao alterar o código. Não é necessário pressionar o botão de recarregar a cada alteração. Basta atualizar o código e observar as mudanças. Simples assim, sem a necessidade de esperar a menos que haja algum problema.
Este pode parecer um recurso trivial, mas quem já desenvolveu aplicações Android sem um framework sabe o quão valioso é esse recurso no React Native.
#3. Bibliotecas de Interface do Usuário e Comunidade
O React Native possui muitos componentes nativos incorporados. Eles podem ser utilizados diretamente, sem configurações ou instalações adicionais. Esses componentes nativos se comportam como componentes nativos nas respectivas plataformas. A interface de usuário das aplicações React Native se assemelha à interface nativa do iOS e do Android. O React Native também possui componentes similares ao React.
A comunidade é grande e está em constante crescimento. Você pode obter ajuda sem dificuldades quando encontrar algum problema.
Visão geral
Existem diversos outros recursos do React Native na internet. Explore-os se você está iniciando no desenvolvimento de aplicações móveis. Desenvolvedores front-end também podem criar aplicações nativas usando React Native, o que facilita o desenvolvimento de aplicações móveis multiplataforma.
React vs. React Native
Existem semelhanças e diferenças entre React e React Native. Vamos analisar:
Em termos de aplicação final, React e React Native são bem distintos. No entanto, quando se trata de princípios, eles são similares. Tanto React quanto React Native se baseiam em componentes e seguem os mesmos princípios no desenvolvimento.
Ambos utilizam a linguagem JavaScript. Vejamos um exemplo simples de uma aplicação “Olá, Mundo” em cada um:
React
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="container">
<h1>Hello, Wolrd!</h1>
</div>
);
}
}
export default App;
React Native
import React from 'react';
import { Text, View } from 'react-native';
const App = () => {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
</View>
)
}
export default App;
Como se pode observar, ambos utilizam o pacote React. A sintaxe é semelhante, pois ambos usam uma marcação especial chamada JSX. Contudo, na parte da renderização, eles utilizam mecanismos diferentes. O React usa o Virtual DOM e o React Native usa a API nativa para a renderização da interface de usuário.
Existem pacotes externos como Redux e MobX para o gerenciamento de estados em aplicações React. Esses mesmos pacotes podem ser utilizados em aplicações React Native.
Ambos, React e React Native utilizam JavaScript. Portanto, é possível usar a maioria dos pacotes JavaScript com ambos. Isso amplia o número de pacotes disponíveis em cada biblioteca.
React e React Native estão relacionados, mas são utilizados para propósitos diferentes.
Conclusão
React e React Native são diferentes em termos de produto final e plataformas de aplicação. Contudo, seguem princípios similares no desenvolvimento de suas respectivas aplicações. Ao aprender um dos dois frameworks, seja React ou React Native, você acelera o aprendizado do outro. No entanto, o conhecimento de React é recomendado para desenvolver aplicações React Native, embora não seja suficiente. É necessário saber mais sobre desenvolvimento de aplicações nativas, pois o suporte é limitado no React Native.
Esperamos que no futuro haja um suporte completo.
Se você deseja começar no desenvolvimento de aplicações web ou móveis, escolher React ou React Native certamente será benéfico para seu futuro. No entanto, não é obrigatório.
Aprender os conceitos do React se torna muito mais fácil se você dominar JavaScript. A documentação oficial é um ótimo recurso para começar a usar React ou React Native.
Bons estudos 🙂