When I develop hybrid apps with React Native. Does the JavaScript code I write transform into Java-Code or Java-Bytecode for the Dalvik/ART Runtime when I create an Android-App from my React Native code? Or are just the UI components compiled into native UI components? Or does a library like the Fetch API compile the JavaScript code into Java-Code or Java-Bytecode?
Basically, you write Javascript. The Javascript communicates with native components (Java on Android, Objective C on iOS, C# on Windows).
The communication occurs through the so-called "bridge". If at any time you feel that this communication slows things down too much, you can choose to implement the Javascript functionality in Java, Objective C, or C# respectively in order to run purely native. In this case, you are writing directly in native code, so there's no Javascript to native compilation.
This will sacrifice compatibility for performance. Normally, this is not necessary.
Further reading
Understanding React Native bridge concept
The code remains the JavaScript native code and is not converted into any other format. The hybrid apps run inside the native container app which invokes JavaScript run time engine which takes care of executing the JavaScript code. I hope this clarifies the question.
Based on "React Made Native Easy" book:
Essentially, React Native can be considered as a set of React
components, where each component represents the corresponding native
views and components.
Also there is two parts in React Native architechture:
Native Code/Modules: Most of the native code in case of iOS is written in Objective C or Swift, while in the case of Android it is
written in Java. But for writing our React Native app, we would hardly
ever need to write native code for iOS or Android.
Javascript VM: The JS Virtual Machine that runs all our JavaScript code. On iOS/Android simulators and devices React Native
uses JavaScriptCore, which is the JavaScript engine that powers
Safari. JavaScriptCore is an open source JavaScript engine originally
built for WebKit. In case of iOS, React Native uses the JavaScriptCore
provided by the iOS platform. It was first introduced in iOS 7 along
with OS X Mavericks.
And for communication between these parts:
React Native Bridge: React Native bridge is a C++/Java bridge which is
responsible for communication between the native and Javascript
thread. A custom protocol is used for message passing.
The best explanation i saw-
00:00 - 03:55
https://www.youtube.com/watch?v=6ZnfsJ6mM5c&t=1228s
"In react native app after compiled - all the UI(Buttons,Text...) going
to get compiled to native code(Java or Objective C) and the JavaScript part is going to
stay JavaScript."
For full explanation -
08:06-14:10
https://www.youtube.com/watch?v=qSRrxpdMpVc
React Native
React -> JavaScriptCore -> Native Code -> "What you see"
Hybrid App
JavaScript -> Native WebView wrapper -> "What you see"
React Native works as a wrapper. For example: if you wanted to put a button in your layout, you'd simply add a button tag. You then use a specific API from the UI module to render this on Android. You can easily create custom native modules to use in your React Native projects. However, code written natively is often faster.
I'm building a webapp and ios/android (same app). At first I thought cordova may be a good choice then after reading I thought React-native may be a better choice.
My question is: Will I have to write the same app twice (one in react for web and one in reactnative for mobile) ?
I've seen some library that can share react-native component for web but I feel I'm gonna be limited.
What do you think ?
Edit: One more question
With react I would use flux (and probably now redux) what should I do to keep my react-native app clean and readable, I mean how should I manage data there ? thanks for your answers already
Doing the same thing right now - I am not sharing the code base because the content of web/mobile app is different - I am using web for administration and mobile app for viewing the content.
React native uses the native views UIView, Text etc for display. You can't have the same code base for them.
React native uses flex box( it has its own implementation) so that also wont work for web react projects.
The only way is to keep them seperate.Also Web and App would be having different design .
Right now you can't share code base b/w React Native / React codes since one relies on native UI code and the other html DOM. There is an interesting project to combine the two (https://github.com/necolas/react-native-web) but it's by no means production ready.
I know this may be a late answer but it will be helpful in future. Check https://github.com/este/este, it has different stacks for mobile, web and server. You could use common components in common folder. It uses firebase as a backend service, but you can change to any service.
While it's true you can't use the exact same code for react native and react JS, you can architect your code base to reuse as much code as possible. Check out this project:
https://github.com/benoitvallon/react-native-nw-react-calculator
You actually can use the same code with the use of WebView component in React-Native.
Here is a link:
https://facebook.github.io/react-native/docs/webview.html
React Native relies on Native UI code and not html, meaning that all view components will have to be rewritten. However, if you keep all you logic out of your 'dumb' functional components in your web app, you should be able to reuse a substantial portion of your web code.
For instance, you might have an outer container that handles anything you want to happen on mount with componentDidMount, handles and defines onClicks, and determines which view components to render. This code can be exactly the same in web and mobile, and then your 'dumb' function view components would differ in that one uses native view elements and the other uses HTML.
The code for the web-app and the native apps can't be the same (or you might be fine with a WebView wrapper as apps). I suppose you're asking that because the functionality would be the same for both interfaces. The look and feel can be (almost) the same.
If you see your apps only as views, the backend (controllers & models) could be shared with multiple platforms. You could also try a Backend as a Service like Firebrand or Parse. Not really an answer on the redux part but it is an easy way to get kickstarted.
I definitely think you can reuse some of your code. If you're using redux which you probably will if you have some complexity - stuff like actions and reducers are easily reusable. While the UI components itself is not reusable always you can reuse some of the stuff supporting it.
Like timvp mentioned you can also use WebViews to reuse the code but I would not recommend since it does not have the same kind of performance as native modules always.
I suggest you to look at Redux architecture.
You will likely get the following folder architecture :
.
└── src
├── actions
├── components
├── containers
└── reducers
If you organize well your code, the react-native specific component will only be located inside the component folder.
All the logic and even the organization is reusable.
You will rewrite the components with plain html instead of native component. And also the apps entrypoints as they are different, but I don't find it is a really big deal.
More redux examples https://github.com/reactjs/redux/tree/master/examples
To answer to your second question : Redux is the state(data) manager.
It flows in a unidirectionnal manner.
For example, how do you handle a user click ?
The event is fired from the component
The container (which holds the logic) dispatches the action (say BUTTON_CLICK)
The reducers receive the BUTTON_CLICK with the current state, only the concerned ones will update the application state (ex: increment a counter)
When the state is updated, the render tree runs
Here is the full explaination of redux flow https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.z0bcil3i0
To better understand why this mess is awesome read this http://redux.js.org/
You can share most of your code between React and React Native (especially if you use react-native-web.
Try this article : http://jkaufman.io/react-web-native-codesharing/
It gives a pretty neat example of how to do it.
I highly recommend that you keep most of your domain logic (API calls, flux, and even Smart component handling the logic) and only rewrite the dumb components handling the view so that you can implement the best UX for either Desktop or Mobile.
You can name your dumb component view files like so:
MyComponent.js (for your web app)
MyComponent.native.js (for your native app) or MyComponent.ios.js & MyComponent.android.js if you rather have different views according to the platform.
The short answer is... YES!...
You need to write 2 code-base, but read on for the longer answer.
React Native is created for coding Application using some features of React, while React is created to do Website and Web applications, so they have similarity in nature, syntaxes and library which both using, So basically you need to rewrite some parts of you application, I can say around 20% to 70% percent and it really depends.
I compare React Native and React with some code samples from both for a small component, you can check the differences, but just let you know, for a real application, the difference could much more than what you see here:
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.
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>
);
}
}
more info here
React
React makes it painless to create interactive UIs. Design simple views
for each state in your application, and React will efficiently update
and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
import React, { Component } from 'react';
class HelloMessage extends React.Component {
render() {
return (
<div>
<p>If you like React Native on the devices, you'll like React.</p>
<p>You just use web components like 'div' and 'span',
instead of native components like 'View' and 'Text'.</p>
</div>
);
}
}
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
more info here
I wonder why noone is mentioning ReactXP. ReactXP is
a library maintained by Microsoft that lets you create web, ios, andoid and windows apps with React:
XP means X-Platform
Share most of your code between the web, iOS, Android, and Windows.
https://microsoft.github.io/reactxp/
Other options as mentioned are
https://github.com/necolas/react-native-web
https://github.com/este/este
React Native is for apps only, it generates fully native components and React Native has specific syntax for its components.
Using some package to conert React Native code base into web would be noth worth it as you would be limited, and you go against React Native flow, it would be the same as converting Swift or Java written app into web via package. It is not optimal and limited.
This is the beauty that you learn javascript and with React(or any other library/framework of your choice) you write best possible web app with web experience, while at the same time using your knowledge on JS you can deliver fully native experience into your apps.
That's about the point of getting close to doing web and native - you can use the same core language and deliver best experiences on both worlds.
You can share the business logic using the same JavaScript codes (simply by copying the code). On the other hand, because of the nature of the hardwares, it is completely normal to have different presentation layers for web (mostly on your desktop/laptop browsers) and mobile (native).
You can refer to react-spa-jwt-authentication-boilerplate (*) as an example. It shares the "business logic" between web and native versions via a folder named common-logic by keeping exact copies of *.js files. On the other hand navigation and presentation layer differs. It implements a sample authentication process which itself can also be used as a baseline for new projects.
(*) Disclimer: I am the implementer of the repo. We needed to implement the repo for the exact same need of reducing development time between mobile and web applications.
i'm trying to do the same thing. RN is not all the same with React, you will have to deal with native views like: Text, View, ScrollView, ListView, etc. except this, they are nearly the same.
so, you can organize your code like this:
root
src
lib // code for all other three platform
android // code for android only
ios // code for ios only
web // code for web only
index.js //for web
index.ios.js // for ios
index.android.js // for android
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
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?
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 or Kotlin for Android and Swift 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 in the end, you will get platform-specific code as the output. You may even mix the native code with JavaScript if you need to optimize your application further.
As Olivia Bishop said in the video, 85% of the React native codebase 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://reactjs.org/
For more information about React Native, visit React native website below:
https://reactnative.dev/
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.
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.
Note: React Native as a framework allows for development of mobile apps in similar syntax to HTML and CSS. React Native components effectively replace HTML in native development.
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.
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.
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.
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 :)
I know there are already many answers to it but after reading all these I felt no one explains the architectural difference between these two and how these two works so I believe there is still room for explanation.
React
React = Vanilla JS + ES6 + HTML + CSS = JSX = Web Apps(Front end)
So let's talk about React first because React-Native is also based on react and the same concept of JS is been used there.
React is a JS library that 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 these types 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, and 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 use 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 (Vanilla JS + ES6 + Bridge between JS and Native code) + Native(iOS, Android) = Mobile Apps(Android, iOS, also supported web but have some limitations)
React-Native is used to make beautiful cross-platform mobile apps(Android, iOS) using React.
How it works
In React-Native there are two threads.
JS Thread
Native Thread
All of the React code is executed inside the JS thread and the final value passes to the native thread which draws a layout on the screen with the final value.
JS thread performs all of the calculations and passes data to the native, How?
React uses an Async Bridge to pass data to a Native thread in JSON format is called React-Native
NOTE: New architecture does not rely on the bridges anymore it used JSI and fabric for the communication between native and JS code which happened synchronously(it's explained in the below section).
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 the async bridge to communicate between these two worlds, overloading this bridge causes performance issues.
Update:
React-Native is now going through a re-architecture phase and the Facebook team is trying to remove the async bridge to communicate between JS and native synchronously the major part of this re-architecture is JSI(Javascript interface) and fabric.
JSI: JSI removes the need for a bridge between Native(Java/ObjC) and Javascript code. It also removes the requirement to serialize/deserialize all the information as JSON for communication between the two worlds. JSI is opening doors to new possibilities by bringing close the javascript and the native worlds.
Below are the main things which JSI offers.
Javascript Interface which allows us to register methods with the Javascript runtime. These methods are available via the global object in the Javascript world.
The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code on Android.
Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++
On iOS writing, this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use now.
On android however we have to go the extra mile to do this through JNI.
These methods can be fully synchronous which means using async/await is not mandatory.
Fabric: Fabric is a new UI layer that allows us to communicate with the native UI components synchronously, According to the docs.
Fabric is React Native's new rendering system, a conceptual evolution of the legacy render system. The core principles are to unify more render logic in C++, improve interoperability with host platforms, and unlock new capabilities for React Native. Development began in 2018 and in 2021, React Native in the Facebook app is backed by the new renderer.
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, Web)
Architecture
Virtual DOM
Virtual DOM + Bridge + Native implementation
Animations
CSS Animations
Native Animations
Styling
CSS
JS Stylesheets
Developed By
Facebook
Facebook
In a simple sense, React and React native follows the same design principles except in the case of designing user interface.
React native has a separate set of tags for defining user
interface for mobile, but both use JSX for defining components.
Both systems main intention is to develop re-usable UI-components and reduce development effort by its compositions.
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.
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
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.
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.
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 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.
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
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.
React Js is manipulating with HTML Dom.
But React native is manipulating with mobile(iOS/android) native ui component.
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.
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
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/
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.
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.
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/
Here are the differences that I know about:
They have different html tags: React Native is using for handling text and instead of in React.
React Native is using Touchable components instead of a regular button
element.
React Native has ScrollView and FlatList components for rendering lists.
React Native is using AsyncStorage while React is using local storage.
In React Native routers function as a stack, while in React, we use Route components for mapping navigation.
In summary: React.js for Web Development while React-Native for Mobile App Development
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.
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.
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
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.