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       |
|---------------------|------------------|---------------------|

Answer 2

A simple comparison should be

ReactJs

return(
    <div>
      <p>Hello World</p>
    </div>
)

React Native

return(
    <View>
      <Text>Hello World</Text>
    </View>
)

React Native don't have Html Elements like div, p, h1, etc, instead it have components that make sense for mobile.
More details at https://reactnative.dev/docs/components-and-apis

Answer 3

React Js is manipulating with HTML Dom. But React native is manipulating with mobile(iOS/android) native ui component.

Answer 4

First, the similarities: Both React & React Native (RN) were designed to create flexible user interfaces. There are tons of benefits to these frameworks, but the most fundamental take-away is that they're made for UI-development. Facebook developed RN a few years after React.

React: Facebook designed this framework to be almost like writing your JavaScript inside of your HTML/XML, which is why the tags are called "JSX" (JavaScript XML) and are similar to the familiar HTML-like tags such as <div> or <p>. A hallmark of React is the capital-letter tags which denote a custom component, such as <MyFancyNavbar />, which also exists in RN. However, React uses the DOM. The DOM exists for HTML, thus React is used for web development.

React Native: RN does not use HTML, and therefore is not used for web development. It is used for... virtually everything else! Mobile development (both iOS & Android), smart-devices (e.g. watches, TVs), augmented reality, etc. As RN has no DOM to interact with, instead of using the same sort of HTML tags used in React, it uses its own tags which are then compiled into other languages. For example, instead of <div> tags, RN developers use RN's built-in <View> tag, which compiles into other native code under the hood (e.g. android.view on Android; and UIView on iOS).

In short: they're very similar (for UI development) but used for different mediums.

Answer 5

We can't compare them exactly. There are differences in use case.

(2018 update)

---

ReactJS

React has as its main focus Web Development.

1. • React’s virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page.
2. • You can reuse code components in React, saving you a lot of time. (You can in React Native too.)
3. • As a business: The rendering of your pages completely, from the server to the browser will improve the SEO of your web app.
4. • It improves the debugging speed making your developer’s life easier.
5. • You can use hybrid mobile app development, like Cordova or Ionic, to build mobile apps with React, but is more efficiently building mobile apps with React Native from many points.

---

React Native

An extension of React, niched on Mobile Development.

1. • Its main focus is all about Mobile User Interfaces.
2. • iOS & Android are covered.
3. • Reusable React Native UI components & modules allow hybrid apps to render natively.
4. • No need to overhaul your old app. All you have to do is add React Native UI components into your existing app’s code, without having to rewrite.
5. • Doesn't use HTML to render the app. Provides alternative components that work in a similar way, so it wouldn't be hard to understand them.
6. • Because your code doesn’t get rendered in an HTML page, this also means you won’t be able to reuse any libraries you previously used with React that renders any kind of HTML, SVG or Canvas.
7. • React Native is not made from web elements and can’t be styled in the same way. Goodbye CSS Animations!

---

Hopefully I helped you :)

Answer 6

In regards to component lifecycle and all the other bells and whistles it is mostly the same.

The difference mostly is the JSX markup used. React uses one that resembles html. The other is markup that is used by react-native to display the view.