What is the difference between React Native and React?

What is the difference between React Native and React?

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?

Solutions/Answers:

Solution 1:

ReactJS is a JavaScript library, supporting both front-end web and being run on a 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 for different platforms (iOS, Android, and Windows Mobile) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

Both are open sourced by Facebook.

Solution 2:

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.

Solution 3:

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

Solution 4:

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.

Solution 5:

  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.

Solution 6:

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.