879

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?

Alireza
  • 83,698
  • 19
  • 241
  • 152
shiva kumar
  • 10,194
  • 4
  • 20
  • 24
  • 98
    Everybody is giving a dictionary response when most people asking this question just want to know how interchangeable they are: How easy is it to port their React code to React Native? Will you need to rewrite the front end of your web app into *different* React code if you want it on an iPad? How different? – Lawrence Weru Aug 10 '18 at 13:35
  • 33
    Short answer is that react-native builds mobile apps for iOS, Android, and Windows Mobile that you can compile and put in the app stores for users to install. Reactjs is for building web pages for use in a web browser. Both use reusable components, but the syntax you use to render elements in the components (using JSX) is different. React JSX renders html-like components like `

    `, `

    `, etc. Where react-native renders native app view components like `` , ``, ``, ``, so you can't directly reuse your UI component code unless you rework/replace all the elements.

    – Ira Herman Jul 29 '19 at 07:05

45 Answers45

914

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.

Nader Dabit
  • 47,131
  • 13
  • 103
  • 88
  • 74
    So, if I build an app in react native can any/all of it be reused in reactJS or vice versa? – Troy Cosentino Sep 30 '16 at 15:32
  • 12
    @MelAdane The poster is likely referring to the use of ReactJS libraries on a NodeJS in order to create prebuilt files (using something like Webpack) which can then be served to the client as static files. – Pineda Oct 24 '16 at 17:34
  • 9
    If I build a webapp using react, can the same HTML/JS code can be used in mobile app using react native? – Ravi Maniyar Mar 19 '17 at 14:26
  • 15
    @RaviManiyar NO, you can reuse your business logic but you cannot reuse your ui codes. React Native uses native ui components while React.JS uses is for web and ui is built using html components and css – Chromonav Mar 20 '17 at 09:56
  • regard React Native, so we code the logic by native language and React Native take care the UI – Felix May 25 '17 at 09:51
  • @AdamKowalski Yes, you can build UWP apps with React Native -> https://www.microsoft.com/reallifecode/2016/05/26/creating-universal-windows-apps-with-react-native/ – Levi Fuller Jun 02 '17 at 01:44
  • The only difference is - "dumb components" – iegik Jun 26 '17 at 21:00
  • React Native will provide all the required tools to code as if you were using React. React native gives you Views instead of Divs, etc. – David Casanellas Sep 19 '18 at 15:00
  • react native also offers react native web that makes your codebase port as a website – serdarsenay Jul 15 '19 at 23:45
156

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(
      () => 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 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

Alireza
  • 83,698
  • 19
  • 241
  • 152
  • 56
    Your code samples are useful, but it would be SO much better to see the SAME component implemented in each framework – poshest Oct 28 '17 at 13:09
  • 10
    Your answer should be the accepted one, I came here looking to see if React and React Native have the same architecture and if the code looks the same not for the definitions of both libraries. – Gherbi Hicham Feb 28 '18 at 18:26
  • 2
    I wish to add, that if you went raw native, you'd have literally only two lines of code, one of which is setup automatically for the outlet (depending). Yes, you'll need a date formatter, but still just one line. I have a hard time reading "This is why react is awesome" when it literally has 20 times more lines of code than actual native apps. That said, I do appreciate your answer, and even enjoy React on web for the solutions it provides in the domain it's great at. I just wish more people knew how to implement its patterns without it, to compare when it's useful vs maintenance nightmaring – Stephen J May 21 '19 at 21:50
75

First, the similarities: Both React & 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 <div> or <p>. A hallmark of React is the capital-letter tags which denote a custom component, such as <MyFancyNavbar />, 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 & 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 <div> tags, RN developers use RN's built-in <View> 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.

jkdev
  • 9,037
  • 14
  • 52
  • 75
Ryo-code
  • 1,110
  • 1
  • 8
  • 12
68

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.

vijayst
  • 14,909
  • 15
  • 55
  • 99
50
  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.

Suraj Rao
  • 28,186
  • 10
  • 88
  • 94
  • Much of React.js is used by React Native. To say it is " for developing web applications" when it is also used directly in React Native to build mobile applications is confusing. Many React Native applications, especially smaller applications, can use 100% shared javascript code with no platform specific code whatsoever. – Isaac C Way Feb 16 '21 at 22:57
40

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 & Android are covered.
    • Reusable React Native UI components & 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 :)

Community
  • 1
  • 1
Adrian Gheorghe
  • 609
  • 6
  • 11
25

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.

Manzoor Samad
  • 870
  • 1
  • 8
  • 15
21

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

Bipon Biswas
  • 9,919
  • 1
  • 23
  • 34
18

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.

