Very brief intro to React Native & Redux

1. INTRODUCTIONTOTHE
REACT STACK
Barak Cohen,Wondermall

2. 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

3. 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

4. REACT-NATIVE IS…
• JavaScript for Application Logic
• Native UI (No WebViews!)
• Flexbox Layout
• Functional UI
• Built on top of ReactJS - widely used by FB

5. 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

6. 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

7. HELLO WORLD
var React = require('react-native')
var { View, Text } = React
class HelloWorldView extends React.Component {
render() {
return (
<View><Text>Hello World</Text></View>
)
}
}

8. ADDING STYLE
class HelloWorldView extends React.Component {
...
render() {
return (
<View style={{padding: 10}}>
<Text style={{fontSize: 14, color: '#0000ff'}}>
Hello World
</Text>
</View>
)
}
}

9. 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>
)
}
}

10. 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>
)
}
}

11. ADDING STATE
class HelloWorldView extends React.Component {
constructor(props) {
super(props)
this.state = {msg: ‘Hello World'}
}
render() {
return (
<View>
<Text>{this.state.msg}</Text>
</View>
)
}
}

12. MUTATING STATE
class HelloWorldView extends React.Component {
onPress() {
this.setState(msg: ‘React Rulez')
}
render() {
return (
<TouchableOpacity onPress={this.onPress}>
<Text>{this.state.msg}</Text>
</TouchableOpacity>
)
}
}

13. 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]}...
}
}

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

15. REDUX
Predictable State Management

16. 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”

17. EXAMPLE
function 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' });

18. BENEFITS
• Centralized repository for state (both data and UI)
• Completely decoupled from the UI w/ separate
lifecycle
• Pure business-logic reusable across platforms