React Native is a framework to create multi-platform mobile applications.

Pros:

• fast development loop; it instantly renders changes and keeps app state
• you can use functional code with ClojureScript and Re-natal + Reagent
• you can use strongly typed language with TypeScript

Cons:

• debugging build failures is tedious; there are just so many tools involved
• you are building on top of Node ecosystem; expect node_module problems
• React Native apps are heavy; avoid adding a lot of animations

Setup on Windows

Download and install Chocolatey. Chocolatey is a package manager for Windows, install anything from Firefox to Golang compiler Chocolatey Packages.

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

choco install nodejs.install
choco install python2

Download and install Java JDK 8. Required for Android Studio.

Download and install Android Studio.

Install the following in Android SDK Manager.

Tools:
- [x] Android SDK Tools
- [x] Android SDK Platform-tools
- [x] Android SDK Build-tools 23.0.1
Android 6.0 (API 23)
- [x] SDK Platform
- [x] Intel x86 Atom_64 System Image
- [x] Intel x86 Atom System Image
Extras:
- [x] Android Support Repository
- [x] Google USB Driver
- [x] Intel x86 Emulator Accelerator (HAXM installer)

Use Android AVD to launch an emulator device.

Create new device:
    ReactNative
    Nexus 5
    API Level 23
    Intel Atom (x86)
    No Skin
    None
    None
    RAM 2048, VM Heap 64
    Internal Storage 200
    SD Card Size 100
    [x] Use Host GPU

Try out the template project. You need to have Android emulator device running for this to work.

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

React Native

You can use ES6 features when building with React Native. Welcome to the future of JavaScript!

() => console.log("Arrow syntax");         // function arrow syntax
class SkinnedMesh extends THREE.Mesh {};   // classes
{handler, toString() { return "myName" }}; // enhanced object definition
`Hello ${name}, how are you ${time}?`;     // template strings
function f(x, y=12) {};                    // default parameter
function f(x, ...y) {};                    // rest parameter
f(...[1,2,3]) == 6;                        // spread conversion
let x;                                     // new var
const x = 123;                             // doesn't allow reassignment
[Symbol.iterator]() {};                    // lazy iterators
for (var n of fibonacci) {};               // for of
function*() {}, yield, next, throw         // generators
new Set(); new Map();                      // new data structures
new Promise((resolve, reject) => {});      // promises library

React apps are built from components. The following hello world app defines HelloWorldApp component and register it.

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello wordqwdqld!</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

When you want to customize a component on initialization, use props.

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => Bananas);

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);