Fine Line Difference Between React Native and ReactJS

Mar 2019

Posted by: Category:Mobile Web Development

Even though React Native and ReactJS are similar in a way, but there are some differences you need to know before starting your first native app.

Fine Line Difference Between React Native and ReactJS


In a simple term, React Native is a mobile-app development hybrid framework used for both iOS and Android while ReactJS is a JavaScript library created by Facebook to tackle the User Interface needs for high dynamic and performance. And to be a credible React Native developer and because ReactJS is the core of React Native, you need to have some understanding and basic knowledge of how JavaScript ES6, which is   the most recent version of the language, works.

In this write-up, I will be putting a fine line difference between both React Native and ReactJS in the following areas.

  • Start-up or Set-up and Bundling:

    As a developer if you are starting up or setting up a new project using ReactJS, you have to choose a bundler like Web pack and also try to know the bundling modules needed for the project. This is not the case with React Native as it comes with everything you need which makes starting up a new project super easy and fast. As a matter of fact, you only need a command line to make coding for your first native app.

  • The use of HTML and Styling:

    React Native does not use HTML for app rendering but make use of alternative components that work in the same pattern and are translated into their equivalent HTML like “< View >” to “< div >” and “< Text >” to something like a mix-up of “< span >” and “< p >”. And because of this, the libraries used with ReactJS cannot be used in the React Native framework. Also, in order to style your React Native components, you need to create style sheets in JavaScript which looks like CSS but not exactly the same. This might confuse you at first especially when you get to a point where you need to create mix-ins like what you would do with SASS, or when to override the style of a component you want to reuse.

  • Creation of gestures and animation:

    With React Native, I can boldly tell you that you have nothing to do with CSS animation, instead, you will have to learn a new way of animating different components of your app with JavaScript. And the commonly used one is the Animated API which could be compared to the famous JavaScript library Velocity.js. With this, you can create various animations, timed or based on a velocity associated with a gesture. In overall, with React Native, you can do any kind of animation on the web with a nice layout that is very cool and simple to use for transitions. The only thing is that it works for iOS only at the moment as Android does not really support it. And to interact with user gestures, React-Native provides something similar to the JavaScript touch events web API called the Pan Responder. Initially, you might see it as being complicated to set up but with time you will find it not discouraging.

  • Navigating between scenes:

    You might be wondering how to navigate between scenes while developing your first mobile app. You don’t need to look for an alternative to react-router usually used to transits between pages which could be complicated in some situations and might not give you exactly what you need. But with React Native, you won’t encounter all these challenges.

Other differences are seen in the specific codes used on both platforms and the fact that there is no need for installing any developer tool while doing a new project with React Native.

Leave a Reply