先日rails5でreactを動かしたいと思って調べていたらクックパットのこの記事を見つけて、この記事を参考にしたので、それのメモです

環境

構成

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'))

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

環境

関連ライブラリのバージョン

構成

はじめに

サンプル1