React vs React Native — What is The Difference?

One of the most popular libraries out there right now is React.js. React Native, another framework based in React, is widely popular for developing apps as well. This blog is here to help explain the core differences and when you should use one over the other.

React.js was created in 2011 by engineers at Facebook and became widely popular. It was not until 2015 when React Native was introduced.The most important difference to understand is this: React.js is for developing dynamic and responsive web applications. React Native is best suited for creating responsive, cross-platform native apps. For the uninitiated, a native app is an app specifically developed for use on a particular OS or device. If this is still a bit unclear, think about iOS games, such as Flappy Bird or Fruit Ninja. These are both native apps, meaning they were specifically designed and developed to be played on a touch screen device. There are some “hybrid” apps, Facebook actually used to be a hybrid app before going to a fully native build for mobile devices.

One of the things that makes React Native more optimised for native apps is how it renders the page. Rather than using and manipulating the virtual DOM, React Native runs a background process on the actual end-device, where React components wrap native code and interact with native APIs. React Native does not use HTML or CSS, instead leaning on the native API to build the page. This can be noticed in the code, in a React App you will hav tags like <div> and <p>. In react Native, these are represented by slightly different tags like <View> and <Text>.

The lack of HTML and CSS makes styling differ between the two as well. React Native utilizes StyleSheets, which you include with each component. This difference means while you will write code that looks very similar to CSS, it differs in most of the tags. ie “margin-top” (CSS) vs “marginTop” (Native). This presents a bit of a learning curve at first, not all native components can be styled the same as a basic web app, but developers are always finding new ways, in 2021 there are very few things that there is not a native solution for!

The last large difference I encountered when building out React Native apps is the navigation. React generally works with React Router, React Native has an out of the box component called Navigator. While similar in essence, Navigator comes with much more functionality right out of the box. Navigator in React Native can be utilized through multiple components by being passed around as props.

I am just beginning my journey with React Native, I hope to post a follow up blog once I have a few more projects under my belt!