From 18c34762c28eef9c79a6b5eb09ec5f87cea9bb16 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Sat, 24 Sep 2016 19:13:30 +0530 Subject: [PATCH 1/6] Add Storybook to the user guide --- packages/react-scripts/template/README.md | 39 +++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 86b9bab8f10..5dc02f1ee9a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -41,6 +41,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Continuous Integration](#continuous-integration) - [Disabling jsdom](#disabling-jsdom) - [Experimental Snapshot Testing](#experimental-snapshot-testing) +- [Turbo Charge Component Development with React Storybook](#turbo-charge-component-development-with-react-storybook) - [Deployment](#deployment) - [Building for Relative Paths](#building-for-relative-paths) - [GitHub Pages](#github-pages) @@ -858,6 +859,44 @@ Snapshot testing is a new feature of Jest that automatically generates text snap 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) +## Turbo Charge Component Development with React Storybook + +Usually, in our app, we have a lot of UI components, and they've different states. +For an example, a simple button component could have following states: + +* With a text label +* With some emoji +* With disabled mode + +With React Storybook, you can manage these different states (or stories) and develop them without running your app. You can also deploy your Storybook as a static app. + +That means, 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. + +![React Storybook Demo](http://i.imgur.com/7CIAWpB.gif) + +**Here's how to setup your app with Storybook:** + +First, install the following NPM module globally: + +```sh +npm install -g getstorybook +``` + +Then, apply following command inside your app: + +```sh +getstorybook +``` + +After that, follow the instructions on the screen. + +For more information, have a look at following links: + +* Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook) +* [GitHub Repo](https://github.com/kadirahq/react-storybook) +* [Documentation](https://getstorybook.io/docs) +* Snapshot Testing with React Storybook + ## Deployment ## Building for Relative Paths From 04f0387227a437538dd709934d6f25251d1a405a Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Fri, 30 Sep 2016 22:43:11 +0530 Subject: [PATCH 2/6] Add the missing "Snapshot Testing" link. --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5dc02f1ee9a..339484df944 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -895,7 +895,7 @@ For more information, have a look at following links: * Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook) * [GitHub Repo](https://github.com/kadirahq/react-storybook) * [Documentation](https://getstorybook.io/docs) -* Snapshot Testing with React Storybook +* [Snapshot Testing](https://github.com/kadirahq/storyshots) with React Storybook ## Deployment From 16347baba79da36bee18cbf3ce0cf45f8b718dc2 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Wed, 5 Oct 2016 14:29:12 +0530 Subject: [PATCH 3/6] 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. --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 339484df944..1d36935b8b0 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -41,7 +41,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Continuous Integration](#continuous-integration) - [Disabling jsdom](#disabling-jsdom) - [Experimental Snapshot Testing](#experimental-snapshot-testing) -- [Turbo Charge Component Development with React Storybook](#turbo-charge-component-development-with-react-storybook) +- [Developing UI Components with React Storybook](#developing-ui-components-with-react-storybook) - [Deployment](#deployment) - [Building for Relative Paths](#building-for-relative-paths) - [GitHub Pages](#github-pages) @@ -859,7 +859,7 @@ Snapshot testing is a new feature of Jest that automatically generates text snap 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) -## Turbo Charge Component Development with React Storybook +## Developing UI Components with React Storybook Usually, in our app, we have a lot of UI components, and they've different states. For an example, a simple button component could have following states: From 686cc628b4120b8a085597ac1d9d1b6fa5088809 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Wed, 5 Oct 2016 14:37:26 +0530 Subject: [PATCH 4/6] Mention React Storybook as a third party tool. --- packages/react-scripts/template/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 1d36935b8b0..5d50c62655b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -868,7 +868,9 @@ For an example, a simple button component could have following states: * With some emoji * With disabled mode -With React Storybook, you can manage these different states (or stories) and develop them without running your app. You can also deploy your Storybook as a static app. +Usually, it's hard to see these states without running a sample app or some examples. + +That's where you could get some help from the third party tool [React Storybook](https://github.com/kadirahq/react-storybook). With that, you can manage these different states and develop them without running your app. You can also deploy your Storybook as a static app. That means, 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. From 96627c18c8f9e448a99782f6fbb9370eef7494f2 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 5 Oct 2016 11:29:17 +0100 Subject: [PATCH 5/6] Nits --- packages/react-scripts/template/README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5d50c62655b..2e297ddb656 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -861,30 +861,30 @@ This feature is experimental and still [has major usage issues](https://github.c ## Developing UI Components with React Storybook -Usually, in our app, we have a lot of UI components, and they've different states. +Usually, in an app, you have a lot of UI components, and each of them has many different states. For an example, a simple button component could have following states: -* With a text label -* With some emoji -* With disabled mode +* With a text label. +* With an emoji. +* In the disabled mode. -Usually, it's hard to see these states without running a sample app or some examples. +Usually, it’s hard to see these states without running a sample app or some examples. -That's where you could get some help from the third party tool [React Storybook](https://github.com/kadirahq/react-storybook). With that, you can manage these different states and develop them without running your app. You can also deploy your Storybook as a static app. +That’s where you could get some help from the third party tool [React Storybook](https://github.com/kadirahq/react-storybook). With it, you can manage these different states and develop components in isolation from the app. -That means, 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. +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. ![React Storybook Demo](http://i.imgur.com/7CIAWpB.gif) -**Here's how to setup your app with Storybook:** +**Here’s how to setup your app with Storybook:** -First, install the following NPM module globally: +First, install the following npm package globally: ```sh npm install -g getstorybook ``` -Then, apply following command inside your app: +Then, run the following command inside your app’s directory: ```sh getstorybook @@ -892,7 +892,7 @@ getstorybook After that, follow the instructions on the screen. -For more information, have a look at following links: +Learn more about React Storybook: * Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook) * [GitHub Repo](https://github.com/kadirahq/react-storybook) From ef29d2d915c12429880ec6eba22b867db930fba8 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 5 Oct 2016 11:36:38 +0100 Subject: [PATCH 6/6] Minor changes --- packages/react-scripts/template/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 2e297ddb656..984f2eb2502 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -870,12 +870,12 @@ For an example, a simple button component could have following states: Usually, it’s hard to see these states without running a sample app or some examples. -That’s where you could get some help from the third party tool [React Storybook](https://github.com/kadirahq/react-storybook). With it, you can manage these different states and develop components in isolation from the 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. +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**. ![React Storybook Demo](http://i.imgur.com/7CIAWpB.gif) +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. + **Here’s how to setup your app with Storybook:** First, install the following npm package globally: