Styling React For Reuse

on YouTube ↗29m

" summary

Argues that reusable React UI means accessible semantics (use button and anchor, not div onclick), documents theme and style APIs, and balances isolation: too coupled forced every page to carry unused modal, menu and icon-font dependencies while too pristine components failed with real site data. Describes a living style guide, moving from SVG icon fonts to SVG icon sprites, splitting components into component-per-repo npm packages, and supporting styling via a theme prop (glamorous/aphrodite examples). Lessons: document accepted props and isolate packaging, not internals.

AI-written summary · about

" chapters (5)

1. 0:00Introduction and goals
2. 1:53Accessibility as a priority
3. 7:46Lessons in isolation
4. 16:19Theming and documentation
5. 22:19Q&A and closing

" related talks

• 16mStyling your React js components for reuseShodipo Ayomide · JavaScript and Friends Conference 2020
• 29mHow to style in React and not lose friendsSarrah Vesselov · JSConf Iceland 2018
• 29mStyling Components for React UI KitsJavi Velasco · ReactiveConf 2017
• 25mBuilding Loveable UIsHenrique Alves · React Amsterdam 2016
• 44mWriting styles for React componentsJavi Velasco · FrontFest 2017
• 32mDesigning React Interfaces: A Journey Through Modern Styling TechniquesArsalan Ahmed · React India 2024
• 44mA Practical Guide for Crafting Resilient UI ComponentsGlenn Reyes · Copenhagen Developers Festival 2023
• 38mWriting highly reusable React componentsJavi Velasco · React Alicante 2017