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?
45 Answers
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
Comments
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/
Comments
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
Comments
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.
Comments
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.
Comments
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.
1 Comment
<h1>, <p>, etc. Where react-native renders native app view components like <View> and <Text>.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.
<h1>,<p>, etc. Where react-native renders native app view components like<View>,<Text>,<Image>,<ScrollView>, so you can't directly reuse your UI component code unless you rework/replace all the elements.