create-react-app でreact-styleguidist をつかってReactコンポーネントのスタイルガイドを作成する

先日スタートアップカフェコザで行ったセッション（コンポーネント指向UI開発で学ぶReact入門 沖縄フロントエンド塾 in スタートアップカフェコザ）で紹介したReactコンポーネントのスタイルガイドの作成を記載します。
ボタンのコンポーネントを作成してスタイルガイドで表示するまでの手順です。

プロジェクトの作成

プロジェクトを作成

create-react-app ui-react

ui-reactフォルダに移動
styleguidistとnode-sassを入れます

yarn add react-styleguidist

package.json

scriptsに追記

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    <b>"styleguide": "styleguidist server"</b>//これを追加
  }

ボタンのコンポーネントの作成

src/components/atoms/btn/
でフォルダを作成して、

Btn.jsx
Btn.scss
Btn.md

のファイルを作成

ボタンのjsx作成

import React from 'react';
import './Btn.scss';
export const Btn =(props)=>{
  return(
    <div 
      className='btn'
      onClick={(e)=>{this.props.handleClick(e)}}
    >
      {props.children}
    </div>
  )
}

ボタンのscss作成

@mixin btn {
  border-radius:4px;
  padding:4px;
  font-sie:12px;
  text-align:center;
  &:hover {
    cursor:pointer;
    font-weight:bold;
  }
}

.btn {
  @include btn;
}

ボタンのmd作成

このファイルにスタイルガイドに表示するものを記述
いろいろ設定できます(Documenting components)

```jsx
<Btn handleClick={}>.btn</Btn>
```

スタイルガイド作成

yarn styleguide

コンパイルすると、

yarn run v1.7.0
$ styleguidist server
Loading webpack config from:
D:\work\FrontendJ\react-styleguidist\node_modules\react-scripts\config\webpack.config.dev.js

You can now view your style guide in the browser:

  Local:            http://localhost:6060/
  On your network:  http://172.24.138.209:6060/

 DONE  Compiled successfully!

 
 

http://localhost:6060/

このurlを開くと表示されます。
 
 

 
 

気をつけること

• 1つの.jsxに1つのコンポーネント