{"id":4476,"date":"2020-10-30T12:27:36","date_gmt":"2020-10-30T09:27:36","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=4476"},"modified":"2022-01-12T21:20:16","modified_gmt":"2022-01-12T18:20:16","slug":"react-js-vs-react-native-what-are-the-key-differences-and-advantages","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/","title":{"rendered":"React.js vs. React Native. What are the Key Differences and Advantages?"},"content":{"rendered":"<h2 class=\"wp-block-heading\"><strong>Intro<\/strong><\/h2><p>React and <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2018\/09\/rns-600x450.png\"  data-excerpt=\"There is an entire market of web templates both free and premium. You must already know about it from websites like ThemeForest and Wrapbootstrap. There are also lots of free templates available in Github built with various front-end frameworks like Angular, React and Vue. Since last few years, and especially after React Native launching, we&hellip;\" href=\"https:\/\/flatlogic.com\/blog\/react-native-mobile-bootstrap-web\/\">React Native<\/a> are two open-sourced technologies for building user interfaces. They both were developed by Facebook and gained great recognition among frontend developers for their opportunities to create interactive UIs. In the article, we describe these two technologies and explain their differences.&nbsp; <\/p><p><strong>React&nbsp;<\/strong>or&nbsp;<strong>ReactJS<\/strong>&nbsp;is a <a  data-ilj-link-preview=\"true\"  data-featured-image=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2019\/09\/top-articles-copy-600x450.png\"  data-excerpt=\"Here is our list of JS articles of 2019. We collected 17 posts with tricks and tips in JavaScript and its frameworks.\" href=\"https:\/\/flatlogic.com\/blog\/17-articles-of-september-2019-to-learn-javascript\/\">JavaScript<\/a> library that is used for building user interfaces especially for the web. React uses <strong>declarative<\/strong> <strong>programming<\/strong>, that allows developers to design a simple view for every state and then delegate the responsibility of keeping the app views consistent while you have to worry only about the state.<\/p><div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\"><div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h4 class=\"wp-block-heading\"><a href=\"https:\/\/flatlogic.com\/templates\/react\">Check out React Admin Templates!<\/a><\/h4><ul class=\"wp-block-list\"><li>Redux<\/li><li>Login and Logout screens<\/li><li>Google Maps Integrated<\/li><\/ul><p><\/p><\/div><div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/flatlogic.com\/templates\/react\"><img decoding=\"async\" width=\"960\" height=\"600\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/one_full_react_template-2b55edbf3fde6d5208aa81eb17806a4a062af1dd3636e820abd8fff03624df88-2.png\" alt=\"\" class=\"wp-image-4550 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/one_full_react_template-2b55edbf3fde6d5208aa81eb17806a4a062af1dd3636e820abd8fff03624df88-2.png 960w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/one_full_react_template-2b55edbf3fde6d5208aa81eb17806a4a062af1dd3636e820abd8fff03624df88-2-600x375.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/one_full_react_template-2b55edbf3fde6d5208aa81eb17806a4a062af1dd3636e820abd8fff03624df88-2-768x480.png 768w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 960px; --smush-placeholder-aspect-ratio: 960\/600;\" data-original-sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/a><\/figure><\/div><\/div><p>React is a <strong>component-based library<\/strong> which means that you can build several reusable components and then use them for building the complex UI of the app, while React takes care of the rendering of UI components. Applications built with React can change data in separate parts of the page without a full page reload. It provides support for both the frontend and server-side.<\/p><p><strong>React Native&nbsp;<\/strong>is a framework for building native cross-platform applications for Android and IOS using React. React Native compiles native code that allows you to create truly native mobile apps with natural user experience for Android and IOS.&nbsp;<\/p><div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\"><div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><h4 class=\"wp-block-heading\"><a href=\"https:\/\/flatlogic.com\/templates\/react-native\">Check out React Native Starter!<\/a><\/h4><ul class=\"wp-block-list\"><li>Sketch files included<\/li><li>Designed by professional UX\/UI experts<\/li><li><strong>6 premium themes<\/strong>&nbsp;for any use case<\/li><\/ul><\/div> <a href=\"https:\/\/flatlogic.com\/generator\"><img decoding=\"async\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png\" alt=\"Professional Vibe Coding\" class=\"banner-img lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 2560px; --smush-placeholder-aspect-ratio: 2560\/640;\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding.png 2560w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-600x150.png 600w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1024x256.png 1024w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-768x192.png 768w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-1536x384.png 1536w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/Introducing-professional-vibe-coding-2048x512.png 2048w\" data-sizes=\"auto\" data-original-sizes=\"(max-width: 2560px) 100vw, 2560px\"> <\/a><div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><figure class=\"wp-block-image size-large is-style-default\"><a href=\"https:\/\/flatlogic.com\/templates\/react-native\"><img decoding=\"async\" width=\"568\" height=\"626\" data-src=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/about_image-d6fc46e634587d061fdfa187ece11914ba8d3727f78058113ebfcb2e87a15b9c-1.png\" alt=\"\" class=\"wp-image-4557 lazyload\" data-srcset=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/about_image-d6fc46e634587d061fdfa187ece11914ba8d3727f78058113ebfcb2e87a15b9c-1.png 568w, https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/about_image-d6fc46e634587d061fdfa187ece11914ba8d3727f78058113ebfcb2e87a15b9c-1-544x600.png 544w\" data-sizes=\"auto\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 568px; --smush-placeholder-aspect-ratio: 568\/626;\" data-original-sizes=\"(max-width: 568px) 100vw, 568px\" \/><\/a><\/figure><\/div><\/div><p><strong>Developing with ReactJS is no way like developing mobile apps with React Native, and they serve different purposes.&nbsp;<\/strong>React Native is used for building&nbsp;<strong>native mobile applications,&nbsp;<\/strong>while ReactJS is for building&nbsp;<strong>interactive web pages<\/strong>&nbsp;for the web.<\/p><p>React Native was customized to build desktop apps for Mac and Windows (see GitHub repository for <a href=\"https:\/\/github.com\/microsoft\/react-native-macos\">macOS<\/a>&nbsp;and <a href=\"https:\/\/github.com\/microsoft\/react-native-windows\">windows<\/a>), <strong>but first of all, that framework was designed to power mobile apps development.<\/strong><\/p><h3 class=\"wp-block-heading\"><strong>Some facts about ReactJS:<\/strong><\/h3><p><strong>Ranked 2nd and 1st<\/strong>&nbsp;on <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2020#technology-most-loved-dreaded-and-wanted-web-frameworks-loved2\">StackOverflow Developer Survey<\/a> Results in 2020 in the categories Most Loved and Most Wanted Web Frameworks respectively.&nbsp;<\/p><p><strong>Ranked 2st<\/strong>&nbsp;as the most popular Web Framework <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2020#technology-web-frameworks-all-respondents2\">among professional developers<\/a> in 2020.<\/p><p>From 2016 till 2019 (the latest survey) ReactJS&nbsp;<strong>Ranked 1st<\/strong>&nbsp;on Awareness, interest, and satisfaction ratio <a href=\"https:\/\/2019.stateofjs.com\/front-end-frameworks\/\">rankings<\/a>.<\/p><p>In 2020, React has&nbsp;<strong>157 k stars<\/strong>&nbsp;on <a href=\"https:\/\/github.com\/facebook\/react\">GitHub<\/a>, making it the #2 most popular JavaScript project after the Vue library.&nbsp;<\/p><p>There are&nbsp;<strong>about 1 004&nbsp;379 websites<\/strong>&nbsp;<a href=\"https:\/\/www.similartech.com\/categories\/javascript\">using React<\/a> all around the world.<\/p><p><strong>60 608 developers<\/strong>&nbsp;on <a href=\"https:\/\/stackshare.io\/react#stacks\">StackShare<\/a> have stated that they use React In 2020.<\/p><p><strong>About 9 000 companies<\/strong>&nbsp;reported that they use React in their <a href=\"https:\/\/stackshare.io\/react#stacks\">Tech Stack<\/a>, including&nbsp;<strong>Uber<\/strong>,&nbsp;<strong>Airbnb<\/strong>,&nbsp;<strong>Facebook<\/strong>,&nbsp;<strong>Netflix<\/strong>,&nbsp;<strong>Instagram<\/strong>,&nbsp;<strong>Amazon<\/strong>,&nbsp;<strong>Twitter<\/strong>.&nbsp; The median of React developer salaries in the USA is&nbsp;<strong>120 000 $ per year<\/strong>. The most skilled developers get&nbsp;<strong><a href=\"https:\/\/neuvoo.com\/salary\/?job=reactjs+developer\">up to 160 000 $<\/a><\/strong>&nbsp;per year.&nbsp;<\/p><h3 class=\"wp-block-heading\"><strong>Some facts about React Native:<\/strong><\/h3><p>React Native is in&nbsp;<strong>the 5th place<\/strong>&nbsp;on <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2020#technology-other-frameworks-libraries-and-tools-professional-developers3\">StackOverflow Survey<\/a> 2020 in the category of other most popular frameworks, libraries, and tools among professional developers.&nbsp;<\/p><p>React Native goes&nbsp;<strong>with 90,5 k stars<\/strong>&nbsp;on <a href=\"https:\/\/github.com\/facebook\/react-native\">GitHub<\/a>.&nbsp;<\/p><p><strong>About 1400 companies<\/strong>&nbsp;<a href=\"https:\/\/stackshare.io\/react-native\">stated<\/a> they use React Native in the development.<\/p><p>The most known mobile apps that were built using React Native are&nbsp;<strong>Skype<\/strong>&nbsp;(before React Native was <a href=\"https:\/\/www.techzine.eu\/news\/collaboration\/47635\/microsoft-replaces-react-native-skype-with-electron-version\/\">replaced by Electron<\/a> in June 2020),&nbsp;<strong>Facebook<\/strong>,&nbsp;<strong>Instagram<\/strong>,&nbsp;<strong>Pinterest<\/strong>,&nbsp;<strong>Bloomberg<\/strong>,&nbsp;<strong>Discord<\/strong>,&nbsp;<strong>Tesla<\/strong>.&nbsp;<\/p><p>&nbsp;<strong>13,5 k developers<\/strong>&nbsp;on <a href=\"https:\/\/stackshare.io\/react-native#stacks\">StackShare<\/a> noted that they use React Native in 2020.&nbsp;<\/p><p>The average salary in the USA for React Native developers is&nbsp;<strong>121,875 $ a year<\/strong>. The most experienced developers can claim&nbsp;<strong><a href=\"https:\/\/neuvoo.com\/salary\/?job=react+native+developer\">up to 200 000 $ per year<\/a><\/strong>.&nbsp;&nbsp;<\/p><h2 class=\"wp-block-heading\"><strong>React vs React Native &#8211; key differences<\/strong><\/h2><h3 class=\"wp-block-heading\"><strong>How to start and what you need<\/strong><\/h3><p>Since <strong>React<\/strong> is a JavaScript library, all you need to start work with it is to plug React library in the HTML page in &lt;script&gt; tag:<\/p><pre class=\"wp-block-code\"><code><br>&lt;script src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\" crossorigin&gt;&lt;\/script&gt;&nbsp;&nbsp;<br>&lt;script src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\" crossorigin&gt;&lt;\/script&gt;<\/code><\/pre><p>That&#8217;s all. https:\/\/reactjs.org\/docs\/add-react-to-a-website.html Then you can create your first React Component and add it to your <a href=\"https:\/\/reactjs.org\/docs\/add-react-to-a-website.html\">HTML website<\/a>.&nbsp;&nbsp;<\/p><p>The only other thing you need to work with big projects is a bundler. If you use for new projects instruments like a create-react-app command, Next.js, or Gatsby framework, you will already have a configured Webpack to bundle your application. Otherwise, you will need to configure a Webpack yourself.&nbsp;<\/p><p>Bundlers compile all imported files with code into one large and complex file. Besides Webpack there are other bundlers such as <a href=\"https:\/\/rollupjs.org\/guide\/en\/\">Rollup<\/a>&nbsp;or <a href=\"http:\/\/browserify.org\/\">Browserify<\/a>.&nbsp;<\/p><p><strong>React-Native<\/strong> is a framework, so you need an installed development environment like Xcode for iOS or Android Studio for Android.&nbsp;<\/p><p>Depending on your development OS you need to install additional tools like Node, the React Native command-line interface, a JDK, Watchman, etc. After that, you can start a new project just with one line in the React Native CLI. To see the created app you should either run a mobile simulator or use your own devices.&nbsp;<\/p><p>Since you install a full-fledged framework it comes with a lot of developer tools out of the box such as <a href=\"https:\/\/reactnative.dev\/blog\/2016\/03\/24\/introducing-hot-reloading.html\">Hot reloading<\/a> which allows you to inject new versions of the files that you edited at runtime keeping the app running. That becomes especially helpful if you are tweaking the interface. <\/p><p>The migration from ReactJS to React Native is not a complicated thing. If you are familiar with React and JavaScript it takes several months to get used to the React Native framework and build your first <a href=\"https:\/\/flatlogic.com\/blog\/how-to-create-react-native-airbnb-like-app\/\">native app<\/a>, it is just a different way of using React.&nbsp;<\/p><h3 class=\"wp-block-heading\">The base of technologies<\/h3><p><strong>ReactJS<\/strong> is just JavaScript (and TypeScript a little), there are no additional things you need to know. Your skills in JavaScript allow you to become a good React developer in a few hours when you get acquainted with the technical documentation. React focuses on one thing: building interactive User interfaces for the web via JavaScript. <\/p><p><strong>React<\/strong> <strong>Native<\/strong> is a framework that uses React.JS for building mobile user interfaces. It comes with all the advantages that React.js brought you and uses declarative components just like React.&nbsp;<\/p><p>But React Native is not a pure JavaScript framework, it also contains Java, C++, Objective-C, Objective-C++ code. That fact is essential because the diversity of used languages allows us to build native components that are in fact native. Let&#8217;s find out what it means.&nbsp;<\/p><h2 class=\"wp-block-heading\">React Native bridge or how we get native components<br><\/h2><p><strong>React<\/strong> uses HTML, CSS, and JavaScript.<\/p><p>Keeping that in mind we have two options on how to create a cross-platform app:<\/p><ul class=\"wp-block-list\"><li>To make a universal design that looks the same for all platforms.<\/li><li>To create a unique design for each platform, that means different sets of code, different DOM, stylesheets, animations, styles, etc. to keep native user experience while using the app.&nbsp; &nbsp; &nbsp;<\/li><\/ul><p>If we want to build a native app with React and chose the second option we use ReactDOM.Render () command and try to mimic native elements, but the result usually feels a little off because of the small details in UI that feel wrong.&nbsp;<\/p><p>In contrast, <strong>React Native<\/strong> doesn&#8217;t try to mimic native elements, it creates a bridge between the Native Language and the JavaScript code. It calls the native functions and components inside a mobile environment. React Native has an access to all native views and components, and to about 70 specific device APIs by default. It leverages native tools for rendering views of the platform from which the app was run. <\/p><p>As a result, when we write with React Native, we build native UIs. After the compilation of the code all views in JavaScript become native components. Thus we create UIView instances as if we use platform-specific languages (Java or Objective C).&nbsp;<\/p><p>But how does React Native create native instances?&nbsp;<\/p><p>Nowadays we work with compilers that have been designed to target their own specific platforms. Thus the compiler of Java \/ Kotlin code targets the Android platform, the compiler of Obj-C \/ Swift targets the iOS platform. These compilers work just great because they were developed for a specific purpose (to create optimized artefacts for a certain platform). React Native also has such a purpose: <strong>it uses existing compilers<\/strong> to create native UIs.<\/p><p>React Native makes a connection between two realities, JavaScript and Native.&nbsp;<\/p><p>If we need to manage communication between two different languages\/platforms we use interoperable languages, such as JSON or XML. React Native provides such a bidirectional and asynchronous communication between JavaScript and Native elements with the bridge concept. Even though the technologies are different, they can communicate.&nbsp;<\/p><p>The bridge is built in C\/C++ and can be run on any platform or OS. It means that you can run JavaScript code inside a C\/C++ program, inject variables, functions, and declare globals to enhance existing code. That, in turn, provides JavaScript the opportunity to communicate with native reality and&nbsp;<strong>trigger actions in the C\/C++ world<\/strong>.&nbsp;<\/p><p>So, our JavaScript code <strong>uses existing compilers and generated native components<\/strong> <strong>and<\/strong> <strong>interfaces<\/strong> with native features. That is why React Native developers claim &#8220;Write once use everywhere&#8221; &#8211; you write the code in JavaScript and then use it on different platforms just like if you write with native languages. We speak not only about the mobile environment but about <a href=\"https:\/\/github.com\/kusti8\/proton-native\">building desktop applications<\/a> as well. <\/p><p>One more significant thing to know is that you don&#8217;t need to write the whole code in JavaScript. Sometimes it&#8217;s better to write components directly with native languages. Some reasons for that:<\/p><ul class=\"wp-block-list\"><li>You have a feeling, that the communication through the bridge slows the app down and you want to improve the performance of the app. It is a rare case, however, sometimes happens.<\/li><li>In cases when implementation in JavaScript takes hundreds of lines of code, while with native languages the code is no more than a hundred.<\/li><\/ul><h2 class=\"wp-block-heading\">Virtual DOM<\/h2><p>DOM (document object model, also known as real DOM) is a tree-like object model for an HTML webpage. Objects are HTML elements like &lt;div&gt;, &lt;html&gt;, &lt;body&gt;, etc. When we want to update the page, we also need to generate a new DOM, which in turn leads to a full page reload. In other words, if an app gets new information and wants to display it to users, it has to reload the whole webpage and refresh the model. The problem of real DOM is that it wasn&#8217;t designed to create dynamic UIs. Using JavaScript and libraries like jQuery helps to solve the problem with dynamic rendering, but it leads us to a new problem with app performance. Thus, there was no simple solution that allowed us to create dynamic apps and keep a high level of performance.&nbsp;<\/p><p>React has changed the rules of the game and brought us such a thing as&nbsp;<strong>virtual DOM<\/strong>, an abstract copy of real DOM. Virtual DOM can refresh the separate parts of the page without the need for the full page reload.&nbsp;<\/p><p>React has a copy of the real DOM structure. When changes occur, it tracks the differences and updates the browser&#8217;s displayed DOM in places that are not match the saved virtual copy without influencing the rest of the UI. <\/p><p>That is why React is awesome at creating dynamic user interfaces.&nbsp;<\/p><p>Furthermore, virtual DOM is about&nbsp;<strong>the efficient re-rendering<\/strong>&nbsp;of the real DOM. React doesn&#8217;t check all the values in a data structure at a regular interval, it instead knows&nbsp;<strong>when and where<\/strong>&nbsp;to re-render the app because it observes the state of your components. React can simply track state change events and then queue up re-rendering.<\/p><p>So the virtual tree is re-rendered only when the state changes. It allows us to avoid a lot of unnecessary tree updates and keep the app performance high by updating elements with an altered state. For other diffs of the tree, if nothing has changed, we do nothing. That occurs behind the scene: we don&#8217;t have to do manual DOM manipulations, we don&#8217;t have to check the previous DOM state, we don&#8217;t have to re-render the entire page every time some components change. We need to declare what we want from the user interface and React takes care of the rest. <\/p><p>React makes it possible because it was developed in such a way that&nbsp;<strong>reconciliation and rendering are separate phases<\/strong>. The reconciler computes which parts of a tree have changed, while the renderer is responsible for updating the app based on that information.<\/p><p>And this is where we come to React Native. Since React Native is based on React, it has similar opportunities including efficient re-rendering of the app. But both React and React Native&nbsp;<strong>use their own renderers<\/strong>&nbsp;while sharing the same reconciler, provided by React core. React Native&nbsp;<strong>uses native APIs<\/strong>&nbsp;for Android and iOS to render components on mobile while React&nbsp;<strong>utilizes HTML and CSS<\/strong>&nbsp;markup for the web.&nbsp;<\/p><h2 class=\"wp-block-heading\">The syntax<\/h2><p>When you use React you write in JavaScript. Then React.js renders Html-like components with tags like &lt;p&gt;, &lt;div&gt;, &lt;h1&gt;, etc. You can optionally use a special syntax extension for JavaScript that is called JSX.&nbsp;JSX is a syntax that looks like a template language that doesn&#8217;t separate logic and markup. That means that you put markup in JS, which may seem incorrect at first glance, but React claims that this practice<span style=\"padding: 0; margin: 0; margin-left: 5px;\"><span style=\"font-size: inherit;\"> is not as bad as it looks like. After compilation, there will be no JSX code, only regular JavaScript functions and objects.&nbsp;<\/span><\/span><\/p><p>When you use React Native you have to familiarize yourself with its specific syntax. Instead of rendering Html-like components, React Native renders native components with tags like &lt;view&gt;, &lt;text&gt;, &lt;image&gt;, etc. Here is a code sample to display &#8220;Hello, world!&#8221; for React and React Native:&nbsp;<\/p><h4 class=\"wp-block-heading\"><strong>For ReactJS<\/strong><\/h4><pre class=\"wp-block-code\"><code><br>function tick() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const element = (<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h1&gt;Hello, world!&lt;\/h1&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ReactDOM.render(element, document.getElementByID('root'));<br>}<br>setInterval(tick, 1000);<\/code><\/pre><h4 class=\"wp-block-heading\"><strong>For React Native:<\/strong><\/h4><pre class=\"wp-block-code\"><code>Import React from 'react';<br>Import {Text, View} from 'react-native';<br>const HelloWorldApp = () =&gt; {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return (<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;View&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;Text&gt;Hello, world!&lt;\/Text&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/View&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; )<br>}<br>Export default HelloWorldApp;<\/code><\/pre><p>React Native doesn&#8217;t use HTML and therefore it is not used for <a href='https:\/\/flatlogic.com\/services\/web-development'>web development<\/a>. Instead, with React Native you can develop apps for mobile (iOS, Android), smart devices (watches, TVs), augmented reality, and more, because used in React Native tags like &lt;View&gt;, &lt;Text&gt; compiles into native languages.&nbsp;<\/p><p>However, that also means that you can&#8217;t use any libraries that render any kind of HTML, SVG, or Canvas.&nbsp;&nbsp;<\/p><p>One more thing to know about React Native is that all container elements are Flex containers by default. To manipulate content inside the containers there is a bunch of different options for <a href=\"https:\/\/reactnative.dev\/docs\/flexbox\">Flex layouts<\/a> like justifyContent, alignItems, alignSelf, etc.&nbsp;You don&#8217;t need to write code for content management, just take Flex options and use them.&nbsp;<\/p><p>Building responsive apps using Flexbox can be strange a little if you work with CSS before, but Flex layout is quite a simple and convenient thing to use once you got a basic understanding of how it works. <\/p><p>You can use Reactjs or React Native either to develop an app from scratch or to add a single view or component to existing applications.&nbsp;<\/p><h2 class=\"wp-block-heading\">No animation and CSS<\/h2><p>We&#8217;ve already mentioned that React Native doesn&#8217;t use HTML. Well, React Native doesn&#8217;t use CSS either. <\/p><p> React Native uses <a href=\"https:\/\/reactnative.dev\/docs\/stylesheet\">StyleSheet<\/a> API to style components. And it looks similar to CSS, but not exactly the same. Here is an example:<\/p><pre class=\"wp-block-code\"><code><br>const styles = StyleSheet.create({<br>&nbsp;&nbsp;&nbsp;&nbsp; ExampleView: {<br>&nbsp;&nbsp;&nbsp;&nbsp; flex: 1,<br>&nbsp;&nbsp;&nbsp;&nbsp; justifyContent: \"center\",<br>&nbsp;&nbsp;&nbsp;&nbsp; borderRadius: 50\/2,<br>&nbsp;&nbsp;&nbsp;&nbsp; backgroundColor: '#000'<br>&nbsp;&nbsp;&nbsp;&nbsp; },<br>});<\/code><\/pre><p>To get options we used to (such as style override) we need to look for alternative solutions than CSS offers. For example, you can override background color in the previous code sample by adding a subcomponent like that:<\/p><pre class=\"wp-block-code\"><code><br>&lt;Subcomponent passedStyle={{ backgroundColor: '#fff' }} \/&gt;<\/code><\/pre><p>And then apply it to the element:<\/p><pre class=\"wp-block-code\"><code><br>&lt;Image<br>style={&#91; styles.ExampleView, this.props.passedStyle ]}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>...<br>\/&gt;<\/code><\/pre><p>However, if you really need CSS or you just like the way it works, you can use&nbsp;<em><a href=\"https:\/\/reactnative.dev\/docs\/stylesheet\">styled-components<\/a><\/em>&nbsp;that allow you to write actual CSS code if JS files. After compilation CSS text converts into a React Native stylesheet object.&nbsp; &nbsp;<\/p><p>Furthermore, without CSS there is no standard way to animate your components. With React Native you have to learn a new tool that is called&nbsp;<em><strong><a href=\"https:\/\/reactnative.dev\/docs\/animated.html\">Animated<\/a><\/strong><\/em>.&nbsp;<em>Animated<\/em>&nbsp;is a library that provides smooth and fluid animation where you can combine serial and parallel animation, handling gestures and other events, and do pretty crazy things in general. It is similar to a very popular JavaScript library <a href=\"http:\/\/velocityjs.org\/\">Velocity.js<\/a>.&nbsp;<\/p><p><em>Animated<\/em>&nbsp;works outside of React, directly updating native components. React Native also offers to use the native driver that allows <a href=\"https:\/\/reactnative.dev\/docs\/animated.html#working-with-animations\">performing the animation<\/a> on the UI thread without having to go through the bridge on every frame. <\/p><h2 class=\"wp-block-heading\">Components<\/h2><p><strong>React&nbsp;<\/strong>is a&nbsp;<strong>component-based library<\/strong>. A component is a JavaScript&nbsp;<strong>class or function that returns<\/strong>&nbsp;a React element and declares how a certain part of UI should look like. There are two types of components in React.js: function components and class components. When you use function components you write JavaScript functions:&nbsp;<\/p><pre class=\"wp-block-code\"><code><br>function Welcome(props) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return &lt;h1&gt;Hello, {props.name}&lt;\/h1&gt;;<br>&nbsp;}<\/code><\/pre><p>You can also define the same component <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\">with ES6 classes<\/a>:<\/p><pre class=\"wp-block-code\"><code><br>class Welcome extends React.Component {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; render() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return &lt;h1&gt;Hello, {this.props.name}&lt;\/h1&gt;;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>}<\/code><\/pre><p>You can write an app with the same functionality using both types of components. Class components have much <a href=\"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html\">more feature<\/a>&nbsp;than function components, however, it&#8217;s easier to read the code written with functional components, the code contains fewer lines, and there is a slight boost in the <a href=\"https:\/\/medium.com\/@Zwenza\/functional-vs-class-components-in-react-231e3fbd7108\">app performance<\/a>.&nbsp;&nbsp;<\/p><p>React Native comes with&nbsp;<strong>Native Modules and Native components<\/strong>&nbsp;from which developers build apps.&nbsp;<\/p><p><strong><a href=\"https:\/\/reactnative.dev\/docs\/native-components-ios\">Native UI components<\/a><\/strong>&nbsp;are ready-to-use widgets that either is a part of the platform or are available as third-party libraries. If you need a certain component, you can look for that in <a href=\"http:\/\/www.reactnative.com\/uiexplorer\/\">UI explorer<\/a>. You can also create your own component and then reuse it in different parts of the app.&nbsp;<\/p><p><strong>A Native Module<\/strong>&nbsp;is just a set of javascript functions that give access to platform API when React Native doesn&#8217;t have that required module yet or when React Native doesn&#8217;t support a native feature that you need. To build your own module you can use some tools that help to start:<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/brodybits\/create-react-native-module\">https:\/\/github.com\/brodybits\/create-react-native-module<\/a> &#8211; allows to create a native view component with a single command;<\/li><li><a href=\"https:\/\/github.com\/react-native-community\/bob\">https:\/\/github.com\/react-native-community\/bob<\/a> &#8211; a CLI to set a simple example modules for Android and iOS.<\/li><\/ul><h2 class=\"wp-block-heading\">SEO<\/h2><p>Developers use Reactjs to make web apps, which means you have to <strong>keep SEO optimization in mind<\/strong>. However, the main feature of Reactjs is to provide dynamic user interfaces, that is the content of web pages changes depending on user actions. Google bot is not a user. Even though it can run scripts and hence to see the valuable information that gets our app higher in Google search results, we need to help Google bot to index our web page correctly. <\/p><p>Reactjs and its community can&nbsp;<strong>offer several tools and libraries to improve the SEO<\/strong>&nbsp;of the app.&nbsp;<\/p><ul class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/stereobooster\/react-snap\">React snap<\/a> &#8211; a third-party library that pre-renders pages of the app into static HTML files.&nbsp;<\/li><li>React is about both client-side and server-side rendering. The second option is especially valuable for SEO, however, it takes more time to write the app with server-side rendering.&nbsp;<\/li><li><a href=\"https:\/\/github.com\/ReactTraining\/react-router\/blob\/v3\/docs\/Introduction.md\">React Router<\/a>&nbsp;is a routing library the keeps the URL in sync with what&#8217;s being displayed on the page.&nbsp;<\/li><\/ul><p>On the other hand, React Native has nothing to do with web and SEO. It&#8217;s all about building native UIs.&nbsp;<\/p><h2 class=\"wp-block-heading\"><strong>Navigation<\/strong><\/h2><p>If you work with Reacjs, you must be familiar with the <a href=\"https:\/\/github.com\/ReactTraining\/react-router\"><strong>react<\/strong>&#8211;<strong>router<\/strong> <\/a>library&nbsp;that provides the navigation on click events. That library gained the second breath after React Router 5 release when the useHistory <a href=\"https:\/\/css-tricks.com\/the-hooks-of-react-router\/\">hook<\/a> appeared. <\/p><p>However, you can&#8217;t use react-router with React Native. To manage the transition between multiple screens React Native team developed a totally unique library <a href=\"https:\/\/reactnavigation.org\/\"><strong>Navigator<\/strong><\/a>. Besides that library, there is another library <strong><a href=\"https:\/\/github.com\/wix\/react-native-navigation\">React Native Navigation<\/a><\/strong>&nbsp;that provides 100% native platform navigation on iOS and Android for React Native apps.&nbsp;<\/p><h2 class=\"wp-block-heading\"><strong>Storage<\/strong><\/h2><p>React uses&nbsp;<strong>local storage<\/strong>&nbsp;while React Native uses&nbsp;<strong><a href=\"https:\/\/reactnative.dev\/docs\/asyncstorage\">AsyncStorage<\/a><\/strong>&nbsp;by default (but has some libraries that help to save the data locally).&nbsp;<\/p><p>Local storage on the web means that data has no expiration date and will persist after the browser window is closed.&nbsp;<\/p><p>When we speak about AsynStorage on iOS, it is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage uses either RocksDB or SQLite based on what is available.<\/p><p>Mostly it&#8217;s enough to have AsyncStorage option when developing with React Native, but some apps may require to keep data on the device, here you get several options:&nbsp;<\/p><ul class=\"wp-block-list\"><li>To use special libraries to store data on a device like <a href=\"https:\/\/github.com\/realm\/realm-js\">Realm<\/a>&nbsp;or <a href=\"https:\/\/github.com\/andpor\/react-native-sqlite-storage\">SQLite<\/a>.<\/li><li>If you are using <a href=\"https:\/\/github.com\/reduxjs\/redux\">Redux<\/a>, you can use <a href=\"https:\/\/itnext.io\/react-native-why-you-should-be-using-redux-persist-8ad1d68fa48b?gi=dac393a27707\">redux-persist<\/a>.&nbsp;<\/li><\/ul><h2 class=\"wp-block-heading\">Conclusion<\/h2><p>In the article we found out the differences between React and React Native, and here is a brief comparison list:<\/p><ul class=\"wp-block-list\"><li>To start work with React you need&nbsp;to plug the React library&nbsp;on the HTML page. For React Native you need an&nbsp;installed development environment like&nbsp;Xcode for iOS or Android Studio for Android.&nbsp;<\/li><li>React helps to create&nbsp;dynamic single app applications&nbsp;effectively with virtual DOM, while React Native&nbsp;is focused on building native mobile applications&nbsp;thanks to bridge technology.&nbsp;<\/li><li>The base of React is&nbsp;JavaScript&nbsp;(and TypeScript a little), the base of React Native is&nbsp;mostly React itself,&nbsp;but it also&nbsp;contains Java, C++, Objective-C, Objective-C++ code&nbsp;<\/li><li>React.js&nbsp;renders html-like components&nbsp;with tags like &lt;p&gt;, &lt;div&gt;, &lt;h1&gt;, while React Native&nbsp;renders native components&nbsp;with tags like &lt;view&gt;, &lt;text&gt;, &lt;image&gt;<\/li><li>To style components React Native&nbsp;uses StyleSheet&nbsp;instead of CSS when React&nbsp;uses CSS.&nbsp;<\/li><li>To animate components React Native uses a special library&nbsp;<em>Animated.&nbsp;<\/em><\/li><li>Both React and React Native use&nbsp;reusable components&nbsp;to build complex UIs.&nbsp;<\/li><li>There are libraries for Reactjs to&nbsp;improve SEO, while React Native&nbsp;has nothing to do with web and SEO<\/li><li>To manage navigation between screens there are&nbsp;<em>react-router<\/em>&nbsp;for React and&nbsp;<em>Navigator<\/em>&nbsp;for React Native.&nbsp;<\/li><li>React uses&nbsp;local storage&nbsp;while React Native uses&nbsp;AsyncStorage&nbsp;<\/li><\/ul><h4 class=\"wp-block-heading\"><strong>You might also like these articles:<\/strong><\/h4><ul class=\"wp-block-list\"><li><a href=\"https:\/\/flatlogic.com\/blog\/20-articles-of-october-to-learn-javascript\/\">16+ Articles of October To Learn JavaScript<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/angular-vs-bootstrap-6-key-differences-pros-and-cons\/\">Angular vs. Bootstrap &#8211; 6+ Key Differences, Pros, and Cons<\/a><\/li><li><a href=\"https:\/\/flatlogic.com\/blog\/top-7-node-js-react-templates-and-themes-for-your-admin-panel\/\">Top 7+ Node.js React Templates and Themes for Your Admin Panel<\/a><\/li><\/ul><p><\/p>","protected":false},"excerpt":{"rendered":"<p>React and React Native are two open-sourced technologies for building user interfaces. They both were developed by Facebook and gained great recognition among frontend developers.<\/p>\n","protected":false},"author":13,"featured_media":4549,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"flatlogic_tldr":"React is a JS library for web UIs; React Native is a framework for native iOS\/Android apps.\nReact uses HTML\/CSS and Virtual DOM; React Native renders native components via a JS-native bridge, using StyleSheet and Animated.\nSetup differs: React needs a script and bundler; React Native needs Xcode\/Android Studio, CLI, and a simulator or device.\nNavigation\/storage: React uses react-router and localStorage; React Native uses React Navigation\/Navigator and AsyncStorage.","flatlogic_facts":[{"text":"In 2020, React ranked 2nd Most Loved and 1st Most Wanted web framework in Stack Overflow's survey.","source":"https:\/\/insights.stackoverflow.com\/survey\/2020#technology-most-loved-dreaded-and-wanted-web-frameworks-loved2"},{"text":"React had 157k GitHub stars in 2020.","source":"https:\/\/github.com\/facebook\/react"},{"text":"About 1,004,379 websites used React worldwide.","source":"https:\/\/www.similartech.com\/categories\/javascript"},{"text":"React Native ranked 5th in Stack Overflow's 2020 survey for other frameworks among professional developers.","source":"https:\/\/insights.stackoverflow.com\/survey\/2020#technology-other-frameworks-libraries-and-tools-professional-developers3"},{"text":"About 1,400 companies reported using React Native.","source":"https:\/\/stackshare.io\/react-native"}],"footnotes":""},"categories":[28],"tags":[35,22,488,410],"class_list":["post-4476","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-reactjs","tag-react-native","tag-react-native-vs-flutter","tag-react-vs-angular"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.2 (Yoast SEO v26.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React.js vs. React Native. What are the Key Differences and Advantages? - Flatlogic Blog<\/title>\n<meta name=\"description\" content=\"Reactjs vs React native guide is here. One is for web, and the other is for mobile use only. But we have made a list of basic differences.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React.js vs. React Native. What are the Key Differences and Advantages?\" \/>\n<meta property=\"og:description\" content=\"Reactjs vs React native guide is here. One is for web, and the other is for mobile use only. But we have made a list of basic differences.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/\" \/>\n<meta property=\"og:site_name\" content=\"Flatlogic Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flatlogic\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-30T09:27:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-12T18:20:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/Frame-122adrfrga.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"1200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alexander Rubanau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:site\" content=\"@flatlogic\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alexander Rubanau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React.js vs. React Native. What are the Key Differences and Advantages? - Flatlogic Blog","description":"Reactjs vs React native guide is here. One is for web, and the other is for mobile use only. But we have made a list of basic differences.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/","og_locale":"en_US","og_type":"article","og_title":"React.js vs. React Native. What are the Key Differences and Advantages?","og_description":"Reactjs vs React native guide is here. One is for web, and the other is for mobile use only. But we have made a list of basic differences.","og_url":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/","og_site_name":"Flatlogic Blog","article_publisher":"https:\/\/www.facebook.com\/flatlogic","article_published_time":"2020-10-30T09:27:36+00:00","article_modified_time":"2022-01-12T18:20:16+00:00","og_image":[{"width":1600,"height":1200,"url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/Frame-122adrfrga.png","type":"image\/png"}],"author":"Alexander Rubanau","twitter_card":"summary_large_image","twitter_creator":"@flatlogic","twitter_site":"@flatlogic","twitter_misc":{"Written by":"Alexander Rubanau","Est. reading time":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/#article","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/"},"author":{"name":"Alexander Rubanau","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/fe11946e6132bd7996319a70e21dc189"},"headline":"React.js vs. React Native. What are the Key Differences and Advantages?","datePublished":"2020-10-30T09:27:36+00:00","dateModified":"2022-01-12T18:20:16+00:00","mainEntityOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/"},"wordCount":3783,"commentCount":0,"publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/Frame-122adrfrga.png","keywords":["React","React Native","React Native vs Flutter","React vs Angular"],"articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/","url":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/","name":"React.js vs. React Native. What are the Key Differences and Advantages? - Flatlogic Blog","isPartOf":{"@id":"https:\/\/flatlogic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/#primaryimage"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/#primaryimage"},"thumbnailUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/Frame-122adrfrga.png","datePublished":"2020-10-30T09:27:36+00:00","dateModified":"2022-01-12T18:20:16+00:00","description":"Reactjs vs React native guide is here. One is for web, and the other is for mobile use only. But we have made a list of basic differences.","breadcrumb":{"@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/#primaryimage","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/Frame-122adrfrga.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2020\/10\/Frame-122adrfrga.png","width":1600,"height":1200},{"@type":"BreadcrumbList","@id":"https:\/\/flatlogic.com\/blog\/react-js-vs-react-native-what-are-the-key-differences-and-advantages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flatlogic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React.js vs. React Native. What are the Key Differences and Advantages?"}]},{"@type":"WebSite","@id":"https:\/\/flatlogic.com\/blog\/#website","url":"https:\/\/flatlogic.com\/blog\/","name":"Flatlogic Blog","description":"Vibe-coding, AI Agents, Professional Software Development Services, Case Studies and More","publisher":{"@id":"https:\/\/flatlogic.com\/blog\/#organization"},"alternateName":"Flatlogic Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flatlogic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/flatlogic.com\/blog\/#organization","name":"Flatlogic","url":"https:\/\/flatlogic.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","contentUrl":"https:\/\/flatlogic.com\/blog\/wp-content\/uploads\/2025\/10\/62ea6de0b3469aa3d6ebb528-1.png","width":970,"height":257,"caption":"Flatlogic"},"image":{"@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flatlogic","https:\/\/x.com\/flatlogic","https:\/\/www.instagram.com\/flatlogiccom\/","https:\/\/www.linkedin.com\/company\/flatlogic\/"]},{"@type":"Person","@id":"https:\/\/flatlogic.com\/blog\/#\/schema\/person\/fe11946e6132bd7996319a70e21dc189","name":"Alexander Rubanau","sameAs":["At Flatlogic, Alexander is deeply involved in the issues of enhancing and maintaining Flatlogic marketplace products and web app builder. He also supervises the state of Flatlogic marketplace products. Alexander is an experienced front-end developer; part-time programming lecturer; and deserves the title of software quality fanatic. Outside his working hours, he is a photographer, video maker and a dedicated father of two lively kids!"],"url":"https:\/\/flatlogic.com\/blog\/author\/alexsandr\/"}]}},"_links":{"self":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/4476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/comments?post=4476"}],"version-history":[{"count":20,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/4476\/revisions"}],"predecessor-version":[{"id":7271,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/posts\/4476\/revisions\/7271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media\/4549"}],"wp:attachment":[{"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/media?parent=4476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/categories?post=4476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flatlogic.com\/blog\/wp-json\/wp\/v2\/tags?post=4476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}