Reactチュートリアルをcreate-react-appの形式に合わせて焼きなおす

## 動機

[Reactチュートリアル](https://facebook.github.io/react/docs/tutorial-ja-JP.html)をやってみたのですが、このチュートリアルはあまり主流ではないセットアップのようでした。
[この記事](http://qiita.com/naruto/items/fdb61bc743395f8d8faf)や[この記事](http://qiita.com/kuniken/items/2e850daa26a10b5098d6)を読んでいると`createClass`に頼らずにES6のclass構文を使って書くのがナウでヤングな書き方のようなのです。

しかし、BabelとかWebpackとかの事前準備がめんどくさい…と思っていたら最近[create-react-app](https://github.com/facebookincubator/create-react-app)という便利なジェネレーターの存在を知りました。

See: [Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する](http://qiita.com/chibicode/items/8533dd72f1ebaeb4b614)

`package.json`に書く依存も少ないしこれは良い。しかし、チュートリアルとあまりに様相が違うので戸惑いました。

ということで、チュートリアルを書きなおしてみました。

https://github.com/NewGyu/react-tutorial-with-create-react-app

## ポイント

### プロジェクトの雛形を作る

```shell-session:create-react-appをインストール
$ npm install -g create-react-app
```

```shell-session:雛形作成
$ create-react-app react-sample
```

```shell-session:作られたもの
react-sample/
├── README.md
├── node_modules
│   ├── react
│   ├── react-dom
│   └── react-scripts
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg
```

`react-scripts`というのがBabelやWebpackをいい感じに内包しています。

```json:package.json
{
  "name": "react-sample",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.6.0"
  },
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
```

`npm start`ですぐさま簡易サーバーが立ち上がり、 http://localhost:3000 で確認可能。もちろんトランスパイルも行われます。

成果物を生成する場合は`npm run build`で`./build`ディレクトリにトランスパイルされたものが一式生成されます。

```shell-session:./build
./build
├── favicon.ico
├── index.html
└── static
    ├── css
    │   ├── main.9a0fe4f1.css
    │   └── main.9a0fe4f1.css.map
    ├── js
    │   ├── main.e0161bce.js
    │   └── main.e0161bce.js.map
    └── media
        └── logo.5d5d9eef.svg
```

minifyもされています。いいですね。

### class定義にして移植する

ちまちまと`createClass`で書かれているものをclass構文で書きなおして移植します。
下記の記事が詳しいのですが、主に以下の部分をちょこちょこっと書き直しました。

* stateの扱い方
* thisの問題
* jQueryのajaxでやっていたところを[axios](https://github.com/mzabriskie/axios)に置き換え

See: [ES5のReact.jsソースをES6ベースに書き換える](]http://qiita.com/kuniken/items/2e850daa26a10b5098d6)

### APIサーバーを作る

[チュートリアルではexpressで、APIもフロントも同居した形](https://github.com/reactjs/react-tutorial/blob/master/server.js#L23-L72)になっています。
しかし、`react-script`のstartではこれができません。
[このあたり](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend)記述があるのですが、別途APIサーバーを起動する必要があります。

ただ、別途サーバーを立てるとCORSがめんどくさいのでproxy機能を使ってこうするとよかろうというようなことが書いてありました。

![](https://github.com/fullstackreact/food-lookup-demo/blob/master/flow-diagram.png?raw=true)

See: https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

ということで、チュートリアルより[server.js](https://github.com/reactjs/react-tutorial/blob/master/server.js)をつまんで来て別途npmプロジェクト化したのが[こちら](https://github.com/NewGyu/react-tutorial-with-create-react-app/tree/master/express-api)です。

### おまけ docker-composeで一発で起動できるようにする。

https://github.com/NewGyu/react-tutorial-with-create-react-app/blob/master/docker-compose.yaml