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/
