Download as PDF, PPTX
Uploaded byYao Nien Chung
Use React Patterns to Build Large Scalable App
The document outlines various React design patterns for building scalable applications, including container components, presentational components, higher-order components, render props, and provider patterns. It emphasizes the importance of structuring components to improve maintainability and flexibility while providing links to relevant resources and examples. Additionally, it includes a recap of the discussed patterns and their practical use cases in React development.
Use React Patterns to Build Large Scalable App
- 1. 1 Use React PatternsTo Build Large Scalable App Jay Chung @ Modern Web 2018, TW
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8. 8 3 4 10 3 32 + 42 = 5102 = 100 32 π Fix Problems with Elegance different clues with different patterns
- 9.
- 10. 10 Higher Order RenderProps https://github.com/drcmda/react-spring
- 11.
- 12.
- 13.
- 14. 14 STEP 1 container component APattern 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 AboutMe Front End Developer https://github.com/xJkit/modern-web-2018-demo
- 16.
- 17.
- 18.
- 19.
- 20. 20 How Things Work ContainerComponent data fetching/state changes How Things Look Presentational Component markup, style
- 22.
- 23.
- 24.
- 25.
- 26. 26 InlineEditing in Tablerenderer
- 27.
- 29. 29 How to custombutton or input styles? How to change button order or position?
- 30. 30 How to customUI styles?
- 31. 31 You need moreprops! 🤮
- 32. 32 STEP 02 A PatternJourney
- 33.
- 34.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. 43 How to usemy own UI components?
- 44. 44 Step 3 A PatternJourney
- 45.
- 46.
- 48. 48 A render propis a function prop that a component uses to know what to render.
- 49.
- 50.
- 51. 51 Get Everything From ARender Prop
- 52. 52 Pass Everything Into ARender Prop
- 53.
- 54.
- 55. 55 Parent decides how torender Props collection
- 56.
- 57.
- 58. 58 Child as afunctional component
- 59.
- 60.
- 61. 61 React Motion Get stylesand you decide how to render
- 62.
- 63.
- 64. 64 Only part ofcomponents need state
- 65.
- 66.
- 67. How to useHoC for authorization?
- 68. 68 No logic inApp Logic in the HoC
- 69. 69 No logic inApp Logic in the HoCs
- 70. 70 No logic inApp Logic in these HoCs
- 71. 71 Get More asYou Compose be careful of “name collision”
- 72.
- 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 connectHoC Auth HoC Higher Order Component Pattern
- 78. 78 STEP 05 A PatternJourney
- 79.
- 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: “JayChung” , 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 CompoundComponent STEP 02 Render Props STEP 03 Higher Order Component STEP 04 A Pattern Journey Provider Pattern STEP 05
- 83.
- 84.
- 85. 85 1 2 3 4 RECAP 5 Container Component Pattern CompoundComponent Pattern Render Props Pattern Higher Order Component Pattern Provider Pattern
- 86. 86 Controlled component Props getters State reducerpattern Single element pattern
- 87. PATTERNS COMPARISON Intuitive MaintainableFlexible Composable Use Cases Container Component Compound Component HoC Render Props Provider
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95. 95 Render Props in ReactApollo 2.1
- 96.
- 97. PATTERNS COMPARISON Intuitive MaintainableFlexible Composable Use Cases Container Component ❤❤ ❓ 💢 💢 Any Compound Component ❤❤ ❤❤ ❤ 💢 Tab, Nav, Wizard, Steps HoC ❤ ❤❤ ❤❤ ❤❤❤ Utility Component Render Props ❤ ❤❤ ❤❤❤ ❤ Utility Component Provider ❤ ❤❤ ❤ ❤ Theme, i18n
- 98.