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.
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, 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.
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.
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;
- 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.
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.
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.
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;
- 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.
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 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.