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

Answer 1

In a simple sense, React and React native follows the 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 both use JSX for defining components.
2. Both systems main intention is to develop re-usable UI-components and reduce development effort by its compositions.
3. If you plan & 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.

Answer 2

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

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

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

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.sectionTitle}>Hello, world!</Text>
        <Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    );
  }
}

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", () => Clock);

Note that the styling is entirely my choice and does not seek to replicate directly the <h1> and <h2> tags used in the React code.

Answer 3

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.

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

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

Answer 4

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

Answer 5

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.

Answer 6

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.