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
It's a very plain stateless functional component. We export it as default from this file.
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
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
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