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.
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