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:

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

React Native:

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.

So basically React is UI library for the view of your web app, using javascript and JSX, React native is an extra library on the top of React, to make a native app for iOS and Android devices.

React code sample:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      

        
Hello, world!
        
It is {this.state.date.toLocaleTimeString()}.
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

React Native code sample:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      
        
          If you like React on the web, you'll like React Native.
        
        
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        
      
    );
  }
}

For more information about React, visit their official website created by facebook team:

https://facebook.github.io/react

For more information about React Native, visit React native website below:

https://facebook.github.io/react-native