If you’re new to React, it won’t be long before you come across React Native.
On this page:
The two share a lot in common, but you’re going to want to take a minute before you dive in and create your first React Native app. There are important differences between React and React Native you need to know about!
You can find out more about React in our blog: Introduction to thinking in React.
One of its greatest features, however, is the ‘Learn once, write anywhere’ principle. This means you don’t have to learn several technologies to develop apps across platforms. You can re-use a lot of the same code to develop an app in both iOS and Android, for instance.
Enjoying this blog? Check out our accompanying video, presented by our React Native guru Horacio Herrera.
React Native is a framework, not a library like React, and the differences don’t stop there. While React uses a DOM, React Native does not. It also requires a range of different tools to make the UI work on a native platform, which we’ll cover in more detail below when we compare tools between React and React Native.
React Native uses utilities like Stylesheet, Dimension and AsyncStorage to retrieve information from the native device so it knows how to render the UI. In particular, the Platform utility is used to tell which platform is targeted so you can change the interface to suit the user’s needs better.
Needless to say, React Native has a lot of business potential. The likes of Facebook, Instagram, Skype, Wallmart, Tesla, and more all use it. That’s because React Native:
- Renders components using native APIs that improve performance
- Allows developers to re-use large amounts of code so they don’t have build the same app several times for different platforms
- Utilises a component-based structure so developers can build apps in an agile way
In React, you need to account for HTML and the DOM. So when you code, you’re going to use components like
<input/>. But React Native doesn’t use HTML or the DOM.
|HTML (React)||React Native|
These differ from React in logical ways. The
<a> command can’t be translated to a native mobile app because you don’t click on a smartphone, you touch, which is why you have the
|HTML (React)||React Native|
|Webpack||Metro bundler / Haul|
|React Chrome devtools||RN Chrome devtools|
|Gatsby||Expo / Ignite|
The likes of Facebook, Microsoft, Bloomberg, Wix and more are already benefitting from React Native, so there’s no better time than now to learn it too!
At React GraphQL Academy, you’ll find a range of courses to help you harness the power of React Native today. We train teams throughout Europe - find out more here!
We’ll also be at React Amsterdam this April! If you’re there, sign up to our React Native workshop to get a kickstart in the field.
Free learning resources
Signup and learn about cutting-edge React and GraphQL plus the latest news on our courses...
Looking to unsubscribe?
Share this on:
This website is built using Gatsbyjs. Curious about how this blog is implemented? It's open source so you can check the source code
Comments? Shoot me a tweet @hhg2288 !