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

I know there are already many answers to it but after reading all these I believe these are still room for explanation.

React

React = Vaila JS + ES6 + HTML + CSS = JSX

So let's talk about react first because react-native also based on react and the same concept of JS is been used there.

React is a JS library which is used to make beautiful, flexible, performant single page web applications, So now a question will appear in your mind what is single page web app.

Single-Page Application

A single-page application is an app that works inside a browser and does not require page reloading during use. You are using this type of applications every day. These are, for instance: Gmail, Google Maps, Facebook or GitHub. SPAs are all about serving an outstanding UX by trying to imitate a “natural” environment in the browser — no page reloads, no extra wait time. It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on. SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to the advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js, React.js, Vue.js. Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy, and workable fashion.

How it works

Now you know what is SPA, So as you know it's a web app so it will use HTML elements for running into the browser and also used JS for handling all the functionality related to these elements. It used Virtual Dom to render new changes in the components.

React-Native

Now you have a bit of idea about react so let's talk about react-native

React-Native = React (Vaila JS + ES6 + Bridge between JS and Native code) + Native(IOS, Android)

React-Native used to make beautiful cross-platform mobile apps(Android, IOS) using React.

How it works

In React-Native there are two threads.

1. JS Thread

2. Native Thread

JS thread performs all of the calculations and passes data to native, How?

React uses an Async Bridge to pass data to Native thread in JSON format is called react-native

So we use Native components for making a presentational view in react-native and use that bridge to communicate between these two different worlds.

Let's talk about the common and differences between these two frameworks.

|---------------------|------------------|---------------------|
|      Feature        |     React        |  React-Native       |
|---------------------|------------------|---------------------|
|    Platform         |        Web       |  Android, IOS, JS   |
|---------------------|------------------|---------------------|
|   Open Source       |        Yes       |        Yes          |
|---------------------|------------------|---------------------|
| Presentational View |   HTML + CSS     | Native Components   |
|---------------------|------------------|---------------------|
|  Arichtecure        |  Virtual Dom     | Virtual Dom + Bridge|
|---------------------|------------------|---------------------|
|   Animations        | CSS Animations   | Native Animations   | 
|---------------------|------------------|---------------------|
|     Styling         |     CSS          | JS Stylesheets      |
|---------------------|------------------|---------------------|
|  Developed By       |  Facebook        |      Facebook       |
|---------------------|------------------|---------------------|