You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Add Storybook to the user guide
* Add the missing "Snapshot Testing" link.
* Change the title to something nicer
Old title was looks like a marketing pitch. Change it to something looks great.
The new one is: Developing UI Components with React Storybook.
* Mention React Storybook as a third party tool.
* Nits
* Minor changes
-[Developing UI Components with React Storybook](#developing-ui-components-with-react-storybook)
44
45
-[Deployment](#deployment)
45
46
-[Building for Relative Paths](#building-for-relative-paths)
46
47
-[GitHub Pages](#github-pages)
@@ -861,6 +862,46 @@ Snapshot testing is a new feature of Jest that automatically generates text snap
861
862
862
863
This feature is experimental and still [has major usage issues](https://github.com/facebookincubator/create-react-app/issues/372) so we only encourage you to use it if you like experimental technology. We intend to gradually improve it over time and eventually offer it as the default solution for testing React components, but this will take time. [Read more about snapshot testing.](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html)
863
864
865
+
## Developing UI Components with React Storybook
866
+
867
+
Usually, in an app, you have a lot of UI components, and each of them has many different states.
868
+
For an example, a simple button component could have following states:
869
+
870
+
* With a text label.
871
+
* With an emoji.
872
+
* In the disabled mode.
873
+
874
+
Usually, it’s hard to see these states without running a sample app or some examples.
875
+
876
+
That’s where you could get some help from [React Storybook](https://github.com/kadirahq/react-storybook). **It is a third party tool that lets you develop components and see all their states in isolation from your app**.
You can also deploy your Storybook as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app.
881
+
882
+
**Here’s how to setup your app with Storybook:**
883
+
884
+
First, install the following npm package globally:
885
+
886
+
```sh
887
+
npm install -g getstorybook
888
+
```
889
+
890
+
Then, run the following command inside your app’s directory:
891
+
892
+
```sh
893
+
getstorybook
894
+
```
895
+
896
+
After that, follow the instructions on the screen.
897
+
898
+
Learn more about React Storybook:
899
+
900
+
* Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook)
0 commit comments