React Patterns

React Patterns

An educational exploration and workshop of React fundamentals and patterns.

2c4d5ca71a92e0860a78e4f9e50e4406?s=128

Chris Pearce

November 02, 2017
Tweet

Transcript

  1. 1 React Patterns

  2. 2 Table of Contents 01 02 03 04 JSX Elements

    Components Props & Children Undirectional data flow Back to Basics No Fuss Composition Higher-order-Component Function-as-Child / Render Prop Implicit-Child-Control / Child Mapping Component Injection Element Injection Patterns Exercise
  3. 3 Back to Basics JSX

  4. 4 “ It’s just JavaScript ” – Somebody, Somewhere

  5. 5 Back to Basics Elements

  6. 6 eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative

    Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative eclarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative Declarative “ Elements describe your UI tree ” – Somebody Else, Somewhere else
  7. 7 Back to Basics Components

  8. 8 “ Components are your abstractions ” – Another Person,

    Unknown
  9. 9 “ They’re the blocks that opt you into a

    better data flow model ” – Another Person, Unknown
  10. 10 “ Components can contain state ” – Another Person,

    Unknown
  11. 11 Back to Basics Props & Children

  12. 12 “ Props are how you pass data down your

    application. They’re like function arguments! ” – Another Person, Unknown
  13. 13 “ Children are a special prop and complete our

    tree structure ” – Another Person, Unknown
  14. 14 “ ANY value can be passed around within props.

    It’s just JavaScript! ” – Another Person, Unknown
  15. 15 Back to Basics Unidirectional Data Flow

  16. 16 “ Data flows down and up in a circular

    fashion and always maintains a singular source of truth ” – Another Person, Unknown
  17. 17 Patterns A Quick Foreword

  18. 18 “ Just write components ” – Me

  19. 19 Patterns No Fuss Composition

  20. 20 • Quick and Easy. • No Abstraction Overhead. •

    Not reusable. Pros & Cons
  21. 21 Patterns Higher-order-Component (HoCs)

  22. 22 function withValueHOC(Component) { return function WrapComponent(props) { return <Component

    value={42} {...props} />; }; } const NewComponent = hoc(MyComponent); What does it look like?
  23. 23 Common Use Cases • Connecting or providing external state

    sources - createContainer, withForm, withQuery • Abstracting common prop mapping - mapProps
  24. 24 • Configurable at declaration time. • Easily composable -

    just functions! • Output is less obvious than other patterns. • Easily overdone - too many small pieces. • Merging props can be a problem. • If HoC output props dont match desired expected input, mapping is cumbersome. Pros & Cons
  25. 25 The vast majority of HOCs should just be enhancing

    props and managing side effects, not changing UI hierarchy. Quick Mention
  26. 26 https://github.com/kalohq/frontend/blob/develo p/src/core/decorators/with-query/with-query.js We use withQuery to pass in current

    router location and validate & parse against a schema. Example
  27. 27 • https://facebook.github.io/react/docs/highe r-order-components.html • http://reactpatterns.com/#higher-order-co mponent • https://medium.com/@franleplant/react-hig her-order-components-in-depth-cf9032ee6

    c3e Further Resources
  28. 28 Patterns Function-as-Child / Render-Prop

  29. 29 function WrapComponent(props) { return props.children({value: 42}) } function NewComponent()

    { return ( <WrapComponent> {({value}) => <MyComponent value={value}>} </WrapComponent> ) } What does it look like?
  30. 30 Common Use Cases • Mostly interchangeable with HoCs •

    Highly abstracted components with multiple delegated rendering concerns - Calendar
  31. 31 • Configurable when creating via props. • Explicit data

    mapping. • In flow of data not always where you want. • Large composition chains become verbose. • Simpler mapping to desired props Pros & Cons
  32. 32 https://www.npmjs.com/package/react-media See how this component lets you pass a

    function which will be called to render something given some parameters. Example
  33. 33 • http://reactpatterns.com/#function-as-child ren • https://medium.com/merrickchristensen/fu nction-as-child-components-5f3920a9ace9 Further Resources

  34. 34 Patterns Implicit-Child-Control / Child Mapping

  35. 35 function WrapComponent(props) { return React.cloneElement(props.children, {value: 42}); } function

    NewComponent() { return ( <WrapComponent> <MyComponent /> </WrapComponent> ) } What does it look like?
  36. 36 Common Use Cases • Abstractions providing “nicer” APIs with

    less moving pieces (and less indirection) - Field, SidebarNavigation
  37. 37 • Provides less verbose API. • Very implicit, easy

    to miss when reading. Pros & Cons
  38. 38 Quick Note You don’t have to map just using

    “clone”. You could map to totally different components using the input as a declarative configuration.
  39. 39 https://github.com/kalohq/frontend/blob/deve lop/src/core/components/basic-form/basic-for m.js#L235-L266 See how we map from permissions

    to disabled in our Field component. Example
  40. 40 Patterns Component Injection

  41. 41 function WrapComponent(props) { const Render = props.Render; return <Render

    value={42} /> } function NewComponent() { return ( <WrapComponent Render={MyComponent} /> ) } What does it look like?
  42. 42 Common Use Cases • Interchangeable with FaCs • Overriding

    root elements for semantics - Link, Box
  43. 43 • Clean, optimal separation of abstractions. • Not the

    clearest UI hierarchy to read. • Implicit flow of data. • Slightly less worry about breaking purity Pros & Cons
  44. 44 https://github.com/kalohq/ui/blob/master/src/co mponents/layout/layout.js#L25 We use the component prop on Box

    to describe what is the root component to be rendered. Example
  45. 45 Patterns Element Injection

  46. 46 function WrapComponent(props) { return <div>{props.icon} Text</div> } function NewComponent()

    { return ( <WrapComponent icon={<Icon />} /> ) } What does it look like?
  47. 47 Common Use Cases • Where an abstracted component has

    multiple parts to render (just children is not enough) - MenuItem
  48. 48 • Simple and explicit • Has to be mixed

    with child-mapping to get extra data Pros & Cons
  49. 49 https://github.com/kalohq/frontend/blob/master/sr c/core/components/menu-item/menu-item.js#L118- L122 An “icon” can be passed as

    an element to give full control over what is rendered in our menu items. Example
  50. 50 Bonus Pure Component?!

  51. 51 Considering our components “pure” allows us to optimise updates

    and avoid wasteful rendering. If the input values have not changed we need not try updating.
  52. 52 Exercise Time github.com/kalohq/learning-react

  53. 53 • Reactpatterns.com • https://facebook.github.io/react/blog/2015/ 12/18/react-components-elements-and-inst ances.html Final Resources

  54. 54 The End