Tweet
Tweet

Slide 1

Slide 1 text

1 React Patterns

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 Back to Basics JSX

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

5 Back to Basics Elements

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 Back to Basics Components

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

11 Back to Basics Props & Children

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15 Back to Basics Unidirectional Data Flow

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

17 Patterns A Quick Foreword

Slide 18

Slide 18 text

18 “ Just write components ” – Me

Slide 19

Slide 19 text

19 Patterns No Fuss Composition

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

21 Patterns Higher-order-Component (HoCs)

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

28 Patterns Function-as-Child / Render-Prop

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

34 Patterns Implicit-Child-Control / Child Mapping

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

40 Patterns Component Injection

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45 Patterns Element Injection

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

50 Bonus Pure Component?!

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

54 The End