What is the difference between React Native and React

Question

I have started to learn React out of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Google  React and React Native seems to have the same format  Do they have completely different syntax

User · Answer

In simple terms ReactJS is parent library which returns something to render as per the host-environment(browser, mobile, server, desktop..etc). Apart from rendering it also provides other methods like lifecycle hooks.. etc.

In the browser, it uses another library react-dom to render DOM elements. In mobile, it uses React-Native components to render platform specific(Both IOS and Android) native UI components. SO,

react + react-dom = web developement

react + react-native = mobile developement

User · Answer

A little late to the party  but here s a more comprehensive answer with examples  React React is a component based UI library that uses a  quot shadow DOM quot  to efficiently update the DOM with what has changed instead of rebuilding the entire DOM tree for every change  It was initially built for web apps  but now can be used for mobile  amp  3D vr as well  Components between React and React Native cannot be interchanged because React Native maps to native mobile UI elements but business logic and non-render related code can be re-used  ReactDOM Was initially included with the React library but was split out once React was being used for other platforms than just web  It serves as the entry point to the DOM and is used in union with React  Example  import React from  react   import ReactDOM from  react-dom    class App extends Component       state             data                 componentDidMount             const data   API getData       fetch some data         this setState   data               clearData        gt            this setState               data                             render             return                lt div gt                   this state data map  data    gt                         lt p key  data id  gt  data label  lt  p gt                                       lt button onClick  this clearData  gt                      Clear list                  lt  button gt               lt  div gt                       ReactDOM render App  document getElementById  app      React Native React Native is a cross-platform mobile framework that uses React and communicates between Javascript and it s native counterpart via a  quot bridge quot   Due to this  a lot of UI structuring has to be different when using React Native  For example  when building a list  you will run into major performance issues if you try to use map to build out the list instead of React Native s FlatList  React Native can be used to build out IOS Android mobile apps  as well as for smart watches and TV s  Expo Expo is the go-to when starting a new React Native app   Expo is a framework and a platform for universal React applications  It is a set of tools and services built around React Native and native platforms that help you develop  build  deploy  and quickly iterate on iOS  Android  and web apps  Note  When using Expo  you can only use the Native Api s they provide  All additional libraries you include will need to be pure javascript or you will need to eject expo  Same example using React Native  import React    Component   from  react   import   Flatlist  View  Text  StyleSheet   from  react-native    export default class App extends Component       state             data                 componentDidMount             const data   API getData       fetch some data         this setState   data               clearData        gt            this setState               data                             render             return                lt View style  styles container  gt                   lt FlatList                     data  this state data                      renderItem     item      gt   lt Text key  item id  gt  item label  lt  Text gt                     gt                   lt Button title  quot Clear list quot  onPress  this clearData  gt  lt  Button gt               lt  View gt                       const styles   StyleSheet create       container            flex  1              Differences   Notice that everything outside of render can remain the same  this is why business logic lifecycle logic code can be re-used across React and React Native In React Native all components need to be imported from react-native or another UI library Using certain API s that map to native components are usually going to be more performant than trying to handle everything on the javascript side  ex  mapping components to build a list vs using flatlist Subtle differences  things like onClick turn into onPress  React Native uses stylesheets to define styles in a more performant way  and React Native uses flexbox as the default layout structure to keep things responsive  Since there is no traditional  quot DOM quot  in React Native  only pure javascript libraries can be used across both React and React Native  React360 It s also worth mentioning that React can also be used to develop 3D VR applications  The component structure is very similar to React Native  https   facebook github io react-360

User · Answer

React      React is a declarative  efficient  and flexible JavaScript library for   building user interfaces    React Native      React Native lets you   build mobile apps using only JavaScript  It uses the same design as   React  letting you compose a rich mobile UI from declarative   components  With React Native  you don t build a    mobile web app       an    HTML5 app     or a    hybrid app     You build a real mobile app that s   indistinguishable from an app built using Objective-C or Java  React   Native uses the same fundamental UI building blocks as regular iOS and   Android apps  You just put those building blocks together using   JavaScript and React  React Native lets you build your app faster    Instead of recompiling  you can reload your app instantly  With hot   reloading  you can even run new code while retaining your application   state  Give it a try - it s a magical experience  React Native   combines smoothly with components written in Objective-C  Java  or   Swift  It s simple to drop down to native code if you need to optimize   a few aspects of your application  It s also easy to build part of   your app in React Native  and part of your app using native code   directly - that s how the Facebook app works    So basically React is UI library for the view of your web app  using javascript and JSX  React native is an extra library on the top of React  to make a native app for iOS and Android devices   React code sample     import React    Component   from  react   import ReactDOM from  react-dom    class Clock extends React Component     constructor props        super props       this state    date  new Date            componentDidMount         this timerID   setInterval             gt  this tick          1000               componentWillUnmount         clearInterval this timerID          tick         this setState         date  new Date                  render         return          lt div gt           lt h1 gt Hello  world  lt  h1 gt           lt h2 gt It is  this state date toLocaleTimeString     lt  h2 gt         lt  div gt                ReactDOM render     lt Clock   gt     document getElementById  root         React Native code sample   import React    Component   from  react   import   Text  View   from  react-native    class WhyReactNativeIsSoGreat extends Component     render         return          lt View gt           lt Text gt            If you like React on the web  you ll like React Native           lt  Text gt           lt Text gt            You just use native components like  View  and  Text             instead of web components like  div  and  span            lt  Text gt         lt  View gt                 For more information about React  visit their official website created by facebook team   https   facebook github io react  For more information about React Native  visit React native website below   https   facebook github io react-native

User · Answer

React is a declarative  efficient  and flexible JavaScript library for building user interfaces Your components tell React what you want to render     then React will efficiently update and render just the right components when your data changes  Here  ShoppingList is a React component class  or React component type   A React Native app is a real mobile app  With React Native  you don t build a    mobile web app     an    HTML5 app     or a    hybrid app     You build a real mobile app that s indistinguishable from an app built using Objective-C or Java  React Native uses the same fundamental UI building blocks as regular iOS and Android apps   More info

User · Answer

In summary  React js for Web Development while React-Native for Mobile App Development

User · Answer

React is the base abstraction of React Native and React DOM  so if your going to work with React Native you will also need React    same with the web but instead of React Native you will need React DOM   Since React is the base abstraction the general syntax and workflow is the same but the components that you would use are very different thus you will need to learn those differences this is inline with React so called moto which is  Learn once write anywhere  because if you know React base abstraction  you could simply learn the differences between platform without learning another programming language  syntax and workflow

User · Answer

reactjs uses a react-dom not the browser dom while react native uses virtual dom but the two uses the same syntax  i e if you can use reactjs then you can use react native because most of the libraries you use in reactjs are available in react native like your react navigation and other common libraries they have in common

User · Answer

It is a Hybrid tool for app development for both OS and android  You don t have to write a code for two times  It uses native components along with react  It also provides you the access to server  firebase   for further help follow the links  https   reactnative dev  https   nativebase io

User · Answer

React Native is primarily developed in JavaScript  which means that most of the code you need to get started can be shared across platforms  React Native will render using native components  React Native apps are developed in the language required by the platform it targets  Objective-C or Swift for iOS  Java for Android  etc  The code written is not shared across platforms and their behavior varies  They have direct access to all features offered by the platform without any restriction   React is an open-source JavaScript library developed by Facebook for building user interfaces  It s used for handling view layer for web and mobile apps  ReactJS used to create reusable UI components It is currently one of the most popular JavaScript libraries in the it field and it has strong foundation and large community behind it If you learn ReactJS  you need to have knowledge of JavaScript  HTML5 and CSS

User · Answer

React Native is a JavaScript framework and it comes with everything you need to write multi-platform apps  like iOS or Android   ReactJS is a JavaScript library which is used to build web interfaces and build your website

User · Answer

React Native is a framework to use React for building android and ios apps  React is a web framework used to build awesome websites

User · Answer

Some differences are as follows  1- React-Native is a framework which used to create Mobile Apps  where ReactJS is a javascript library you can use for your website  2- React-Native doesn   t use HTML to render the app while React uses  3- React-Native used for developing only Mobile App while React use for website and Mobile

User · Answer

REACT is Javascript library to build large small interface web application like Facebook   REACT NATIVE is Javascript framework to develop native mobile application on Android  IOS  and Windows Phone   Both are open sourced by Facebook

User · Answer

I know there are already many answers to it but after reading all these I believe there is still room for explanation  React React   Vaila JS   ES6   HTML   CSS   JSX   Web Apps Front end  So let s talk about react first because react-native also based on react and the same concept of JS is been used there  React is a JS library which is used to make beautiful  flexible  performant single page web applications  So now a question will appear in your mind what is single page web app  Single-Page Application A single-page application is an app that works inside a browser and does not require page reloading during use  You are using this type of applications every day  These are  for instance  Gmail  Google Maps  Facebook  or GitHub  SPAs are all about serving an outstanding UX by trying to imitate a    natural    environment in the browser     no page reloads  no extra wait time  It is just one web page that you visit which then loads all other content using JavaScript     which they heavily depend on  SPA requests the markup and data independently and renders pages straight in the browser  We can do this thanks to advanced JavaScript frameworks like AngularJS  Ember js  Meteor js  Knockout js  React js  Vue js  Single-page sites help keep the user in one  comfortable web space where content is presented to the user in a simple  easy  and workable fashion  How it works Now you know what is SPA  So as you know it s a web app so it will use HTML elements for running into the browser and also used JS for handling all the functionality related to these elements  It used Virtual Dom to render new changes in the components  React-Native Now you have a bit of an idea about react so let s talk about  react-native React-Native   React  Vaila JS   ES6   Bridge between JS and Native code    Native IOS  Android    Mobile Apps Android  IOS  also supported web but have some limitations  React-Native used to make beautiful cross-platform mobile apps Android  IOS  using React  How it works In React-Native there are two threads   JS Thread  Native Thread   All of the react code executed inside JS thread and the final value passes to the native thread which draws layout on the screen with the final value  JS thread performs all of the calculations and passes data to native   How  React uses an Async Bridge to pass data to Native thread in JSON format is called react-native So we use Native components for making a presentational view in react-native and use that bridge to communicate between these two different worlds  JS thread is fast enough to execute javascript and the native thread is also fast enough to execute native code but as react used async bridge to communicate between these two worlds  overloading this bridge causes performance issues  Let s talk about the common and differences between these two frameworks   --------------------- ------------------ ---------------------         Feature              React           React-Native          --------------------- ------------------ ---------------------       Platform                  Web          Android  IOS  JS      --------------------- ------------------ ---------------------      Open Source                Yes                Yes             --------------------- ------------------ ---------------------    Presentational View     HTML   CSS       Native Components      --------------------- ------------------ ---------------------     Arichtecure           Virtual Dom       Virtual Dom   Bridge   --------------------- ------------------ ---------------------      Animations          CSS Animations     Native Animations       --------------------- ------------------ ---------------------        Styling               CSS            JS Stylesheets         --------------------- ------------------ ---------------------     Developed By          Facebook               Facebook          --------------------- ------------------ ---------------------

User · Answer

We can t compare them exactly  There are differences in use case   2018 update   ReactJS React has as its main focus Web Development     React   s virtual DOM is faster than the conventional full refresh model  since the virtual DOM refreshes only parts of the page      You can reuse code components in React  saving you a lot of time   You can in React Native too       As a business  The rendering of your pages completely  from the server to the browser will improve the SEO of your web app      It improves the debugging speed making your developer   s life easier      You can use hybrid mobile app development  like Cordova or Ionic  to build mobile apps with React  but is more efficiently building mobile apps with React Native from many points      React Native An extension of React  niched on Mobile Development     Its main focus is all about Mobile User Interfaces      iOS  amp  Android are covered      Reusable React Native UI components  amp  modules allow hybrid apps to render natively      No need to overhaul your old app  All you have to do is add React Native UI components into your existing app   s code  without having to rewrite      Doesn t use HTML to render the app  Provides alternative components that work in a similar way  so it wouldn t be hard to understand them      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 React that renders any kind of HTML  SVG or Canvas      React Native is not made from web elements and can   t be styled in the same way  Goodbye CSS Animations      Hopefully I helped you

User · Answer

React Native is an open-source mobile application framework  React JS is front-end javascript library it s large library not a framework

User · Answer

React Native is for mobile applications while React is for websites front-end    Both are frameworks invented by Facebook  React Native is a cross platform developing framework meaning one could write almost the same code for both IOS and Android and it would work  I personally know much more about React Native so I will leave it at this

User · Answer

React Js is a Javascript Library where you can develop and run faster web applications using React    React Native lets you build mobile apps using only JavaScript it is used for Mobile application development   more info here https   facebook github io react-native docs getting-started html

User · Answer

React Js - React JS is front-end javascript library it s large library not a framework    It follows the component based approach which helps in building reusable UI components   It is used for developing complex and interactive web and mobile UI Even though it was open-sourced only in 2015  it has one of the largest communities supporting it     ReactNative - React Native is an open-source mobile application framework

User · Answer

React-Native is a cross-platform using reactjs for building app with same code for  all platforms like  iOS  Android  Web  Windows  Mac  Linux   The difference in implementation is reactjs using HTML tags but react-native using react-native specific components

User · Answer

In regards to component lifecycle and all the other bells and whistles it is mostly the same     The difference mostly is the JSX markup used  React uses one that resembles html  The other is markup that is used by react-native to display the view

User · Answer

React Js is manipulating with HTML Dom  But React native is manipulating with mobile iOS android  native ui component

User · Answer

ReactJS  React is used for creating websites  web apps  SPAs etc   React is a Javascript library used for creating UI hierarchy   It is responsible for rendering of UI components  It is considered as V part Of MVC framework   React   s virtual DOM is faster than the conventional full refresh model  since the virtual DOM refreshes only parts of the page  Thus decreasing the page refresh time   React uses components as basic unit of UI which can be reused this saves coding time  Simple and easy to learn  React Native  React Native is a framework that is used to create cross-platform Native apps  It means you can create native apps and the same app will run on Android and ios   React native have all the benefits of ReactJS  React native allows developers to create native apps in web-style approach

User · Answer

Here are the differences that I know about     They have different html tags  React Native is using  for handling text and  instead of  in React  React Native is using Touchable components instead of a regular button element  React Native has ScrollView and FlatList components for rendering lists  React Native is using AsyncStorage while React is using local storage  In React Native routers function as a stack  while in React  we use Route components for mapping navigation

User · Answer

First  the similarities  Both React  amp  React Native  RN  were designed to create flexible user interfaces  There are tons of benefits to these frameworks  but the most fundamental take-away is that they re made for UI-development  Facebook developed RN a few years after React   React  Facebook designed this framework to be almost like writing your JavaScript inside of your HTML XML  which is why the tags are called  JSX   JavaScript XML  and are similar to the familiar HTML-like tags such as  lt div gt  or  lt p gt   A hallmark of React is the capital-letter tags which denote a custom component  such as  lt MyFancyNavbar   gt   which also exists in RN  However  React uses the DOM  The DOM exists for HTML  thus React is used for web development   React Native  RN does not use HTML  and therefore is not used for web development  It is used for    virtually everything else  Mobile development  both iOS  amp  Android   smart-devices  e g  watches  TVs   augmented reality  etc  As RN has no DOM to interact with  instead of using the same sort of HTML tags used in React  it uses its own tags which are then compiled into other languages  For example  instead of  lt div gt  tags  RN developers use RN s built-in  lt View gt  tag  which compiles into other native code under the hood  e g  android view on Android  and UIView on iOS    In short  they re very similar  for UI development  but used for different mediums

User · Answer

ReactJS is a JavaScript library  supporting both front-end web and being run on a server  for building user interfaces and web applications  It follows the concept of reusable components  React Native is a mobile framework that makes use of the JavaScript engine available on the host  allowing you to build mobile applications for different platforms  iOS  Android  and Windows Mobile  in JavaScript that allows you to use ReactJS to build reusable components and communicate with native components further explanation Both follow the JSX syntax extension of JavaScript  Which compiles to React createElement calls under the hood  JSX in-depth Both are open-sourced by Facebook

User · Answer

React is use for web application those work in browser  React Native is use for android and IOS application those work in mobile apps

User · Answer

React-Native is a framework  where ReactJS is a javascript library you can use for your website    React-native provides default core components  images  text   where React provides a bunch of components and make them work together

User · Answer

React is a framework for building applications using JavaScript  React Native is an entire platform allowing you to build native  cross-platform mobile apps  and React js is a JavaScript library you use for constructing a high performing UI layer  React js is the heart of React Native  and it embodies all React   s principles and syntax  so the learning curve is easy  The platform is what gave rise to their technical differences  Like the browser code in React is rendered through Virtual DOM while React Native uses Native API   s to render components on mobile  React uses HTML and with React Native  you need to familiarize yourself with React Native syntax  React Native doesn   t use CSS either  This means you   ll have to use the animated API which comes with React Native to animate different components of your application  Bottom line  React is ideal for building dynamic  high performing  responsive UI for your web interfaces  while React Native is meant to give your mobile apps a truly native feel  Reff  what-is-the-difference-between-react-js-and-react-native

User · Answer

In a simple sense  React and React native follows the same design principles except in the case of designing user interface    React native has a separate set of tags for defining user interface for mobile  but both use JSX for defining components  Both systems main intention is to develop re-usable UI-components and reduce development effort by its compositions  If you plan  amp  structure code properly you can use the same business logic for mobile and web   Anyway  it s an excellent library to build user interface for mobile and web

User · Answer

ReactJS is a framework for building an hierarchy of UI components  Each component has state and props  Data flows from the top to low-level components via props  The state is updated in the top-level component using event handlers   React native uses React framework for building components for mobile apps  React native provides a basic set of components for both iOS and Android platforms  Some of the components in React Native are Navigator  TabBar  Text  TextInput  View  ScrollView  These components use native iOS UIKit and Android UI components internally  React native also allows NativeModules where code written in ObjectiveC for iOS and Java for Android can be used within JavaScript

User · Answer

Here is a very nice explanation   Reactjs is a JavaScript library that supports both front-end and server  Furthermore  it can be used to create user interfaces for mobile apps and websites    React Native is a cross-platform mobile framework that uses Reactjs for building apps and websites  React Native compiles to native app components enables the programmer to build mobile applications that can run on different platforms such as Windows  Android  iOS in JavaScript    Reactjs can be described as a base derivative of React DOM  for the web platform while React Native is a base derivative in itself  which means that the syntax and workflow remain the same  but components alter   Reactjs  eventually  is a JavaScript library  which enables the programmer to create an engaging and high performing UI Layer while React Native is an entire framework for building cross-platform apps  be it web  iOS or Android   In Reactjs  virtual DOM is used to render browser code in Reactjs while in React Native  native APIs are used to render components in mobile   The apps developed with Reactjs renders HTML in UI while React Native uses JSX for rendering UI  which is nothing but javascript   CSS is used for creating styling in Reactjs while a stylesheet is used for styling in React Native   In Reactjs  the animation is possible  using CSS  just like web development while in React Native  an animated API is used for inducing animation across different components of the React Native application   If the need is to build a high performing  dynamic  and responsive UI for web interfaces  then Reactjs is the best option while if the need is to give mobile apps a truly native feeling  then React Native is the best option    More here  https   www simform com reactjs-vs-reactnative

User · Answer

React is a JavaScript library for building user interfaces  It is used to reuse UI components  React Native is a JavaScript framework for writing real  natively rendering mobile applications for iOS and Android  Both are developed by facebook and they share same lifecycle methods

User · Answer

React Native It  homepage  is a JavaScript framework for developing mobile applications that can run natively on both Android and iOS  It is based on ReactJS  developed at Facebook  which is a declarative  component-based framework for developing web user interfaces  UIs   Syntax return       lt View gt         lt Text gt Hello World lt  Text gt       lt  View gt     React It is a JavaScript library for building user interfaces for web development  It also allows us to create reusable UI components You can reuse code components in React JS  saving you a lot of time  Syntax return       lt div gt         lt p gt Hello World lt  p gt       lt  div gt

User · Answer

React is essentially own and developed by Facebook  It actually came into the world of technology in 2013   React is a JS library not a framework  The most remarkable point about React is it is able to create both- front-end and back-end  React NATIVE is simply a mobile development platform Prior to React native you needed to know Java for Android or Objective-C for iPhone and iPad to create native React app   In a nutshell  React is Webdev technology and React-Native is a mobildev technology

User · Answer

React Native   It is a framework for building native applications using JavaScript  It compiles to native app components  which makes it possible for you to build native mobile applications  No need to overhaul your old app  All you have to do is add React Native UI components into your existing app   s code  without having to rewrite    React js    It supporting both front-end web and being run on a server  for building user interfaces and web applications  It also allows us to create reusable UI components  You can reuse code components in React JS  saving you a lot of time

User · Answer

React-Native is a framework for developing Android  amp  iOS applications which shares 80  - 90  of Javascript code     While React js is a parent Javascript library for developing web applications     While you use tags like  lt View gt    lt Text gt  very frequently in React-Native  React js uses web html tags like  lt div gt   lt h1 gt   lt h2 gt   which are only synonyms in dictionary of web mobile developments  For React js you need DOM for path rendering of html tags  while for mobile application  React-Native uses AppRegistry to register your app    I hope this is an easy explanation for quick differences similarities in React js and React-Native

User · Answer

ReactJS is a javascript library which is used to build web interfaces  You would need a bundler like webpack and try to install modules you would need to build your website   React Native is a javascript framework and it comes with everything you need to write multi-platform apps  like iOS or Android   You would need xcode and android studio installed to build and deploy your app   Unlike ReactJS  React-Native doesn t use HTML but similar components that you can use accross ios and android to build your app  These components use real native components to build the ios and android apps  Due to this React-Native apps feel real unlike other Hybrid development platforms  Components also increases reusability of your code as you don t need to create same user interface again on ios and android

User · Answer

A simple comparison should be  ReactJs  return       lt div gt         lt p gt Hello World lt  p gt       lt  div gt      React Native  return       lt View gt         lt Text gt Hello World lt  Text gt       lt  View gt      React Native don t have Html Elements like div  p  h1  etc  instead it have components that make sense for mobile  More details at https   reactnative dev docs components-and-apis

User · Answer

In Reactjs  virtual DOM is used to render browser code in Reactjs while in React Native  native APIs are used to render components in mobile  The apps developed with Reactjs renders HTML in UI while React Native uses JSX for rendering UI  which is nothing but javascript

User · Answer

In response to the comment from  poshest above  here is a React Native version of the Clock code previously posted in React  sorry  I was unable to comment on the section directly  otherwise I would have added the code there    React Native code sample  import   AppRegistry   from  react-native   import React    Component   from  react   import   View  Text  StyleSheet   from  react-native    class Clock extends Component     constructor props        super props       this state     date  new Date             componentDidMount         this timerID   setInterval             gt  this tick          1000               componentWillUnmount         clearInterval this timerID          tick         this setState         date  new Date                  render         return          lt View style  styles container  gt           lt Text style  styles sectionTitle  gt Hello  world  lt  Text gt           lt Text style  styles sectionDescription  gt It is  this state date toLocaleTimeString     lt  Text gt         lt  View gt                const styles   StyleSheet create     container        backgroundColor   white       flex  1      justifyContent   center          sectionTitle        fontSize  24      fontWeight   600       color   black       alignSelf   center          sectionDescription        marginTop  8      fontSize  18      fontWeight   400       color   darkgrey       alignSelf   center             AppRegistry registerComponent  clock        gt  Clock     Note that the styling is entirely my choice and does not seek to replicate directly the  lt h1 gt  and  lt h2 gt  tags used in the React code

User · Answer

ReactJS is a core framework  meant to build component isolated based on reactive pattern  you can think of it as the V from MVC  although I would like to state that react does brings a different feel  specially if you are less familiar with reactive concept    ReactNative is another layer that is meant to have a set component for Android and iOS platform that are common  So the code looks basically the same as ReactJS because is ReactJS  but it load natively in mobile platforms  You can also bridge more complex and platform relative API with Java Objective-C Swift depending on the OS and use it within React

User · Answer

Simple React Js is for web React Native is for cross-platform mobile apps

[javascript] What is the difference between React Native and React?

Examples related to javascript

Examples related to reactjs

Examples related to react-native

Examples related to javascript-framework