Introducing Design Systems with React and Typescript in Storybook

Set up Storybook for React from Scratch

Add your first React Story to Storybook

Add a Welcome Page with Sequential Stories to a React Storybook

Display the JSX of a React Storybook Story with the JSX Addon

Apply Style to a React StoryBook with the Info addon to Turn Stories into Documentation

Create Interactive Storybook Stories with the Knobs Decorator

Configure React Storybook for use with Typescript

Automate Documentation Generation in your Typescript React Codebase with Storybook

Design Systems with React and Typescript in Storybook

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show the best configuration for React Storybook, and walk through adding your very first React Component and Story to your Storybook.

https://app.egghead.io/api/v1/lessons/react-add-your-first-react-story-to-storybook/subtitles

Instructor: [00:00] I am going to start by configuring our storybook. First, we import the configure method from storybook/react. Then we define a small utility function from require.context. What this does is it looks through everything in the source folder, and it uses a regex to look for files that end in stories.js.

[00:24] We are going to use this in a function called loadStories. For every file that matches, we're going to require it, like so. Finally, we are going to pass that function to the configure method along with the current module.

[00:49] Next, we are going to go over to our empty source folder and set up our first React component. We are going to import React from React.

[00:59] Then we'll define a small functional component. It's going to take props BG and children, and render them. That's a simple React component.

[01:11] Now, we are going to set up the stories for this React component. Make a new file called button.stories.js. Whatever it is, the file name just has to end in .stories.js to match up with the regex.

[01:24] We are going to import React, import the stories of function from storybook/react. We are going to import the component that we just made.

[01:41] Now, to actually define the story, we declaratively say stories of, and then the category, which is button, the current module. Then we'll say add.

[01:52] Some description goes here, of the particular story that we want. I am just going to say with background, for example.

[01:58] We'll pass a simple function that is essentially a React's element that implements an instance of whatever we are trying to demonstrate with our story.

[02:11] I am going to say, "Hello World," over here, and save it. Now when I run storybook, it's going to show the button that we just implement. When I refresh, you can see over here that we have the new button with the background.

[02:25] If I want to demonstrate other capabilities of the component that I'm demonstrating, I can just make another story and, say, change some of the props, save it, refresh it, and then we'll add a new story here which we can navigate to. That's storybook.

Add your first React Story to Storybook

Share this video with your friends

Course

Design Systems with React and Typescript in Storybook