Introduction to React Native

# Introduction to React Native
<br/>
Johannes Stein

Twitter: @frostney_

Github: frostney

---

# Agenda

![React](images/react-logo.png)

1. What is React Native?
2. React Native vs. React
3. Getting started
4. Let's make a thing (Livedemo)
5. Native modules
6. The current state of React Native
7. The future of React Native

---

![One does not simply build mobile apps](images/meme1.jpg)

---

# What is React Native?

]

---

# What is React Native?

---

# What is React Native?

---

# What is React Native?

.right-column[
- Create native applications in JavaScript
- Apply `React` principles
- iOS & Android
]

---

# What is React Native?

]

---

# What is React Native?

---

# What is React Native?

---

# What is React Native?

---

# What is React Native?

]

---

# What is React Native?

---

# What is React Native?

---

# What is React Native?

]

---

# What is React Native?

---

# What is React Native?

![It feels native](images/meme2.jpg)
]

---

# What is React Native?

]

---

# What is React Native?

---

# What is React Native?

---

# What is React Native?

.right-column[
- Similar to React Native in many ways
- MVC-style structure
- Available for iOS, Android and Windows Phone
]

---

# React Native vs. React

]

---

# React Native vs. React

---

# React Native vs. React

```javascript
var MyComponent = function(props) {
  // Do something with props
  // But you can't change them
};
```
]

---

# React Native vs. React

]

---

# React Native vs. React

---

# React Native vs. React

```javascript
var MyComponent = React.createClass({
  somethingHappens: function() {
    this.setState({
      count: this.state.count + 1
    });
  }
});
```
]

---

# React Native vs. React

]

---

# React Native vs. React

.right-column[
```javascript
var MyComponent = React.createClass({
  render: function() {
    // My rendering goes here
  }
});
```
]

---

# React Native vs. React

.right-column[
```javascript
var MyComponent = React.createClass({
  render: function() {
*    return <div className="my-component">Hello there</div>;
  }
});
```
]

---

# React Native vs. React

.right-column[
```javascript
var MyComponent = React.createClass({
  render: function() {
    return <div className="my-component">Hello there</div>;
  }
});
```

```javascript
var MyComponent = React.createClass({
  displayName: "MyComponent",
  render: function() {
     return React.createElement("div", {
       className: "my-component"
     }, "Hello there");
  }
});
```
]

---

# React Native vs. React

]

---

# React Native vs. React

---

# React Native vs. React

---

# React Native vs. React

]

---

# React Native vs. React

var HelloThere = React.createClass({
  render: function() {
    return (
      <div className="box">My name is {this.props.name}</div>
    );
  }
});

React.render(<HelloThere name="Johannes" />,
  document.getElementById('content'));
```
]

---

# React Native vs. React

var HelloThere = React.createClass({
  render: function() {
    return (
      <div className="box">My name is {this.props.name}</div>
    );
  }
});

React.render(<HelloThere name="Johannes" />,
  document.getElementById('content'));
```
]

---

# React Native vs. React

var HelloThere = React.createClass({
  render: function() {
    return (
*      <View>My name is {this.props.name}</View>
    );
  }
});

React.render(<HelloThere name="Johannes" />,
  document.getElementById('content'));
```
]

---

# React Native vs. React

var HelloThere = React.createClass({
  render: function() {
    return (
*      <View>
*        <Text>My name is {this.props.name}</Text>
*      </View>
    );
  }
});

React.render(<HelloThere name="Johannes" />,
  document.getElementById('content'));
```
]

---

# React Native vs. React

.right-column[
```javascript
var React = require('react-native');
*var {View, Text, AppRegistry} = React;

var HelloThere = React.createClass({
  render: function() {
    return (
      <View>
        <Text>My name is {this.props.name}</Text>
      </View>
    );
  }
});

*var MainComponent = React.createClass({
*  render: function() {
*    return <HelloThere name="Johannes" />;
*  }
*});

*AppRegistry.registerComponent('MainComponent', function() {
*  return MainComponent;
*});
```
]

---

# React Native vs. React

.right-column[
```javascript
var React = require('react-native');
var {View, Text, AppRegistry} = React;

var HelloThere = React.createClass({
  render: function() {
    return (
      <View>
        <Text>My name is {this.props.name}</Text>
      </View>
    );
  }
});

*// AppRegistry stuff
```
]

---

# React Native vs. React

