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.

import React from "react";

const Demo = () => <div>Demo component</div>;

export default Demo;

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';

import Demo from './Demo';

<Meta

  title="components/Demo"

  component={Demo}

/>

<Story name="Demo">

  <Demo />

</Story>

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.