Qual é a diferença entre React Native e React?

730

Comecei a aprender React por curiosidade e queria saber a diferença entre React e React Native - embora não tenha conseguido encontrar uma resposta satisfatória usando o Google. React e React Native parecem ter o mesmo formato. Eles têm sintaxe completamente diferente?

shiva kumar
fonte
61
Todo mundo está dando uma resposta no dicionário quando a maioria das pessoas que faz essa pergunta quer saber como elas são intercambiáveis: Quão fácil é portar o código do React para o React Native? Você precisará reescrever o front end do seu aplicativo da web em um código React diferente , se quiser em um iPad? diferente como?
Lawrence Weru
9
Quais são as principais diferenças entre o ReactJS e o React-Native? link aqui medium.com/@alexmngn/…
core114
14
A resposta curta é que o react-native cria aplicativos móveis para iOS, Android e Windows Mobile que você pode compilar e colocar nas lojas de aplicativos para os usuários instalarem. O Reactjs destina-se à criação de páginas da web para uso em um navegador da web. Ambos usam componentes reutilizáveis, mas a sintaxe usada para renderizar elementos nos componentes (usando JSX) é diferente. Reagir JSX torna html-como componentes como <h1>, <p>, etc. Onde reagem nativo torna componentes vista aplicativo nativo, como <View>, <Text>, <Image>, <ScrollView>, para que você não pode reutilizar diretamente seu código componente UI menos que reformular / substituir todos os elementos.
Ira Herman

Respostas:

773

O ReactJS é uma biblioteca JavaScript, compatível com a Web front-end e sendo executada em um servidor, para a construção de interfaces com o usuário e aplicativos da Web.

O React Native é uma estrutura móvel que compila componentes de aplicativos nativos, permitindo a criação de aplicativos móveis nativos para diferentes plataformas (iOS, Android e Windows Mobile) em JavaScript que permite usar o ReactJS para criar seus componentes e implementa o ReactJS sob o de capuz.

Ambos seguem a extensão de sintaxe JSX para JavaScript.

Ambos são de código aberto pelo Facebook.

Nader Dabit
fonte
3
@LemuelAdane Aqui está uma descrição do Facebook sobre como isso é feito: facebook.github.io/react/docs/environments.html . Aqui está uma introdução agradável que vai sobre como implementar isso: maketea.co.uk/2014/06/30/...
Nader dabit
61
Portanto, se eu criar um aplicativo no react nativo, tudo isso poderá ser reutilizado no reactJS ou vice-versa?
Troy Cosentino
12
@MelAdane O pôster provavelmente está se referindo ao uso de bibliotecas ReactJS em um NodeJS para criar arquivos pré-criados (usando algo como o Webpack) que podem ser veiculados no cliente como arquivos estáticos.
Pineda
9
Se eu criar um aplicativo da web usando o react, o mesmo código HTML / JS pode ser usado no aplicativo móvel usando o reagir nativo?
Ravi Maniyar
14
@RaviManiyar NÃO, você pode reutilizar sua lógica de negócios, mas não pode reutilizar seus códigos de interface do usuário. Reagir usos nativos componentes ui nativas enquanto React.JS usos é para web e ui é construída usando componentes HTML e CSS
Chromonav
292

Aqui está o projeto React .

No Facebook, eles inventaram o React para que o JavaScript possa manipular o DOM do site mais rapidamente usando o modelo DOM virtual.

A atualização completa do DOM é mais lenta em comparação com o modelo React virtual-dom , que atualiza apenas partes da página (leia-se: atualização parcial).

Como você pode entender neste vídeo , o Facebook não inventou o React porque eles entenderam imediatamente que a atualização parcial seria mais rápida que a convencional. Originalmente, eles precisavam de uma maneira de reduzir o tempo de reconstrução de aplicativos do Facebook e, felizmente, isso trouxe à vida a atualização parcial do DOM.

Reagir nativo é apenas uma consequência do React. É uma plataforma para criar aplicativos nativos usando JavaScript.

Antes de React native, você precisava conhecer Java para Android ou Objective-C para iPhone e iPad para criar aplicativos nativos.

Com o React Native, é possível imitar o comportamento do aplicativo nativo em JavaScript e, no final, você obterá o código específico da plataforma como saída. Você pode até misturar o código nativo com o JavaScript se precisar otimizar ainda mais seu aplicativo.

Como Olivia Bishop disse no vídeo , 85% da base de código nativa do React pode ser compartilhada entre plataformas. Esses seriam os componentes que os aplicativos normalmente usam e a lógica comum.

15% do código é específico da plataforma. O JavaScript específico da plataforma é o que dá sabor à plataforma (e faz a diferença na experiência).

O legal é esse código específico da plataforma - já está escrito, então você só precisa usá-lo.

prosti
fonte
9
Pessoalmente, gosto mais desta resposta, pois é mais detalhada e oferece links para mais explicações.
Cristi Potlog
7
Eu também gosto dessa resposta. "Antes de reagir ao nativo ..." Não se esqueça que também há Xamarin. ;)
Asp Upload
117

Reagir:

React é uma biblioteca JavaScript declarativa, eficiente e flexível para a construção de interfaces com o usuário.

Reagir nativo:

O React Native permite criar aplicativos móveis usando apenas JavaScript. Ele usa o mesmo design do React, permitindo que você componha uma interface do usuário móvel rica a partir de componentes declarativos.
Com o React Native, você não cria um "aplicativo da web para dispositivos móveis", um "aplicativo HTML5" ou um "aplicativo híbrido". Você cria um aplicativo móvel real que é indistinguível de um aplicativo criado usando Objective-C ou Java. O React Native usa os mesmos componentes fundamentais da interface do usuário que os aplicativos iOS e Android comuns. Você apenas junta esses componentes usando JavaScript e React.
O React Native permite que você construa seu aplicativo mais rapidamente. Em vez de recompilar, você pode recarregar seu aplicativo instantaneamente. Com o recarregamento a quente, você pode até executar um novo código, mantendo o estado do aplicativo. Experimente - é uma experiência mágica.
O React Native combina perfeitamente com os componentes escritos em Objective-C, Java ou Swift. É simples usar o código nativo se você precisar otimizar alguns aspectos do seu aplicativo. Também é fácil criar parte do seu aplicativo no React Native e parte dele usando o código nativo diretamente - é assim que o aplicativo do Facebook funciona.

Então, basicamente Reagir é a biblioteca de interface do usuário para a vista de sua aplicação web, usando javascript e JSX , Reagir nativa é uma biblioteca extra no topo da Reagir, para fazer um aplicativo nativo para iOSe Androiddispositivos.

Exemplo de código de reação :

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);


Reagir exemplo de código nativo :

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

Para mais informações sobre o React , visite o site oficial criado pela equipe do facebook:

https://facebook.github.io/react

Para obter mais informações sobre o React Native , visite o site nativo do React abaixo:

https://facebook.github.io/react-native

Alireza
fonte
40
Seus exemplos de código são úteis, mas seria muito melhor para ver o componente MESMO implementado em cada quadro
poshest
8
Sua resposta deve ser a aceita. Vim aqui para ver se o React e o React Native têm a mesma arquitetura e se o código parece o mesmo, não para as definições das duas bibliotecas.
Gherbi Hicham 28/02
1
Gostaria de acrescentar que, se você fosse nativo bruto, teria literalmente apenas duas linhas de código, uma das quais é configurada automaticamente para a tomada (dependendo). Sim, você precisará de um formatador de data, mas ainda de apenas uma linha. É difícil ler "É por isso que reagir é incrível" quando ele literalmente tem 20 vezes mais linhas de código do que os aplicativos nativos reais. Dito isso, agradeço sua resposta e até aprecio o React on web pelas soluções que fornece no domínio em que é ótimo. Eu só queria que mais pessoas soubessem como implementar seus padrões sem ele, para comparar quando é útil vs nightmaring manutenção
Stephen J
58

O ReactJS é uma estrutura para construir uma hierarquia de componentes da interface do usuário. Cada componente possui estado e adereços. Os dados fluem do topo para os componentes de baixo nível via adereços. O estado é atualizado no componente de nível superior usando manipuladores de eventos.

O React nativo usa a estrutura React para criar componentes para aplicativos móveis. O React native fornece um conjunto básico de componentes para as plataformas iOS e Android. Alguns dos componentes do React Native são Navegador, TabBar, Texto, TextInput, Exibir, ScrollView. Esses componentes usam componentes de interface do usuário nativos do iOS UIKit e Android internamente. O React native também permite NativeModules onde o código escrito no ObjectiveC para iOS e Java para Android pode ser usado no JavaScript.

vijayst
fonte
41

Primeiro, as semelhanças: o React e o React Native (RN) foram projetados para criar interfaces de usuário flexíveis. Há muitos benefícios nessas estruturas, mas a retirada mais fundamental é que elas são feitas para o desenvolvimento da interface do usuário. O Facebook desenvolveu o RN alguns anos após o React.

Reagir: o Facebook projetou essa estrutura para ser quase como escrever seu JavaScript dentro de seu HTML / XML, e é por isso que as tags são chamadas de " JSX " (JavaScript XML) e são semelhantes às tags familiares semelhantes a HTML, como <div>ou <p>. Uma marca registrada do React são as tags com letras maiúsculas que denotam um componente personalizado, como <MyFancyNavbar />também existe no RN. No entanto, o React usa o DOM . O DOM existe para HTML, portanto, o React é usado para o desenvolvimento da web.

Reagir nativo: RN não usa HTML e, portanto, não é usado para desenvolvimento web. É usado para ... praticamente todo o resto! Desenvolvimento móvel (iOS e Android), dispositivos inteligentes (por exemplo, relógios, TVs), realidade aumentada etc. Como o RN não tem DOM para interagir, em vez de usar o mesmo tipo de tags HTML usadas no React, ele usa seus próprios tags que são compiladas em outros idiomas. Por exemplo, em vez de <div>tags, os desenvolvedores do RN usam a <View>tag embutida do RN , que é compilada em outro código nativo sob o capô (por exemplo, android.viewno Android; e UIViewno iOS).

Em resumo: são muito semelhantes (para desenvolvimento da interface do usuário), mas usados ​​para diferentes mídias.

Código Ryo
fonte
Boa resposta. Você pode elaborar um pouco mais e acrescentar mais pontos. Seria bom para as pessoas que lêem.
234 sarath
1
colocar esta resposta ao topo
JerryGoyal
38
  1. O React-Native é uma estrutura para o desenvolvimento de aplicativos Android e iOS que compartilha de 80% a 90% do código Javascript.

Enquanto React.js é uma biblioteca Javascript pai para o desenvolvimento de aplicativos da Web.

  1. Enquanto você usa tags como <View>, com <Text>muita frequência no React-Native, o React.js usa tags html da web como <div> <h1> <h2>, que são apenas sinônimos no dicionário de desenvolvimentos da web / dispositivos móveis.

  2. Para o React.js, você precisa do DOM para a renderização do caminho das tags html, enquanto para o aplicativo móvel: React-Native usa o AppRegistry para registrar seu aplicativo.

Espero que seja uma explicação fácil para diferenças / semelhanças rápidas no React.js e no React-Native.

Анураг Пракаш
fonte
25

Não podemos compará-los exatamente. Existem diferenças no caso de uso .

(Atualização de 2018)


ReactJS

A React tem como foco principal o Desenvolvimento Web.

    • O DOM virtual do React é mais rápido que o modelo de atualização completa convencional , uma vez que o DOM virtual atualiza apenas partes da página.
    • Você pode reutilizar componentes de código no React, economizando muito tempo. (Você pode também usar o React Native.)
    • Como empresa: a renderização completa de suas páginas, do servidor ao navegador, melhorará o SEO do seu aplicativo da web .
    • Ele melhora a velocidade de depuração tornar a vida do seu desenvolvedor mais fácil.
    • Você pode usar o desenvolvimento de aplicativos móveis híbridos, como Cordova ou Ionic, para criar aplicativos móveis com o React, mas está construindo com mais eficiência aplicativos móveis com o React Native a partir de muitos pontos.

Reagir nativo

Uma extensão do React , focada no desenvolvimento móvel.

    • Seu foco principal é sobre interfaces de usuário móvel .
    • iOS e Android são cobertos.
    • Os componentes e módulos da UI nativa do React reutilizáveis permitem que aplicativos híbridos sejam renderizados nativamente.
    • Não há necessidade de revisar seu aplicativo antigo. Tudo o que você precisa fazer é adicionar os componentes React Native UI ao código do aplicativo existente , sem precisar reescrever.
    • Não usa HTML para renderizar o aplicativo . Fornece componentes alternativos que funcionam de maneira semelhante, para que não seja difícil entendê-los.
    • Como seu código não é renderizado em uma página HTML, isso também significa que você não poderá reutilizar nenhuma biblioteca usada anteriormente com o React que renderize qualquer tipo de HTML, SVG ou Canvas.
    • O React Native não é feito de elementos da Web e não pode ser estilizado da mesma maneira. Adeus animações CSS!

Espero ter ajudado você :)

Adrian Gheorghe
fonte
17

Em um sentido simples, o React e o React nativo seguem os mesmos princípios de design, exceto no caso do design da interface do usuário.

  1. O React native tem um conjunto separado de tags para definir a interface com o usuário para dispositivos móveis, mas ambos usam JSX para definir componentes.
  2. A intenção principal de ambos os sistemas é desenvolver componentes reutilizáveis ​​da interface do usuário e reduzir o esforço de desenvolvimento por suas composições.
  3. Se você planeja e estrutura o código corretamente, pode usar a mesma lógica de negócios para dispositivos móveis e Web

De qualquer forma, é uma excelente biblioteca para criar interface de usuário para dispositivos móveis e web.

Manzoor Samad
fonte
16

React é uma biblioteca JavaScript declarativa, eficiente e flexível para a criação de interfaces com o usuário. Seus componentes informam ao React o que você deseja renderizar; em seguida, o React atualiza e renderiza com eficiência os componentes certos quando seus dados são alterados. Aqui, ShoppingList é uma classe de componente React ou tipo de componente React.

Um aplicativo React Native é um aplicativo móvel real. Com o React Native, você não cria um "aplicativo da web para dispositivos móveis", um "aplicativo HTML5" ou um "aplicativo híbrido". Você cria um aplicativo móvel real que é indistinguível de um aplicativo criado usando Objective-C ou Java. O React Native usa os mesmos componentes fundamentais da interface do usuário que os aplicativos iOS e Android comuns.

Mais informações

Bipon Biswas
fonte
13

O ReactJS é uma estrutura principal, criada para criar componentes isolados com base no padrão reativo. Você pode pensar nisso como o V do MVC, embora eu gostaria de afirmar que o reagir traz uma sensação diferente, especialmente se você estiver menos familiarizado com o conceito reativo .

ReactNative é outra camada que deve ter um componente definido para a plataforma Android e iOS que é comum. Portanto, o código parece basicamente o mesmo que o ReactJS porque é o ReactJS, mas carrega nativamente em plataformas móveis. Você também pode conectar uma API relativa à plataforma mais complexa e complexa com Java / Objective-C / Swift, dependendo do SO e usá-la no React.

Necronet
fonte
13

O React Native é desenvolvido principalmente em JavaScript, o que significa que a maior parte do código que você precisa para começar pode ser compartilhada entre plataformas. O React Native renderizará usando componentes nativos. Os aplicativos React Native são desenvolvidos no idioma exigido pela plataforma destinada, Objective-C ou Swift para iOS, Java para Android etc. O código escrito não é compartilhado entre plataformas e seu comportamento varia. Eles têm acesso direto a todos os recursos oferecidos pela plataforma, sem nenhuma restrição.

React é uma biblioteca JavaScript de código aberto desenvolvida pelo Facebook para criar interfaces de usuário. É usado para manipular a camada de visualização de aplicativos da Web e móveis. O ReactJS é usado para criar componentes de interface do usuário reutilizáveis. Atualmente, é uma das bibliotecas JavaScript mais populares no campo, e possui uma base sólida e uma grande comunidade por trás. Se você aprender o ReactJS, precisará ter conhecimento de JavaScript, HTML5 e CSS.

Ramya Ram
fonte
12

React é a abstração básica do React Native e React DOM , portanto, se você trabalhar com o React Native, também precisará do React ... o mesmo com a web, mas, em vez do React Native, será necessário o React DOM.

Como o React é a abstração básica, a sintaxe geral e o fluxo de trabalho são os mesmos, mas os componentes que você usaria são muito diferentes. Portanto, você precisará aprender essas diferenças. você conhece o React (abstração de base), você pode simplesmente aprender as diferenças entre plataformas sem aprender outra linguagem de programação, sintaxe e fluxo de trabalho.

