A little late to the party, but here's a more comprehensive answer with examples:
#React React is a component based UI library that uses a "shadow DOM" to efficiently update the DOM with what has changed instead of rebuilding the entire DOM tree for every change. It was initially built for web apps, but now can be used for mobile & 3D/vr as well.
Components between React and React Native cannot be interchanged because React Native maps to native mobile UI elements but business logic and non-render related code can be re-used.
#ReactDOM Was initially included with the React library but was split out once React was being used for other platforms than just web. It serves as the entry point to the DOM and is used in union with React.
Example:
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 is a cross-platform mobile framework that uses React and communicates between Javascript and it's native counterpart via a "bridge". Due to this, a lot of UI structuring has to be different when using React Native. For example: when building a list, you will run into major performance issues if you try to use map to build out the list instead of React Native's FlatList.
###Expo Expo is the go-to when starting a new React Native app.
Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps
Note: When using Expo, you can only use the Native Api's they provide. All additional libraries you include will need to be pure javascript or you will need to eject expo.
Same example using 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, }, });
###Differences:
- Notice that everything outside of render can remain the same, this is why business logic/lifecycle logic code can be re-used across React and React Native
- In React Native all components need to be imported from react-native or another UI library
- Using certain API's that map to native components are usually going to be more performant than trying to handle everything on the javascript side. ex. mapping components to build a list vs using flatlist
- Subtle differences: things like
onClick turn into onPress, React Native uses stylesheets to define styles in a more performant way, and React Native uses flexbox as the default layout structure to keep things responsive. - Since there is no traditional "DOM" in React Native, only pure javascript libraries can be used across both React and React Native
#React360 It's also worth mentioning that React can also be used to develop 3D/VR applications. The component structure is very similar to React Native. https://facebook.github.io/react-360/
