¿Cuál es la diferencia entre React Native y React?

730

He empezado a aprender React por curiosidad y quería saber la diferencia entre React y React Native, aunque no pude encontrar una respuesta satisfactoria usando Google. React and React Native parece tener el mismo formato. ¿Tienen una sintaxis completamente diferente?

shiva kumar
fuente
61
Todos dan una respuesta de diccionario cuando la mayoría de las personas que hacen esta pregunta solo quieren saber qué tan intercambiables son: ¿Qué tan fácil es portar su código React a React Native? ¿Necesitará reescribir el front-end de su aplicación web en un código React diferente si lo desea en un iPad? ¿Qué diferente?
Lawrence Weru
99
¿Cuáles son las principales diferencias entre ReactJS y React-Native? enlace aquí medium.com/@alexmngn/…
core114
14
La respuesta breve es que react-native construye aplicaciones móviles para iOS, Android y Windows Mobile que puede compilar y poner en las tiendas de aplicaciones para que los usuarios instalen. Reactjs es para crear páginas web para su uso en un navegador web. Ambos usan componentes reutilizables, pero la sintaxis que usa para representar elementos en los componentes (usando JSX) es diferente. Reaccionar JSX representa HTML-como componentes como <h1>, <p>, etc. Cuando reaccionan nativo renders vista de aplicación como componentes nativos <View>, <Text>, <Image>, <ScrollView>, por lo que no se puede reutilizar directamente la interfaz de usuario código de componente a menos que reutilizarlo / reemplazar todos los elementos.
Ira Herman

Respuestas:

773

ReactJS es una biblioteca de JavaScript, compatible tanto con la interfaz web como con la ejecución en un servidor, para crear interfaces de usuario y aplicaciones web.

Reaccionar nativo es un marco móvil que compila componentes de aplicaciones nativas, lo que le permite crear aplicaciones móviles nativas para diferentes plataformas (iOS, Android y Windows Mobile) en JavaScript que le permite usar ReactJS para construir sus componentes e implementa ReactJS bajo el capucha.

Ambos siguen la extensión de sintaxis JSX a JavaScript.

Ambos son de código abierto por Facebook.

Nader Dabit
fuente
3
@LemuelAdane Aquí hay un artículo de Facebook sobre cómo se hace esto: facebook.github.io/react/docs/environments.html . Aquí hay una buena introducción que explica cómo implementar esto: maketea.co.uk/2014/06/30/…
Nader Dabit
61
Entonces, si construyo una aplicación en react native, ¿alguna / toda se puede reutilizar en reactJS o viceversa?
Troy Cosentino
12
@MelAdane Es probable que el póster se refiera al uso de las bibliotecas ReactJS en un NodeJS para crear archivos preconstruidos (usando algo como Webpack) que luego se pueden servir al cliente como archivos estáticos.
Pineda
99
Si construyo una aplicación web usando react, ¿se puede usar el mismo código HTML / JS en la aplicación móvil usando react native?
Ravi Maniyar
14
@RaviManiyar NO, puede reutilizar su lógica de negocios pero no puede reutilizar sus códigos de interfaz de usuario. React Native usa componentes de interfaz de usuario nativos, mientras que React.JS usa es para web y la interfaz de usuario está construida usando componentes html y css
Chromonav
292

Aquí está el proyecto React .

En Facebook, inventaron React para que JavaScript pueda manipular el DOM del sitio web más rápido utilizando el modelo DOM virtual.

La actualización completa del DOM es más lenta en comparación con el modelo React virtual-dom , que actualiza solo partes de la página (léase: actualización parcial).

Como puede comprender en este video , Facebook no inventó React porque entendieron de inmediato que la actualización parcial sería más rápida que la convencional. Originalmente necesitaban una forma de reducir el tiempo de reconstrucción de las aplicaciones de Facebook y, afortunadamente, esto dio vida a la actualización parcial del DOM.

React native es solo una consecuencia de React. Es una plataforma para construir aplicaciones nativas usando JavaScript.

Antes de React native necesitabas saber Java para Android u Objective-C para iPhone y iPad para crear aplicaciones nativas.

