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 and redux

798 views

Published on

Learn how to develop front-end JavaScript web applications using React and Redux for the application architecture. Immutability and one-way data binding at it's finest. Focus on components and state management without all the hassle.

Code examples available here: https://github.com/kinabalu/mysticpaste_react_example

Published in: Software
  • Be the first to comment

React and redux

  1. 1. REACT AND REDUX MAKE THE WEB FUN AGAIN /Andrew Lombardi @kinabalu Mystic Coders, LLC
  2. 2. ABOUT ME
  3. 3. ABOUT ME 16 Years in Business 8 Years @ Java2Days Published Author So ware Consultants International Speakers Invented the Internet Training   To our success!
  4. 4. WEBSOCKET BOOK
  5. 5. http://bit.ly/lombardi_websocket_book
  6. 6. KEY POINTS Functional programming is awesome (avoid change in state, immutable) Components are beautiful JavaScript sucks, but React and Redux with ES6 make it bearable
  7. 7. How it Feels to Learn JavaScript in 2016
  8. 8. APACHE WICKET TM Circa 2005 Component-based Just Java and Just HTML
  9. 9. REACT IS... Circa 2013 Component-based Just JavaScript and JSX (embedded XML) Only the 'V' in MVC No ugly templates
  10. 10. REACT LIFECYCLE
  11. 11. MOUNTING Called when component created or inserted into DOM
  12. 12. UPDATING Changes to props or state or component re-render
  13. 13. VIRTUAL DOM REACT'S SOLUTION TO FAST DOM UPDATES Pure JavaScript In-memory representation of DOM render() runs whenever something changes Diffs with the old one Batch executes all queued updates
  14. 14. CONVENTIONS FOR THIS TALK Code will be using ES6, transpiled using Babel Uses npm scripts rather than Grunt or Gulp yarn instead of npm because it's superior
  15. 15. by REACT STARTER KIT React Slingshot Cory House Includes all necessary tooling to be successful with React and Redux
  16. 16. HANDS-ON DEMO
  17. 17. FUNCTIONAL STATELESS COMPONENTS Also called presentational/dumb components import React from ‘react’; const HelloWorld = ({name}) => ( <div>Hello, {name}!}</div> ); export default HelloWorld;
  18. 18. CONTAINER COMPONENTS The stateful kind class HelloWorldContainer extends React.Component { constructor() { super(); this.setState({ name: '' }); } componentDidMount() { // do stuff to fill from external sources/APIs } render() { return <HelloWorld name={this.state.name} />; } }
  19. 19. setState() Performs shallow merge of next state into current state. Triggers eventual UI update.
  20. 20. propTypes a property on the component class, defines what types the props should be. In dev mode, warning is shown but skipped in prod for efficiency
  21. 21. props properties defined by the called of the component
  22. 22. state user-defined data defined by the component as a plain-ole javascript object modified using setState() so it is queued properly with other updates
  23. 23. HANDS-ON DEMO
  24. 24. RESOURCES FOR REACT React.js Docs Thinking in React
  25. 25. REDUX
  26. 26. REDUX A better Flux implementation A predictable state container for JavaScript apps No dispatcher, Single store, Immutable
  27. 27. FLUX ARCHITECTURE
  28. 28. ACTION CREATORS function savePaste(code) { return { type: SAVE_PASTE, code } }
  29. 29. REDUCERS const INITIAL_STATE = { pastes: { paste: null, error: null, loading: false } }; export default function pasteReducer(state = INITIAL_STATE, action) { switch (action.type) { case SAVE_PASTE: return { ...state, pastes: { paste: null, error: default: return state } }
  30. 30. MAPPING STATE AND DISPATCH import { connect } from 'react-redux'; const mapDispatchToProps = (dispatch) => { // maps dispatch actions for executing action creators to props }; function mapStateToProps(state) { // contains state from store and allows mapping to props } export default connect( mapStateToProps, mapDispatchToProps) (MyLittleComponent);
  31. 31. ACTION DISPATCH const mapDispatchToProps = (dispatch) => { return { loadPasteById: (pasteId) => { dispatch(pasteActions.loadPasteById(pasteId)); } }; };
  32. 32. CALLING ACTION VIA PROPS componentWillMount() { this.props.loadPasteById(this.props.pasteId); }
  33. 33. HANDS-ON DEMO
  34. 34. RESOURCES FOR REDUX Main Redux Docs Redux Tutorial Full Stack Redux Tutorial
  35. 35. 3 THINGS ABOUT REACT Pure components One-way data binding Fast
  36. 36. 3 THINGS ABOUT REDUX A single Store No dispatcher Immutable
  37. 37. FIN
  38. 38. Q & A ANDREW LOMBARDI / @KINABALU Mystic Coders, LLC bit.ly/lombardi_websocket_book https://github.com/kinabalu/react_and_redux

×