Introduction to React Native & Redux

Introduction 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… • JavaScriptfor 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 HelloWorldViewextends React.Component { ... render() { return ( <View style={{padding: 10}}> <Text style={{fontSize: 14, color: '#0000ff'}}> Hello World </Text> </View> ) } }
• 9.
  FLEXBOX LAYOUT class HelloWorldViewextends 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 HelloWorldViewextends React.Component { constructor(props) { super(props) this.state = {msg: ‘Hello World'} } render() { return ( <View> <Text>{this.state.msg}</Text> </View> ) } }
• 12.
  MUTATING STATE class HelloWorldViewextends React.Component { onPress() { this.setState(msg: ‘React Rulez') } render() { return ( <TouchableOpacity onPress={this.onPress}> <Text>{this.state.msg}</Text> </TouchableOpacity> ) } }
• 13.
  INTERFACE (OPTIONAL) class TabBarextends 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… • Simplifiedimplementation 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 repositoryfor state (both data and UI) • Completely decoupled from the UI w/ separate lifecycle • Pure business-logic reusable across platforms