¿Cuál es la diferencia entre reaccionar nativo y reaccionar?
Comencé a aprender React por curiosidad y quería saber la diferencia entre React y React Native, aunque no pude encontrar una respuesta satisfactoria en Google. React y React Native parecen tener el mismo formato. ¿Tienen una sintaxis completamente diferente?
ReactJS es una biblioteca de JavaScript, que admite tanto la interfaz web como la que se ejecuta en un servidor, para crear interfaces de usuario y aplicaciones web. Sigue el concepto de componentes reutilizables.
React Native es un marco móvil que utiliza el motor JavaScript disponible en el host, lo que le permite crear aplicaciones móviles para diferentes plataformas (iOS, Android y Windows Mobile) en JavaScript que le permite usar ReactJS para crear componentes reutilizables y comunicarse. con componentes nativos explicación adicional
Ambos siguen la extensión de sintaxis JSX de JavaScript. Que se compila con React.createElement
llamadas ocultas. JSX en profundidad
Ambos son de código abierto por Facebook.
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 podrás comprender en este vídeo , Facebook no inventó React porque entendió inmediatamente 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 la aplicación de Facebook y, afortunadamente, esto dio vida a la actualización parcial del DOM.
React nativo es solo una consecuencia de React. Es una plataforma para crear aplicaciones nativas utilizando JavaScript.
Antes de React nativo, necesitabas conocer Java o Kotlin para Android y Swift 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ás un código específico de la plataforma como resultado. Incluso puedes mezclar el código nativo con JavaScript si necesitas optimizar aún más tu aplicación.
Como dijo Olivia Bishop en el video , el 85% del código base nativo de React se puede compartir entre plataformas. Estos serían los componentes que suelen utilizar las aplicaciones 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 necesitas usarlo.
Reaccionar:
React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear 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 enriquecida 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 es indistinguible de una aplicación creada con Objective-C o Java. React Native utiliza los mismos componentes fundamentales de la interfaz de usuario que las aplicaciones normales de iOS y Android. Simplemente junte esos bloques de construcción usando JavaScript y React.
React Native te permite crear tu aplicación más rápido. En lugar de volver a compilar, puedes recargar tu aplicación al instante. Con la recarga en caliente, incluso puede ejecutar código nuevo mientras conserva el estado de su aplicación. Pruébalo: es una experiencia mágica.
React Native se combina perfectamente con componentes escritos en Objective-C, Java o Swift. Es sencillo acceder al código nativo si necesita optimizar algunos aspectos de su aplicación. También es fácil crear 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.
Básicamente, React es una biblioteca de interfaz de usuario para la vista de su aplicación web, que utiliza javascript y JSX . React nativo es una biblioteca adicional en la parte superior de React, para crear una aplicación nativa para iOS
dispositivos Android
.
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')
);
Ejemplo de código nativo de React :
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://reactjs.org/
Para obtener más información sobre React Native , visite el sitio web nativo de React a continuación:
https://reactnative.dev/
Primero, las similitudes: tanto React como React Native (RN) fueron diseñados para crear interfaces de usuario flexibles. Estos marcos tienen muchos beneficios, 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.
Reaccionar:
Facebook diseñó este marco para que sea casi como escribir JavaScript dentro de HTML/XML, razón por la cual las etiquetas se llaman " JSX " (JavaScript XML) y son similares a las familiares etiquetas tipo HTML como <div>
o <p>
. Un sello distintivo de React son las etiquetas con letras mayúsculas que indican 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 utiliza HTML y, por lo tanto, no se utiliza para el desarrollo web. Se utiliza para... ¡prácticamente todo lo demás! Desarrollo móvil (tanto iOS como Android), dispositivos inteligentes (por ejemplo, relojes, televisores), realidad aumentada, etc. Como RN no tiene DOM con el que interactuar, en lugar de usar el mismo tipo de etiquetas HTML que se usan en React, usa sus etiquetas que Luego se compilan en otros idiomas. Por ejemplo, en lugar de <div>
etiquetas, los desarrolladores de RN utilizan la etiqueta incorporada de RN <View>
, que se compila en otro código nativo (por ejemplo android.view
, en Android y UIView
en iOS).
En resumen: son muy similares (para el desarrollo de UI) pero se usan para diferentes medios.
ReactJS es un marco para construir una jerarquía de componentes de UI. Cada componente tiene estado y accesorios. Los datos fluyen desde los componentes superiores a los de bajo nivel a través de accesorios. El estado se actualiza en el componente de nivel superior mediante controladores de eventos.
React nativo utiliza el marco React para crear componentes para aplicaciones móviles. React nativo proporciona un conjunto básico de componentes para plataformas iOS y Android. Algunos de los componentes de React Native son Navigator, TabBar, Text, TextInput, View, ScrollView. Estos componentes utilizan internamente componentes nativos de iOS UIKit y Android UI. React nativo también permite NativeModules donde el código escrito en Objective-C para iOS y Java para Android se puede usar dentro de JavaScript.
Nota: React Native como marco permite el desarrollo de aplicaciones móviles con una sintaxis similar a HTML y CSS. Los componentes de React Native reemplazan efectivamente a HTML en el desarrollo nativo.