Use React Patterns to Build Large Scalable App
8 likes4,633 views
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 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: [email protected] } 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: [email protected] } 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