今、Reactでリポジトリ公開するなら、これくらいは対応しておきたい

趣味で作ったwebサービスのリポジトリをgithubに公開して2ヶ月くらい
フロントエンドのソースが雑だったので、リファクタリング中にした対応を紹介

前記事：Go + react + ansibleでサービスを作ってOSSにしてみた
http://qiita.com/wheatandcat/items/66d72445ad0c5df2a8be
# github

記載している内容は、下記のリポジトリに取り込み済みの内容です。
うまく動かなかったら、こちらから動きを見てもらえたらと思います。

■dotstamp_client
https://github.com/wheatandcat/dotstamp_client

# [flow](https://github.com/flowtype/flow-bin)
javascriptでも型が使えるようになるライブラリ。
ファイル単位で実装していけるから、稼働中のプロジェクトでも柔軟に導入していけるのが魅力。
導入的にはファイルの頭に「// @flow」を追加すればOK

## 実装
書き方は、こんな感じ

```
// @flow

function add(a: number, b :number): number {
  return a + b
}

console.log(add(1, 2))
```

「〇〇:(型名)」で宣言できる

正しく定義できているかは、「yarn flow」を実行して確認


# [react-storybook](https://github.com/storybooks/storybook)
コンポーネントのガイドラインが作れるライブラリ。
大きい単位で作ってしまったコンポーネントを、小さくしていくリファクタリングする際にチューニングにつかえる。

## 実装
作ったstorybookは、「GitHub Pages」にデプロイして公開できます。
手順は、こんな感じ（※「dist」が出力フォルダなので、「-s ./dist」を追加しています）

```ruby:package.json
  "scripts": {
    ......（省略）
    "storybook": "start-storybook -p 9009 -s ./dist",
    "build-storybook": "build-storybook -s ./dist",
    "deploy-storybook": "storybook-to-ghpages",
  }
```

そして、「yarn build-storybook」で実行で、↓みたいに公開できます
[https://wheatandcat.github.io/dotstamp_client/](https://wheatandcat.github.io/dotstamp_client/?selectedKind=Bllon&selectedStory=text&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel)

# [webpack2移行](https://github.com/webpack/webpack)

移行手順は下記に記載
[Migrating from v1 to v2](https://webpack.js.org/guides/migrating/)

## 実装
自分のリポジトリだと最終的に、こんなソースになりました

```ruby:webpack.config.local.babel.js
...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use:[
          "babel-loader",
        ]
      },
      {
        test: /\.css$/,
        include: /css/,
        use: [
          {
            loader: "style-loader",
            options: {
              sourceMap: true,
            }
          },
          {
            loader: "css-loader",
            options: {
              localIdentName: "[hash:base64]-[name]-[local]",
              modules: true,
              sourceMap: true,
            }
          } ,{
            loader: "postcss-loader",
            options: {
              sourceMap: true,
            }
          }
        ],
      }
    ]
  },
...
```
# [react-router v4移行](https://github.com/ReactTraining/react-router/tree/master/packages/react-router)

**※注意:まだ他の依存ライブラリが対応できていないライブラリがあるので、確認してから検討して下さい（2017/5/6時点では、react-router-reduxとか）**

ほぼ必須ライブラリなので、できるだけ最新バージョンにしておきたいですね
## 実装

主な修正点
### Linkが別パッケージに変更
```
import {Link} from "react-router-dom"
...
      <Link to="/about">
        <Button bsStyle="primary">.stampとは</Button>
      </Link>
...
```

### [react-router-redux](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)の組み込み方

```ruby:src/js/router.js
import { Switch, Route } from "react-router-dom"
import { ConnectedRouter } from "react-router-redux"
...
export default class Root extends Component {
  render () {
    const { store, history } = this.props
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>　 ←「ConnectedRouter」に変更
          <div>
            <Switch>
              <Route exact path="/" component={ContributionList} />
              <Route path="/contribution/new" component={ContributionNew} />
.....
              <Route component={ContributionList}/>
            </Switch>
          </div>
        </ConnectedRouter>
      </Provider>
    )
  }
}
```

# [react-hot-loader](https://github.com/gaearon/react-hot-loader)

リロード無しでソースコードの修正が反映できるモジュール

## 実装
いろいろなパターンの実装方法はこちらに記載
[Starter Kit](https://github.com/gaearon/react-hot-loader/tree/master/docs)

自分の場合だと、こんな感じで実装

```ruby:.babelrc
{
    "presets": [
        "es2015",
        "stage-0",
        "react"
    ],
    "plugins": [
      "react-hot-loader/babel",  ←追加
      "babel-plugin-transform-flow-strip-types",
      "rewire"
    ]
}
```

```ruby:webpack.config.local.babel.js
module.exports = {
...
  devServer: {
    contentBase: resolve(__dirname, "dist"),
    host: "localhost",
    hot: true,  ←追加
    port: 3000,
    historyApiFallback: true,
    stats: {
      colors: true
    },
  },
...
```

```ruby:src/js/app.js
import React from "react"
import { render } from "react-dom"
import { AppContainer } from "react-hot-loader"
import {history, store} from "./store/configureStore"
import Root from "./router"

render(
    <AppContainer>
      <Root store={store} history={history} />
    </AppContainer>,
    document.querySelector("#root")
)

# ↓追加
if (module.hot) {
  module.hot.accept("./router", () => {
    const NewRoot = require("./router").default
    render(
      <AppContainer>
        <NewRoot store={store} history={history} />
      </AppContainer>,
      document.querySelector("#root")
    )
  })
}
...
```

実はめっちゃ簡単に実装できる！
# READMEにバッジ追加

Githubのリポジトリにバッジがあると、プロっぽくてカッコイイですね。


![ダウンロード.png](https://qiita-image-store.s3.amazonaws.com/0/170824/420d50f7-1898-95be-15b7-4a9eb2380444.png)

導入は、簡単なので公開するタイミングで導入すると良いかと思います。
自分が導入しているのは、以下の通りです

## [Travis CI](https://travis-ci.org/)

![ダウンロード (1).png](https://qiita-image-store.s3.amazonaws.com/0/170824/cd5923f9-060f-1aa4-ec05-e73fe8a8eb6e.png)

buildが成功しているか確認してくれる
設定は、以下な感じで動きます

```ruby:.travis.yml
---
language: node_js
node_js:
  - "stable"
sudo: false
cache:
  directories:
    - node_modules
```

## [Code Climate](https://codeclimate.com/)
![ダウンロード (2).png](https://qiita-image-store.s3.amazonaws.com/0/170824/53649193-9ecc-27ca-ba4a-ac1375eb5098.png)

コードの品質チェックをしてくれるサービス
また、以下の設定を追加すれば、テストのカバレッジも表示できます

```ruby:.travis.yml
...
addons:
  code_climate:
      repo_token: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ←Code Climateから取得できるトークンを設定する
after_success:
  - yarn test -- --coverage
  - npm install -g codeclimate-test-reporter
  - codeclimate-test-reporter < coverage/lcov.info
```
## [Gemnasium](https://gemnasium.com/)
![ダウンロード (3).png](https://qiita-image-store.s3.amazonaws.com/0/170824/1d2bd002-e504-6482-fdac-0fb6d02c146e.png)

依存ライブラリの更新状況をチェックしているサービス
気づかぬ間に時代に取り残されている可能性があるので、ぜひ導入を！
~~react-v15.5とかreact-router-v4の更新を後追いで直したせいで土日潰れたし・・・~~

# まとめ
これで技術的負債を返却の土台づくりが完了といった感じです。。。
どうせ公開するなら、いい感じのリポジトリにしていきたいですね！