Con React Native es posible imitar el comportamiento de la aplicación nativa en JavaScript y, al final, obtendrá un código específico de la plataforma como salida. Incluso puedes mezclar el código nativo con JavaScript si necesita optimizar aún más su aplicación.

Como dijo Olivia Bishop en el video , el 85% de la base de código nativo React se puede compartir entre plataformas. Estos serían los componentes que las aplicaciones suelen usar y la lógica común.

El 15% del código es específico de la plataforma. El JavaScript específico de la plataforma es lo que le da sabor a la plataforma (y marca la diferencia en la experiencia).

Lo bueno es que este código específico de la plataforma ya está escrito, por lo que solo debe usarlo.

prosti
fuente
99
Personalmente, me gusta más esta respuesta, ya que es más detallada y ofrece enlaces a más explicaciones.
Cristi Potlog el
77
Me gusta esta respuesta también. "Antes de reaccionar nativo ..." No olvides que también está Xamarin. ;)
Asp Upload
117

Reaccionar:

React es una biblioteca JavaScript declarativa, eficiente y flexible para construir interfaces de usuario.

Reaccionar nativo:

React Native te permite crear aplicaciones móviles usando solo JavaScript. Utiliza el mismo diseño que React, lo que le permite componer una interfaz de usuario móvil rica a partir de componentes declarativos.
Con React Native, no crea una "aplicación web móvil", una "aplicación HTML5" o una "aplicación híbrida". Usted crea una aplicación móvil real que no se puede distinguir de una aplicación creada con Objective-C o Java. React Native utiliza los mismos bloques de construcción de UI fundamentales que las aplicaciones normales de iOS y Android. Simplemente pone esos bloques de construcción juntos usando JavaScript y React.
React Native te permite construir tu aplicación más rápido. En lugar de volver a compilar, puede volver a cargar su aplicación al instante. Con la recarga en caliente, incluso puede ejecutar un nuevo código mientras conserva el estado de su aplicación. Pruébalo, es una experiencia mágica.
React Native se combina sin problemas con componentes escritos en Objective-C, Java o Swift. Es simple desplegar el código nativo si necesita optimizar algunos aspectos de su aplicación. También es fácil construir parte de su aplicación en React Native y parte de su aplicación usando código nativo directamente, así es como funciona la aplicación de Facebook.

Entonces, básicamente, React es una biblioteca de interfaz de usuario para la vista de su aplicación web, usando javascript y JSX , React native es una biblioteca adicional en la parte superior de React, para crear una aplicación iOSy Androiddispositivos nativos .

Ejemplo de código de reacción :

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')
);


Reaccionar muestra 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 obtener más información sobre React , visite su sitio web oficial creado por el equipo de Facebook:

https://facebook.github.io/react

Para obtener más información sobre React Native , visite el sitio web nativo de React a continuación:

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

Alireza
fuente
40
Sus ejemplos de código son útiles, pero sería mucho mejor para ver el componente MISMO implementado en cada marco
poshest
8
Su respuesta debe ser la aceptada, vine aquí para ver si React y React Native tienen la misma arquitectura y si el código se ve igual no para las definiciones de ambas bibliotecas.
Gherbi Hicham
1
Deseo agregar, que si te volvieras nativo sin procesar, literalmente tendrías solo dos líneas de código, una de las cuales se configura automáticamente para la salida (dependiendo). Sí, necesitará un formateador de fecha, pero aún así solo una línea. Me cuesta leer "Esta es la razón por la que reaccionar es increíble" cuando literalmente tiene 20 veces más líneas de código que las aplicaciones nativas reales. Dicho esto, agradezco su respuesta, e incluso disfruto de React en la web por las soluciones que proporciona en el dominio en el que es excelente. Solo desearía que más personas supieran cómo implementar sus patrones sin él, para comparar cuándo es útil frente a las pesadillas de mantenimiento
Stephen J
58

ReactJS es un marco para construir una jerarquía de componentes de la interfaz de usuario. Cada componente tiene estado y accesorios. Los datos fluyen desde la parte superior a los componentes de bajo nivel a través de accesorios. El estado se actualiza en el componente de nivel superior mediante controladores de eventos.

