みなさんはじめまして。
株式会社BitStarでエンジニアインターン
をしている塩原です。

使っている技術

Rails5.1
React
Webpack
babel

完成したアプリはgithubに公開しています
https://github.com/MotohiroSiobara/ReactToDoApp

jsはes6とjsxを使って書いていきます

では先にRails側から準備をしていきましょう
メインはReactのためRailsは説明なしで進めていきます

Rails側

$ rails new ReactTodoApp
$ cd ReactTodoApp

app/controllers/todo_lists_controller.rb

app/controllers/todo_lists_controller.rb

class TodoListsController < ApplicationController
  def index
  end

  def create
    redirect_to root_path
  end
end

config/routes.rb

config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  resources :todo_lists, only: [:index, :create]
  root to: "todo_lists#index"
end

TodoListモデルを作成として以下のコマンドを叩く

$ bundle exec rails g model todo_list
$ bundle exec rake db:migrate

app/models/todo_list.rb

app/models/todo_list.rb

class TodoList < ApplicationRecort
end

app/views/todo_lists/index.html.slim

app/views/todo_lists/index.html.slim

<h1>アプリケーション</h1>

ここまで進めたら$ rails sでサーバーを立ち上げてhttp://localhost:3000/ でブラウザを確認すると以下のように表示される

表示に成功したらRails側の下準備はとりあえず完了

WebPackの設定

さてReactのコードを早速書こうかなと考える前に今回はWebPackを使ってみたいと思います！

WebPackを使うおもな理由は

様々なライブラリを一括で管理できる(babelなど)

WebPackとは？？？

ざっくりと説明すると
複数のファイルをコンパイルして一つのファイルにする
詳しい解説が知りたい方などはこちらの記事などがおすすめ
https://qiita.com/yosisa/items/61cfd3ede598e194813b

ではまずはpackage.jsonで必要なライブラリを取得しよう
webpackに関連するものは全てfrontendというディレクトリを作成してそこで管理します

$ mkdir frontend
$ cd frontend
$ npm init -y # package.jsonを作成

上のnpm init -yというコマンドの実行で以下のファイルが作成されます

frontend/package.json

frontend/package.json

 {
   "name": "frontend",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

では必要なライブラリをそれぞれインストールしていきます

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

package.jsonにインストールされたものが追加されます

frontend/package.json

frontend/package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.8.1"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

インストールされたものは以下のライブラリです

webpack
babel-loader
babel-preset-es2015
babel-preset-react
react
react-dom

babel-XXXといったものが三つありますがそれぞれ役割が変わってきます
babel-loader: webpackからbabelを使ってトランスパイルするためのパッケージ。
babel-preset-xxxxx: es2015やJSXを変換するためのプリセットがbabel本体と分離しているため個別にインストールする
babel-preset-react: ReactでJSXを使えるようにするためのもの

ざっくりとBabelはJSXとES6を使うために必要と考えればいいでしょう

ではいよいよWebpackの設定をしたいと思います

frontend/webpack.config.js

module.exports = {
  entry: {
    app: './index.js',
  },

  output: {
    path: '../app/assets/javascripts/webpack',
    filename: 'react_components.js',
  },

  module: {
    loaders: [
      { test: /\.(js|jsx)$/,
        loader: "babel",
        exclude: /node_modules/,
        query: {
          presets: ["es2015", "react"],
        }
      },
    ]
  },
}

まずこの部分では読み込む対象のファイルを記しています

entry: {
  app: './index.js',
},

そしてentryの部分で読み込んだファイルがこちらにコンパイルされた状態で出力されるといった感じです

output: {
  path: '../app/assets/javascripts/webpack',
  filename: 'react_components.js',
},

設定後に以下のコマンドを叩くとapp/assets/javascripts/webpack/react_components.jsが作成される

$ ./node_modules/.bin/webpack -w

下準備編は以上になります
次回は実際にTODOアプリを実装して行きたいと思います
怖くない!React&Railsで作るTODOアプリ実装編 - Qiita

怖くない!ReactとRailsで作るTODOアプリ 下準備編

Rails側

WebPackの設定

WebPackとは？？？

怖くない!ReactとRailsで作るTODOアプリ下準備編