React Patterns

An educational exploration and workshop of React fundamentals and patterns.

Transcript

1. 1
   React Patterns
   

   View Slide

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
   

   View Slide

3. 3
   Back to Basics
   JSX
   

   View Slide

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

   View Slide

5. 5
   Back to Basics
   Elements
   

   View Slide

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
   

   View Slide

7. 7
   Back to Basics
   Components
   

   View Slide

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

   View Slide

9. 9
   “ They’re the blocks that opt you into a
   better data flow model ”
   – Another Person, Unknown
   

   View Slide

10. 10
    “ Components can contain state ”
    – Another Person, Unknown
    

    View Slide

11. 11
    Back to Basics
    Props & Children
    

    View Slide

12. 12
    “ Props are how you pass data down your
    application. They’re like function
    arguments! ”
    – Another Person, Unknown
    

    View Slide

13. 13
    “ Children are a special prop and
    complete our tree structure ”
    – Another Person, Unknown
    

    View Slide

14. 14
    “ ANY value can be passed around within
    props. It’s just JavaScript! ”
    – Another Person, Unknown
    

    View Slide

15. 15
    Back to Basics
    Unidirectional Data Flow
    

    View Slide

16. 16
    “ Data flows down and up in a circular
    fashion and always maintains a singular
    source of truth ”
    – Another Person, Unknown
    

    View Slide

17. 17
    Patterns
    A Quick Foreword
    

    View Slide

18. 18
    “ Just write components ”
    – Me
    

    View Slide

19. 19
    Patterns
    No Fuss Composition
    

    View Slide

20. 20
    ● Quick and Easy.
    ● No Abstraction Overhead.
    ● Not reusable.
    Pros & Cons
    

    View Slide

21. 21
    Patterns
    Higher-order-Component (HoCs)
    

    View Slide

22. 22
    function withValueHOC(Component) {
    return function WrapComponent(props) {
    return ;
    };
    }
    const NewComponent = hoc(MyComponent);
    What does it look like?
    

    View Slide

23. 23
    Common Use Cases
    ● Connecting or providing external state
    sources - createContainer, withForm,
    withQuery
    ● Abstracting common prop mapping -
    mapProps
    

    View Slide

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
    

    View Slide

25. 25
    The vast majority of HOCs should just be
    enhancing props and managing side
    effects, not changing UI hierarchy.
    Quick Mention
    

    View Slide

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
    

    View Slide

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
    

    View Slide

28. 28
    Patterns
    Function-as-Child / Render-Prop
    

    View Slide

29. 29
    function WrapComponent(props) {
    return props.children({value: 42})
    }
    function NewComponent() {
    return (
    
    {({value}) => }
    
    )
    }
    What does it look like?
    

    View Slide

30. 30
    Common Use Cases
    ● Mostly interchangeable with HoCs
    ● Highly abstracted components with
    multiple delegated rendering concerns -
    Calendar
    

    View Slide

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
    

    View Slide

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
    

    View Slide

33. 33
    ● http://reactpatterns.com/#function-as-child
    ren
    ● https://medium.com/merrickchristensen/fu
    nction-as-child-components-5f3920a9ace9
    Further Resources
    

    View Slide

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

    View Slide

35. 35
    function WrapComponent(props) {
    return React.cloneElement(props.children, {value: 42});
    }
    function NewComponent() {
    return (
    
    
    
    )
    }
    What does it look like?
    

    View Slide

36. 36
    Common Use Cases
    ● Abstractions providing “nicer” APIs with
    less moving pieces (and less indirection) -
    Field, SidebarNavigation
    

    View Slide

37. 37
    ● Provides less verbose API.
    ● Very implicit, easy to miss when reading.
    Pros & Cons
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

40. 40
    Patterns
    Component Injection
    

    View Slide

41. 41
    function WrapComponent(props) {
    const Render = props.Render;
    return
    }
    function NewComponent() {
    return (
    
    )
    }
    What does it look like?
    

    View Slide

42. 42
    Common Use Cases
    ● Interchangeable with FaCs
    ● Overriding root elements for semantics -
    Link, Box
    

    View Slide

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
    

    View Slide

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
    

    View Slide

45. 45
    Patterns
    Element Injection
    

    View Slide

46. 46
    function WrapComponent(props) {
    return {props.icon} Text
    }
    function NewComponent() {
    return (
    } />
    )
    }
    What does it look like?
    

    View Slide

47. 47
    Common Use Cases
    ● Where an abstracted component has
    multiple parts to render (just children is not
    enough) - MenuItem
    

    View Slide

48. 48
    ● Simple and explicit
    ● Has to be mixed with child-mapping to
    get extra data
    Pros & Cons
    

    View Slide

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
    

    View Slide

50. 50
    Bonus
    Pure Component?!
    

    View Slide

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.
    

    View Slide

52. 52
    Exercise Time
    github.com/kalohq/learning-react
    

    View Slide

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

    View Slide

54. 54
    The End
    

    View Slide