Ultimate React Component Patterns with TypeScript

React and TypeScript, the ultimate duo for writing web apps with top notch developer experience. But where to start? What are the gotchas? In this live coding session we will cover all React Component patterns techniques backed by excellent DX and type safety with TypeScript

Transcript

1. Ultimate React Component Patterns Martin Hochel @martin_hotell With (WE ARE) TypeScript
2. Martin Hochel Principal SE, GDE WEB Prague / Czech Republic @martin_hotell medium.com/@martin_hotell github.com/hotell
3. What this talk is NOT Deep dive about What is React ? What is TypeScript ?
4. What this talk IS
5. Patterns
6. Component
7. One way data flow
8. Patterns showcase
9. Live coding
10. Let’s Get STARTED !
11. Component f(p) => View
12. State-less/ful <⚛> f(p) => V f() => s() => V <⚛>
13. Un/Controller Component <⚛> f() => V f(p) => V <⚛> <⚛>
14. Render Prop / Children as a Function ( CaaF ) <⚛> { (p) => <⚛> } </⚛> this.props.children(props) API
15. High Order Component hoc(⚛) => <⚛+⚛/>
16. What did we learn today (bout Components yo) Stateless/Stateful Un/Controlled Render Prop High Order Component
17. medium.com/@martin_hotell
18. Thanks ! Martin Hochel @martin_hotell