CodeFest 2019. Martin Hochel (Twisto.cz, ngParty) — Ultimate React Component Patterns with TypeScript

16b6c87229eaf58768d25ed7b2bbbf52?s=47 CodeFest
April 06, 2019

CodeFest 2019. Martin Hochel (Twisto.cz, ngParty) — 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 ⚛

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 06, 2019
Tweet

Transcript

  1. Ultimate React Component Patterns Martin Hochel @martin_hotell With TypeScript March

    30—31, 2019, Novosibirsk, RU
  2. Martin Hochel UI Tech Lead @Twisto, GDE WEB 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. One way data flow

  8. Patterns showcase

  9. Live coding

  10. Let’s Get STARTED !

  11. Component f(p) => View

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

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

    s(p?) => V <⚛> <⚛>
  14. Render Prop / Children as a Function ( CaaF )

    <⚛> { (p) => <⚛> } </⚛> props.children(props) API
  15. High Order Component hoc(⚛) => <⚛+⚛/> inject extend pass through

  16. Hooks const api = useCounter(p)

  17. What did we learn today (about Components) Stateless/Stateful Un/Controlled Render

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

    High Order Component hooks
  19. medium.com/@martin_hotell

  20. medium.com/@martin_hotell

  21. Demos on Github

  22. Thanks ! Martin Hochel @martin_hotell