Lars thorup-react-and-redux-2016-09
1 like462 views
This document discusses React and Redux. It begins with an introduction of the presenter Lars Thorup. It then provides an overview of an MVP architecture using React, Redux, and other technologies. It includes diagrams of the React and Redux architectures. It discusses React components, virtual DOM, and using D3 with React. It also covers the motivations and overview of Redux, including examples of state shape and auth reducers. It concludes with a discussion of Redux design patterns and testability and introduces the create-react-app tool.
Lars thorup-react-and-redux-2016-09
- 1. React and Redux Lars Thorup, Triggerz August, 2016
- 2. Lars Thorup ● Software developer/architect ● JavaScript, C# ● Test Driven Development ● Coach ● Agile engineering practices ● Founder ● BestBrains ● ZeaLake ● Triggerz ● @larsthorup
- 3. Agenda ● Our current MVP architecture ● React ● Diagram ● Demo: <Signin /> ● D3 ● Discussion ● Redux ● Diagram ● Code ● Discussion ● create-react-app
- 4. MVP architecture JavaScript React Redux Ramda Webpack CSS Node.js Restify Knex Cryptex Co PostgreSQL ● Demo! Ajax & WebSockets SQL
- 6. React - Demo <Signin signingIn={({account}) => alert(account)}/> // ---- render () { return ( <form onSubmit={this.onSubmit}> <input type="text" onChange={this.onChange}/> <button type="submit">Sign In</button> </form> ); } https://github.com/larsthorup/react-signin-sample
- 7. React - Discussion ● Mandatory ● Virtual DOM - decoupled from browser DOM ● Avoid ● HTML, browser DOM, jQueue, D3? ● Optional ● ES6 ● JSX ● Webpack ● Stateful and stateless components ● Server-side rendering ● Routing
- 8. React - D3 ● Competing DOM manipulation ● We use plain SVG ● And CSS transforms ● Example: gauge.js ● A react-friendly D3?
- 9. Redux - Motivation ● Distributed state ● Centralized state
- 10. Redux - Overview
- 11. Redux - Examples ● State shape ● Auth reducers ● Auth saga: signingIn
- 12. Redux - Discussion ● Design patterns ● command ● singleton ● same data flow as server side pages before Ajax! ● Modularity ● State shape ● Testability ● Higher-order functions ● connect(mapStateToProps)(Component)
- 13. create-react-app $ npm install -g create-react-app $ create-react-app my-first-app # takes 5 min(!) $ cd my-first-app $ npm start # ToDo: hack my-first-app # https://github.com/larsthorup/react-signin-sample
- 14. Questions!