React Refactoring Patterns
summary
Shows concrete refactors used to turn a 2014 jQuery mess into a React/Redux single‑page app, with component-as-folder structure, Flow types for build‑time safety and GraphQL fragments & mutations to colocate data and actions. Demonstrates reusable patterns (generic/utility/domain components), a loading button that disables until a returned promise resolves, classnames + CSS modules for scoped styles, data-test attributes for Selenium, and topic‑follow mutation wiring that actually updates UI.
AI-written summary · about
chapters (14)
- 0:00Start
- 4:46Three Types of Components
- 6:36Component as Folder
- 7:46Font Component
- 10:16Component as Props
- 16:50Type Safety
- 17:58Precomputed Sets
- 21:16Functions as Probes
- 22:57Domain Component
- 25:59The Topic Follow Button
- 26:27Topic Followed Toggle
- 26:52Action Button
- 27:23Loading Button
- 29:28Infinite Scrolling
related talks
45mReact refactoring, off the hook(s)!
35mAdvanced patterns in building React Components
36mThe Flux Pattern: MVC Framework for Data
57mBuilding Scalable, Maintainable Apps Using TypeScript and React
32mRefactoring React
15mReact Best Practices in 15 Slides
31mAdvanced Patterns - Moving Beyond Presentation and Container Components
33mReact Advanced Patterns