Introducing Design Systems with React and Typescript in Storybook

Shawn Wang
InstructorShawn Wang
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 5 years ago

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.

egghead
egghead
~ 34 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today