.right-column[
```javascript
var React = require('react-native');
*var {View, Text, AppRegistry, StyleSheet} = React;

var HelloThere = React.createClass({
  render: function() {
    return (
      <View>
        <Text>My name is {this.props.name}</Text>
      </View>
    );
  }
});

*var styles = StyleSheet.create({
*  box: {
*    flex: 1,
*    alignItems: 'center'
*  },
*  font: {
*    fontSize: 28
*  }
*});

// AppRegistry stuff
```
]

---

# React Native vs. React

.right-column[
```javascript
var React = require('react-native');
var {View, Text, AppRegistry, StyleSheet} = React;

var HelloThere = React.createClass({
  render: function() {
    return (
*      <View style={styles.box}>
*        <Text style={style.font}>My name is {this.props.name}</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  box: {
    flex: 1,
    alignItems: 'center'
  },
  font: {
    fontSize: 28
  }
});

// AppRegistry stuff
```
]

---

# Getting started

## Prerequisites
- OS X
- Node.js 4.0 or higher
- (Homebrew, Watchman and Flow)

# Command-line application
`npm install -g react-native-cli`

---

### Getting started (iOS)

- Xcode 6.3
- (Apple Developer account)

# CocoaPods
Rather used to the iOS side of things? React Native can also be installed through CocoaPods.

---

### Getting started (Android)

- Latest JDK
- Android SDK

# Simulator
Android stock simulator or Genymotion

---

# Let's make a thing

---

# Deploying on the real device

## Development

Server running all the time fetching the latest code bundle

## Production

Create an offline bundle to be packaged inside the mobile app

---

# Native extensions (iOS)

- Write extensions in Objective-C or Swift

- Create custom modules as `NSObject` or `UIView`

- Automagically maps Objective-C primitives, dictionaries and arrays

---

# Native modules (iOS - Simple classes)

```objc
#import "RCTBridgeModule.h"

@interface RNExample : NSObject <RCTBridgeModule>

@end
```

```objc
#import "RCTBridge.h"

#import "RNExample.h"

@implementation RNExample

RCT_EXPORT_MODULE()

@synthesize bridge = _bridge;

RCT_EXPORT_METHOD(someCoolMethod)
{
    NSLog(@"Hi there, you called this cool method.");
}

@end
```

```javascript
var RNExample = require('react-native').NativeModules.RNExample;
RNExample.someCoolMethod(); // Some nice text on the console now
```

---

# Native modules (iOS - Custom views 1/2)

```objc
#import "RCTViewManager.h"

@interface RNMyViewManager : RCTViewManager

@end
```

```obj
#import "RNMyViewManager.h"
#import "RNMyView.h"
#import "RCTBridge.h"

@implementation RNMyViewManager

RCT_EXPORT_MODULE();

@synthesize bridge = _bridge;

- (UIView *)view
{
    return [[RNMyView alloc] init];
}

@end
```

---

# Native modules (iOS - Custom views 2/2)

```objc
#import "RCTView.h"

@interface RNMyView : RCTView

@end
```

```objc
#import "RNMyView.h"

@implementation RNMyView

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
}

@end
```

```javascript
var {requireNativeComponent} = require('react-native');

module.exports = requireNativeComponent('RNMyView', null);
```

---

# The current state of React Native

- Publicly available since March 2015

- Initial version of React Native for Android released in September 2015

- Used in Facebook production apps (Facebook Ads, Facebook Groups)

- Uses Babel

---

# The future of React Native

```javascript
// Node.js
var moduleName = './mything.js';
var mod = require(moduleName);
```

```javascript
// React Native
var moduleName = './mything.js';
var mod = require(moduleName);
// Error: Cannot find 'mything.js'
```

- Improved asset management (Yeah for dynamic images!)

- Improve debugging tools

- Improve Android platform

---

# Things I should mention

### RNPlay: Online playground for React Native

http://www.rnplay.org

![RNPlay](images/rnplay.png)

---

# Things I should mention

### AppHub: Update React Native apps without re-submitting the app

https://apphub.io/

![AppHub](images/apphub.png)

---

# Things I should mention

### React Web SDK: React Native back in the browser

https://github.com/necolas/react-web-sdk

![ReactWebSDK](images/reactwebsdk.png)

---

# Things I should mention

### JSXStyle: Inline styles with JSX syntax

https://github.com/petehunt/jsxstyle

![ReactWebSDK](images/jsxstyle.png)

---

# Thank you!

http://frostney.github.io/talks/react-native-sep2015/slides

### Twitter: @frostney_

### Github: frostney