Often, when developing a new React component for a web app, I find myself with lots to do. For example, I may need to add a Redux container, API endpoint, some Redux actions, and the UI of the component. These tasks are all interconnected and interdependent, so it’s difficult to know where to start and make progress in an incremental, testable fashion.
One answer to this problem is to decouple the development of the component’s UI from its surroundings. In this post, I’ll describe a method for using React Storybook to create components and simplify complexity during each step. Hopefully, this will help you create better, more decoupled components more easily.
What is Storybook?
In case you’re not familiar, React Storybook is a library that allows you to render individual React components in isolation. For an introduction and overview of Storybook, check out “Should You Use React Storybook?” by my fellow Atom Matt Nedrich.
Setting up Storybook
Before creating components using Storybook, you will need to do some setup. The setup guide in Storybook’s documentation is particularly helpful, and I would recommend following that.
One modification we made on my project was to use a pattern matching expression in loadStories(), inside of the .storybook/config.js. We did this because we have multiple files that contain stories, and we want to tell Storybook to load all of them. If you want to do this on your project, just replace the loadStories() function with the following:
const req = require.context('../src', true, /.stories.tsx?$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
You can modify the pattern by replacing the ‘/.stories.tsx’ with another naming convention. For example, if you’re using JavaScript, you may want to use /’.stories.jsx?$/’.
Creating a Component’s UI
The first step is to create a file with the UI of the component. Start with a simple React component. On my project, we name these with the convention ‘my-componet-UI.tsx’. This component should take in some props, but don’t worry about rendering it in the actual app yet.
Creating a Component’s Stories
Next, create a new file for rendering the stories of this component. As I mentioned above, in my project, our Storybook is set up to look for files ending in ‘.stories.tsx’, so I’ll name the file ‘my-component.stories.tsx’. Go ahead and add a story for this component in this file and pass in the required props to the component.
At this point, you should be able to start Storybook and view the UI component. Now, I like to do as much as possible to complete the UI component. This includes adding all of the props, styling the component, and adding as many stories as possible to show different states of the component. You can pass in any Redux actions as undefined so that the action definitions are not required.
Finalizing the Component
Now that the component looks nice in Storybook and has all of the props it needs, it’s time to connect it to the real app. For me, this means writing a Redux container and then instantiating the container in the parent component.
The Benefits
The key in this process is that Storybook is rendering the UI file, which circumvents Redux. This approach allows me to get something working earlier so I can seek initial feedback from the designer on my project.
Once you’ve verified the accuracy of your component, you can move on to adding a Redux container, confident in the UI of your component and able to focus on the concerns of the container. If this sounds interesting to you, I’d encourage you to give React Storybook a try.