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.
   

   View Slide

2. Martin Hochel
   Principal Engineer @Productboard,
   GDE WEB, Microsoft MVP
   Prague / Czech Republic
   @martin_hotell
   medium.com/@martin_hotell
   github.com/hotell
   

   View Slide

3. What this talk is NOT
   Deep dive about
   What is React ?
   What is TypeScript ?
   

   View Slide

4. What this talk IS
   

   View Slide

5. Patterns
   

   View Slide

6. Component
   

   View Slide

7. Patterns
   showcase
   

   View Slide

8. Live coding
   

   View Slide

9. Let’s
   Get
   STARTED !
   

   View Slide

10. Component
    f(p) => View
    

    View Slide

11. Basics
    

    View Slide

12. State-less/ful
    <⚛>
    f(p) => V f() => s() => V
    <⚛>
    

    View Slide

13. Un/Controlled Component
    <⚛>
    f() => s() => V f(p) => s(p?) => V
    <⚛>
    <⚛>
    

    View Slide

14. Basics
    State less/full ✅
    Un/Controlled ✅
    

    View Slide

15. CLEAN CODE
    D.R.Y. #1
    

    View Slide

16. Hooks
    useCounter(p)
    

    View Slide

17. Declarative Composition
    D.R.Y. #2
    

    View Slide

18. Render Prop / Children as a Function ( CaaF )
    <⚛>
    { (p) => <⚛> }
    ⚛>
    props.children(props)
    API
    

    View Slide

19. Functional Composition
    D.R.Y. #3
    

    View Slide

20. Functional composition ?
    compose(fnOne,fnTwo,fnThree)
    connect(mapStateToPropsFn)(Cmp)
    

    View Slide

21. High Order Component
    hoc(⚛) => <⚛+⚛/>
    

    View Slide

22. D.R.Y.
    #1 ‍ Senior Dev (hook) ✅
    #2 ‍ PM (Render Prop) ✅
    #3 Functional dev (HoC) ✅
    

    View Slide

23. ‍♀ Summary
    

    View Slide

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))
    

    View Slide

25. medium.com/@martin_hotell
    

    View Slide

26. medium.com/@martin_hotell
    

    View Slide

27. Demos on Github
    

    View Slide

28. Thanks !
    Martin Hochel
    @martin_hotell
    

    View Slide