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

October 19, 2018
Tweet

More Decks by Martin Hochel

Other Decks in Technology

Transcript

  1. Ultimate React Component Patterns
    Martin Hochel
    @martin_hotell
    With (WE ARE)
    TypeScript

    View Slide

  2. Martin Hochel
    Principal SE, GDE WEB
    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. One way data flow

    View Slide

  8. Patterns
    showcase

    View Slide

  9. Live coding

    View Slide

  10. Let’s
    Get
    STARTED !

    View Slide

  11. Component
    f(p) => View

    View Slide

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

    View Slide

  13. Un/Controller Component
    <⚛>
    f() => V f(p) => V
    <⚛>
    <⚛>

    View Slide

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

    View Slide

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

    View Slide

  16. What did we learn today (bout Components yo)
    Stateless/Stateful
    Un/Controlled
    Render Prop
    High Order Component

    View Slide

  17. medium.com/@martin_hotell

    View Slide

  18. Thanks ! Martin Hochel
    @martin_hotell

    View Slide