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