Open In App

What is the difference between React Native and React?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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




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')
);


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




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>
    );
  }
}




Last Updated : 23 Apr, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads