How to structure, style and document components for maximum effectiveness
summary
Starts with a concrete repo layout: ui vs containers where containers hold all logic and screens receive props so UI bugs and logic bugs live in one place. UI uses three levels: primitives components screens so buttons and inputs are reusable primitives, components combine them, screens assemble pages. Styling relies on styled-components and styled-system to declare styles via props and defaults. Documentation is a simple screenshot markdown catalog mapping component name path and image that takes ~15 seconds to update.
AI-written summary · about
chapters (8)
- 0:00Intro
- 2:15How to structure your code
- 4:15Containers
- 5:45Style Components
- 6:30Style System
- 9:20Styling Components
- 10:40Documentation
- 13:50Conclusion
related talks
29mStyling React For Reuse
44mA Practical Guide for Crafting Resilient UI Components
25mBuilding Loveable UIs
43mHow to build your reusable UI component library like a pro
16mStyling your React js components for reuse
34mSecrets of building robust UI components
07mReact components, atomic design and storybook
07mReact Components and How To Style Them