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 TypeScript April 13, 2019, Cluj-Napoca, RO
2. Martin Hochel UI Tech Lead @Twisto, 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/Controlled Component <⚛> f() => s() => V f(p) => s(p?) => V <⚛> <⚛>
14. Render Prop / Children as a Function ( CaaF ) <⚛> { (p) => <⚛> } </⚛> props.children(props) API
15. High Order Component hoc(⚛) => <⚛+⚛/> inject extend pass through
16. Hooks useCounter(p)
17. Render Props Hooked children(useCounter(p))
18. What did we learn today (about Components) Stateless/Stateful Un/Controlled Render Prop High Order Component Hooks
19. What did we learn today (about Components) Un/Controlled Render Prop High Order Component hooks
20. medium.com/@martin_hotell
21. medium.com/@martin_hotell
22. Demos on Github
23. Thanks ! Martin Hochel @martin_hotell