React-Native is very similar to ReactJS, but there are some differences you need to know. In this article, I’m elaborating the main differences I have encountered as a ReactJS web developer who learned to use React-Native and built a few native apps with this technology.
What is React
DOM Styling & Animation
React Native doesn’t use HTML or CSS for rendering the mobile app. You can’t use tags such as ‘div’ and ‘p’ to organize your content. You can’t include .css files.
Because your code doesn’t get rendered in an HTML page, this also means you won’t be able to reuse any libraries you previously used with ReactJS that renders any kind of HTML, SVG or Canvas.
Since there is no CSS, you can bid farewell to CSS animations. You can use React Native’s Animated API for animations.
Though it takes some initial learning, the output of React Native is far better than that of ReactJS.
Web pages which are built in ReactJS use React-router for navigation while React Native has an entirely different library named Navigator.
Single Environment for Multiple Platform
React Native facilitates cross-platform native app development, i.e. the code written for one platform can be used on another platform. Without compromising with the look and feel, React Native empower businesses to build cost effective mobile apps and enable developers to bring down the burden of creating new logics, integrating different APIs for two different platforms.
Combine React Components with Native Code
Developers can optimize efficiency of an app by combining components of Objective-C, Java, or Swift with React Native code. It’s easy to build a part components in React Native Mobile App and a part of it using native code and then merge them together.
Code Sharing with ReactJs
We can share code with ReactJs if our project is in react native with the help of react-native-web.
We know that React Native is the perfect choice to build IOS and Android apps with a single code base without impacting the maintenance & quality of code. The major challenge is to maintain a similar thing for a web app that React Native Web is trying to solve.
React Native Web allows us to run React Native components and APIs on the web using React DOM.
React JS vs. React Native
|Basis of comparison||React JS||React Native|
|Navigation||The React router library is used for navigating web pages.||This has a library Navigator for navigating mobile applications.|