ReactJS Vs React Native

• 

Reactjs is originally a JavaScript Library that helps in simplifying the process of development, building web applications with high-performance, and delivering flawless UIs

ReactJs CheatSheet:

• It is basically a JavaScript library built to create user-friendly and responsive UI components
• Some important terms associated with React.js is states, props, functional programming, and component hierarchy.
• React uses JSX(Javascript XML) instead of regular JavaScript for templating. JSX allows HTML quoting and uses these HTML tag syntax to render subcomponents.
• React is all about components. Everything inside a react is a component. The concept of components will help you code more easily when working on larger scale projects.
• it uses virtual DOM. This will enhance apps performance since JavaScript virtual DOM is faster than regular DOM.
• Components concept improves the readability of the code.

Sample Code block for ReactJs

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

React Native is a well-known mobile application development framework that is used by mobile application developers in order to build cross-platform and Android applications. 

React Native CheatSheet:

• React Native is a JavaScript programming language used for cross-platform mobile application development.
• It was also developed and launched by the Facebook team in 2015
• It follows the component-based architecture and Redux for common state management as this is available in ReactJs also.
• React Native makes use of Objective-C APIs for writing iOS components and Java APIs for rendering android components.
• React Native uses JavaScript knowledge to build native mobile applications

Sample Code block for React Native

import React, { Component } from 'react'; 
import { Text, View } from 'react-native'; 
  
class ReactNative extends Component { 
  render() { 
    return ( 
      <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> 
    ); 
  } 
} 

Conclusion

React is best for building high performing, dynamic, responsive UI for web interfaces, while React Native is meant to give mobile apps a truly native feel. React.js is the soul of React Native.
React JS serves as the base of React Native and it carries all the principles and syntax of ReactJs, So the learning curve is easier and shorter.