Noções básicas sobre React vs React Native

Nós, humanos, nos confundiremos com muitas coisas. A confusão pode surgir com base nas diferentes características das coisas. A maneira mais comum de se confundir com coisas diferentes são os nomes.

As pessoas saberão primeiro os nomes de uma coisa nova. Ou é outra pessoa, animal, produto, software, etc., Eles vão pesquisar com seus nomes e então ficarão sabendo de diferentes recursos, aplicativos, história, etc.,

Por que tudo isso?

Sim, as pessoas costumam se confundir com os termos (nomes) React e React Native . Se caras que não são da área de tecnologia virem os nomes React e React Native , eles assumirão o Reactive Native como uma extensão do React na maioria dos casos. Até mesmo alguns técnicos podem pensar da mesma forma se tiverem 0% de conhecimento nessas áreas.

O que são essas coisas na verdade? Por que as pessoas costumam se confundir com eles, e não com os outros?

React e React Native são duas estruturas. Os nomes parecem semelhantes com uma palavra extra entre eles. Portanto, as pessoas costumam se confundir por causa de seus nomes à primeira vista. Se você tem a mesma confusão, então você está no lugar certo para desvendar o mistério por trás deles.

Vamos descobrir.

Reagir

React é uma biblioteca JavaScript usada para construir aplicativos da web de uma única página. É uma das bibliotecas mais populares para construir interfaces de usuário (frontend) para a web. Talvez possamos dizer que é a biblioteca mais popular por enquanto. É criado e mantido pelo Facebook. Também é conhecido como ReactJS.

Como tenho experiência com o React, posso dizer que é lindo e fácil de aprender e construir. É uma biblioteca. Assim, podemos construir o que quisermos e como quisermos, utilizando seus recursos. Não há regras rígidas a serem seguidas durante o desenvolvimento de aplicativos com React. Então, teremos liberdade.

O React tem muitos recursos interessantes. Vamos dar uma olhada neles.

# 1. Componentes

No React, tudo é um componente. É como um bloco de construção do aplicativo da web. Podemos formar grandes componentes combinando os pequenos componentes. Cada componente tem seu próprio estado e controle. Os componentes controlam a interface do usuário e decidem o que mostrar aos usuários com base em seu estado.

Os componentes são tudo no React. E eles são reutilizáveis. Escreva uma vez e use-o em qualquer lugar.

Precisamos escrever componentes com o máximo cuidado. Isso torna as coisas fáceis de manter quando nosso aplicativo cresce. Se escrevermos muito código em um único componente, eventualmente será um fardo para nós mantermos. Os componentes do React devem ser pequenos e doces. Eles tornam a vida dos desenvolvedores o paraíso e também o inferno.

# 2. DOM Virtual

Você deve ter visto algo como um carregador dentro de um botão. E nas plataformas de mídia social, a contagem de curtidas aumenta assim que você pressiona. Nos primeiros dias da web, temos que recarregar tudo para obter as informações. Mas, agora, um single que precisa ser atualizado será atualizado para nós sem tocar em outras coisas. O que está acontecendo?

Como vimos antes, tudo no React é um componente. Os navegadores mantêm a estrutura DOM para os elementos de um aplicativo da web. Quando uma parte do aplicativo da web precisa ser atualizada, temos que atualizá-la usando as manipulações DOM. React faz a mesma coisa com eficiência.

O React cria um DOM virtual (cópia do DOM) para todos os seus componentes. Para atualizar algo em um aplicativo da web, o React compara o DOM real com o DOM virtual. Se houver alguma alteração, o React aciona a atualização do componente.

# 3. Fluxo de dados unilateral

Não podemos dividir o grande conjunto de componentes em componentes menores sem fluxo de dados. Deve haver alguma forma de fluxo de dados entre os componentes.

O React nos permite passar os dados de um componente para outro em uma única direção. Os dados fluem dos componentes pais para os componentes filhos. E os componentes filhos não podem atualizar os dados. Não há como enviar de volta os dados ao componente pai, pois o fluxo de dados é unidirecional.

Você pode primeiro pensar que não há fluxo de dados multidirecional. Porém, um fluxo de dados de direção única nos dá mais controle sobre o fluxo de dados de várias direções.

Visão geral

Existem muitos outros recursos como JSX, Renderização Condicional, etc ..; eles são secundários. Vimos os principais recursos da biblioteca React. Quando se trata de aplicativos do React, podemos construir quase qualquer tipo de aplicativo da web com ele. A comunidade de React é enorme. Você pode encontrar muitos pacotes para trabalhar com o React.

React Native

React Native é uma estrutura JavaScript usada para desenvolver aplicativos móveis de plataforma cruzada. Também é criado e mantido pelo Facebook.

Muitos de vocês ficarão surpresos com a afirmação acima.

Podemos criar aplicativos móveis para Android e IOS com uma única estrutura?

Se você não está acompanhando as atualizações do mundo da tecnologia, não há chance de saber disso. Sim, podemos criar aplicativos de plataforma cruzada (Android e IOS) usando React Native. E existem outras estruturas para o desenvolvimento de aplicativos de plataforma cruzada.