React Native utiliza el marco React para crear componentes para aplicaciones móviles. React native proporciona un conjunto básico de componentes para plataformas iOS y Android. Algunos de los componentes en React Native son Navigator, TabBar, Text, TextInput, View, ScrollView. Estos componentes utilizan internamente los componentes nativos de iOS UIKit y Android UI. React native también permite NativeModules donde el código escrito en ObjectiveC para iOS y Java para Android se puede usar dentro de JavaScript.

vijayst
fuente
41

Primero, las similitudes: tanto React como React Native (RN) fueron diseñados para crear interfaces de usuario flexibles. Hay muchos beneficios para estos marcos, pero la conclusión más fundamental es que están hechos para el desarrollo de UI. Facebook desarrolló RN unos años después de React.

Reaccione: Facebook diseñó este marco para que sea casi como escribir su JavaScript dentro de su HTML / XML, por lo que las etiquetas se llaman " JSX " (JavaScript XML) y son similares a las etiquetas similares a HTML familiares como <div>o <p>. Una característica distintiva de React son las etiquetas de mayúscula que denotan un componente personalizado, como <MyFancyNavbar />, que también existe en RN. Sin embargo, React usa el DOM . El DOM existe para HTML, por lo que React se utiliza para el desarrollo web.

React Native: RN no usa HTML y, por lo tanto, no se usa para el desarrollo web. Se utiliza para ... ¡prácticamente todo lo demás! Desarrollo móvil (iOS y Android), dispositivos inteligentes (p. Ej., Relojes, televisores), realidad aumentada, etc. Como RN no tiene DOM para interactuar, en lugar de usar el mismo tipo de etiquetas HTML utilizadas en React, usa las suyas propias. etiquetas que luego se compilan en otros idiomas. Por ejemplo, en lugar de <div>etiquetas, los desarrolladores de RN usan la <View>etiqueta incorporada de RN , que se compila en otro código nativo oculto (por ejemplo, android.viewen Android y UIViewen iOS).

En resumen: son muy similares (para el desarrollo de UI) pero se usan para diferentes medios.

Código ryo
fuente
Buena respuesta ... ¿Puedes elaborar un poco más y agregarle más puntos? Sería bueno para las personas que leen.
sarath
1
poner esta respuesta al principio
JerryGoyal
38
  1. React-Native es un marco para desarrollar aplicaciones de Android e iOS que comparte el 80% - 90% del código Javascript.

Mientras que React.js es una biblioteca Javascript principal para desarrollar aplicaciones web.

  1. Si bien usa etiquetas como <View>, con <Text>mucha frecuencia en React-Native, React.js usa etiquetas web html como <div> <h1> <h2>, que son solo sinónimos en el diccionario de desarrollos web / móviles.

  2. Para React.js necesita DOM para la representación de ruta de las etiquetas html, mientras que para la aplicación móvil: React-Native utiliza AppRegistry para registrar su aplicación.

Espero que esta sea una explicación fácil para las rápidas diferencias / similitudes en React.js y React-Native.

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

No podemos compararlos exactamente. Hay diferencias en el caso de uso .

(Actualización 2018)


ReactJS

React tiene como foco principal el desarrollo web.

    • El DOM virtual de React es más rápido que el modelo de actualización completa convencional , ya que el DOM virtual actualiza solo partes de la página.
    • Puede reutilizar componentes de código en React, ahorrándole mucho tiempo. (También puedes en React Native).
    • Como empresa: la representación completa de sus páginas, desde el servidor hasta el navegador, mejorará el SEO de su aplicación web .
    • Se mejora la velocidad de depuración de hacer la vida de su creador más fácil.
    • Puede usar el desarrollo de aplicaciones móviles híbridas, como Cordova o Ionic, para crear aplicaciones móviles con React, pero está creando de manera más eficiente aplicaciones móviles con React Native desde muchos puntos.

Reaccionar nativo

Una extensión de React , basada en el desarrollo móvil.

    • Su enfoque principal se centra en las interfaces de usuario móviles .
    • iOS y Android están cubiertos.
    • Los componentes y módulos reutilizables React Native UI permiten que las aplicaciones híbridas se procesen de forma nativa.
    • No es necesario revisar su aplicación anterior. Todo lo que tiene que hacer es agregar componentes React Native UI en el código de su aplicación existente , sin tener que volver a escribir.
    • No usa HTML para representar la aplicación . Proporciona componentes alternativos que funcionan de manera similar, por lo que no sería difícil entenderlos.
    • Debido a que su código no se representa en una página HTML, esto también significa que no podrá reutilizar ninguna biblioteca que haya utilizado anteriormente con React que represente cualquier tipo de HTML, SVG o Canvas.
    • React Native no está hecho de elementos web y no se puede diseñar de la misma manera. ¡Adiós animaciones CSS!

Espero haberte ayudado :)

Adrian Gheorghe
fuente
17

En un sentido simple, React and React native sigue los mismos principios de diseño, excepto en el caso del diseño de la interfaz de usuario.

  1. React native tiene un conjunto separado de etiquetas para definir la interfaz de usuario para dispositivos móviles, pero ambas usan JSX para definir componentes.
  2. La intención principal de ambos sistemas es desarrollar componentes UI reutilizables y reducir el esfuerzo de desarrollo mediante sus composiciones.
  3. Si planifica y estructura el código correctamente, puede usar la misma lógica empresarial para dispositivos móviles y web

De todos modos, es una excelente biblioteca para construir una interfaz de usuario para dispositivos móviles y web.

Manzoor Samad
fuente
16

React es una biblioteca JavaScript declarativa, eficiente y flexible para construir interfaces de usuario. Sus componentes le dicen a React lo que desea renderizar, luego React actualizará y renderizará eficientemente los componentes correctos cuando cambien sus datos. Aquí, ShoppingList es una clase de componente React, o tipo de componente React.

Una aplicación React Native es una aplicación móvil real. Con React Native, no crea una "aplicación web móvil", una "aplicación HTML5" o una "aplicación híbrida". Usted crea una aplicación móvil real que no se puede distinguir de una aplicación creada con Objective-C o Java. React Native utiliza los mismos bloques de construcción de UI fundamentales que las aplicaciones normales de iOS y Android.

Más información

Bipon Biswas
fuente
13

ReactJS es un marco central, destinado a construir un componente aislado basado en un patrón reactivo, puede pensarlo como el V de MVC, aunque me gustaría afirmar que reaccionar trae una sensación diferente, especialmente si está menos familiarizado con el concepto reactivo .

ReactNative es otra capa que debe tener un componente establecido para la plataforma Android e iOS que son comunes. Entonces, el código se ve básicamente igual que ReactJS porque es ReactJS, pero se carga de forma nativa en plataformas móviles. También puede conectar una API más compleja y relativa a la plataforma con Java / Objective-C / Swift dependiendo del sistema operativo y usarlo dentro de React.

Necronet
fuente
13

Reaccionar nativo se desarrolla principalmente en JavaScript, lo que significa que la mayor parte del código que necesita para comenzar puede compartirse entre plataformas. React Native renderizará utilizando componentes nativos. Las aplicaciones React Native se desarrollan en el lenguaje requerido por la plataforma a la que se dirige, Objective-C o Swift para iOS, Java para Android, etc. El código escrito no se comparte entre plataformas y su comportamiento varía. Tienen acceso directo a todas las funciones que ofrece la plataforma sin ninguna restricción.

React es una biblioteca de JavaScript de código abierto desarrollada por Facebook para construir interfaces de usuario. Se utiliza para manejar la capa de vista para aplicaciones web y móviles. ReactJS solía crear componentes de interfaz de usuario reutilizables. Actualmente es una de las bibliotecas de JavaScript más populares en el campo de it y tiene una base sólida y una gran comunidad detrás. Si aprende ReactJS, debe tener conocimiento de JavaScript, HTML5 y CSS.

Ramya Ram
fuente
12

React es la abstracción básica de React Native y React DOM , por lo que si vas a trabajar con React Native también necesitarás React ... lo mismo con la web, pero en lugar de React Native necesitarás React DOM.

