React JS vs React Native
As with most new developers we strive to learn so much given the broad diversity in programming languages and frameworks. Every new open position when applying usually requires knowledge of at least 10 different areas of expertise, which can be overwhelming to say the least. The last JavaScript library I learned was ReactJs at Flatiron bootcamp. Since my departure (graduation) I took my time in wanting to learn React Native. I wanted to broaden my knowledge a little further into mobile apps and see what the main differences are and what exactly it took to make a mobile application. Here we will be going over what React Js and React Native are and its differences.
React JS
React JS is a JavaScript library for building user interfaces, which makes rendering web pages faster and highly dynamic to user input. It was born from Facebook and is an open-source JavaScript tool that many organizations use today including Uber, Airbnb, Facebook, Netflix, WhatsApp, Instagram, Amazon, and Twitter.
React Native
React Native was made two years after the React JS release. Created by Facebook as well. It is a hybrid-app development framework for iOS and Android. As with most organizations most of the time you will have two separate teams one for iOS and Android to develop, maintain and upgrade their apps on both platforms. Using two different mobile frameworks can be costly due to having huge teams for both platforms. Using React Native allows for one application to be built on one framework catering to the use of both iOS and Android.
Differences
Besides it’s clear differences depending on whether it be a mobile or web application. Both have differences that some might already know about but definitely were new to me and at first confusing for sure.
1.) React JS is a JavaScript Library and React Native is an entire framework.
2.) As with React JS using HTML React Native does not use HTML. It has its own syntax that at first I was confused about, being so used to HTML-syntax. For instance, instead of using a <div> to encase other elements of a rendered component you would use a <View> element. Even instead of using a <p> tag you would use a <Text> element instead. As Below:
ReactJS
React Native
3.) React JS has a virtual DOM in which the browser reads the HTML-syntax and transforms it into a document object model. React Native uses native API’s to render components in mobile applications.
4.) CSS is used in React Js accessible by importing css file in the App.js file making it possible for all children components to access. Meanwhile in React Native you can set styles using React Native’s StyleSheet directly in a component to implement CSS like styling. As below:
React Native
Conclusion
There are other differences, but I believe I pointed out what really stuck out to me. I’m still learning React Native and it’s been exciting to say the least. Hopefully when I develop a mobile application of my own I will definitely share it with you. Thank you for reading!!
Sources:
