reactjs native? - What is the difference between React Native and React?




tutorial react.js (21)

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?


Answers

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.


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.


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.


Explaining very simple, React and React native follows same design principles except in the case of designing user interface.

  1. React native has a separate set of tags for defining user interface for mobile, but react uses html-css for defining interfaces
  2. Both systems main intention is to re-use user interfaces
  3. Both follows component based architecute

Anyway it's an excellent framework to build user interface for mobile and web


First, the similarities: Both react & react-native (RN) were designed to allow developers 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.

React: Facebook (who developed RN a few years after react) 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) (e.g. the familiar HTML-like tags such as <div> or <p>). A hallmark of React is the capital-letter tags which denote a custom component, such as <MyFancyNavbar />, which is also true for RN. However, where they differ is in that React uses the DOM. Since the DOM exists for HTML, React is therefore used for web development.

React Native: RN does not use HTML, and therefore, it is not used for web development. It is used for... virtually everything else! Mobile development (both iOS & Android), smart-devices (e.g. watches, TVs), augmented reality, etc. Since RN has no DOM to interact with, instead of using the same sort of HTML tags used in React, it uses its own tags that are then compiled into other languages. For example, instead of <div> tags, RN developers will uses RN's built-in <View> tag, which will compile 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.


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.


React Native is very similar to ReactJS in a way, but there are differences you need to know before you start your first native app. It is a mobile-app development framework hybrid available for iOS and Android. ReactJS and React Native are similar in one way, but in others they are completely different. ReactJS is the core of React Native, understanding of the former is key.

ReactJs often referred to as React or ReactJS is a JavaScript library responsible for building a hierarchy of UI components or in other words, responsible for the rendering of UI components. It provides support for both frontend and server-side. React.js is just the V part of the MVC framework, a library meant for rendering your views.


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 framework and it comes with everything you need to write ios and android apps built in. You would need xcode and android studio installed to build and run your app.

Unlike ReactJS, React-Native doesnt 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 dont need to create same user interface again on ios and android.

I would recommend all ios and android developers to have fun with this library.


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.


  1. React-Native is a framework for developing Android & iOS applications which shares 80% - 90% of Javascript code.

While React.js is a parent Javascript library for developing web applications.

  1. While you use tags like <View>, <Text> very frequently in React-Native, React.js uses web html tags like <div> <h1> <h2>, which are only synonyms in dictionary of web/mobile developments.

  2. 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.


Here are the differences that I know about:

  1. They have different html tags: React Native is using for handling text and instead of in React.
  2. React Native is using Touchable components instead of a regular button element.
  3. React Native has ScrollView and FlatList components for rendering lists.
  4. React Native is using AsyncStorage while React is using local storage.
  5. In React Native routers function as a stack, while in React, we use Route components for mapping navigation.

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


Google can't explain this to you, as you said, but Google would be so happy if they invented React.

Here is the React project ( https://github.com/facebook/react ).

At Facebook, they invented React so JavaScript can manipulate the website DOM faster using the virtual DOM model.

DOM full refresh is slower compared to the React virtual-dom model, which refreshes only parts of the page (read: partial refresh).

As you may understand from this video, Facebook did not invent React because they understood immediately that the partial refresh would be faster than the conventional one. Originally they needed a way to reduce Facebook application re-build time and luckily this brought the partial DOM refresh to life.

React native ( https://github.com/facebook/react-native ) is just a consequence of React. It is a platform to build native apps using JavaScript.

Prior to React native you needed to know Java for Android or Objective-C for iPhone and iPad to create native apps.

With React Native it is possible to mimic the behavior of the native app in JavaScript and at the end, you will get platform specific code as the output. You may even mix the native code with the JavaScript if you need to optimize your application further.

As Olivia Bishop said in the video, 85% of the React native code base can be shared among platforms. These would be the components applications typically use and the common logic.

15% of the code is platform specific. The platform-specific JavaScript is what gives the platform flavor ( and makes the difference in the experience ).

The cool thing is this platform specific code — is already written, so you just need to use it.


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.


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.


React is a framework used for developing the web apps.

React native is a framework used to develop the mobile apps (iOS and Android).



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.


React.js

React.js often referred to as React or ReactJS is a JavaScript library responsible for building a hierarchy of UI components or in other words, responsible for the rendering of UI components. It provides support for both frontend and server-side.

React Native

React Native is a framework for building native applications using JavaScript. React Native compiles to native app components, which makes it possible for you to build native mobile applications. In React JS, React is the base abstraction of React DOM for the web platform, while with React Native, React is still the base abstraction but of React Native. So the syntax and workflow remain similar, but the components are different.

React.js was developed by Facebook to address its need for a dynamic and high performing User Interface(UI). In 2011, Jordan Walke and his team from Facebook released the React JS library, a JavaScript library which brought together the speed of JavaScript and a new way of rendering pages, leading to a responsive and dynamic user input. In 2015, two years after the team open sourced React.js and its popularity grew, they released React Native.


We can't compare them exactly. There are differences in usecase.

( 2018 update )


ReactJS

has as 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 JS, saving you a lot of time. ( as you can in RN too )
    • As 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, as Cordova or Ionic to built Mobile Apps too, with ReactJS, but is more efficiently building mobile apps with React Native from many points.

ReactNative

an extension of react, niched on Mobile Development.

    • its main focus -> is all about Mobile User Interface.
    • iOS & Android covered.
    • Reusable React Native UI components & modules that 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 ReactJS 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 :)


Since you are writing Javascript syntax inside JSX code, you need to wrap your Javascript in curly braces.

row = () => {
   var rows = [];
   for (let i = 0; i<numrows; i++) {
       rows.push(<ObjectRow/>);
   }
   return rows;
}
<tbody>
{this.row()}  
</tbody>






reactjs react-native javascript-framework