Necronet
  • 6,398
  • 7
  • 46
  • 85
18

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.

Glorfindel
  • 19,729
  • 13
  • 67
  • 91
Ramya Ram
  • 181
  • 1
  • 2
16

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.

Sharlon M. Balbalosa
  • 1,249
  • 14
  • 21
14

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.

iPragmatech
  • 413
  • 5
  • 5
13

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

Nischith
  • 168
  • 1
  • 7
11

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.

Scott Blanch
  • 178
  • 1
  • 8
11

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.

S. Sinha
  • 135
  • 1
  • 7
11

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.

  1. JS Thread

  2. 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, Web
Open Source Yes Yes
User Interface HTML + CSS Native Components(IOS, Android)
Arichtecure Virtual Dom Virtual Dom + Bridge
Animations CSS Animations Native Animations
Styling CSS JS Stylesheets
Developed By Facebook Facebook
Waheed Akhtar
  • 2,395
  • 1
  • 11
  • 22
8

React Js is manipulating with HTML Dom. But React native is manipulating with mobile(iOS/android) native ui component.

Uzama Zaid
  • 197
  • 2
  • 9
7

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.

B--rian
  • 4,650
  • 8
  • 25
  • 63
Ashish Pisey
  • 1,434
  • 1
  • 20
  • 28
6

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

Rajender Dandyal
  • 291
  • 1
  • 3
  • 10
5

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 "shadow DOM" 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 & 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 = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <div>
                {this.state.data.map((data) => (
                    <p key={data.id}>{data.label}</p>
                ))}
                <button onClick={this.clearData}>
                    Clear list
                </button>
            </div>
        );
    }

}

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 "bridge". 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 = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
                />
                <Button title="Clear list" onPress={this.clearData}></Button>
            </View>
        );
    }

}

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 "DOM" 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/

Community
  • 1
  • 1
Matt Aft
  • 7,698
  • 1
  • 19
  • 31
4

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.

4

React vs React Native

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.

GOVINDARAJ
  • 159
  • 5
3

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.
Dusty
  • 336
  • 4
  • 14
3

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

Albert A
  • 399
  • 3
  • 8
3

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.

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.

Martin N
  • 168
  • 2
  • 7
2

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.

Naveen
  • 174
  • 2
  • 10
2

A simple comparison should be

ReactJs

return(
    <div>
      <p>Hello World</p>
    </div>
)

React Native

return(
    <View>
      <Text>Hello World</Text>
    </View>
)

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

2

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.

Sid009
  • 153
  • 1
  • 13
1

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.

solex
  • 29
  • 3
  • Short answer is that react-native builds mobile apps for iOS, Android, and Windows Mobile that you can compile and put in the app stores for users to install. Reactjs is for building web pages for use in a web browser. Both use reusable components, but the syntax you use to render elements in the components (using JSX) is different. React JSX renders html-like components like `

    `, `

    `, etc. Where react-native renders native app view components like `` and ``.

    – Ira Herman Jul 29 '19 at 07:04
1

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.

heart hacker
  • 431
  • 1
  • 6
  • 21
1

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.

Abhishek Kumar
  • 367
  • 4
  • 7
1

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

Naved Khan
  • 805
  • 7
  • 10
1

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.

1

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.

1

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(
    <View>
      <Text>Hello World</Text>
    </View>
)

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(
    <div>
      <p>Hello World</p>
    </div>
)
Biplov Kumar
  • 298
  • 3
  • 11
1

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/

0

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

0

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/

0

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

Nooruddin Lakhani
  • 4,098
  • 2
  • 14
  • 32
0

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.

Anil Stha
  • 311
  • 1
  • 10
0
  • React Native is an open-source mobile application framework.
  • React JS is front-end javascript library it's large library not a framework.
A Trần
  • 21
  • 3
0

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

Dingus45191
  • 389
  • 1
  • 11
0

The difference is quite simple.

We use React for web apps, and React Native to develop mobile apps.

Where React focuses more on improved UI (User Interface), RN is sharing a common logic layer for all OS. That provides solutions to problems which were being dealt for quite a while now, such as development inefficiency, slower time to deployment and less developer productivity.

It is important to note that React is a library used for web development whereas React Native is a platform.

Another interesting thing is that when you want to use RN, you have everything you need to start a project. On the other hand, creating a new project with React means you have chosen only one of many libraries you will have to use to build a web application.

More useful info you can find in that article: https://pagepro.co/blog/react-native-faq-all-you-need-to-know

Rafał Gołubowicz
  • 541
  • 1
  • 5
  • 18
-2

Let's be short and crisp.

React is used for web development, and React Native is used for app development. That's pretty much it. See, the power of simplicity!