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
   April 13, 2019,
   Cluj-Napoca, RO
   

   View Slide

2. Martin Hochel
   UI Tech Lead @Twisto, 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/Controlled Component
    <⚛>
    f() => s() => V f(p) => s(p?) => V
    <⚛>
    <⚛>
    

    View Slide

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

    View Slide

15. High Order Component
    hoc(⚛) => <⚛+⚛/>
    inject
    extend
    pass through
    

    View Slide

16. Hooks
    useCounter(p)
    

    View Slide

17. Render Props Hooked
    children(useCounter(p))
    

    View Slide

18. What did we learn today (about Components)
    Stateless/Stateful
    Un/Controlled
    Render Prop
    High Order Component
    Hooks
    

    View Slide

19. What did we learn today (about Components)
    Un/Controlled
    Render Prop
    High Order Component
    hooks
    

    View Slide

20. medium.com/@martin_hotell
    

    View Slide

21. medium.com/@martin_hotell
    

    View Slide

22. Demos on Github
    

    View Slide

23. Thanks !
    Martin Hochel
    @martin_hotell
    

    View Slide