??? ?? ????? ?? ???? ???? ?????? ????? ?? ???????. ?? UI ?? ??? ??? ?? ? ??? ???? ???? ????. ??? ?? ??? ??? ??? ??? ????. ??? ??? ??? ?? ?? ??? ??? ???? ????. ??? ???? ?? ?? ?????? ??? ?? ?? ??? ??? ??? ??? ???? ?? ???????. ?? ??? ??? ???? ??? ????? ?? ?? ????? ???? ??????? ??? ?? ??? ????????. ????? ?? ???? ???? ?????. ?? ?? ??????? ?? ?? ??? ???? ?? ?????.

? ?? ??? ??? ?? ????? ?? ?? ??? ?? ??? ??? ??? ?? ?? ????. ? ???? ??? ??? ??? ??? ???? ??? React ?? ????? ?? ??? ??? ?? ? React Storybook? ??? ? ????. ?? ?? ?? ?? ? ?? ?? ??? ?? ?? ? ? ????. React Native ?? ?? ?????? ??? ?? ????? ????.

? ???

UI ?? ??? :

?? ??? ?? UI ?? ??? ?? ? ?? ????? ????? ???? ?? ??? ????? ???? ????? ??? ??? ? ? ??????.

?? ? ?? :

? ?? UI ?? ????? ?? ??? ??? ?? ??? ?????? ????, ??? ? ?? ?? ??? ?? ??? ???? ?? ??? ??????. ??? ?? ???? ?? ?? : ? ??? ? ?? ??? ?? ? ???? ??? ?? ??? ???? ???? ?? ???? ??? ?? ??? ??? ?? ? ? ??????.