Dado que React es la abstracción base, la sintaxis general y el flujo de trabajo son los mismos, pero los componentes que usarías son muy diferentes, por lo que deberás aprender esas diferencias, esto está en línea con React, llamado moto, que es "Aprende una vez, escribe en cualquier lugar" porque si usted sabe React (abstracción de base) simplemente podría aprender las diferencias entre plataformas sin aprender otro lenguaje de programación, sintaxis y flujo de trabajo.

Sharlon M. Balbalosa
fuente
11

React-Native es un marco, donde ReactJS es una biblioteca de JavaScript que puede usar para su sitio web.

React-native proporciona componentes básicos predeterminados (imágenes, texto), donde React proporciona un montón de componentes y los hace trabajar juntos.

iPragmatech
fuente
10

React Js es una biblioteca de Javascript donde puedes desarrollar y ejecutar aplicaciones web más rápidas usando React.

React Native te permite crear aplicaciones móviles usando solo JavaScript, se usa para el desarrollo de aplicaciones móviles. Más información aquí https://facebook.github.io/react-native/docs/getting-started.html

Nischith
fuente
9

En lo que respecta al ciclo de vida de los componentes y todas las demás características, es casi lo mismo.

La diferencia es principalmente el marcado JSX utilizado. React utiliza uno que se asemeja a html. El otro es el marcado que utiliza react-native para mostrar la vista.

Scott Blanch
fuente
8

React Native es para aplicaciones móviles, mientras que React es para sitios web (front-end). Ambos son marcos inventados por Facebook. React Native es un marco de desarrollo multiplataforma, lo que significa que se podría escribir casi el mismo código para iOS y Android y funcionaría. Personalmente, sé mucho más sobre React Native, así que lo dejaré aquí.

S. Sinha
fuente
8

React Js está manipulando con HTML Dom. Pero React native está manipulando con el componente de interfaz de usuario nativo móvil (iOS / android).

Uzama Zaid
fuente
7

ReactJS es una biblioteca de JavaScript que se utiliza para construir interfaces web. Necesitaría un paquete como webpack e intentaría instalar los módulos que necesitaría para construir su sitio web.

React Native es un marco de JavaScript y viene con todo lo que necesita para escribir aplicaciones multiplataforma (como iOS o Android). Necesitaría instalar xcode y android studio para compilar e implementar su aplicación.

A diferencia de ReactJS, React-Native no usa HTML, sino componentes similares que puede usar en iOS y Android para construir su aplicación. Estos componentes utilizan componentes nativos reales para construir las aplicaciones de ios y Android. Debido a esto, las aplicaciones React-Native se sienten reales a diferencia de otras plataformas de desarrollo híbridas. Los componentes también aumentan la reutilización de su código, ya que no necesita volver a crear la misma interfaz de usuario en iOS y Android.

Ashish Pisey
fuente
6

En términos simples, ReactJS es una biblioteca principal que devuelve algo para representar según el entorno de host (navegador, dispositivo móvil, servidor, escritorio ... etc.). Además de renderizar, también proporciona otros métodos como ganchos de ciclo de vida ...

En el navegador, utiliza otra biblioteca react-dom para representar elementos DOM. En dispositivos móviles, utiliza componentes React-Native para representar componentes de interfaz de usuario nativos específicos de la plataforma (IOS y Android). ENTONCES,

reaccionar + reaccionar-dom = desarrollo web

reaccionar + reaccionar nativo = desarrollo móvil

Rajender Dandyal
fuente
4

REACT es una biblioteca Javascript para construir aplicaciones web de interfaz grande / pequeña como Facebook.

REACT NATIVO es un marco Javascript para desarrollar aplicaciones móviles nativas en Android, IOS y Windows Phone.

Ambos son de fuente abierta por Facebook.

Daniel Agus Sidabutar
fuente
3

Aquí están las diferencias que conozco:

  1. Tienen diferentes etiquetas html: React Native está usando para manejar texto y en lugar de React.
  2. React Native está utilizando componentes táctiles en lugar de un elemento de botón normal.
  3. React Native tiene componentes ScrollView y FlatList para renderizar listas.
  4. React Native está usando AsyncStorage mientras React está usando almacenamiento local.
  5. En React los enrutadores nativos funcionan como una pila, mientras que en React, utilizamos componentes de ruta para la navegación de mapeo.
