storybook使用教程_如何使用Storybook构建React开发游乐场

storybook使用教程

by Sarah Sweat

通过莎拉汗

如何使用Storybook构建React开发游乐场 (How to build a React development playground using Storybook)

Lately, I have been wanting to try new things and test out new technologies or patterns in my React components. I needed a place where I could test these things out without launching a new app every time.

最近，我一直想尝试新事物并在React组件中测试新技术或新模式。 我需要一个可以测试这些东西而无需每次都启动新应用程序的地方。

I recently started using React storybook at work in order to establish a new design system for future projects. I also used it to prototype several versions of a new content authoring tool our team is working on. Putting this tool together with my desire to create components and play around with new things in a low stakes way seemed perfect. A few examples of these new “things” are React Context, SlateJs, and React Hooks.

我最近开始在工作中使用React故事书，以便为将来的项目建立新的设计系统。 我还使用它为我们团队正在使用的新内容创作工具的多个版本制作了原型。 将这个工具与我创建组件并以低风险的方式尝试新事物的愿望完美结合。 这些新的“事物”的一些示例是React Context，SlateJs和React Hooks。

This could also be used as a portfolio and a great way to showcase your work. Since Storybook can be deployed as its own app, you can host a webpage where you have a variety of projects and components you can display to potential employers or clients. Once deployed, it’s as easy as sending them a link to your storybook!

这也可以用作作品集和展示作品的好方法。 由于Storybook可以作为自己的应用程序进行部署，因此您可以托管一个网页，在该网页上可以显示给潜在雇主或客户的各种项目和组件。 部署后，就像向他们发送故事书的链接一样简单！

This post will focus on creating the Storybook for React environment and I will aim to post in the future about what I create inside of it!

这篇文章将专注于为React环境创建Storybook，我的目标是将来发布有关其中的内容的信息！

太…故事书是什么？ (Sooo… What is Storybook?)

Taken straight from the Storybook website because I couldn’t say it better myself:

直接从Storybook网站上获取，因为我自己无法说得更好：

“Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.

“ Storybook是一个用于UI组件的用户界面开发环境和游乐场。 该工具使开发人员能够独立创建组件，并在隔离的开发环境中以交互方式展示组件。

“Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.

“ Storybook是一个用于UI组件的用户界面开发环境和游乐场。 该工具使开发人员能够独立创建组件，并在隔离的开发环境中以交互方式展示组件。

That means… I can create and display/interact with components independently of actually running the React app! And since this project won’t be focused on a single app’s performance or DRYness, I can have multiple prototypes and versions of components so that I can perfect them, allow stakeholders to approve, etc. before bringing them into the app for which they were intended for. I can also use it to just practice making components and testing how to use the new tech I mentioned before.

这意味着……我可以独立于实际运行React应用程序而创建和显示/交互组件！ 而且由于该项目不会只关注单个应用程序的性能或DRYness，因此我可以拥有多个组件的原型和版本，以便可以完善它们，允许利益相关者批准等，然后再将其引入其原本的应用程序中。用于。 我也可以使用它来练习制作组件并测试如何使用我之前提到的新技术。

Let’s get building now!

让我们现在开始建造！

创建一个基本的React应用 (Create a base React app)

npx create-react-app my-playground

You can ensure that your app was created successfully by running yarn start . A new window should appear on your browser to localhost:3000 that looks like the picture above. Once confirmed you can stop it by pressing ⌘ + C.

您可以通过运行yarn start来确保成功创建了您的应用程序。 浏览器上应出现一个新窗口，显示为localhost:3000 ，如上图所示。 确认后，可以按⌘+ C停止它。

添加故事书 (Add Storybook)

First, from the command line within your project, you will need to add storybook with the following command:

首先，从项目中的命令行，您将需要使用以下命令添加故事书：

npx -p @storybook/cli sb init

Then, you can run storybook by using:

然后，您可以使用以下方式运行故事书：

yarn storybook

Now you should be up and running, seeing a screen in your browser like the one below:

现在您应该启动并运行，在浏览器中看到如下屏幕：

If you look within your project folder, you will notice that some files have been added and others updated:

如果您在项目文件夹中查看，您会注意到一些文件已添加，而另一些文件已更新：

The ./storybook folder is home to where you will configure a lot of the settings for your storybook. There are all sorts of add-ons you can apply to your project to add more features. The config.js file is generally where you will apply add-ons and also tell storybook where to find your stories. The config defaults to the following:

./storybook文件夹位于该文件夹中，您将在其中配置许多故事./storybook设置。 您可以将各种插件应用于您的项目以添加更多功能。 通常，您可以在config.js文件中应用加载项，还可以告诉Storybook在哪里找到您的故事。 配置默认为以下内容：

import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

This is telling storybook to look in the ../src/stories folder for the stories you have written. Right now, storybook has gone ahead and added a few default stories for you. You can take a look at those to get an idea of how to write the stories. You are ultimately just rendering your components within their own functions and you can pass them whatever props you like.

这是告诉故事书在../src/stories文件夹中查找您编写的故事。 目前，故事书已取得进展，并为您添加了一些默认故事。 您可以查看这些内容，以了解如何编写故事。 最终，您只是在自己的函数中渲染组件，然后就可以根据需要传递它们。

As you can see in the example it gives you below, you can create multiple versions of the same component by just rendering it with different props.

正如您在下面的示例中看到的那样，您可以通过使用不同的道具进行渲染来创建同一组件的多个版本。

You can imagine though, once you start creating more components, this file could get very large and you don’t want to have to spell out in your config every file with stories in it that you want rendered… Instead, a handy way to to do this is to name any file in your src folder with stories.js and to let storybook dynamically find all files named with stories.js at the end, within your src folder you would put the following in your config file:

但是，您可以想象，一旦开始创建更多的组件，该文件可能会变得非常大，并且您不必在配置文件中拼出要渲染的带有故事的文件，而是一种方便的方法这样做的目的是使用stories.js命名src文件夹中的任何文件，并让Storybook动态地找到最后以stories.js命名的所有文件，在src文件夹中，您src以下内容放入配置文件中：

import { configure } from '@storybook/react'

function loadStories() {
  const req = require.context('../src', true, /\.stories\.js$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

This allows for a much cleaner file structure and you can organize your stories by project or even by component within your src folder.

这样可以使文件结构更加整洁，您可以按项目甚至按src文件夹中的组件来组织故事。

建立您的小型专案 (Build Your Mini Projects)

Let’s build a small component as an example to show how you could spin up a quick example project to start learning React’s Context API. Within my src folder I am going to create a ContextProject folder where I am going to add a file where I will define my component, and then another where I will define the story:

让我们构建一个小组件作为示例，以展示如何启动快速的示例项目以开始学习React的Context API。 在我的src文件夹中，我将创建一个ContextProject文件夹，在其中添加一个文件来定义组件，然后在另一个文件中定义故事：

Now when I check my Storybook, I will see that I have a menu option for my Context API Project and below that, I can click to see my Home component I created:

现在，当我检查我的故事书时，我将看到我的Context API Project有一个菜单选项，在其下方，我可以单击以查看创建的Home组件：

And now I can start building out my context and other components within this folder in src. I will be able to play around and render the components I build, allowing me to quickly see my changes and not have to worry about launching a new React app every time I want to just test out a specific feature or new idea.

现在，我可以在src此文件夹中构建上下文和其他组件了。 我将能够试用并渲染所构建的组件，从而使我能够快速查看自己的更改，而不必担心每次我只想测试特定功能或新想法时就启动新的React应用程序。

This also allows for a lot of flexibility when trying to quickly prototype a new idea. You already have an environment up and running and can have your favorite libraries like styled components already installed or have pre-defined themes that can just be easily imported into new projects. You can also pre-define some baseline components such as styled headings, divs, buttons etc that you can share across projects to make development go even faster.

在尝试快速制作新想法的原型时，这还提供了很大的灵活性。 您已经有一个运行起来的环境，并且可以安装自己喜欢的库(如样式化组件)或具有可以轻松导入到新项目中的预定义主题。 您还可以预定义一些基线组件，例如样式化的标题，div，按钮等，您可以在项目之间共享它们，以使开发更快。

Hope this helps and stay tuned for future posts about my favorite add-ons and details on the test projects I build in my Storybook.

希望这对您有所帮助，并在以后的文章中关注我最喜欢的插件以及我在Storybook中构建的测试项目的详细信息。

Happy Coding!

编码愉快！

References:

参考文献：

Storybook: UI component workshop for frontend developersStorybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes…storybook.js.org

故事书：面向前端开发人员的UI组件研讨会 故事书是一个开源工具，用于为React，Vue和Angular隔离开发UI组件。 它使... storybook.js.org

My github Repo:

我的github回购：

sarahsweat/my-playgroundContribute to sarahsweat/my-playground development by creating an account on GitHub.github.com

sarahsweat / my-playground 通过在GitHub上创建一个帐户来为sarahsweat / my-playground开发做出贡献。 github.com

翻译自: https://www.freecodecamp.org/news/how-to-build-a-react-development-playground-using-storybook-667ef9808e9f/

storybook使用教程