Download as PDF, PPTX
Uploaded byBestBrains
Lars thorup-react-and-redux-2016-09
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.
More Related Content
Similar to Lars thorup-react-and-redux-2016-09
Lars thorup-react-and-redux-2016-09
- 1. React and Redux LarsThorup, Triggerz August, 2016
- 2. Lars Thorup ● Softwaredeveloper/architect ● JavaScript, C# ● Test Driven Development ● Coach ● Agile engineering practices ● Founder ● BestBrains ● ZeaLake ● Triggerz ● @larsthorup
- 3. Agenda ● Our currentMVP architecture ● React ● Diagram ● Demo: <Signin /> ● D3 ● Discussion ● Redux ● Diagram ● Code ● Discussion ● create-react-app
- 4.
- 5.
- 6. React - Demo <SigninsigningIn={({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.
- 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.