? ??? ? ???? ?????.
• ? JEST ? ?? ??? ??? ??? ???? UI ?? ?? ?? ???? ?? ?? ???? ???????. ????? ?????? ?? ?? :
??? ? ?? ????? ???? React ??? ?? JavaScript ??? ??? ????? ??? ?? ??? ??? ??????.
• ? ?? ??? ?? ?????? ????? ?????? ??? ??? ? ? ????? ? ??? ??? ?? UI ?? ?? ??? ??? ???? ???? ??? ??? ??????. ?? ??? ??? ??? ?? ? ??? ????? ??? ?????. ???? ?? UX Expert ??? ?????? ??? ??? ?????. ???? ??? ?? ??? ???? ????? ????? ?? ????. ??? ?? ??? ???? UI? ?? ??? ??? ???????.
• ??? ???? ??? ?? ??? ??? ????? ??? ???? ?? ??? ? ? ????. ?????? ? ?? ?? ?? ??? ????. ????? ??? ?? ??? ?? ?? ?? ??? ? ? ????.

  ??? ???? ?? ??? ???? ???????? ?? ?????. ???? ?? ?? ? ??? ?? ??? ?? ???? ???? ????? ???? ????. ??? ?? ???? ???? ????? ??? ????? ???? ???? ???? ??? ? ?????.

  ?? ??? ??? ? ?? ???????. ?? ???? ????? ?? ??? ???? ???? ??? ???? ??????????.

  ??? ?? ??? ???? ??????? ?? ?? ?? ??? ?? ??? ??? ??? ??? ????. ???? ???? ?? ?? ??? ?? ?? ?? ??? ? ????. ??? ?? ??????. ?????? ??? ?? ?? ??? ?? ? ??? ???? (?? (????, 1 ?, ?? ?)? ??? ??? ?????? ?? ?? ?? ?????.

  ?? ??? ?????, ?????? ??? ?? ???? ??? ?? ?????.
  ?? ??? ?
  ?? React Storybook? ????? ?? React ????? ?????. ?? ??? ????? ??? Create-React-App?? ?? ?? ? ????.

  ??? ?? ????? ? ????? GetTtoryBook? ?????? :

  ?? ?? ????? ???? ?????? :

  ? ??? ?? ? ?? ??? ?????

  @kadira/storybook? ????? ??????.

  Package.json ??? ??? ? ? ?? ??? ? ????? ??????. ?? ??? ?? ?? ??? ?????? ??? ????? .StoryBook ??? ????.

  ??? ?? ????? NPM ?? ??? ?? ???? ??? ?? ( http://m.miracleart.cn/link/93e4d7106625e1b0f2eb8af065c83452 ??? ??? ??????

  ?? ?? ??? ?? ??????? ? ???? ???? ??? ?? ?????. ???? ??? ? ? ???? ?????. ??? ?? ??? ????? ?? ? ?????. gettstorybook?? ?? ? ?? ???? ??? ????.

  ???

  <code>npm i -g getstorybook</code>

  ???? ????? ???? ??? ??? ???? ?? ???? ? ?? ??? ????. ??? ?? ???? ?? ? ? ??? ? ??? ???? ?? ??? ?? ?? ????. ??? ?? ???? ??? ?? ? ??? "Form Input", "Navigation"?? "Widgets"? ?? ?? ??? ?? ??? ?? ?? ?? ??? ?? ?? ??? ??? ???? ????.

  ??? ??? ?? ? ??? ???? ??? ? ????. ??? ??? ?? ?? ?? ?? ?? ????. ?? ?? ??? ?????? ?? ???? ?? ??? ???? ? ????? ??? ????? ??? ?????.

  ???? ?? ??? ?? ? .storybook/config.js ????????.

  <code>npm i -g getstorybook</code>

  ????? SRC/Stories/Index.js ??????? ???? ??? ??? ?????. ??? ??? ?? ?? ??? ???? ?????? ??? ?? ?????. ? ????? ???? WebPack? ?? ??? ???? ?? ???? ?????? ? ? ????. ??? ??? ??? ??? ???? ?? ???? ?? .stories.js ???? ?? ? ? ????. ?? ? ????? ??? ??????

  ?? ??? ?? ??? ???? ?? ??? ??? ?? ????. ?? ??? ????? ?? ??? ? ???. ??? ?? ? ?? index.js ??? ?? ?? ?? ??? ???? ???? ?? ??? ??? ????.

  <code>getstorybook</code>

  (?? ??? ????? ?? ???? ???? ???? ???? ??? ?? ???? ?? ??? ??????)
  ??? ??? ??

  ?? ??? ??? ??? ?? ??? ?? ?? ?? ???? ? ?? ???? ???. ??? ?? ??? ?? ??? ???????. ?? ??? ??? ???? ??? ?? ?? ??? ???????. ? ?? ???? ?? JavaScript ? CSS? ????.

  ???? ??? ?? ??? ??, ?? ? ????? ? ?? ??? ?? ? ??? ? ? ????. ? ?? ??? ????? ?? ?? ????? ??? ?? ???? ??. ?? ?? ?? ? name.stories.js ??? ??? ??? ??????. ??? ?? ?? ? ?? ??? ???. ??? ??? ??????.

  ?? ??? ???? ??? ?? ??? ???? ??????. React? ? ? ?? ???? ?? ????? ???? ?? ??? ?? ??? ? ?? ??? ?? ? ??? ??? ?? ?? ??? ?? ?????. ??? ??? ????? ???? ?? ??? ??? ? ????. ??? ?? ?? ??? ?? ??? ?? ???? ????.

  //src/stories/index.js
  
  import React from 'react';
  import { storiesOf, action, linkTo } from '@kadira/storybook';
  import Button from './Button';
  import Welcome from './Welcome';
  
  storiesOf('Welcome', module)
    .add('to Storybook', () => (
      <Welcome showApp={linkTo('Button')}/>
    ));
  
  storiesOf('Button', module)
    .add('with text', () => <Button>Hello Button</Button>)
    .add('with some emoji', () => <Button>? ? ? ?</Button>);

  <<> (?? ??? ?? ?? ???? ???? ?? ????? ?????) <<> ??? ????

  import { configure } from '@kadira/storybook';
  
  function loadStories() {
    require('../src/stories');
  }
  
  configure(loadStories, module);

  ???? ???? ??? ????? ????? ?? ? ????. AddDecorator ??? ???? ?? ? ? ????. ?? ??, ?? ??? .storybook/config.js? ???? ?? ???? "??"??? ?? ? ? ????.

  ??? ? AddDecorator? ???? ??? ??? ??? ?? ? ?? ????.

  <<>? ??? ?? ?????? ??? ?? ??? ???? ?? ? ??????? ???? ??? ???? ?? ? ???? ?? ? ? ????.

  import { configure, addDecorator } from '@kadira/storybook';
  import React from 'react';
  
  configure(() => {
      const req = require.context('../src', true, /.stories\.js$/);
      req.keys().forEach(filename => req(filename));
    },
    module
  );

  <,> ????? ??? ?? StoryBook-Static ??? ???? ????. -o ?? ??? ???? ?? ????? ??? ? ????. ?? ???? ??? ???? ????????.

  GitHub?? ????? ???? ?? ??? ?? ?? ??? ???? ?????? ???? ??? ?? ?? ? ? ????. GitHub? GitHub ??? ? ???? ????? ?? ? ? ????. ???? ?? ? ??? ?? ???? ?? ??? StoryBook-Deployer? ??? ?? ????.

  <<> ?? ??

  ??? ?? ???? ?? ??? ????? ???? ????. Create-React-App? ??? ES2015 ???? ??? ? ??? ????? ?? Babel ??? ???? ?? .Babelrc ??? ???? ?????. JSON ?? ? ???? ??? ?? ????. ??? ???? ??? ???? .StoryBook ???? webpack.config.js ??? ???? ?? ? ? ??? ?? ? ? ????. ? ???? ??? ?? ??? ?? ??? ?????. ?? ??, ???? SCSS? ?? ??? ????? ?? ??? ???? ??????. Sass-Loader ? Node-Sass? ???? ?? ?? ????.

  ??? ? ? ??? ?? ? ?? ??? ??, ?? ? ? ?? ?? ??? ??? ?? ????.

  ?? ? ?? ??? ?? ?? ??? ????? ??? ??? ? ????. ?? ?? ? "??"?? "??"?? ??? configtype ??? ???? ?????.

  <<> add-ons? ??? ?????? ??? ? ??? ?? ????? ? ????? ???? ????. ? ????? ? ? ??? ??? ??? ??? ?? ??? ??????.
  <<> (?? ??? ????? ???? ??? ?????)

  <code>npm i -g getstorybook</code>

  ??? ??? ? ?? ?? ??? ??? (?? ? ??? ???? ????. ???? ?? ?? ??? ?? ??? ????.

  ?? :

  ? ???? ?? ?? ???? ?? ?? ??? ???? ?? ? ? ????.
  ?? :

  ? ???? ?? ???? ??? ?? ? ? ????.

  ?? :

  ? ???? ???? UI?? ?? ?? ??? ???? ?? ??? ??? ?? ? ? ????. ?? ?? : , ?? ?? : ?? ??. ?????? ???? ???? ?????.

  ?? :

  ? ???? ?? ??, ?? ? React Proptypes? ?? ???? ?? ??? ??? ?? ? ? ????. ?? ?? : , ?? ?? : ? ??????.

  ?? ??? ??? ?? ??? ?? (? ??? ???? ??)? ??? ? ???? ?????? ????? ???? ????. ?? ????? ?? ??? ? ??? ?? ???? ????? ??? ???? ?? ? ? ????. ?? ? ?? ??, ??? ?? ??? ??? ????? ????? ?? ??? ?? ???? ????. ??? ??? ????? ??? ?? ??? ??? ??? ???? ??? ???? ????.
  ?? :
  • ? ???? ??? ??? ?? ?? ???? ??? ? ????. StoryShots : ? ???? ???? ???? Jest Snapshot ???? ?? ? ? ????.
  • ?????? ??? ?
  Kadira? ?? Storybook Hub?? ???? Storybook? ?????. ??? ?? ????? ?? ??? ?? ??? ? ? ????. ?? ?? ??? GitHub? ???? ? ? ??? ?? ??? ??? ?? ?? ? ? ????. ?? ??? ?? ?? ??? ?? ???? ?? ??? ?? ? ?? ????.
  ??

  ?????? UI ?? ??? ???? ?? ??????? ????? ???? ???? ?? ? ?? ??????. ??? ?? ????? ??? ?? ???? ??? ? ????. ? ?? React ????? ?? ??? ?? ??? ?????. ?? ??? ?? ???? ????? ??? ? ?????? ?? ??? ? ??? ????? ???? ?? ????.

  (FAQ ??? ????? ??? ?????)

  faq (faq)

  React Storybook? ?? UI ?? ??? ??? ??? ?? React StoryBook? ???? ???? ?? ??? ????? ???? ?? ??????? ??? ????? ?? ? ??? ??? ??? ??? ??? ?? ? ? ????.

  ?? JavaScript ??? ???? React Storybook? ??? ? ????? ?, vue.js ? angular? ?? ??? ??? ?????.
  ? ??? ?? ?? ??? ???? ??? ??????

  npm ?? yarn? ?? ???? ??? ???? ??? ?? ??????.

  React Storybook? ?? ??? ?????? JavaScript? ???? React? ???? ? ??? ? ??????.

  ??? ????? React Storybook? ??? ? ????? ?, ?? ???, IBM ? Lyft? ?? ??? ???? ?????.

  ? ??? ?? ?? ???? ???? ??? ?????? ? GitHub ???? ?? ?? ?? ???? ????? StoryBook ???? ???? NetLify? ?? ? ? ????.

  React Storybook?? ? ?? ??? ??? ? ? ????? ?, ??? ??? ??? ???? Jest? ?? ??? ?????? ?? ? ? ????. ??? ?? ??? ??? ???? ??? ?????? Storybook? ?? ??? ??, ??? ?? ? ? ?? ? ??? ?? ??? ??? ?? ??? ?????.

  ??? ?????? ??? React Storybook? ??? ? ????? ?, React Native? ?????.
  • React Storybook ?? ?????? ?, Github?? ???? ? ?? ???? ??? ?????. ???, ?? ???? ? ???? ???? ??? ?? ?? ?? ?????? ?? ??? ??????. ??? ??? ???? ?????.

? ??? React Storybook : ???? ??? ?????? ?? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!