Use React advanced design patterns to build or refactor components, including Container Component Pattern, Compound Component Pattern, Higher Order Component Pattern, and the Render Props Pattern which is the most popular pattern in this year. Please check the demo codes for more detail >>> https://github.com/xJkit/modern-web-2018-demo

1. 1
Use React Patterns To Build
Large Scalable App
Jay Chung @ Modern Web 2018, TW

2. 2
Components

3. 3
SliderNavs
Button
Modal
Loader
Toast
Anchor Table
Radio
NavBar
Dropdown
App
App

4. 4
Patterns

5. 5

6. 6
Small Clues Tell

7. 7
3
4
10
3

8. 8
3
4
10
3
32
+ 42
= 5 102
= 100 32
π
Fix Problems with Elegance
different clues with different patterns

9. 9
Children as Functions
https://github.com/drcmda/react-spring

10. 10
Higher Order Render Props
https://github.com/drcmda/react-spring

11. 11
Higher Order Component
https://github.com/erikras/redux-form

12. 12
Provider Pattern
https://github.com/yahoo/react-intl

13. 13
Compound Component
https://github.com/ant-design/ant-design/

14. 14
STEP 1
container component
A Pattern Journey
STEP 2
compound component
STEP 3
render props
STEP 4
higher order component
STEP 5
provider pattern

15. Jay Chung (xJkit)
https://github.com/xJkit
https://linkedin.com/in/xjkit54780
https://slideshare.net/JOEYCHUNG2
https://twitter.com/xJkit
About Me
Front End Developer
https://github.com/xJkit/modern-web-2018-demo

16. https://github.com/xJkit/modern-web-2018-demo

17. 17
Inline Editing Component

18. 18

19. https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

20. 20
How Things Work
Container Component
data fetching/state changes
How Things Look
Presentational Component
markup, style

22. 22
Presentational Component

23. 23
Container Component

24. 24
Container Component

25. 25

26. 26
InlineEditing in Table renderer

27. 27
InlineEditing Component

29. 29
How to custom button or input styles?
How to change button order or position?

30. 30
How to custom UI styles?

31. 31
You need more props!
🤮

32. 32
STEP 02
A Pattern Journey

33. 33
Container Component

34. 34
Presentational Components Exposed

36. 36
Presentational Components Exposed

37. React Top Level API

38. 38
Children eat different props

39. 39
Children connect at root

40. 40
Fix Grandchildren Components

41. 41
Context Provider

42. 42
Context Consumer

43. 43
How to use my own UI components?

44. 44
Step 3
A Pattern Journey

45. 45

46. 46
Render channel
Renderless container

48. 48
A render prop is a function prop that
a component uses to know what to render.

49. 49

50. 50
Compound Component

51. 51
Get Everything From
A Render Prop

52. 52
Pass Everything Into
A Render Prop

53. 53

54. 54
Put Your Custom
Components Here

55. 55
Parent decides
how to render
Props collection

56. 56
children
Render Props
Rename

57. 57
children Render Props
Rename

58. 58
Child as a functional component

59. 59
More Use Cases

60. https://github.com/chenglou/react-motion

61. 61
React Motion
Get styles and you decide
how to render

62. https://github.com/renatorib/react-powerplug

63. 63
Renderless Containers

64. 64
Only part of components
need state

65. https://github.com/xJkit/react-goodbye

66. 66
Save reminder modal

67. How to use HoC for authorization?

68. 68
No logic in App
Logic in the HoC

69. 69
No logic in App
Logic in the HoCs

70. 70
No logic in App
Logic in these HoCs

71. 71
Get More as You Compose
be careful of “name collision”

72. Utility Components by HoCs

74. Render Props & HoC
are interchangeable

75. 75
Render Props & HoC are interchangeable
HoC version

76. 76
Render Props & HoC are interchangeable
Render Props version

77. 77
withNetwork
withAuth
Base
connect
Network HoC
Base Component
connect HoC
Auth HoC
Higher Order Component Pattern

78. 78
STEP 05
A Pattern Journey

79. 79
Provider Pattern

80. PROPS DRILLING
APP
A A
B
C
{
name: “Jay Chung” ,
email: xjkit54780@gmail.com
}
PROPS
PROPS
PROPS
<div>{props.name}</div>
<div>{props.email}</div>
<B {…props} />
<C {…props} />
<A {…props} />

81. IMPLICITEXPLICIT
APP
A A
B
C
{
name: “Jay Chung” ,
email: xjkit54780@gmail.com
}
PROPS React.createContext
<div>{props.name}</div>
<div>{props.email}</div>
Provider
Consumer
<Consumer>
{(props) => (
)}
</Consumer>
(Render Props)

82. 82
Container Component
STEP 01
Compound Component
STEP 02
Render Props
STEP 03
Higher Order Component
STEP 04
A Pattern Journey
Provider Pattern
STEP 05

83. 83
STEP 6
TrendMicro

84. https://github.com/trendmicro-frontend

85. 85
1
2
3
4
RECAP
5
Container Component Pattern
Compound Component Pattern
Render Props Pattern
Higher Order Component Pattern
Provider Pattern

86. 86
Controlled
component
Props getters
State reducer pattern
Single element
pattern

87. PATTERNS COMPARISON
Intuitive Maintainable Flexible Composable Use Cases
Container
Component
Compound
Component
HoC
Render Props
Provider

88. 88
More Use Cases

89. 89
react-redux react-router

90. 90
Provider Pattern

91. 91
Higher Order Component

92. 92

93. 93
Provider Pattern

94. 94
Higher Order
Component

95. 95
Render Props in
React Apollo 2.1

96. https://spectrum.chat/thread/d2e9ad39-f6b2-4614-ae20-3f619100bb3b

97. PATTERNS COMPARISON
Intuitive Maintainable Flexible Composable Use Cases
Container
Component ❤❤ ❓ 💢 💢 Any
Compound
Component ❤❤ ❤❤ ❤ 💢
Tab, Nav, Wizard,
Steps
HoC ❤ ❤❤ ❤❤ ❤❤❤
Utility
Component
Render Props ❤ ❤❤ ❤❤❤ ❤
Utility
Component
Provider ❤ ❤❤ ❤ ❤ Theme, i18n

98. 98
thank you
https://github.com/xJkit