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

2d3d5ccc782ff1ecc42eeeb4d8b8ec02?s=128

Martin Hochel

July 20, 2019
Tweet

Transcript

  1. Ultimate React Component Patterns with TypeScript Martin Hochel Summer. Sea.

    JavaScript.
  2. Martin Hochel Principal Engineer @Productboard, GDE WEB, Microsoft MVP Prague

    / Czech Republic @martin_hotell medium.com/@martin_hotell github.com/hotell
  3. What this talk is NOT Deep dive about What is

    React ? What is TypeScript ?
  4. What this talk IS

  5. Patterns

  6. Component

  7. Patterns showcase

  8. Live coding

  9. Let’s Get STARTED !

  10. Component f(p) => View

  11. Basics

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

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

    s(p?) => V <⚛> <⚛>
  14. Basics State less/full ✅ Un/Controlled ✅

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

  16. Hooks useCounter(p)

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

  18. Render Prop / Children as a Function ( CaaF )

    <⚛> { (p) => <⚛> } </⚛> props.children(props) API
  19. Functional Composition D.R.Y. #3

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

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

  22. D.R.Y. #1 ‍ Senior Dev (hook) ✅ #2 ‍ PM

    (Render Prop) ✅ #3 Functional dev (HoC) ✅
  23. ‍♀ Summary

  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))
  25. medium.com/@martin_hotell

  26. medium.com/@martin_hotell

  27. Demos on Github

  28. Thanks ! Martin Hochel @martin_hotell