Sharlon M. Balbalosa
fonte
11

O React-Native é uma estrutura em que o ReactJS é uma biblioteca javascript que você pode usar para o seu site.

O React-native fornece componentes principais padrão (imagens, texto), onde o React fornece vários componentes e os faz trabalhar juntos.

iPragmatech
fonte
10

O React Js é uma biblioteca Javascript onde você pode desenvolver e executar aplicativos da Web mais rápidos usando o React.

O React Native permite criar aplicativos móveis usando apenas JavaScript; é usado para o desenvolvimento de aplicativos móveis. mais informações aqui https://facebook.github.io/react-native/docs/getting-started.html

Nischith
fonte
9

Em relação ao ciclo de vida do componente e todos os outros sinos e assobios, é basicamente o mesmo.

A diferença é principalmente a marcação JSX usada. React usa um que se assemelha a html. A outra é a marcação usada pelo react-native para exibir a exibição.

Scott Blanch
fonte
8

O React Native é para aplicativos móveis, enquanto o React é para sites (front-end). Ambos são estruturas inventadas pelo Facebook. O React Native é uma estrutura de desenvolvimento de plataforma cruzada, o que significa que se pode escrever quase o mesmo código para o IOS e o Android e funcionaria. Eu, pessoalmente, sei muito mais sobre o React Native, por isso vou deixar por aqui.

S. Sinha
fonte
8

O React Js está manipulando com HTML Dom. Mas o React native está manipulando com o componente da interface do usuário nativa móvel (iOS / android).

Uzama Zaid
fonte
7

ReactJS é uma biblioteca javascript usada para criar interfaces da web. Você precisaria de um empacotador como o webpack e tentaria instalar os módulos necessários para criar seu site.

O React Native é uma estrutura javascript e vem com tudo o que você precisa para criar aplicativos multiplataforma (como iOS ou Android). Você precisaria do xcode e do android studio instalados para criar e implantar seu aplicativo.

Ao contrário do ReactJS, o React-Native não usa HTML, mas componentes semelhantes que você pode usar no ios e no android para criar seu aplicativo. Esses componentes usam componentes nativos reais para criar os aplicativos iOS e Android. Devido a isso, os aplicativos React-Native parecem reais, diferentemente de outras plataformas de desenvolvimento híbridas. Os componentes também aumentam a capacidade de reutilização do seu código, pois você não precisa criar a mesma interface de usuário novamente no ios e no android.

Ashish Pisey
fonte
6

Em termos simples, o ReactJS é uma biblioteca pai que retorna algo para renderizar de acordo com o ambiente host (navegador, celular, servidor, área de trabalho etc.). Além de renderizar, também fornece outros métodos, como ganchos de ciclo de vida ... etc.

No navegador, ele usa outra biblioteca react-dom para renderizar elementos DOM. No celular, ele usa componentes React-Native para renderizar componentes da interface de usuário nativos específicos da plataforma (IOS e Android). TÃO,

react + react-dom = desenvolvimento da web

react + react-native = desenvolvimento móvel

Rajender Dandyal
fonte
4

REACT é uma biblioteca Javascript para criar aplicativos da web de interfaces grandes / pequenas, como o Facebook.

REACT NATIVE é uma estrutura Javascript para desenvolver aplicativos móveis nativos no Android, IOS e Windows Phone.

Ambos são de código aberto pelo Facebook.

Daniel Agus Sidabutar
fonte
3

Aqui estão as diferenças que eu conheço:

  1. Eles possuem tags html diferentes: o React Native está sendo usado para manipular texto e não no React.
  2. O React Native está usando componentes Tocáveis ​​em vez de um elemento de botão comum.
  3. O React Native possui componentes ScrollView e FlatList para renderizar listas.
  4. O React Native está usando o AsyncStorage enquanto o React está usando o armazenamento local.
  5. No roteadores React Native, funcionam como uma pilha, enquanto no React, usamos componentes de rota para mapear a navegação.
Poeirento
fonte
3

Em resumo: React.js para desenvolvimento na Web enquanto React-Native para desenvolvimento de aplicativos para dispositivos móveis

Albert A
fonte
3

React vs React Native