React Native é um dos mais populares desse tipo. Não é o mais popular devido às limitações do JavaScript em aplicativos nativos. Mas, ele brilha em suas áreas de desenvolvimento. Mesmo grandes empresas como Facebook, Instagram, Flipkart, etc., usam. Isso não significa que você deve usá-lo. Isso significa que podemos construir aplicativos de nível de produção de plataforma cruzada com React Native.

Eu usei um grupo de palavras chamado Aplicativos Nativos no parágrafo acima. O que eles são? Não é um novo tipo de aplicativo. Um aplicativo nativo é criado especificamente para uma plataforma específica. Aplicativos Android para celulares Android, aplicativos IOS para celulares iPhone, aplicativos Windows para Windows, etc.,

Qual é o problema com Native no React Native ? Chegando a isso, React Native cria um aplicativo nativo que se adapta ao Android e IOS com base em nosso desejo. Os aplicativos desenvolvidos com React Native são nativos da mesma forma que o Android Studio para Android e da mesma forma para o IOS.

Talvez os criadores o tenham chamado React Native por causa disso. Não é um fato.

Quando se trata dos recursos do React Native, há vários esperando por nós. Vamos ver alguns dos principais recursos deles.

# 1. Multiplataforma

Podemos criar aplicativos móveis para Android e IOS ao mesmo tempo com uma única base de código. Isso economiza muito tempo e dinheiro para as empresas.

# 2. Hot ou Live Reload

Se você tem experiência em aplicativos React ou React Native, provavelmente já conhece. Este recurso recarrega todo o aplicativo com novas atualizações quando alteramos o código. Não precisamos pressionar o botão recarregar toda vez que alteramos o código. Atualize o código e veja as mudanças. É isso. Não temos que esperar por nada, a menos que haja um bug.

Pode parecer um recurso secundário para você. Mas, se você está vindo do desenvolvimento para Android sem qualquer estrutura, entenderá o valor desse recurso no React Native.

# 3. Bibliotecas e comunidade da interface do usuário

Existem muitos componentes nativos integrados no React Native. Podemos usá-los diretamente, sem qualquer configuração ou instalação adicional. Os componentes nativos parecem nativos nas respectivas plataformas. A IU dos aplicativos React Native corresponde à IU nativa do IOS e também à IU nativa do Android. O React Native tem componentes semelhantes ao React.

E quando se trata de comunidade. É grande e continua aumentando. Você pode obter ajuda sem qualquer dificuldade da comunidade quando estiver preso nela.

Visão geral

Você pode encontrar muitos outros recursos do React Native na Internet. Explore-os também se estiver indo para o desenvolvimento de aplicativos móveis. Um desenvolvedor front-end também pode desenvolver aplicativos nativos usando React Native. Facilita o desenvolvimento de aplicativos móveis de plataforma cruzada.

React vs. React Native

Existem algumas semelhanças e diferenças entre React e React Native. Vamos dar uma olhada neles.

Quando se trata de aplicações do React e do React Native, eles são totalmente diferentes um do outro. Mas, quando se trata dos princípios, eles são semelhantes. Tanto o React quanto o React Native possuem componentes. E eles seguem os mesmos princípios no respectivo desenvolvimento.

Ambos usam a linguagem JavaScript para desenvolvimento. Vamos ver um aplicativo Hello, World simples em ambos.

Reagir

 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 você pode ver, ambos usam o pacote React. A sintaxe é semelhante em ambos os aplicativos, pois eles usam uma marcação especial chamada JSX. Mas quando se trata da parte de renderização, os dois usam coisas diferentes. React usa Virtual DOM e React Native usa Native API para renderização de IU.

Existem alguns pacotes externos como Redux, MobX, etc., para o gerenciamento de declarações de aplicativos React. Os mesmos pacotes também podem ser usados ​​nos aplicativos React Native.

Tanto o React quanto o React Native usam JavaScript. Portanto, podemos usar quase todos os pacotes JavaScript com os dois. Isso adiciona muitos pacotes a ambas as bibliotecas de pacotes.

React e React Native estão relacionados entre si. Porém, eles são usados ​​para finalidades diferentes.

Conclusão

React e React Native são diferentes em termos de produto final e plataformas de aplicativos. Porém, eles seguem princípios semelhantes no desenvolvimento do respectivo aplicativo. Se você puder aprender uma das duas estruturas, React ou React Native, poderá acelerar o aprendizado de outra. No entanto, o conhecimento do React é necessário para o desenvolvimento de aplicativos do React Native. Mas não é o suficiente para isso. Precisamos saber mais sobre o desenvolvimento de aplicativos nativos, pois o suporte é limitado no React Native.

Esperemos que eventualmente evolua para suporte total no futuro.

Se você deseja iniciar o desenvolvimento de aplicativos móveis ou da web, selecionar React ou React Native certamente o beneficiará no futuro. Mas não é obrigatório, no entanto.

Aprender os conceitos de React é moleza se você conhece JavaScript. Os documentos oficiais serão um ótimo recurso para você começar a usar o React ou React Native.

Feliz sabendo