What is the difference between React Native and React?

Question

I have started to learn React out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using

Answer 1

React Js - React JS is front-end javascript library it's large library not a framework

• It follows the component based approach which helps in building
  reusable UI components
  • It is used for developing complex and interactive web and mobile UI
  • Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.

ReactNative - React Native is an open-source mobile application framework.

Answer 2

ReactJS is a JavaScript library, supporting both front-end web and being run on a server, for building user interfaces and web applications. It follows the concept of reusable components.

React Native is a mobile framework that makes use of JavaScript engine available on the host, allowing you to build mobile applications for different platforms (iOS, Android, and Windows Mobile) in JavaScript that allows you to use ReactJS to build reusable components and communicate with native components further explanation

Both follow the JSX syntax extension to JavaScript. Which compiles to React.createElement calls under the hood. JSX in-depth

Both are open-sourced by Facebook.

Answer 3

React Native is primarily developed in JavaScript, which means that most of the code you need to get started can be shared across platforms. React Native will render using native components. React Native apps are developed in the language required by the platform it targets, Objective-C or Swift for iOS, Java for Android, etc. The code written is not shared across platforms and their behavior varies. They have direct access to all features offered by the platform without any restriction.

React is an open-source JavaScript library developed by Facebook for building user interfaces. It's used for handling view layer for web and mobile apps. ReactJS used to create reusable UI components.It is currently one of the most popular JavaScript libraries in the it field and it has strong foundation and large community behind it.If you learn ReactJS, you need to have knowledge of JavaScript, HTML5 and CSS.

Answer 4

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. React Native can be used to build out IOS/Android mobile apps, as well as for smart watches and TV's.

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/

Answer 5

Here are the differences that I know about:

1. They have different html tags: React Native is using for handling text and instead of in React.
2. React Native is using Touchable components instead of a regular button element.
3. React Native has ScrollView and FlatList components for rendering lists.
4. React Native is using AsyncStorage while React is using local storage.
5. In React Native routers function as a stack, while in React, we use Route components for mapping navigation.

Answer 6

React Native

• It is a framework for building native applications using JavaScript.

• It compiles to native app components, which makes it possible for you to build native mobile applications.

• No need to overhaul your old app. All you have to do is add React Native UI components into your existing app’s code, without having to rewrite.

React js

• It supporting both front-end web and being run on a server, for building user interfaces and web applications.

• It also allows us to create reusable UI components.

• You can reuse code components in React JS, saving you a lot of time.