React Redux Rails 1 / 5 「環境構築」

はじめに

Riot.js Redux Railsシリーズで作ったTodoアプリのRiot.js部分をReactを使って書いた。

Riot.js Redux Railsで作ったTodoアプリと全く同じものを作成するのでコードが大分重なっている(Riot.js部分をReactにしただけ)が、今回の一連の記事だけ読んでも出来るように省略はしない(ほぼコピペだし)。

環境構築

• React Redux Rails 1 / 5 「環境構築」

Todo Appの作成

• React Redux Rails 2 / 5 「Todoリストを表示する」
• React Redux Rails 3 / 5 「新たなTodoを追加出来るようにする」
• React Redux Rails 4 / 5 「完了したTodoをチェック出来るようにする」
• React Redux Rails 5 / 5 「チェックしてあるタスクを削除出来るようにする」

最終的に完成したTodo App
https://github.com/atfeo/React_Redux_Rails

参考

• webpackを使った Rails上でのReact開発

環境構築

Mac
Rails 5.0.0.1
ruby 2.3.1

ターミナル

$ rails new react_redux_rails
$ cd react_redux_rails
$ mkdir client
$ cd client

clientディレクトリ

Package.json

$ npm init -y

これによりpackage.jsonが作成されるので

{
  "private": "true",
  "scripts": {
    "webpack-watch": "webpack -w"
  }
}

のように書き換える。 再びターミナルで

$ npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015

同じく

$ npm install --save react react-dom redux react-redux redux-thunk

webpackの設定

webpack.config.jsを作成し

// ./client/webpack.config.js
module.exports = {
  entry: {
    app: './src/index.jsx',
  },

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

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

そして

$ cd ..

で、アプリケーションのルートに戻っておく

Gemfile

Gemfileに

# Gemfile
gem 'foreman'

を追加し

$ bundle install

Procfile

アプリケーションのルートディレクトリにProcfileを作成

rails: rails s
webpack: npm --prefix client run webpack-watch

環境構築終わり。

次回からTodoアプリの作成。

React Redux Rails 2 / 5に続く