Home » Reactjs » What is difference between React native vs React?

What is difference between React native vs React?

Posted by: admin November 29, 2017 Leave a comment

Questions:

I have started to learn React out of curiosity and wanted to know this. Could not find a satisfactory answer in Google. React and React native seem to have same format. Do they have completely different syntax?

Answers:

ReactJS is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.

React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

Both are open sourced by Facebook.

Questions:
Answers:

Google can’t explain you this, 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 website DOM faster using the virtual DOM model.

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

As you may understand from this video at Facebook they invented React not because they understood immediately the partial refresh will 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.

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

Questions:
Answers:

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.

Questions:
Answers:
  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.

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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 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(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

React Native code sample:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

For more information about React, visit the official website by facebook:

https://facebook.github.io/react

For more information about React Native, visit React native website here:

https://facebook.github.io/react-native/

Questions:
Answers:

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.

Questions:
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.

Questions:
Answers:

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

Questions:
Answers:

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

Questions:
Answers:

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.

Questions:
Answers:

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.

Questions:
Answers:

ReactJS is for Web while React Native is for Mobile. Do not over complicate things.