Rails5とReactの連携についてのメモ

先日rails5でreactを動かしたいと思って調べていたらクックパットの[この記事](http://techlife.cookpad.com/entry/2016/07/27/101015)を見つけて、この記事を参考にしたので、それのメモです

# 環境
## 関連ライブラリのバージョン
- npm: 2.15.8
- ruby: 2.4
- webpack: 3.0
- rails: 5.0系

## 構成
rails5でwebアプリを作成していたので、今回はそこにreactを組み込みます。webpackを使ったやり方にしてます。今回はclientというディレクトリを作って、その以下にreactのコードを配置します。

```
-rw-r--r--   1 snakamura  admin   5215  6 29 18:14 Gemfile
-rw-r--r--   1 snakamura  admin  17042  6 29 09:26 Gemfile.lock
-rw-r--r--   1 snakamura  admin     90  6 29 09:26 Procfile
-rw-r--r--   1 snakamura  admin    374  3 22 17:55 README.md
-rw-r--r--   1 snakamura  admin    227  3 22 17:55 Rakefile
drwxr-xr-x  14 snakamura  admin    476  3 23 16:32 app
drwxr-xr-x   8 snakamura  admin    272  3 22 17:55 bin
-rw-r--r--   1 snakamura  admin   2246  4  6 13:02 circle.yml
drwxr-xr-x   8 snakamura  admin    272  6 30 10:21 client
drwxr-xr-x  19 snakamura  admin    646  6 12 13:46 config
-rw-r--r--   1 snakamura  admin    130  3 22 17:55 config.ru
drwxr-xr-x   7 snakamura  admin    238  3 23 17:03 coverage
drwxr-xr-x   4 snakamura  admin    136  4  4 18:26 db
drwxr-xr-x   4 snakamura  admin    136  3 22 17:55 lib
drwxr-xr-x  14 snakamura  admin    476  5 23 16:05 log
-rw-r--r--   1 snakamura  admin  82221  7  3 10:09 package-lock.json
drwxr-xr-x  12 snakamura  admin    408  6 19 09:43 public
drwxr-xr-x   9 snakamura  admin    306  4 21 14:34 spec
drwxr-xr-x   7 snakamura  admin    238  6 19 09:45 tmp
drwxr-xr-x   4 snakamura  admin    136  3 23 16:25 vendor

client以下は
drwxr-xr-x  10 snakamura  admin    340  6 29 17:38 node_modules
-rw-r--r--   1 snakamura  admin  89432  6 30 10:21 package-lock.json
-rw-r--r--   1 snakamura  admin    483  6 29 17:38 package.json
drwxr-xr-x   3 snakamura  admin    102  7 13 16:45 src
-rw-r--r--   1 snakamura  admin    379  6 29 17:39 webpack.config.js
```

## はじめに
clientディレクトリ直下で

```
$ npm init -y
```

をやって、package.jsonを作成。
続いて関連のライブラリを入れるために

```
$ npm install -D webpack babel-loader babel-preset-es2015 babel-preset-react
$ npm install -S react react-dom
```

を実行

結果package.jsonを以下のようになるはず（バージョンの違いはあるが）

```client/package.json
  1 {
  2   "name": "client",
  3   "version": "1.0.0",
  4   "description": "",
  5   "main": "index.js",
  6   "private": true,
  7   "scripts": {
  8     "webpack-watch": "webpack -w",
  9     "webpack-build": "webpack -p"
 10   },
 11   "keywords": [],
 12   "author": "",
 13   "license": "ISC",
 14   "devDependencies": {
 15     "babel-loader": "^7.1.1",
 16     "babel-preset-es2015": "^6.24.1",
 17     "babel-preset-react": "^6.24.1",
 18     "webpack": "^3.0.0"
 19   },
 20   "dependencies": {
 21     "react": "^15.6.1",
 22     "react-dom": "^15.6.1"
 23   }
 24 }
```

続いてclient/webpack.config.jsを編集

```client/webpack.config.js
  1 module.exports = {
  2   entry: {
  3     app: './src/index.js',
  4   },
  5
  6   output: {
  7     path: __dirname + '/../app/assets/javascripts/webpack/',
  8     filename: '[name].js',
  9   },
 10
 11   module: {
 12     loaders: [
 13       { test: /\.(js|jsx)$/,
 14         loader: "babel-loader",
 15         exclude: /node_modules/,
 16         query: {
 17           presets: ["es2015", "react"],
 18         }
 19       },
 20     ]
 21   },
 22 }
```

# サンプル1
文字を表示するサンプルです。

```client/src/index.js
import React, { Component } from 'react'
import { render } from 'react-dom'

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { title } = this.props
    const { comment } = this.props
    const { items } = this.state.items

    return (
      <div>
        <h1>{title}</h1>
        <h1>{comment}</h1>
      </div>
    );
  }
}

render(
  <App title="Hello React" comment="ほげホゲホゲ" />,
  document.getElementById('container'))

```