React and redux
3 likes•3,176 views
This document provides an overview of React and Redux. It introduces React as a component-based library for building user interfaces using JavaScript and JSX. Key aspects of React include its lifecycle methods, use of a virtual DOM for fast updates, and functional stateless components. Redux is introduced as a state management library that uses a single immutable store with actions and reducers. It follows the Flux architecture pattern without a dispatcher. Hands-on demos are provided for key React and Redux concepts. Resources for further learning are also listed.
React and redux
- 1. REACT AND REDUX MAKE THE WEB FUN AGAIN /Andrew Lombardi @kinabalu Mystic Coders, LLC
- 2. ABOUT ME
- 3. ABOUT ME 16 Years in Business 8 Years @ Java2Days Published Author So ware Consultants International Speakers Invented the Internet Training To our success!
- 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. How it Feels to Learn JavaScript in 2016
- 8. APACHE WICKET TM Circa 2005 Component-based Just Java and Just HTML
- 9. REACT IS... Circa 2013 Component-based Just JavaScript and JSX (embedded XML) Only the 'V' in MVC No ugly templates
- 10. REACT LIFECYCLE
- 11. MOUNTING Called when component created or inserted into DOM
- 12. UPDATING Changes to props or state or component re-render
- 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. 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. by REACT STARTER KIT React Slingshot Cory House Includes all necessary tooling to be successful with React and Redux
- 16. HANDS-ON DEMO
- 17. FUNCTIONAL STATELESS COMPONENTS Also called presentational/dumb components import React from ‘react’; const HelloWorld = ({name}) => ( <div>Hello, {name}!}</div> ); export default HelloWorld;
- 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. setState() Performs shallow merge of next state into current state. Triggers eventual UI update.
- 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. props properties defined by the called of the component
- 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. HANDS-ON DEMO
- 24. RESOURCES FOR REACT React.js Docs Thinking in React
- 25. REDUX
- 26. REDUX A better Flux implementation A predictable state container for JavaScript apps No dispatcher, Single store, Immutable
- 29. ACTION CREATORS function savePaste(code) { return { type: SAVE_PASTE, code } }
- 30. 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 } }
- 31. 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);
- 32. ACTION DISPATCH const mapDispatchToProps = (dispatch) => { return { loadPasteById: (pasteId) => { dispatch(pasteActions.loadPasteById(pasteId)); } }; };
- 33. CALLING ACTION VIA PROPS componentWillMount() { this.props.loadPasteById(this.props.pasteId); }
- 34. HANDS-ON DEMO
- 35. RESOURCES FOR REDUX Main Redux Docs Redux Tutorial Full Stack Redux Tutorial
- 36. 3 THINGS ABOUT REACT Pure components One-way data binding Fast
- 37. 3 THINGS ABOUT REDUX A single Store No dispatcher Immutable
- 38. FIN
- 39. Q & A ANDREW LOMBARDI / @KINABALU Mystic Coders, LLC bit.ly/lombardi_websocket_book https://github.com/kinabalu/react_and_redux