Un peu tard pour la fête, mais voici une réponse plus complète avec des exemples:
Réagir
React est une bibliothèque d'interface utilisateur basée sur des composants qui utilise un "DOM fantôme" pour mettre à jour efficacement le DOM avec ce qui a changé au lieu de reconstruire l'arborescence DOM entière pour chaque changement. Il a été initialement conçu pour les applications Web, mais peut désormais être utilisé pour les mobiles et 3D / VR.
Les composants entre React et React Native ne peuvent pas être échangés car React Native est mappé à des éléments d'interface utilisateur mobile natifs, mais la logique métier et le code non lié au rendu peuvent être réutilisés.
ReactDOM
Initialement inclus dans la bibliothèque React, il a été fractionné une fois que React était utilisé pour d'autres plates-formes que le Web. Il sert de point d'entrée au DOM et est utilisé en association avec React.
Exemple:
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'));
React Native
React Native est un framework mobile multiplateforme qui utilise React et communique entre Javascript et son homologue natif via un "pont". Pour cette raison, beaucoup de structuration de l'interface utilisateur doit être différente lors de l'utilisation de React Native. Par exemple: lors de la création d'une liste, vous rencontrerez des problèmes de performances majeurs si vous essayez d'utiliser mappour construire la liste au lieu de React NativeFlatList . React Native peut être utilisé pour créer des applications mobiles IOS / Android, ainsi que pour des montres intelligentes et des téléviseurs.
Expo
Expo est le go-to lors du démarrage d'une nouvelle application React Native.
Expo est un cadre et une plate-forme pour les applications React universelles. Il s'agit d'un ensemble d'outils et de services construits autour de React Native et de plateformes natives qui vous aident à développer, créer, déployer et itérer rapidement sur iOS, Android et les applications Web.
Remarque: Lorsque vous utilisez Expo, vous ne pouvez utiliser que les API natives qu'ils fournissent. Toutes les bibliothèques supplémentaires que vous incluez devront être en pur javascript ou vous devrez éjecter l'expo.
Même exemple avec 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,
},
});
Différences:
- Notez que tout ce qui est en dehors du rendu peut rester le même, c'est pourquoi le code logique métier / cycle de vie peut être réutilisé dans React et React Native
- Dans React Native, tous les composants doivent être importés à partir de React-Native ou d'une autre bibliothèque d'interface utilisateur
- L'utilisation de certaines API qui mappent sur des composants natifs sera généralement plus performante que d'essayer de tout gérer du côté javascript. ex. mappage de composants pour créer une liste vs utilisation d'une liste plate
- Différences subtiles: des choses comme se
onClicktransformer enonPress , React Native utilise des feuilles de style pour définir les styles d'une manière plus performante, et React Native utilise flexbox comme structure de mise en page par défaut pour garder les choses réactives.
- Puisqu'il n'y a pas de "DOM" traditionnel dans React Native, seules les bibliothèques javascript pures peuvent être utilisées à la fois dans React et React Native
React360
Il convient également de mentionner que React peut également être utilisé pour développer des applications 3D / VR. La structure des composants est très similaire à React Native. https://facebook.github.io/react-360/
