React Patterns

An educational exploration and workshop of React fundamentals and patterns.

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