React-Native Vs React-JS

Jagroop Singh - Apr 10 '22 - - Dev Community

As we all know that React-Native and ReactJS are part of Facebook and React-Native is used for Hybrid-App Development and ReactJS is used for Web-App Development.
Also, React-Native is same as ReactJS. But despite being similar, there are some dissimilarities as well that every Developer should know.
So let's discuss these :

  • React-Native is a framework, while ReactJS is a JavaScript Library.

  • ReactJS renders HTML tags in its user interface. React components can include simple HTML tags.But React Native renders JSX in its user interface. React Native supports specific JSX tags which are used.

For Example :
In ReactJS :

<div>
 <p>Happy Coding !!</p>
</div>
Enter fullscreen mode Exit fullscreen mode

In React-Native :

<View>
<Text> Happy Coding !!</View>
</View>
Enter fullscreen mode Exit fullscreen mode
  • In ReactJS, we can use CSS, SCSS, Bootstrap etc. but it React-Native we use StyleSheet Object like :
const style = StyleSheet.create({
 color :"orange",
 height: 100%,
})
Enter fullscreen mode Exit fullscreen mode
  • ReactJS uses Virtual DOM, a tool that allows for easy interaction with DOM elements. But React-Native uses its API to render code for mobile applications.

  • ReactJS has comparatively higher security than React-Native. One of the reason is React-Native uses Android Shared Preferences for Android (which is not secure by default).

  • Companies that use ReactJS are Facebook, Netflix, Medium, Udemy etc. and companies that uses React-Native are Uber, Shopify, Instagram, Walmart etc.

  • In precised form :
    ReactJS :

React = Vanilla JS + ES6 + HTML + CSS = JSX = Web Apps(Front end) 
Enter fullscreen mode Exit fullscreen mode

React-Native :

React-Native = React (Vanilla JS + ES6 + Bridge between JS and Native code) + Native(iOS, Android) = Mobile Apps(Android, iOS, also supported web but have some limitations)

Enter fullscreen mode Exit fullscreen mode
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .