Building Component Libraries for Cross Team Use with React

on YouTube ↗07m

" summary

A tool that uses webpack to scan component directories and dynamically generate documentation and live examples for React components so multiple teams can share a single library. Configuration merges several directories so components from three teams appear together. Edits hot reload in the browser and compile errors surface immediately. Documentation pulls a specially formatted one-asterisk comment from the component source and automatically updates the gallery and code view when it succeeds.

AI-written summary · about

" chapters (5)

1. 0:00Introduction
2. 0:42Why do we do this
3. 1:04Material UI
4. 2:12React Style Guide
5. 3:36Configuration

" related talks

• 24mCase Study: Creating a Component Library in React JSKathryn Grayson Nanz · NationJS Frontrunners React 2019
• 32mKickstarting libraries of shared React components for multiple teamsSurya Ambrose · reactjsday 2019
• 43mBuilding a component based library with ReactFerry Kobus · Frontend United 2018
• 21mBuilding Cross-Platform Component Libraries for Web and Native with ReactPerttu Lähteenlahtii · React Advanced 2021
• 33mKickstarting a library of internal React components for multiple teamsXavier Lefevre · ReactFoo 2019
• 28mMastering React Component Library OptimizationAsaf Shochet Avida · ReactNext 2024
• 21mThe Evolution of React UI DevelopmentNik Graf, Max Stoiber · ReactEurope 2016
• 14mBuilding a component library with React, Vue, Angular or WebComponentsNorbert de Langen · Frontend Developer Love 2018