Table of Contents
The difference between React (or ReactJS) and React Native has been one of the hottest topics in the last two years. And, if you google it, you’ll probably find tons of React vs React Native articles comparing these technologies. We have stayed aside for a long time but, as professional web developers, we just cannot keep silent any more.
So let’s make it clear from the very beginning: it’s wrong to compare React to React Native. They are not variations of one category, they are totally different by their nature. Speaking metaphorically, it’s the same that if you compared an egg to an apple: yes, they both are food, but you’ll unlikely use apples to cook an omelet or put eggs in a smoothie (well, at least if you’re not a really weird smoothie gourmet).
The same is with ReactJS and React Native, they are similar to the extent that they are technologies and have some common general principles of work (we’ll talk about this later). Yet, they serve different purposes, they are not interchangeable and there is no point to set one against another. In this article, we will try to sort things out.
ReactJS and React Native: What are they?
Let’s start with some basics of ReactJS and React Native to help you understand their nature and purposes.
What is ReactJS? ReactJS is a library of JavaScript programming language. This means that it’s basically a reusable building block that defines a specific operation. Developers can use such block whenever they need to call the relevant function without the necessity to write the code for it over and over again. The main advantage of ReactJS is that it’s used to create a high-performing user interface for web applications. Specifically, the webpages built with ReactJS are highly responsive to users’ inputs. The updates occur instantly and without the necessity to reload a page that makes the UI dynamic and interactive.
ReactJS was initially created by the Facebook team member to make it possible to update news feed while people are using a chat. That’s probably the simplest example of the application of this library, but ReactJS indeed has many benefits so now it is also used by Instagram, Netflix, Yahoo and many more.
So what is React Native then? Well, React Native is a framework meaning that it’s a skeleton that defines the architecture of a mobile app project. When a developer chooses a framework, they only need to fill out the pre-defined blanks (i.e. a framework calls a code when appropriately) while the control flow is already determined and has to be followed (so-called Inversion of Control). In short, React Native is used to create native mobile apps for iOS and Android out of web apps written in JavaScript. Let’s talk about this in more details.
How does React Native actually work?
OK, to be fair we must confess that React Native and ReactJS are indeed intermingled meaning that React Native uses ReactJS to create mobile applications. Yet, they do not interact like technologies of one category, but let’s look at some basics at first so we can be on the one page.
Any websites by its essence is an HTML document. However, when we enter a website, we usually do not see just lines of a code because a browser interprets HTML and shows us the content, style and structure in a form of a webpage. The second thing that browser does is it transforms the representation of HTML-syntax into a Document Object Model or just a DOM. Basically, a DOM is a programming interface of an HTML-document that represents such document as a tree-like model. Here’s how it looks:
DOM makes pages interactive and allows for their modifying by client-side JavaScript. Specifically, with the help of DOM, developers have an opportunity to create and change documents, as well as add and delete content and elements. The process looks as follows: a user makes an input -> the changes are reflected in the components of DOM -> the UI is updated.
The web apps built with ReactJS work a bit differently, so let’s do a high-level review too.
React creates a virtual copy of DOM (so-called Virtual DOM) that allows a user to make changes without affecting the rest of the parts of the interface. The process for ReactJS looks like this: a user makes an input -> the changes are reflected in the data models of components of a Virtual DOM -> the UI is updated. So what is ReactJS good for? As the user’s input doesn’t directly change the component in a Real DOM but only its abstract copy, ReactJS makes it possible to build a highly-dynamic UI for web apps.
Speaking about React Native apps, the process of their development is, in general, similar to what is describes above since, as mentioned, React Native uses ReactJS library. But, instead of making updates in browser’s Virtual DOM (like ReactJS does), React Native invokes Objective C or Java application programming interfaces to render to iOS or Android components respectively. Due to this, the UI elements in mobile apps created with React Native look pretty much like elements in native apps.
Isn’t React Native too good to be true?
Speaking about pros and cons of React Native, the release of this framework in 2015 was met by developers with great hopes and enthusiasm. And it’s no wonder – you need to know only JavaScript to create a mobile app and, on top of that, React Native allows for a cross-platform development. Really convenient, isn’t it? Well, not so much. Let’s do a brief critical review of React Native.
Along with the benefits, React Native also has its downsides which have to be considered before opting for this way of the mobile app development. Specifically, as React Native doesn’t have enough navigation components, the navigation in mobile apps built with this technology usually suffers. This means that users do not receive as great UX as they may receive with native apps. The second problem is that some custom modules are still either absent or underdeveloped so, if you’re not a lucky person, you’ll have to develop some solutions from scratch. And the third issue we want to emphasize on is that if you decide to create a mobile app with React Native, you’ll still need a native developer to make interactions with some important functions such as access to camera or push-notifications.
So, summing up, React Native indeed makes the process of mobile app development fast and simple, but if you want your app to work properly (and perfectly), you need to consider other options. Let’s briefly discuss what’s on the table.
Alternative ways to develop a mobile app
Basically, besides using React Native, there are only two more ways to develop a mobile app out of a web app:
Ionic (or another analogous framework for hybrid app development). Ionic and similar frameworks make it possible to “create” mobile apps for both iOS and Android. There are quotation marks in the previous sentence because these frameworks, basically, do not help create mobile apps; they just make a web app look like a mobile app from a user’s perspective.
Specifically, Ionic uses a WebView which, in simple words, is a mini web browser to deliver web content. For this reason, an app developed with Ionic feels more like a website in a shell of a mobile app than a real mobile app. The quality is compromised significantly, the performance is poor, so it’s a good option only if you need a rough mockup of your future mobile application. If you want to have a real app with good UX and working functionality, do not even look in this direction.
Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time.
Native app development. Native apps are, of course, the best and the most reliable. As software is developed specifically for iOS or Android, an app runs faster and integrates better with mobile hardware. This option is indeed more costly than the other two, but, as we see from the practice, it totally pays off in the long run as native app development allows for creating a high-performing product that users just love. You’ll have no problems with UX and UI as a mobile app will behave in the way users expect it to behave (unlike the apps built with React Native and Ionic). On top of this, there is no need to hire different developers (JS and native) to create software and then make necessary adjustments to make it perform as it’s supposed to.
Bottom line
ReactJS and React Native are different and not interchangeable technologies, so the React Native vs React discussion just doesn’t make sense. React Native became popular among developers because it allows for creating native mobile apps for iOS and Android out of web applications written in JavaScript. Such solution is much better than other frameworks for hybrid app development which only make a web app look like a mobile app, not to perform like the latter one. Yet, opting for React Native still has its downsides, e.g. not really smooth navigation, mediocre integration with mobile hardware and necessity to separately develop some solutions. Hence, if you want a fully-functional mobile app with the great UX and UI, we recommend choosing native app development.