‍Why React?

‍In 2011 most of web development relied heavily on the use of Jquery and imperatively managing and updating the state of a website. At that time Facebook was attempting to expand at a rapid pace and was facing difficulties matching that expansion with a scalable development solution. They needed a solution that would allow for their View Layer to be more declarative and reusable across multiple teams. One of their developers by the name of Jordan Walke created a solution that was based on an HTML component library called XHP. This first iteration was called FaxJs but as it grew through the company to be known as Reactjs.

Fast forward to today and the web development landscape is dominated by React, having 3 times as many downloads versus other JavaScript frameworks. 
‍

What is React?

React modestly claims to be a JavaScript library for building user interfaces but what are the main benefits?

• Declarative - React allows you to express your View templates in a way where you don’t have to worry about the implementation details. Giving a developer access to state and props to create shareable reactive Views.
• Components - Everything is encapsulated within easily shareable JSX components that create an environment that allows the developer to express the composition and logic within the same View template.
• Write Anywhere - The React framework is not bound to the web or the DOM, it’s javascript. You can use React wherever you can use javascript.
  

What is React Native?

React Native is a port of React into the Native space (iOS, Android). Under the hood, iOS uses objective-c/swift and android uses Java, React Native sets up both of these development environments and allows the Views of an application to be expressed with React. It uses a “bridge” to communicate between the javascript thread and the native threads for both platforms allowing you to create and interact with native modules in your React code.

This means instead of having to code in objective-c and java and maintain two completely separate native codebases, you can create a single javascript View layer with React that brings both together.‍

Composition in React vs React Native

Both are expressed with Components and JSX. They only differ on the core set of Components

React

Gives you sudo html elements like div, h3, button

React Native

Gives you core Components such as View, Text, Button

Styling in React vs React Native

When comparing React vs React Native another thing to look at is the differences in styling. React is being used in the DOM and has full access to CSS or CSS in js. On the other hand, React Native had to create its own version of styling. The styles for React Native are created as objects and then injected into the individual Components as a `style` prop. The underlying system of styling closely resembles the flexbox model from CSS and the majority of the core properties are accessible. Margin, color, backgroundColor, fontSize are all valid style properties within React Native. This makes it easy for any developer that has some familiarity with styling and CSS in the DOM to get into a React Native project and start being effective.

React Styling Example

‍

React Native Styling Example

Setup in React vs React Native

Most React projects are being initialized with a cli option such as Create React App or Next these days. The underlying bundler for these projects is typically going to be web pack, rollup, or parcel. On the other hand, React Native has its own set of cli options focused on initializing and running a project, these include react-native, expo, and ignite. React Native also has its own bundler known as Metro that bundles javascript optimized for a native application development environment. React Native is also being compiled into native code, this means you need to have Xcode in order to run iOS and Android Studio in order to run Android applications. The initial setup for React Native is a little more hands-on because of what it is trying to accomplish between the 2 native platforms but it's worth the extra work considering you don’t have to maintain two separate objective-c and Java codebases.

Navigation in React vs React Native

Another thing to consider when looking at React vs React Native is how the user is going to navigate through the application. Neither React nor React Native come with a solid way to manage state revolving around navigation out of the box. For React the top solution over the years has been react-router which provides a much more declarative way to compose navigational components through a DOM application. React Native not only has to take on creating an API to maintain navigation state but also has to take into consideration animations and gestures associated with a user navigating throughout the app. The top libraries for React Native navigation are react-navigation and react-native-navigation. Both libraries have their own opinions on composing the underlying components related to navigating but have a very similar API for calling the methods that control navigation.

Developer Environment in React vs React Native

Hot Reloading - Both React’s and React Native’s development environments enjoy the benefits of having access to a version of Hot reloading. This means that when a file is updated the bundler is smart enough to only update that portion of the application and a full reload is not required. HMR makes a quick development loop and allows for almost instant feedback on whether or not the updates you just made were effective.

Debugging - Both React and React Native also utilize Chrome Dev Tools. This means debugging or profiling and application in both environments are trivial. React Natives Chrome Dev Tools even comes with an element inspector that allows you to isolate individual Components in the tree and inspect their related composition or styles.

Libraries in React vs React Native

Both React and React Native also have full access to all javascript modules exposed through npm. This means any npm modules that don’t utilize React or React Native specific view Components work as expected within an application.

General Differences Between React vs React Native

• React Native uses native code under the hood, which means objective-c and Java. Whereas React is getting rendered with the DOM (Document Object Model) within a browser.
• npm React Native modules are not like regular React npm modules. They have native objective-c and Java in them that need to be plugged in for both iOS and Android platforms and linked to work within your React Native application. Luckily as of React Native .60 auto linking takes care of most of these scenarios.
• React Web applications can be easily distributed and easily updated to the internet. React Native or Native applications in general need to be uploaded and distributed to the App store for iOS and the Google play store for android. This means you need to register, sign, compile and get your application approved before it can be used on a device.
  

Top Companies Using React

Some of the top companies using React include:

• Uber
• Airbnb
• Netflix
• Pinterest
• Instagram
• Shopify
• Amazon
• Twitter

Some of the top companies using React Native include:

• Instagram
• Coinbase
• Oculus
• Tesla
• Shopify
• Discord
• Skype
• Uber Eats
• Wix
• NerdWallet
  

Conclusion

React has revolutionized the way modern javascript applications are being put together and has been able to cultivate a huge community behind it. It’s such a preferred way of composing javascript applications that it’s been ported over into desktop and native mobile application development as well. A developer with a base knowledge of React can hop on a React Native project and easily start contributing. In the end, the differences between React vs React Native are very minimal, it’s just a different flavor of React.