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
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
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
In summary: React.js for Web Development while React-Native for Mobile App Development
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.
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.
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