Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ultimate React Component Patterns with TypeScript

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 ⚛⚛⚛.

Martin Hochel

July 20, 2019
Tweet

More Decks by Martin Hochel

Other Decks in Programming

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