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
参考
環境構築
ターミナル
$ 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アプリの作成。