INTRODUCTION TO THE REACT STACKBarak Cohen, Wondermall

FRONT-END IS BROKEN• Build the same app 6 times: iOS (Phone/Tablet), Android

(Phone/Tablet), Web (Desktop/Phone)

• Different teams build the same thing using 3 different languages, frameworks & libraries.

• Hard to maintain feature parity & consistent terminology.

• Impossible to be an expert in all technologies and “own” something in all products

IOS IS BROKEN

• iOS development is slow, verbose language & frameworks

• Imperative, statefull UI which is error prone

• No out-of-the-box solutions for state management

• Slow release cycle caused by AppStore reviews

REACT-NATIVE IS…• JavaScript for Application Logic

• Native UI (No WebViews!)

• Flexbox Layout

• Functional UI

• Built on top of ReactJS - widely used by FB

REACT (NATIVE+JS) BENEFITS• “Learn once write anywhere”

• Reuse almost all non-UI code across all platforms

• Reuse most UI code between Native Platforms

• Declarative state management using Redux/Relay

• Hot-reloading JS, debug in Chrome

BENEFITS - CON’T

• Can be added incrementally to an existing app

• Over-the-wire updates w/o AppStore (AppHub)

• JS w/ ES6 is succinct and productive

• Can use previously written native code and UI

HELLO WORLDvar React = require('react-native')var { View, Text } = React

class HelloWorldView extends React.Component { render() { return ( <View><Text>Hello World</Text></View> ) }}

ADDING STYLEclass HelloWorldView extends React.Component { ...

render() { return ( <View style={{padding: 10}}> <Text style={{fontSize: 14, color: '#0000ff'}}> Hello World </Text> </View> ) }}

FLEXBOX LAYOUT

class HelloWorldView extends React.Component { render() { return ( <View style={{flexDirection: 'column', flex: 1}}> <View style={{flex: 1, backgroundColor: 'red'}}></View> <View style={{flex: 1, backgroundColor: 'green'}}></View> <View style={{flex: 1, backgroundColor: 'blue'}}></View> </View> ) }}

FLEXBOX LAYOUT - 2

class HelloWorldView extends React.Component { render() { return ( <View style={{flexDirection: 'row', flex: 1}}> <View style={{flex: 1, backgroundColor: 'red'}}></View> <View style={{flex: 1, backgroundColor: 'green'}}></View> <View style={{flex: 1, backgroundColor: 'blue'}}></View> </View> ) }}

ADDING STATEclass HelloWorldView extends React.Component { constructor(props) { super(props) this.state = {msg: ‘Hello World'} }

render() { return ( <View> <Text>{this.state.msg}</Text> </View> ) }}

MUTATING STATEclass HelloWorldView extends React.Component { onPress() { this.setState(msg: ‘React Rulez') }

render() { return ( <TouchableOpacity onPress={this.onPress}> <Text>{this.state.msg}</Text> </TouchableOpacity> ) }}

INTERFACE (OPTIONAL)

class TabBar extends React.Component { static propTypes = { goToPage: React.PropTypes.func, activeTab: React.PropTypes.number, tabs: React.PropTypes.array.isRequired }; render() { ...{this.props.tabs[this.props.activeTab]}... }}

COMPOSITIONvar FeedsView = require('./FeedsView')...

class TabsView extends React.Component { render() { return ( <FeedsView/> <SearchView/> <CartView/> <AccountView user={this.props.user}/> ) }}

REDUXPredictable State Management

REDUX IS…

• Simplified implementation of the Flux pattern

• App state is stored in a single object tree (“Store”)

• To change state emit an “Action” - an object describing the change

• “Reducers” receive actions and mutate the “Store”

EXAMPLEfunction counter(state = 0, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; }}

let store = createStore(counter);store.dispatch({ type: 'INCREMENT' });store.dispatch({ type: 'INCREMENT' });store.dispatch({ type: 'DECREMENT' });

BENEFITS

• Centralized repository for state (both data and UI)

• Completely decoupled from the UI w/ separate lifecycle

• Pure business-logic reusable across platforms