CodeFest 2019. Martin Hochel (Twisto.cz, ngParty) — 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 March 30—31, 2019, Novosibirsk, RU
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 const api = useCounter(p)
17. What did we learn today (about Components) Stateless/Stateful Un/Controlled Render Prop High Order Component Hooks
18. What did we learn today (about Components) Un/Controlled Render Prop High Order Component hooks
19. medium.com/@martin_hotell
20. medium.com/@martin_hotell
21. Demos on Github
22. Thanks ! Martin Hochel @martin_hotell