• 出来上がったデザインをどのように実装に落とし込むかを体系的に学ぶ演習
• 実際にReact(TS) + StoryBook + Tailwindを実装する
• デザイン

• Buttonコンポーネントの、FilledとOutlinedが実装済みで、StoryBook上で確認できる

• Iconを表示したButtonコンポーネントをStoryBook上で確認できる
• Elevated buttonsのStoryをStoryBook上で確認できる

対象のファイルは以下です

.
└── src
    └── stories
        ├── Button.tsx
        └── Button.stories.ts

• Propsとは
• JSXとは

• 特定の状態(story)のコンポーネントを描画する方法

• 変数を追加する方法
• 横並びにする方法
• スペースを設ける方法

• 前提
  • node,npmがinstall済み

1. 任意の作業フォルダに移動
2. 以下のコマンドで、リポジトリを取得

git clone https://github.com/otsukatatsuya/material-design-sample.git

4. 任意のIDEを用いて、そちらを開く
5. ルートで、以下のコマンドを実行

npm i
npm run storybook

7. webサーバーが立ち上がり、正常に閲覧できることを確認する