Writing highly reusable React components
summary
Claims a way to ship complex components agnostic from style and demonstrates it with concrete tools and code. Uses styled-components and Fela as CSS-in-JS, extracts rendering logic into a reusable core called React Toolbox Core, and builds things like a navigable list HOC and a two-month DatePicker plus a matching React Native picker from the same logic. Shows keyboard scrolling, dependency-injection of primitives, real demos that work, and notes wide adoption (Netflix Amazon Walmart).
AI-written summary · about
chapters (34)
- 0:00Introduction
- 0:48React toolbox issues
- 2:25What got me thinking
- 3:55Style customization
- 4:43Rendering customization
- 6:20How can you achieve this
- 6:48CSS vs JavaScript
- 9:38CSS in React
- 10:11Style Components
- 10:33Style Syntax
- 12:15Button Component
- 13:48Style
- 14:34CSS NSJ
- 14:54InstI Components
- 15:18Provider Components
- 15:37Customization
- 16:08Styles
- 16:25Interpolate properties
- 16:36Interpolate styles
- 17:18Multiple primitives
- 18:28Overwrite styles
- 18:55Counter component
- 19:14Extracting components
- 19:40Reusing components
- 21:44Passthrough function
- 22:45Rubber element
- 22:55Factory
- 23:41Toolbox wavering
- 24:08Reactiveboxscore
- 24:45Navigation
- 28:44Date Picker
- 30:28Menu
- 31:19Customizing Rendering
- 31:54Questions
