When looking for a Javascript library for your next application, chances are you’ll come across React, a powerful UI library and one of the most popular for building application frontends. However, you also might encounter React Native. And while it is similar both in name and functionality to React, there are some key differences.
In this article, we’ll take a look at some of the similarities and differences between React and React Native to help you make a decision as to which you should use on your next project.
Understanding React
When React was created at Facebook, it was revolutionary for a couple reasons. More specifically, it broke from the convention of Javascript libraries and frameworks by managing UIs using a component-based architecture as well as the virtual DOM.
Component-based architecture
A React codebase makes frequent use of the concept of components for code organization. React components are re-usable pieces of code that take properties, or props, to determine how a given component displays, what data it contains and what state it has. These components are usually styled independently and use a syntax called JSX, which is a combination between Javascript and HTML, to handle both markup and logic. As an example, here is how a Table component might be used to render data, specifically in the way that Airplane uses it.
While initially a shock to many people in the Javascript community, instead of maintaining separation of concerns by “putting markup and logic in separate files, React separates concerns with loosely coupled units called ‘components’ that contain both.”
Virtual DOM
When looking at options for rendering Javascript interfaces, some of the original engineers of React were facing performance problems when many components were rendered on a single page. That’s why React introduced the virtual DOM. The virtual DOM is a clone of the actual DOM that React maintains so that it can decide, when the state of an application changes, which components in the actual DOM need to be updated and which can remain as they’re currently rendered. By only re-rendering components that are absolutely necessary, React cuts down on unnecessary re-renders and improves the performance of the application overall.
Understanding React Native
The concepts that React introduced were revolutionary at the time and shortly after React was introduced, Facebook announced the release of React Native. The core tenet of React Native is that it allows teams who are familiar with writing React to use that familiarity to develop mobile apps as well. A codebase written in React Native uses the same paradigms, tools and concepts that developers are already familiar with if they’ve used React, but with the ability to compile that codebase into native applications for both iOS and Android.
This unlocks the ability to share components across multiple platforms and prevent a ton of rebuilding work if your mobile application looks and functions similarly to your web application. It also means that teams familiar with building web frontends can also now build mobile applications.
Because React and React Native were originally developed at Facebook, it’s no surprise that many of their applications use React Native, including Ads Manager and Messenger. However, React Native has been adopted by the community at large and now powers a large number of mobile applications.
Advantages over a responsive website
Because React Native creates native apps, using React Native allows developers to take advantage of mobile-specific APIs and interfaces that aren’t available to a website running in the browser. Any feature of a mobile device that’s accessible and able to be used on a standard mobile app can be access by React Native as well. This means developers can take advantage of things like precise location, bluetooth, and more.
Key similarities between React and React Native
The most obvious similarity between React and React Native is that they’re both built around the React library at their core. This allows code to be re-used between your desktop and mobile app codebases as well as allows developers familiar with working in React on the web to contribute to the mobile codebase as well.
Bit is a popular solution for this sort of code sharing, allowing you to save time rewriting components that need to have similar functionality across desktop and mobile, while still allowing for your components to take advantage of the benefits of each of the individual platforms.
If you’re interested in this component sharing concept, check out their tutorial on YouTube, where they build a design system designed to work in both React and React Native.
Key differences between React and React Native
The key difference between React and React Native is the support for building native mobile applications. React Native allows you to do just this, giving you the ability to generate applications for both iOS and Android. On the other hand, React is limited to the web, unless it’s wrapped in some sort of other mobile-specific framework.
Because React Native applications run natively on mobile devices, they can take advantage of mobile specific functionality like views that avoid the mobile keyboard automatically, controlling the status bar on a mobile device, and more that a responsive website can’t realistically do.
The other main difference between React and React Native is the build processes required to get an application deployed to your intended platform. Because React is a web-oriented technology, the build and deployment process is very similar to other web frameworks and libraries, usually relying on tools like npm and others to generate a production-ready codebase.
On the other hand, because React Native compiles into native mobile apps, there are mobile-specific deployment processes that you need to take into account for iOS and Android. These can be unfamiliar for developers used to a web-oriented build process and can take some time to understand and get configured.
Choosing between React and React Native
Choosing React or React Native often isn’t an either/or decision. If you already have a React codebase and you are looking for a natively mobile solution, React Native can be a great tool to add to your existing codebase. If you’re starting a new project and you know that you’re going to need a mobile solution down the road, adopting React so that you can eventually use React Native and take advantage of the benefits described above can be a great choice.
On the other hand, if you don’t need mobile-specific applications, using React without React Native can be a great solution as well. You get all the performance benefits built into React and can take advantage of a UI library with great community support and widespread adoption.
Kickstarting your React codebase with Airplane Views
If you’re looking into building tooling for your organization and considering React or React Native, but don’t know where to start, take a look at Airplane. Airplane is a code-first platform that allows you to create internal tools quickly and easily and if those tools need a UI, Airplane Views has you covered.
Views allow you to build React-powered UIs for your admin panels and internal tools, whether you want to use Airplane’s built-in component library or bring your own. The code behind Views is open source, so if you like any of the Airplane components and want to re-use them in your React Native application, you can do that using the tooling discussed above.
Create a free account today and see how easy it is to create your first internal tool. If you already have a use case in mind, check out Airplane’s template library and see how you can spin up an entire tool in just a couple clicks.
