React StoryBook ๐Ÿ“–

React StoryBook is a UI component development environment for React. With that, you are able develop UI components without running your app ๐Ÿ™Œ


๐Ÿ”จ Step 1

$ create-react-app hello-storybook

๐Ÿ”จ Step 2

$ npm install -g getstorybook

๐Ÿ”จ Step 3

$ cd hello-storybook
$ getstorybook  # press enter
๐Ÿƒ getstorybook
๐Ÿƒ getstorybook

๐Ÿ”จ Step 4

$ npm run storybook
๐Ÿƒ storybook
๐Ÿƒ storybook

๐Ÿš€ http://localhost:9009 in a ๐ŸŒ browser to ๐Ÿ‘€ the output

๐Ÿƒ storybook on port 9009
๐Ÿƒ storybook on port 9009

The main configuration for storybook is ๐Ÿ”ฆ in config.js

hello-storybook/storybook/config.js
hello-storybook/storybook/config.js

stories are ๐Ÿ”ฆ in ../src/stories

../src/stories
../src/stories

Lets try changing the button label ๐Ÿ˜„ ๐ŸŽ‰

Adding a ๐Ÿฆ„ to the button label in ../src/stories/index.js
Adding a ๐Ÿฆ„ to the button label in ../src/stories/index.js

Awesome ๐Ÿ˜Ž, now lets try ๐Ÿ”ง changing the button component

Tinkering the Button component in ../src/stories/Button.js
Tinkering the Button component in ../src/stories/Button.js

Wait โœ‹, it is possible deploy your awesome storybook into a static site


Building ๐Ÿ“– storybook

build-storybook in package.json
build-storybook in package.json
$ npm run build-storybook


Building react app

build in package.json
build in package.json
$ npm run build

The build folder is ready to be deployed ๐Ÿš€. You can serve it locally with a static server.


$ yarn global add pushstate-server

$ pushstate-server build

$ open http://localhost:9000

Stay Awesome! ๐Ÿ˜Ž
Stay Awesome! ๐Ÿ˜Ž

REFERENCE