This workshop is designed to provide an understanding of the principles and process of building a component library in React. Together we'll build a library of several small components that can be imported and reused in any React application. By the end of the workshop you should be able to:
- develop extensible components
- organize components in a highly-reusable structure
- test and document components effectively
- publish and version your library
This is an introduction to building a component library in React, and while you're welcome to sit and listen or follow along with someone else, you will get the most out of this workshop by having:
- A laptop (preferrably a Mac)
- Node & npm installed
- A GitHub account
- functional knowledge of Git and GitHub
- functional knowledge of the command-line
- functional knowledge of npm (or Yarn)
- functional knowledge of HTML, CSS, and JavaScript
- familiar-to-functional knowledge or React
- familiarity with Flexbox grid
Upon completing this workshop you should be able to:
- understand why and when a component library is valuable
- have a working knowledge of related tooling and libraries
- styled-components
- react-styleguidist
- BabelJS
- Yarn / npm
- understand component library structure, principles, and tradeoffs
- understand development process
- building components
- writing tests
- writing docs
- publishing and versioning your library
- extend your library or build your own
And you should leave with:
- a functional starter library
- helpful links and resources for further learning
We'll build a small library of components leading up to a final inline-editable field. We'll start by building the smallest elements and put them all together at the end.
- Discuss why and when component libraries make sense
- Explain goals & what we're building
- View mockups
- Pull down the boilerplate from the repo
- Walk through what we're building (structure & principles)
- Describe various libs and their purpose
We'll start by building a few small Elements:
- Text
- Label
- Icon
- TextField
- TextArea
We'll walk through an effective development workflow as we build. And we'll test and document components as we go.
Next we'll combine some of those Elements to make Blocks:
- IconButton
- WarningMessage
- InlineEditable
And again, we'll test and document as we go.
And finally, we'll build our InlineEditable Component and add tests and documentation.
We'll wrap up development by publishing docs to GitHub Pages and publishing our library to npm (optional).
We'll conclude the workshop by reviewing what we learned and sharing some helpful links and resources.