Use React Patterns to Build Large Scalable App
•
8 likes•4,622 views
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
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Use React Patterns to Build Large Scalable App
Similar to Use React Patterns to Build Large Scalable App (20)
Recently uploaded
Recently uploaded (20)
Use React Patterns to Build Large Scalable App
- 1. 1 Use React Patterns To Build Large Scalable App Jay Chung @ Modern Web 2018, TW
- 2. 2 Components
- 4. 4 Patterns
- 5. 5
- 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
- 10. 10 Higher Order Render Props https://github.com/drcmda/react-spring
- 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
- 18. 18
- 20. 20 How Things Work Container Component data fetching/state changes How Things Look Presentational Component markup, style
- 25. 25
- 26. 26 InlineEditing in Table renderer
- 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
- 37. React Top Level API
- 38. 38 Children eat different props
- 39. 39 Children connect at root
- 43. 43 How to use my own UI components?
- 44. 44 Step 3 A Pattern Journey
- 45. 45
- 48. 48 A render prop is a function prop that a component uses to know what to render.
- 49. 49
- 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
- 58. 58 Child as a functional component
- 61. 61 React Motion Get styles and you decide how to render
- 64. 64 Only part of components need state
- 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
- 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
- 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
- 92. 92
- 95. 95 Render Props in React Apollo 2.1
- 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