Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React & Redux

1,495 views

Published on

Presentation given to Wolox employees on React and Redux.

Published in: Technology
  • Be the first to comment

React & Redux

  1. 1. REACT 101 INTRODUCTION FOR DEVELOPERS
  2. 2. REACT A JavaScript library for building UIs, developed by Facebook.
  3. 3. COMPANIES USING REACT
  4. 4. render
 State -> View
  5. 5. STATE [ “Design incredible app”, “Something happens”, “Collect profits” ]
  6. 6. VIEW <ol> <li>Design incredible app </li> <li>Something happens </li> <li>Collect profits </li> </ol>
  7. 7. VIRTUAL DOM
  8. 8. DEFINING COMPONENTS function MyComponent(state) { return ( <span className=“counter”> {state.count} </span> ) }
  9. 9. DEFINING COMPONENTS function MyComponent(props) { return ( <span className=“counter”> {props.count} </span> ); }
  10. 10. RENDERING COMPONENTS ReactDOM.render( <MyComponent count={5} /> document.getElementById(‘root’) );
  11. 11. CLASS-BASED COMPONENTS var MyComponent = React.createClass({ render: function() { return ( <span className=“counter”> {this.props.count} </span> ); } }
  12. 12. CLASS BASED COMPONENTS (ECMASCRIPT 6 FTW!) const MyComponent = React.createClass({ render() { return ( <span className=“counter”> {this.props.count} </span> ); } }
  13. 13. INTERACTIVITY const MyComponent = React.createClass({ getInitialState() { return { count: 0 }; } handleClick(event) { this.setState({ count: count + 1 }); }, render() { return ( <span className=“counter” onClick={this.handleClick}> {this.state.count} </span> ); } }
  14. 14. PROP TYPE-CHECKING const MyComponent = React.createClass({ propTypes: { count: React.PropTypes }, ... }
  15. 15. ROUTING WITH REACT-ROUTER ReactDOM.render(( <Router history={browserHistory}> <Route path="/" component={App}> <Route path="tasks" component={Tasks} /> <Route path="/task/:taskId" component={TaskDetails} /> <Route path="*" component={NoMatch} /> </Route> </Router> ), document.body)
  16. 16. INTERNATIONALIZATION WITH REACT-INTL const MyComponent = React.createClass({ mixins: [IntlMixin], render() { return ( <span className=“counter”> {this.getIntlMessage(‘counter.label’)} </span> ); } }
  17. 17. FLUX ARCHITECTURE
  18. 18. REDUX Predictable state container for React developed by Dan Abramov.
  19. 19. store (State, Action) -> State
  20. 20. PRINCIPLES ➤ Single source of truth ➤ Read-only state ➤ Changes are made with pure functions
  21. 21. ACTIONS function createTask(description) { return { type: ‘CREATE_TASK’, description: description }; }
  22. 22. STORE INTERFACE store.dispatch( actions.createTask(”Do homework.”) ); store.getState(); store.subscribe(function(state) { // do something when state changes });
  23. 23. REDUX BINDINGS FOR REACT <Provider store={store}> … </Provider> ——————————————————————————————————————————————————— connect((state) => { counter: state.counter })(MyComponent)
  24. 24. ASYNC ACTIONS function createTask(description) { return function(dispatch, getState) { dispatch({ type: ‘CREATE_TASK’, description }); fetch(‘/api/tasks’).then((response) => { dispatch(actions.loadTasks(response.json())) }); }; } * requires redux-thunk middleware for Redux
  25. 25. REDUCERS function reducer(state, action) { if (action.type == ‘CREATE_TASK’) { return [action.description, …state]; } return state; }
  26. 26. ONE MORE THING… ➤ Design your state carefully. ➤ Use Flux Standard Action for your action types. ➤ Avoid side-effects in your reducers. ➤ Use Immutable.js to enforce immutability.
  27. 27. DEVTOOLS ➤ React Developer Tools for Chrome ➤ Elements-like panel for virtual DOM. ➤ Redux DevTools (sidebar panel) ➤ Complete visibility over actions and state, time-traveling.
  28. 28. SUMMARY ➤ React code looks just like plain JavaScript. ➤ React gives you much more freedom to architect your app, but that usually means more time spent configuring it. ➤ Not much work done in standardizing React apps.
 Flux Standard Action is a start.
  29. 29. Questions?
  30. 30. Thanks! Federico Bond Co-Founder & CTO
 BitCourt @federicobond federicobond

×