Storybook: 150% speed up React Components development

I heard the parts about Storybook from a lot of friends who is either working game or startup, spending about half of a day on doing the right configuration and understanding the right development tool. I would strongly recommend it to every React developers and teams, for the reason below:

• Storybook runs outside of your app, this allows you to develop UI components in isolation.
• It can improve component reuse, testability, and development speed.
• Quickly developing without having to worry about application-specific dependencies.

(by Storybook)

1- Install

$ npm i -g @storybook/cli$ cd my-react-app$ getstorybook

2- Make the right Config

5 config files is involved to the git commit, they are all generated by getstorybook CLI. The one I spent a bit more time is[webpack.config.js](https://github.com/wahengchang/react-redux-boilerplate/commit/aa2f4d6fd0ce55525bf471904eb82683a3d5d9a6#diff-6da49b24efd584154cfb4ec759745192 ".storybook/webpack.config.js"), as css-module is used in the target.

[.storybook/config.js](https://github.com/wahengchang/react-redux-boilerplate/commit/aa2f4d6fd0ce55525bf471904eb82683a3d5d9a6#diff-6ab7cd89286451cc2620c7509b7d23b8 ".storybook/config.js")

[.storybook/webpack.config.js](https://github.com/wahengchang/react-redux-boilerplate/commit/aa2f4d6fd0ce55525bf471904eb82683a3d5d9a6#diff-6da49b24efd584154cfb4ec759745192 ".storybook/webpack.config.js")

./[package.json](https://github.com/wahengchang/react-redux-boilerplate/commit/aa2f4d6fd0ce55525bf471904eb82683a3d5d9a6#diff-b9cfc7f2cdf78a7f4b91a753d10865a2 "package.json")

[./stories/index.js](https://github.com/wahengchang/react-redux-boilerplate/commit/aa2f4d6fd0ce55525bf471904eb82683a3d5d9a6#diff-fc0beb5060745097c94da659f02f2884 "stories/index.js")

Target components

Target component have to be a simple function that returns HTML Elements / React.Component.

const Hello = ({ onClick, message }) => {return (<div><h1 className={classNames(style['title'])}>{ message }</h1><button onClick={onClick}>Click</button></div>)}

Hello.propTypes = {onClick: PropTypes.func.isRequired,message: PropTypes.string.isRequired}

export default Hello

Run

$ npm i --save-dev @storybook/react$ npm run storybook

open browser localhost:6006

Troubleshooting

The part was spent the most time is troubleshooting this issue:  — sh: start-storybook: command not found

After installing storybook globally and generated needed config by getstorybook, the error is showed:

sh: start-storybook: command not foundnpm ERR! file shnpm ERR! code ELIFECYCLEnpm ERR! errno ENOENTnpm ERR! syscall spawnnpm ERR! [email protected] storybook: start-storybook -p 6006

solution:

$ npm i --save-dev @storybook/react$ npm run storybook

Reference

https://github.com/storybooks/storybook/blob/master/README.md

https://github.com/wahengchang/react-redux-boilerplate/commit/aa2f4d6fd0ce55525bf471904eb82683a3d5d9a6