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 with TypeScript Martin Hochel Summer. Sea. JavaScript.
2. Martin Hochel Principal Engineer @Productboard, GDE WEB, Microsoft MVP 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. Patterns showcase
8. Live coding
9. Let’s Get STARTED !
10. Component f(p) => View
11. Basics
12. State-less/ful <⚛> f(p) => V f() => s() => V <⚛>
13. Un/Controlled Component <⚛> f() => s() => V f(p) => s(p?) => V <⚛> <⚛>
14. Basics State less/full ✅ Un/Controlled ✅
15. CLEAN CODE D.R.Y. #1
16. Hooks useCounter(p)
17. Declarative Composition D.R.Y. #2
18. Render Prop / Children as a Function ( CaaF ) <⚛> { (p) => <⚛> } </⚛> props.children(props) API
19. Functional Composition D.R.Y. #3
20. Functional composition ? compose(fnOne,fnTwo,fnThree) connect(mapStateToPropsFn)(Cmp)
21. High Order Component hoc(⚛) => <⚛+⚛/>
22. D.R.Y. #1 ‍ Senior Dev (hook) ✅ #2 ‍ PM (Render Prop) ✅ #3 Functional dev (HoC) ✅
23. ‍♀ Summary
24. What did we learn today ⚛⚡ State-full/less Un/Controlled High Order Component withCounter(()=>children(useCounter(p))) hooks ()=>useCounter(p) Render Prop ()=>children(useCounter(p))
25. medium.com/@martin_hotell
26. medium.com/@martin_hotell
27. Demos on Github
28. Thanks ! Martin Hochel @martin_hotell