Polvoriento
fuente
3

En resumen: React.js para desarrollo web mientras React-Native para desarrollo de aplicaciones móviles

Albert A
fuente
3

Reaccionar vs reaccionar nativo

ReactJS

  • React se utiliza para crear sitios web, aplicaciones web, SPA, etc.
  • React es una biblioteca Javascript utilizada para crear una jerarquía de interfaz de usuario.
  • Es responsable de la representación de los componentes de la interfaz de usuario, se considera como una parte V del marco MVC.
  • El DOM virtual de React es más rápido que el modelo de actualización completa convencional, ya que el DOM virtual actualiza solo partes de la página, lo que disminuye el tiempo de actualización de la página.
  • React utiliza componentes como unidad básica de IU que se pueden reutilizar, lo que ahorra tiempo de codificación. Simple y fácil de aprender.

Reaccionar nativo

  • React Native es un marco que se utiliza para crear aplicaciones nativas multiplataforma. Significa que puede crear aplicaciones nativas y la misma aplicación se ejecutará en Android e iOS.
  • React native tiene todos los beneficios de ReactJS
  • React native permite a los desarrolladores crear aplicaciones nativas en un enfoque de estilo web.
  • El desarrollador front-end puede convertirse en desarrollador móvil fácilmente.
GOVINDARAJ
fuente
2

React Js : React JS es una biblioteca de JavaScript de front-end, es una biblioteca grande, no un marco

  • Sigue el enfoque basado en componentes que ayuda a construir
    componentes de IU reutilizables
    • Se utiliza para desarrollar interfaces de usuario web y móviles complejas e interactivas
    • Aunque fue de código abierto solo en 2015, cuenta con una de las comunidades más grandes que lo respaldan.

ReactNative : React Native es un marco de aplicaciones móviles de código abierto.

Pankaj Gadhiya
fuente
2

Un poco tarde para la fiesta, pero aquí hay una respuesta más completa con ejemplos:

Reaccionar

React es una biblioteca de IU basada en componentes que utiliza un "DOM sombra" para actualizar eficientemente el DOM con lo que ha cambiado en lugar de reconstruir todo el árbol DOM para cada cambio. Inicialmente se creó para aplicaciones web, pero ahora también se puede usar para dispositivos móviles y 3D / vr.

Los componentes entre React y React Native no se pueden intercambiar porque React Native se asigna a elementos nativos de la interfaz de usuario móvil, pero la lógica empresarial y el código no relacionado con el renderizado se pueden reutilizar.

ReactDOM

Inicialmente se incluyó con la biblioteca React, pero se dividió una vez que React se utilizó para otras plataformas además de la web. Sirve como punto de entrada al DOM y se usa en unión con React.

Ejemplo:

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'));

Reaccionar nativo

React Native es un marco móvil multiplataforma que utiliza React y se comunica entre Javascript y su contraparte nativa a través de un "puente". Debido a esto, gran parte de la estructuración de la interfaz de usuario tiene que ser diferente cuando se usa React Native. Por ejemplo: al crear una lista, se encontrará con problemas importantes de rendimiento si intenta utilizar mappara crear la lista en lugar de React NativeFlatList . React Native se puede utilizar para construir aplicaciones móviles IOS / Android, así como para relojes inteligentes y televisores.

Expo

Expo es la opción a la hora de iniciar una nueva aplicación React Native.

Expo es un marco y una plataforma para aplicaciones React universales. Es un conjunto de herramientas y servicios creados alrededor de React Native y plataformas nativas que lo ayudan a desarrollar, construir, implementar e iterar rápidamente en iOS, Android y aplicaciones web.

Nota: Al usar Expo, solo puede usar los Api nativos que proporcionan. Todas las bibliotecas adicionales que incluya deberán ser JavaScript puro o deberá expulsar la exposición.

El mismo ejemplo usando 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,
    },
});

Diferencias:

  • Tenga en cuenta que todo lo que está fuera del render puede permanecer igual, es por eso que el código de lógica de negocio / lógica de ciclo de vida se puede reutilizar en React y React Native
  • En React Native, todos los componentes deben importarse desde react-native u otra biblioteca de IU
  • El uso de ciertas API que se asignan a componentes nativos generalmente será más eficiente que tratar de manejar todo en el lado de JavaScript. ex. mapeo de componentes para construir una lista vs usar flatlist
  • Diferencias sutiles: cosas como onClickconvertirse onPress, React Native usa hojas de estilo para definir estilos de una manera más eficiente, y React Native usa flexbox como la estructura de diseño predeterminada para mantener las cosas receptivas.
  • Como no hay un "DOM" tradicional en React Native, solo se pueden usar bibliotecas de JavaScript puro en React y React Native

Reaccionar 360

También vale la pena mencionar que React también se puede utilizar para desarrollar aplicaciones 3D / VR. La estructura del componente es muy similar a React Native. https://facebook.github.io/react-360/

Matt Aft
fuente
1

reactjs usa un react-dom, no el dom del navegador, mientras que react native usa dom virtual, pero los dos usan la misma sintaxis, es decir, si puede usar reactjs, entonces puede usar react native.porque la mayoría de las bibliotecas que usa en reactjs están disponibles en react native como su navegación de reacción y otras bibliotecas comunes que tienen en común.

solex
fuente
La respuesta breve es que react-native construye aplicaciones móviles para iOS, Android y Windows Mobile que puede compilar y poner en las tiendas de aplicaciones para que los usuarios instalen. Reactjs es para crear páginas web para su uso en un navegador web. Ambos usan componentes reutilizables, pero la sintaxis que usa para representar elementos en los componentes (usando JSX) es diferente. Reaccionar JSX representa HTML-como componentes como <h1>, <p>, etc. Cuando reaccionan nativo renders nativas componentes de vista aplicación como <View>y <Text>.
Ira Herman
1

En respuesta al comentario de @poshest anterior, aquí hay una versión React Native del código Clock previamente publicado en React (lo siento, no pude comentar directamente en la sección, de lo contrario habría agregado el código allí):

Reaccionar muestra 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);

Tenga en cuenta que el estilo es completamente mi elección y no busca replicar directamente las etiquetas <h1>y <h2>utilizadas en el código React.

Martin N
fuente
1

Algunas diferencias son las siguientes:
1- React-Native es un marco que se utiliza para crear aplicaciones móviles, donde ReactJS es una biblioteca de JavaScript que puede utilizar para su sitio web.
2- React-Native no usa HTML para renderizar la aplicación mientras React usa.
3- React-Native se usa para desarrollar solo aplicaciones móviles, mientras que React se usa para sitios web y dispositivos móviles.

Naveen
fuente
0

Reaccionar nativo

  • Es un marco para construir aplicaciones nativas usando JavaScript.

  • Se compila en componentes de aplicaciones nativas, lo que le permite crear aplicaciones móviles nativas.

  • No es necesario revisar su aplicación anterior. Todo lo que tiene que hacer es agregar componentes React Native UI en el código de su aplicación existente, sin tener que volver a escribir.

Reaccionar js

  • Es compatible tanto con el front-end web como con la ejecución en un servidor, para construir interfaces de usuario y aplicaciones web.

  • También nos permite crear componentes de IU reutilizables.

  • Puede reutilizar componentes de código en React JS, ahorrándole mucho tiempo.

hacker de corazón
fuente
0

React.js a menudo denominado React o ReactJS es una biblioteca de JavaScript responsable de construir una jerarquía de componentes de la interfaz de usuario o, en otras palabras, responsable de la representación de los componentes de la interfaz de usuario. Proporciona soporte tanto para frontend como para servidor.

React Native es un marco para construir aplicaciones nativas usando JavaScript. Reacciona compilaciones nativas a componentes de aplicaciones nativas, lo que le permite construir aplicaciones móviles nativas. En React JS, React es la abstracción base de React DOM para la plataforma web, mientras que con React Native, React sigue siendo la abstracción base pero de React Native. Por lo tanto, la sintaxis y el flujo de trabajo siguen siendo similares, pero los componentes son diferentes.

Prakash Sharma
fuente