Build a Component Development Workflow With Storybook
It's vital we have a solid grounding for our component workflow if we are to build an entire library of them. In this lesson, we will set up a smooth, component-driven development workflow from code to Storybook.
It's vital we have a solid grounding for our component workflow if we are to build an entire library of them. In this lesson, we will be:
Setting up a smooth, component-driven development workflow from code to Storybook
Connecting your app and your component library locally
Verifying the connection by having both projects open, updating a component, and witnessing the change in the application
For now, let us scope a component to a very simple one: just a DIV element with some text.
Begin by navigating into your component library codebase.
Creating a simple demo component#
Naturally, since this is React, it's wise to start with the component code.
Let's write a component in src/components/Demo/Demo.js
.
const Demo = () => <div>Demo component</div>;
It's a very plain stateless functional component. We export it as default from this file.
Storybook#
However, this won't be enough for Storybook. It expects us to have a dedicated story file. To quote the documentation,
"... story is a function that describes how to render a component".
You can have one or more stories in a file. These files need to follow a naming convention in order to be found and processed. Usually, they have the format COMPONENT_NAME.stories.FILE_FORMAT
.
For this story, we will import the component we just wrote and export it. The first export defines something similar to a section in Storybook, and the second export is the actual story. For our format, we will use MDX, a kind of powerful hybrid between React and Markdown.
Write the following in src/components/Demo/Demo.stories.mdx
.
import { Meta, Story } from '@storybook/addon-docs/blocks';
That's all we need for a primitive React component with a story. The Meta
element lets us specify the component and details like wherein the Storybook should reside. The Story
element in this simple case is just a named wrapper around our Demo component.
Verify that it works by running npm start
.

This lesson preview is part of the The newline Guide to React Component Design Systems with Figmagic course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to React Component Design Systems with Figmagic, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