ReactJS

  • O React é usado para criar sites, aplicativos da web, SPAs etc.
  • React é uma biblioteca Javascript usada para criar hierarquia de UI.
  • É responsável pela renderização dos componentes da interface do usuário. É considerado parte V da estrutura do MVC.
  • O DOM virtual do React é mais rápido que o modelo de atualização completa convencional, uma vez que o DOM virtual atualiza apenas partes da página, diminuindo o tempo de atualização da página.
  • O React usa componentes como unidade básica da interface do usuário, que pode ser reutilizada, economizando tempo de codificação. Simples e fácil de aprender.

Reagir nativo

  • O React Native é uma estrutura usada para criar aplicativos nativos entre plataformas. Isso significa que você pode criar aplicativos nativos e o mesmo aplicativo será executado no Android e no iOS.
  • O React native tem todos os benefícios do ReactJS
  • React native permite que os desenvolvedores criem aplicativos nativos na abordagem no estilo da Web.
  • O desenvolvedor front-end pode se tornar desenvolvedor móvel facilmente.
GOVINDARAJ
fonte
2

React Js - React JS é uma biblioteca javascript front-end, é uma biblioteca grande, não um framework

  • Segue a abordagem baseada em componentes que ajuda na construção de
    componentes reutilizáveis ​​da interface do usuário
    • É usado para o desenvolvimento de interfaces web e móveis complexas e interativas
    • Embora tenha sido de código aberto apenas em 2015, tem uma das maiores comunidades que o apoia.

ReactNative - O React Native é uma estrutura de aplicativos móveis de código aberto.

Pankaj Gadhiya
fonte
2

Um pouco atrasado para a festa, mas aqui está uma resposta mais abrangente com exemplos:

Reagir

React é uma biblioteca de interface do usuário baseada em componente que usa um "DOM de sombra" para atualizar eficientemente o DOM com o que foi alterado, em vez de reconstruir toda a árvore do DOM para cada alteração. Foi desenvolvido inicialmente para aplicativos da Web, mas agora também pode ser usado para dispositivos móveis e 3D / vr.

Os componentes entre o React e o React Native não podem ser trocados porque o React Native mapeia para elementos nativos da interface do usuário móvel, mas a lógica comercial e o código relacionado à não renderização podem ser reutilizados.

ReactDOM

Foi inicialmente incluído na biblioteca do React, mas foi dividido quando o React estava sendo usado para outras plataformas além da web. Ele serve como ponto de entrada para o DOM e é usado em união com o React.

Exemplo:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <div>
                {this.state.data.map((data) => (
                    <p key={data.id}>{data.label}</p>
                ))}
                <button onClick={this.clearData}>
                    Clear list
                </button>
            </div>
        );
    }

}

ReactDOM.render(App, document.getElementById('app'));

Reagir nativo

O React Native é uma estrutura móvel multiplataforma que usa o React e se comunica entre o Javascript e seu equivalente nativo por meio de uma "ponte". Devido a isso, muita estrutura da interface do usuário precisa ser diferente ao usar o React Native. Por exemplo: ao criar uma lista, você terá grandes problemas de desempenho se tentar mapcriar a lista em vez de React Native FlatList. O React Native pode ser usado para criar aplicativos móveis IOS / Android, bem como para relógios inteligentes e TVs.

Expo

A Expo é o principal objetivo ao iniciar um novo aplicativo React Native.

Expo é uma estrutura e uma plataforma para aplicações universais do React. É um conjunto de ferramentas e serviços criados em torno do React Native e plataformas nativas que ajudam a desenvolver, criar, implantar e iterar rapidamente em aplicativos iOS, Android e Web

Nota: Ao usar o Expo, você pode usar apenas as APIs nativas fornecidas por eles. Todas as bibliotecas adicionais que você incluir precisarão ser javascript puro ou será necessário ejetar expo.

Mesmo exemplo usando o React Native:

import React, { Component } from 'react';
import { Flatlist, View, Text, StyleSheet } from 'react-native';

export default class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
                />
                <Button title="Clear list" onPress={this.clearData}></Button>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

