A Practical Guide for Crafting Resilient UI Components
summary
Practical, code-level guidance for building durable React components: sets up ESLint/Prettier (deterministic ordering and import sorting), recommends Storybook or Ladle for isolated component work and Cypress for component tests, and uses TypeScript strictly (strict: true, prefer interfaces, export shared types). Advocates Atomic Design and CDD, ban className and style props to protect the design system, prefer union/string literals for variants over multiple booleans, reuse exported types, consider Zod for runtime validation, and keep components simple and well‑documented.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:05Speaker background
- 3:14Robustness in UI components
- 6:30Essential UI tooling
- 11:29Component explorers
- 13:59Theming and design systems
- 17:12Atomic design methodology
- 19:42Component-driven strategies
- 20:45React props patterns
- 25:43Type-safe HTML attributes
- 27:52Design system consistency
- 31:05Compound and polymorphic components
- 32:29Generics in React
- 33:12Overload function components
- 34:18Interfaces vs types
- 36:27Advanced TypeScript techniques
- 40:22Key takeaways for crafting resilient UI components
related talks
34mSecrets of building robust UI components
51mBuilding Better Components — A Journey to a More Resilient Frontend
37mBuilding Better Components — A Journey to a More Resilient Frontend
29mStyling React For Reuse
22mCrafting Pristine React: Best Practices for Maintainable Code
33mThe New Best Practices
46mBuilding Reusable Components ... That Are Actually Reusable
44mWriting good components