React JS is one of the most popular libraries to develop web applications.
React Native is a framework based on React JS, intended for direct use developing mobile applications with all the benefits of the latter.
So, what makes these libraries so popular, what benefits do they bring and just when should you use React vs React Native? Well, here’s everything you need to know about the essential React and React Native differences.
What is React JS?
In this instance, React is designed with reusable UI elements in mind. It was created by Facebook in 2011 and has only grown in popularity since. It’s also open-source, which helps enable the active, growing community.
Examples of React JS in Action
React is designed for the view layer, so its used alongside model and controller layers (three essential logic modules for applications) in an MVC framework. As such, we can find it in lots of popular services.
It’s no surprise that Facebook uses React JS in its web client. As they are developing the library, the company has been able to ensure it meets their exact and growing needs. Of course, this has also made it useful for others.
Instagram, also owned by Facebook, uses React more extensively. API requests with Google Maps, geolocation services, and even the search functionality and tagging are all supported through the framework.
Further afield, Netflix, Medium, Udemy and more all use it. It’s no surprise either those biggest examples you can find are web-based. This is where react thrives.
What is React Native?
So, if React is so good, what is React Native and who uses it?
This time, it is designed to for building native mobile applications (in Windows as well as iOS and Android) easily, with reusable components. It incorporates much of ReactJS, but helps easily implement this in a native-like manner across all devices, thus the name (as ReactJS was taken).
At its core, React Native still uses React for base abstraction, but the library’s components are different. So, in essence, it’s a secondary version of React, designed for an alternative purpose.
Examples of React Native in Action
No surprises here - Facebook’s mobile applications are built with React Native. Yet this includes more than just the main app - Facebook Ads was, in fact, the first native app built on React Native for Android.
Outside of the social media giant, Uber Eats is another great example. Their original dashboard for Restaurant owners (as opposed to delivery partners and customers) used React but, as we’ve already covered, this original framework isn’t best suited for mobile development. It made sense then, for Uber’s team to use it’s younger brother - especially since they had little experience directly building on Android and iOS systems. React Native isn’t used widely, but Uber Eats have shown how important it was for helping them sink their teeth into wider mobile operations.
Likewise, Tesla also use React Native when developing the applications that support both their Powerwall battery and smart car products. Considering the company is actively developing apps that control (to some extent) a car remotely, it shows just how much React Native has to offer.
React vs React Native - What’s Different?
We’ve already mentioned that React is designed for web applications, while React Native is suited for cross-platform mobile development. But what are the other key React and React Native differences?
React Navigation vs React Native Navigation
We said earlier that the two solutions use different libraries and components, despite sharing common roots, and this is no clearer than when discussing navigation. After all, navigation has different features and needs on web pages and mobile applications.
Virtual DOM & DOM Refreshes
In web pages and apps, the Domain Object Model (DOM) is an important element for ordering and displaying elements. How libraries and frameworks handles the DOM goes a great way to influencing how they are ultimately used.
React is famous for using a Virtual DOM that uses a partial refresh. which has proven to be typically faster than a full alternative. Since the Virtual DOM is faster, leading to quicker rebuilding, it also results in faster, better performance.
In fact, it’s worth noting that uses its predecessor, React DOM, for base abstraction.
React Native, on the other hand, needs to use native API when rendering UI components. On top of this, it uses React for its abstraction but, as we just covered, React uses React DOM, so there’s more work involved.
TL;DR - React vs React Native