I heard the parts about 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 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 , they are all generated by CLI. The one I spent a bit more time is , as css-module is used in the target. git commit getstorybook [webpack.config.js](https://github.com/wahengchang/react-redux-boilerplate/commit/aa2f4d6fd0ce55525bf471904eb82683a3d5d9a6#diff-6da49b24efd584154cfb4ec759745192 ".storybook/webpack.config.js") [.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 , the error is showed: getstorybook sh: start-storybook: command not foundnpm ERR! file shnpm ERR! code ELIFECYCLEnpm ERR! errno ENOENTnpm ERR! syscall spawnnpm ERR! dashboard@0.0.0 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

Target

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Storybook: 150% speed up React Components development

Too Long; Didn't Read

Company Mentioned

Peter Chang

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Storybook: 150% speed up React Components development

Too Long; Didn't Read

Company Mentioned

Peter Chang

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES