What is the difference between React Native and React?

Basic Introduction of React or ReactJS: It is an open source Javascript library created by Facebook for better UI development and Efficient DOM manipulation. React have a virtual DOM concept. When any data is received from the server then this virtual DOM has modified accordingly then this updated virtual DOM is matched with Real DOM by some algorithm and only those portion of Real DOM is updated which is different from Virtual Dom.

ReactJS

  1. React is used for creating websites, web apps, SPAs etc.
  2. React is a Javascript library used for creating UI hierarchy.
  3. It is responsible for rendering of UI components, It is considered as V part Of MVC framework.
  4. React’s virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page, Thus decreasing the page refresh time.
  5. React uses components as basic unit of UI which can be reused this saves coding time.
  6. Simple and easy to learn.

React sample code

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
  
// every component is created by 
// extending the React Component class. 
class Clock extends React.Component { 
  constructor(props) {
    super(props);
    // constructor creates an instance of this class.
    this.state = {date: new Date()};
  }
  
  componentDidMount() {
  // this function is called immediately 
  // after component is mounted on DOM.
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  
  componentWillUnmount() {
  // called before component will unmount from DOM.
    clearInterval(this.timerID);
  }
  
  tick() {
  // this function is used to update the 
  // state of Clock component.
    this.setState({
      date: new Date()
    });
  }
  
  render() {
    return (
      <div>
        <h1>Today Date and Time</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
// code will not run needs specific environment setup
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

chevron_right


Basic Introduction Of React Native:
REACT Native helps you create real and exciting mobile applications using JavaScript only, which is supportable for both Android and iOS platforms devices. Just code once, and the REACT Native apps are available for both iOS and Android platforms which helps to save a lot of development time. Found great popularity created by Facebook. REACT Native, has a huge community support today. React Native is built on top of ReactJS which is a good alternative to AngularJS. Though there are some similarities and difference between React Native and ReactJS.
React Native

  1. React Native is a framework that is used to create cross-platform Native apps. It means you can create native apps and the same app will run on Android and ios.
  2. React native have all the benefits of ReactJS
  3. React native allows developers to create native apps in web-style approach.
  4. Front end developer can become mobile developer easily.

Sample React Native code

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from 'react';
import { Text, View } from 'react-native';
  
class ReactNative extends Component {
  render() {
    return (
      // it is a container, layout support with flexbox think 
      // of it like a div with a container class.
      <View>
        <Text>// A react component for displaying text.
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

chevron_right




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.

About immukul

Executive Software Developer at Cavisson Systems