Diferenças:

  • Observe que tudo fora da renderização pode permanecer o mesmo, é por isso que a lógica de negócios / código de lógica do ciclo de vida pode ser reutilizada no React e no React Native
  • No React Native, todos os componentes precisam ser importados do react-native ou de outra biblioteca da UI
  • Usar determinadas APIs que mapeiam para componentes nativos geralmente terá mais desempenho do que tentar lidar com tudo no lado do javascript. ex. componentes de mapeamento para criar uma lista versus usar a lista plana
  • Diferenças sutis: coisas como onClicktransformar onPress, o React Native usa folhas de estilo para definir estilos de uma maneira mais eficiente e o React Native usa flexbox como a estrutura de layout padrão para manter as coisas responsivas.
  • Como não há "DOM" tradicional no React Native, apenas as bibliotecas javascript puras podem ser usadas no React e no React Native

React360

Também vale mencionar que o React também pode ser usado para desenvolver aplicativos 3D / VR. A estrutura do componente é muito semelhante ao React Native. https://facebook.github.io/react-360/

Matt Aft
fonte
1

O reactjs usa um react-dom e não o navegador, enquanto o react native usa o dom virtual, mas os dois usam a mesma sintaxe, ou seja, se você pode usar o reactjs, pode usar o react native. porque a maioria das bibliotecas que você usa no reactjs está disponível no react native como a navegação de reação e outras bibliotecas comuns que eles têm em comum.

solex
fonte
A resposta curta é que o react-native cria aplicativos móveis para iOS, Android e Windows Mobile que você pode compilar e colocar nas lojas de aplicativos para os usuários instalarem. O Reactjs destina-se à criação de páginas da web para uso em um navegador da web. Ambos usam componentes reutilizáveis, mas a sintaxe usada para renderizar elementos nos componentes (usando JSX) é diferente. Reagir JSX torna html-como componentes como <h1>, <p>, etc. Onde reagem nativo torna componentes vista aplicativo nativo como <View>e <Text>.
Ira Herman
1

Em resposta ao comentário do @poshest acima, aqui está uma versão nativa do React do código do Clock publicada anteriormente no React (desculpe, não foi possível comentar diretamente na seção, caso contrário, eu teria adicionado o código):

Reagir amostra de código nativo

import { AppRegistry } from 'react-native';
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.sectionTitle}>Hello, world!</Text>
        <Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: 'black',
    alignSelf: 'center',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: 'darkgrey',
    alignSelf: 'center',
  },
});

AppRegistry.registerComponent("clock", () => Clock);

Observe que o estilo é totalmente minha escolha e não procura replicar diretamente as tags <h1>e <h2>usadas no código React.

Martin N
fonte
1

Algumas diferenças são as seguintes:
1- O React-Native é uma estrutura usada para criar aplicativos móveis, onde o ReactJS é uma biblioteca javascript que você pode usar no seu site.
2- O React-Native não usa HTML para renderizar o aplicativo enquanto o React o usa.
3- React-Native usado para desenvolver apenas aplicativos móveis, enquanto o React é usado no site e no celular.

Naveen
fonte
0

Reagir nativo

  • É uma estrutura para criar aplicativos nativos usando JavaScript.

  • Ele é compilado com componentes de aplicativos nativos, o que possibilita a criação de aplicativos móveis nativos.

  • Não há necessidade de revisar seu aplicativo antigo. Tudo o que você precisa fazer é adicionar os componentes React Native UI ao código do aplicativo existente, sem precisar reescrever.

React js

  • Ele suporta a Web front-end e é executado em um servidor, para a criação de interfaces com o usuário e aplicativos da Web.

  • Também nos permite criar componentes reutilizáveis ​​da interface do usuário.

  • Você pode reutilizar componentes de código no React JS, economizando muito tempo.

hacker de coração
fonte
0

O React.js geralmente chamado de React ou ReactJS é uma biblioteca JavaScript responsável pela construção de uma hierarquia de componentes da interface do usuário ou, por outras palavras, responsável pela renderização dos componentes da interface do usuário. Ele fornece suporte para front-end e servidor.

O React Native é uma estrutura para criar aplicativos nativos usando JavaScript. Reagir compilações nativas a componentes de aplicativos nativos, o que possibilita a criação de aplicativos móveis nativos. No React JS, o React é a abstração básica do React DOM para a plataforma da Web, enquanto que com o React Native, o React ainda é a abstração básica, mas o React Native. Portanto, a sintaxe e o fluxo de trabalho permanecem semelhantes, mas os componentes são diferentes.

Prakash Sharma
fonte