React Native

React Native is an open-source mobile application framework created by Facebook.^[3] It is used to develop applications for Android^[4], iOS and UWP^[5] by enabling developers to use React along with native platform capabilities.

History

In 2012 Mark Zuckerberg commented, "The biggest mistake we made as a company was betting too much on HTML as opposed to native".^[6] He promised that Facebook would soon deliver a better mobile experience.

Inside Facebook, Jordan Walke found a way to generate UI elements for iOS from a background JavaScript thread.^[7] They decided to organise an internal Hackathon to perfect this prototype in order to be able to build native apps with this technology.^[8]

After months of development, Facebook released the first version for the React JavaScript Configuration in 2015. During a technical talk,^[9] Christopher Chedeau explained that Facebook was already using React Native in production for their Group App and their Ads Manager App.^[10]

Implementation

The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM. It runs in a background process (which interprets the JavaScript written by the developers) directly on the end-device and communicates with the native platform via a serialisation, asynchronous and batched Bridge.^[11][12].

React Native does not use HTML. Instead, messages from the JavaScript thread are used to manipulate native views.

Hello World Example

A Hello, World program in React Native looks like this:

 1 import React, { Component } from 'react';
 2 import { AppRegistry, Text } from 'react-native';
 3 
 4 export default class HelloWorldApp extends Component {
 5   render() {
 6     return (
 7       <Text>Hello world!</Text>
 8     );
 9   }
10 }
11 
12 // Skip this line if using Create React Native App
13 AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);
14 
15 // The ReactJS code can also be imported into another component with the following code:
16 
17 import HelloWorldApp from './HelloWorldApp';

References