Introducing Design Systems with React and Typescript in Storybook
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.
Instructor: [00:01] 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.
[00:13] A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design and 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.
[00:35] 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, ensuring consistent look and feel throughout all your screens, and have a seamless workflow between designers and developers.
[00:50] Throughout this 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.
[01:04] You will 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.
[01:16] After setting up a basic storybook, we'll explore three React-specific add-ons and decorators that are particularly useful in React storybooks, as well as create co-located stories, which allow for extremely maintainable design systems.
[01:29] The best design systems come with strong typing. 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 auto-generate documentation for your React components. Be sure not to miss that.
[01:45] 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 case, you will learn how to have the best practice setup for your next great component library.