ready to build your app

The Difference Between React.js, React Native and React VR

Do you know what JavaScript and Facebook have in common? Something called React, a JavaScript library, developed and introduced by Facebook, which is now one of the most widely used JS tools. What do web applications, mobile apps and virtual reality apps have in common? Right, React again it is. With various React versions we can build all of those apps. What are these versions of React? React.js, React Native and React VR.

As you may have guessed, we will be talking about React libraries. It is often the case that people have heard about the popularity of React (used by Instagram, Netflix, etc.) but confuse its various libraries/frameworks designed for different tasks. So a little clarity with our help won’t hurt.

So we’ll go through each of them briefly with an additional discussion of the business benefits of working with them.

React.js

In the world of software development, where JavaScript is a widely popular language, React is a JS library used to create user interfaces. In other words, when you as a user interact with a website, program or app, what you see and how you navigate is a user interface. React was developed and introduced by Facebook developers in 2013.

The first distinctive feature of React is that is mainly meant for web applications, which will probably scale up over time, so they have to remain fast. It’s possible to scale up a React app because the data flow is predictable, so there are fewer bugs (and they are easier to detect), plus components encapsulate parts of an app. React keeps apps fast because of virtual DOM and the immutability/functional approach to it’s design.

Key benefits of using React:

  • Virtual DOM is faster than a conventional full refresh model (refreshing pages partially);
  • Mild learning curve, doesn’t require learning multiple specific concepts;
  • Reusable code components;
  • Good SEO when used together with a server-side renderer;
  • A stable working code due to one-directional data;
  • Easy debugging;
  • Easy HTML decomposition into independent and reusable pieces of code;
  • Easy testing with JEST.

Regarding the question why people often confuse React and React Native, the answer is that they are very close relatives, so to speak. While React is basically a library for the View part of web apps, React Native is an additional extension of React, aimed at making mobile apps for iOS and Android.

In technical terms, in React, components dictate what to render, meaning building up a hierarchy. Thus, a library updates and renders just those components upon data change. HTML tags like <div>, <h1>, <h2> are frequently used in React, unlike React Native, where <View> and <Text> tags are in action.

Note: React.js is a library responsible for UI components hierarchy only. It is just the V part of the MVC framework.

Those who don’t have a clue about all this gibberish we’re talking about can check out 10 famous apps and sites built with React. Spoiler: you’ll see Instagram, Facebook, WhatsApp and more.

react.js and react native difference

React Native

Two years after React.js, in 2015 Facebook launched React Native – an additional version of the library, with the main goal also being to develop mobile apps with React. Both frameworks are very similar, as React Native uses a set of mobile-tailored components brought by the React package. Some of those components are Navigator, Text, TextInput, View, ScrollView, etc., as well as native iOS/Android UI components.

In essence, React Native is a framework to make native mobile applications in JavaScript. It fully leverages the power of React.js and relies on it.

So, while these two JS libraries are practically one family, the difference is that React Native is a tailored solution for mobile app development. The views here are just JS functions (stateless) or JS classes (stateful) in contrary to XML used in Android native development in Java. The key benefit of UI is rendering native views, so the user experience ends up better overall.

Key benefits of using React Native:

  • It has most of the benefits from React.js too but with a better focus on UI;
  • No need to build separate apps for iOS and Android – the common logic layer is often reusable, while other parts of an application must be written separately for iOS and Android;
  • Its structure is component-based which enables smooth development, even without any web;
  • JavaScript developers are able to learn and understand React Native quickly, therefore basically becoming mobile developers with little effort;
  • Native components and modules really enhance performance, also native APIs to render certain code;
  • Resulting apps are in fact “native” – not WebViews, but compiled to machine code of a specific platform;
  • If you have a mobile app to upgrade, you can just add React Native UI components to its code.

Being a logical consequence of React, what is great about React Native is that we can create native mobile apps with just JavaScript. Previously, developers had to work with Java, Objective-C and other languages specific to mobile platforms.

In React Native, they are now capable to produce actual native apps in JavaScript. Many companies and startups quickly realized the potential and switched to Native.

Building mobile apps with React Native, you may either get a platform specific code, or you may mix the native code with JavaScript. And, like we said earlier, while React uses HTML tags, in React Native, tags like <View> and <Text> are in use – one of the differences.

Note: Typically 85% of React Native code is easily portable to a different platform, while 15% of the source makes the platform-specific JavaScript code.

Again, speaking in simpler terms, React is a UI library for websites, and React Native is an extension on top of React – for mobile iOS/Android apps. You can see the 10 famous apps on React Native list on our blog.

Example of a React Native app

Now, let’s turn to something a bit different. In April 2017, Facebook and Oculus again made a positive contribution to the React ecosystem by launching React VR.

React VR

React VR is also a JavaScript library making it possible to build interactive user interfaces for virtual reality web applications. Using the same React design, it helps to develop 3D scenes and experiences in VR.

Although React VR is not meant to make complex VR games, its primary focus is on 3D scenes and panoramas rendered in VR. Thus, we can combine 360-degree images with user interfaces and text to produce brand new, eye-catching scenes.

React VR works in a web browser, with access to VR headsets like Oculus Rift, GearVR or other. However, React VR doesn’t require a headset for users and they can view 360 scenes directly in a browser or a smartphone.

This library uses UI elements with tags similar to HTML. Moreover, the main concepts come from React Native, such as components, props, state, events, layout, style.

Key benefits of using React VR:

  • Anyone with React skills should be able to work with React VR;
  • It is open-source and free to use, thus VR development is less expensive, if you want basic 3D scenes;
  • Capabilities to combine 360 panoramas with 2D user interfaces, plus audio and video support;
  • Expanding the toolset of React and JavaScript to offer a wider range of services to customers;
  • React VR is a continuation of React Native, letting you to reuse the code in certain places, and extending it for 3D.

We should also note that to set up React VR you need to install Node.js and the React VR CLI package. For detailed step-by-step guidelines to React VR setup, check the documentation.

Note: Though running in a browser, React VR is more similar in structure to React Native than React.js as it supports tags like <View> and <Text>.

Check out this nice example of a virtual reality web app by Coding Dojo.

Summary

As you can see, React is a great developer library for making websites, mobile apps and virtual reality experiences. A brief summary of our topic would be as follows:

  • React.js is a library for developing dynamic UIs for web applications with JavaScript;
  • React Native is a kind of consequence of React, being a platform to develop native mobile apps with JavaScript;
  • React.js uses HTML, while in React Native you have to know its own syntax;
  • React VR is a library to create VR apps viewed in browsers or mobile phones;
  • All three libraries are open source projects by Facebook.

One final thought: we love React at Brainhub, see why.

Resources:

  • https://www.bloomberg.com/mobile/bloomberg/ (image)

Matt Warcholinski

Matt Warcholinski is the COO of Brainhub (a software house building awesome node.js web and mobile apps) who loves to build startups and play guitar.

Follow Me: