React components, atomic design and storybook

on YouTube ↗07m

" summary

Explains how components are split into atoms, molecules and organisms and packaged as an npm package so the same UI library is reused across projects, with organisms left for project-level specifics. Uses Storybook to develop components in isolation and demonstrates the action logger to verify interactions, knobs to tweak props live, and show-info to document props. Builds a static Storybook as a deployable design manual. Reports positive results but notes Storybook’s current poor mobile support.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 0:19developing a common ui library
3. 1:13make your react components
4. 2:51build up flows of different states
5. 4:57build a static version of storybook
6. 5:44upload to any static hosting site

" related talks

• 38mReact-Storybook: Design, Develop, Document and Debug your React UI componentsMarie-Laure Thuret · React Alicante 2017
• 24mBuild React Apps Fast Using Storybook, DDD, and Atomic DesignAlon Valadji · ReactNext 2019
• 24mReact-Storybook"Design, Develop, Document and Debug your React UI components"Marie-Laure Thuret · React Conf 2017
• 44mAtomic Design and Storybook to Boost Frontend Dev ProductivityTeva Lautier · Devfest Strasbourg 2023
• 27mThe story of storybookNorbert de Langen · ReactJS Day 2017
• 37mBridging the gap between UX and development – A StorybookMarko Letic · FrontCon 2019
• 14mBuilding a component library with React, Vue, Angular or WebComponentsNorbert de Langen · Frontend Developer Love 2018
• 15mOnce Upon a Time StorybookMichèle Legait · BDX I/O 2019