Although React and React Native share the same core principles, what’s behind them couldn’t be more different. Before we get into React vs. React Native let's take a look at how and why we ended up with React in the first place.
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.
What is React?
- 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.
What is React Native?
Composition in React vs React Native
Both are expressed with Components and JSX. They only differ on the core set of Components
Gives you sudo html elements like div, h3, button
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
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
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:
Some of the top companies using React Native include:
- Uber Eats