<code>getstorybook</code>

（以下の內(nèi)容は基本的に元のテキストと一致しており、セマンティクスを変更しないように少し調(diào)整し、部分的な説明が簡素化されます）

新しいストーリーを書く

//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);

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
);

コンポーネントの表示方法とそのソースコードを自由に変更してください。 Reactのホットなリロード機能により、ブラウザを手動で更新せずに、ストーリーやコンポーネントを編集するたびに変更がすぐにストーリーブックに変更が表示されることに注意してください。ただし、ファイルを追加または削除する場合、更新が必要になる場合があります。ストーリーブックは常にこれらの変更に気付くとは限りません。

（次のコンテンツも合理化され、セマンティックの一貫性を維持するために調(diào)整されています）

カスタマイズを表示

import React from 'react';
import './Name.css';

const Name = (props) => (
  <div className={`name ${props.type}`}> {props.name} </div>
);

Name.propTypes = {
  type: React.PropTypes.oneOf(['highlight', 'disabled']),
};

export default Name;

ストーリーブックの作業(yè)を行って、公開する準備ができていると思うと、実行して靜的Webサイトとして構(gòu)築できます。 デフォルトでは、ストーリーブックはStoryBook-Staticフォルダーに組み込まれています。 -oパラメーターを使用して出力ディレクトリを変更できます。これで、お気に入りのホスティングプラットフォームにアップロードする必要があります。

GitHubのプロジェクトに取り組んでいる場合は、StorybookをDocsフォルダーに構(gòu)築してリポジトリにプッシュすることで、ストーリーブックを公開できます。 GitHubは、GitHubページのWebサイトをそこから提供するように構(gòu)成できます。ビルドストーリーブックをリポジトリに保存したくない場合は、StoryBook-Deployerを使用することもできます。

構(gòu)成をビルド

ストーリーブックは、ストーリーの多くの機能をサポートするように構(gòu)成されています。 Create-React-Appと同じES2015構(gòu)文で記述できますが、プロジェクトが別のBabel構(gòu)成を使用すると、.babelrcファイルが自動的にピックアップされます。 JSONファイルや畫像をインポートすることもできます。

これで十分でないと思われる場合は、.storybookフォルダーにwebpack.config.jsファイルを作成して、追加のWebPack構(gòu)成を追加できます。このファイルによってエクスポートされる構(gòu)成オプションは、デフォルトの構(gòu)成とマージされます。たとえば、ストーリーにSCSSのサポートを追加するには、次のコードを追加するだけです。

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

アドオンを使用して機能を拡張します ストーリーブック自體は非常に便利ですが、それを改善するためには、いくつかのアドオンがあります。この記事では、それらのいくつかのみをカバーしていますが、後で公式リストをチェックしてください。

（次の部分が合理化され、アドオンの導(dǎo)入が調(diào)整されています）ストーリーブックには、アクションとリンクという2つの事前に設(shè)定されたアドオンが付屬しています。それらを使用するために追加の構(gòu)成を作成する必要はありません。

アクションロガーパネルでコンポーネントトリガーイベントをログに記録できます。

• リンク：コンポーネント間にナビゲーションを追加できます。
• ノブ：実行時にUIから直接反応特性を変更して、コンポーネントをカスタマイズできます。インストール方法：
、登録方法：インポート

デコレーターを使用してストーリーを包みます。 npm i --save-dev @storybook/addon-knobs情報：.storybook/addons.jsソースコード、説明、React Proptypesなど、ストーリーに関する情報をさらに追加できます。インストール方法：withKnobs、登録方法：

を使用します。 npm i --save-dev @storybook/addon-info自動テスト.storybook/preview.jsaddDecorator

• 仕様：ストーリーファイルにユニットテストを直接書き込むことができます。
• ストーリーショット：ストーリーに基づいてJest Snapshotテストを?qū)g行できます。

Kadiraは、Storybook Hubと呼ばれるサービスとしてのStorybookも提供しています。これにより、ストーリーブックをホストし、次のレベルにコラボレーションを行うことができます。標準機能に加えて、GitHubと統(tǒng)合され、プルリクエストごとに新しいストーリーブックを生成できます。また、ストーリーブックに直接コメントを殘して、同僚との変更について話し合うこともできます。

プロジェクトでUIコンポーネントを維持することが痛みを伴うようになっていると感じたら、一歩下がって、欠けているものを確認してください。関係するすべての関係者間で便利なコラボレーションプラットフォームが必要になる場合があります。この場合、React Projectの場合、Storybookはあなたに最適なツールです。

すでにストーリーブックを使用していますか？試してみるつもりですか？なぜ？またはなぜですか？コメントでお聞きしたいです。

React Storybookは他のUI開発ツールとどう違うのですか？
• React Storybookを使用すると、開発者はコンポーネントを個別に構(gòu)築できるようになり、開発プロセスがより速く効率的になり、リアルタイムの視覚テスト環(huán)境を提供できます。
他のJavaScriptフレームワークでReact Storybookを使用できますか？
• はい、Vue.jsやAngularなどのフレームワークをサポートしています。
私のストーリーブックにアドオンを追加する方法は？ NPMまたはYARNを介してインストールし、
• ファイルに追加し、ドキュメントに従って構(gòu)成します。 .storybook/addons.jsReact Storybookの學(xué)習(xí)曲線は何ですか？
JavaScriptに精通して反応する場合は、すぐに開始できるはずです。
• 大規(guī)模なプロジェクトにReact Storybookを使用できますか？
はい、Airbnb、IBM、Lyftなどの大規(guī)模な組織で使用されています。
• 私のストーリーブックを他の人と共有する方法は？
GitHubページなどの靜的マネージドサービスに展開したり、StoryBook Deployerを使用してNetLifyを使用したりできます。
• React Storybookでコンポーネントをテストできますか？
はい、視覚的なテスト環(huán)境を提供し、Jestなどのテストライブラリと統(tǒng)合できます。
• ストーリーブックの外観をカスタマイズする方法は？
ストーリーブックは、テーマのカスタマイズ、カスタムWebpack構(gòu)成、カスタムアドオンの作成などのオプションを提供します。
• モバイルアプリケーション開発にReact Storybookを使用できますか？
はい、それはReactネイティブをサポートします。
• React Storybookはオープンソースですか？
はい、それはGithubでホストされており、世界中の開発者からの貢獻を歓迎します。
• 要するに、元のテキストは、より簡潔でスムーズにするために大いに書き直され、元の意味を維持しました。 畫像形式は同じままです。

以上がReact Storybook：美しいユーザーインターフェイスを簡単に開発しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。