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/
