a tour of react native

A TOUR OFReact Native

@tadeuzagallo

ABOUT Me

@tadeuzagallo

@tadeuzagallo

TADEUZAGALLO.COM/BLOG

@tadeuzagallo

TADEUZAGALLO.COM/VERVE-LANG

@tadeuzagallo

ContextWhat is React Native?

Why did we build React Native?

@tadeuzagallo

WHAT IS React Native?

@tadeuzagallo

WHAT IS 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.— facebook.github.io/react-native

@tadeuzagallo

WHY DID WE BUILDReact Native?

@tadeuzagallo

WHY DID WE BUILD

React?@tadeuzagallo

IMPERATIVE vs DECLARATIVE

@tadeuzagallo

IMPERATIVE UI: DEFINE TransitionsDECLARATIVE UI: DEFINE States

@tadeuzagallo

IMPERATIVE UI: DEFINE TRANSITIONS

@tadeuzagallo

3 STATES

9 TRANSITIONS@tadeuzagallo

O(N2)

@tadeuzagallo

if (count > 99) { // branch 1 if (!hasFire()) { // branch 2 addFire(); }} else { if (hasFire()) { // branch 3 removeFire(); }}if (count === 0) { // branch 4 if (hasBadge()) { // branch 5 removeBadge(); } return;}if (!hasBadge()) { // branch 6 addBadge();}var countText = count > 99 ? '99+' : count.toString(); // branch 7getBadge().setText(countText);

@tadeuzagallo

DECLARATIVE UI: DEFINE STATES

@tadeuzagallo


if (count === 0) { // state 1 return <Bell/>;}

@tadeuzagallo


if (count === 0) { // state 1 return <Bell/>;} else if(count <= 99) { // state 2 return ( <Bell> <Badge count={count}/> </Bell> );}

@tadeuzagallo


if (count === 0) { // state 1 return <Bell/>;} else if(count <= 99) { // state 2 return ( <Bell> <Badge count={count}></Badge> </Bell> );} else { // state 3 return ( <Bell style={styles.onFire}> <Badge count="99+"/> </Bell> );}

@tadeuzagallo

WHY DID WE BUILDReact Native?

@tadeuzagallo

@tadeuzagallo

WEB ➡ NATIVE

Open Standards ➡ Proprietary PlatformsInstant Distribution ➡ Distributing Binaries

Reload and Run ➡ Compile and Wait Product Teams ➡ Platform-aware Teams

@tadeuzagallo

➡ NATIVE ➡ REACT NATIVE

➡ Proprietary Platforms ➡ Open Source ➡ Distributing Binaries ➡ Instant Distribution➡ Compile and Wait ➡ Reload and Run ➡ Platform-aware Teams ➡ Unified Teams

@tadeuzagallo

➡ NATIVE ➡ REACT NATIVE

➡ Proprietary Platforms ➡ Open Source ➡ Distributing Binaries ➡ Instant Distribution➡ Compile and Wait ➡ Reload and Run ➡ Platform-aware Teams ➡ Unified Teams ➡ Imperative APIs ➡ Declarative APIs

@tadeuzagallo

HOW DOESReact Native

WORK?

@tadeuzagallo

import React, { Component,} from 'react';

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

class SampleApp extends Component { render() { return ( <Text style={{ margin: 40 }}> Hello, World! </Text> ); }}

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

@tadeuzagallo

@tadeuzagallo

FAQ▸ No WebView▸ No HTML▸ No CSS

▸ No compilation to Objective-C/Java/...

@tadeuzagallo

@tadeuzagallo

@implementation MyNativeModule

RCT_EXPORT_MODULE()

@end

@tadeuzagallo

@implementation MyNativeModule

+ (NSString *)moduleName { return @""; }+ (void)load { RCTRegisterModule(self); }

@end

@tadeuzagallo

@tadeuzagallo

{ "remoteModuleConfig":[ // [ // $moduleName : string, // $exportedConstants? : { [key: string]: string }, // $methods? : [string], // $asyncIndexes? : [number] // ] ["RCTSourceCode",{"scriptURL":"http:\/\/localhost:8081\/index.ios.bundle?platform=ios&dev=true"},["getScriptText"],[0]], ["RCTStatusBarManager",["getHeight","setStyle","setHidden","setNetworkActivityIndicatorVisible"]], ["RCTAlertManager",["alertWithArgs"]], ["RCTExceptionsManager",["reportSoftException","reportFatalException","updateExceptionMessage","reportUnhandledException"]], // ... ]}

@tadeuzagallo

@tadeuzagallo

VMBasics

@tadeuzagallo

@tadeuzagallo

// import React, {// Component,// } from 'react';//// import {// AppRegistry,// Text, TouchableHighlight,// } from 'react-native';//// class SampleApp extends Component { onPress() { alert('Hello, World!'); }// render() {// return ( <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}> <Text> Button <⁄Text> </TouchableHighlight>;// );// }// }//// AppRegistry.registerComponent('SampleApp', () => SampleApp);

@tadeuzagallo

@tadeuzagallo

class SampleApp extends Component { onPress() {-> alert('Hello, World!'); } ... }

@tadeuzagallo

if (Platform.OS === 'ios') { AlertIOS.alert(title, message, buttons);} else if (Platform.OS === 'android') { AlertAndroid.alert(title, message, buttons);}

@tadeuzagallo

@tadeuzagallo

WHERE ISReact Native

RIGHT NOW?

@tadeuzagallo

@tadeuzagallo

First React Native App:MOBILE ADS MANAGER

@tadeuzagallo

@tadeuzagallo

Same Team

85%OF CODE SHARED

3 months@tadeuzagallo

React Native in theFACEBOOK APP

@tadeuzagallo

@tadeuzagallo

React Native isOpen Source

GITHUB.COM/FACEBOOK/REACT-NATIVE

@tadeuzagallo

35,900+ 900+ STARS CONTRIBUTORS

@tadeuzagallo

We Use TheEXACT SAME VERSION

Internally

@tadeuzagallo

@tadeuzagallo

What Next?

@tadeuzagallo

Evolving the JS Platform

@tadeuzagallo

REACT: the horizontal platform

@tadeuzagallo

@tadeuzagallo

Thanks!FACEBOOK.GITHUB.IO/REACT-NATIVE

GITHUB.COM/FACEBOOK/REACT-NATIVE

@tadeuzagallo

a tour of react native

Software