In this course, we will learn how to set up all the necessary infrastructure to build a Design System of reusable React components, with state of the art developer experience enabled by Typescript and Storybook.
A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. Head to designsystemsrepo.com and you can see Design Systems used by some of the biggest companies and strongest brands from Priceline, Apple, IBM, Wework, Github, and even the US Government. Design Systems can be a significant productivity multiplier in any medium-to-large project or company because you can document your components as you develop them, ensure a consistent look and feel throughout all your screens, and have a seamless workflow between designers and developers.
Through the course we will progressively build up a very simple design system containing one button, but show you all the functionality that Storybook can bring to enhance your developer experience and project velocity. You’ll learn to set up the same Storybooks used in production by everyone from Lonely Planet to Uber, but at the same time we’ll keep it as simple as possible, so you can repurpose these APIs for your specific needs.
After setting up a basic Storybook we’ll explore three React specific addons and decorators that are particularly useful in React Storybooks, as well as create colocated stories which allow for extremely maintainable design systems.
The best design systems come with strong typing, and we’ll finish by learning how to configure Storybook to work with Typescript for type safety. The great thing about pairing Storybook with Typescript is that you can autogenerate documentation for your React components, so be sure not to miss that!
Because Storybook is relatively unopinionated, there can be a lot of configuration to puzzle out for the React + Typescript Design System use case. With this course, you will learn how to have the best practice setup for your next great component library!