What is the difference between React Native and React?
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.
Here is the React project.
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 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:
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: