fuermosi777/.babelrc

## .babelrc
{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-hot-loader/babel"]
}

## base_controller.rb
# base_controller.rb
class Api::V1::BaseController < ApplicationController
  protect_from_forgery with: :null_session
  respond_to :json
end

## commands.txt
$ rails new someapp
$ rails g model Item name:string description:text
$ rake db:migrate

# gemfile
gem 'responders'

$ bundle


# react part
$ bin/rails generate controller React index

## entry.jsx
// src/entry.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './components/App/App.jsx';

ReactDOM.render((
    <App/>
    ), document.getElementById('container')
);

## index.html.erb
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>

<body>
    <div id="container"></div>
</body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="http://localhost:8080/bundle.js"></script>

</html>

## item_controller.rb
#items_controller.rb
class Api::V1::ItemsController < Api::V1::BaseController
    def index
        respond_with Item.all
    end

    def create
        respond_with :api, :v1, Item.create(item_params)
    end

    def destroy
        respond_with Item.destroy(params[:id])
    end

    def update
        item = Item.find(params["id"])
        item.update_attributes(item_params)
        respond_with item, json: item
    end

    private

    def item_params
        params.require(:item).permit(:id, :name, :description)
    end
end

## package.json
...
"scripts": {
  "dev": "webpack-dev-server --config webpack.config.dev.js --hot --inline --colors --progress",
  "build": "webpack --config webpack.config.prod.js -p --progress --colors"
}
...

## react_commands.txt
$ npm init
$ npm install --save-dev babel-loader babel-core webpack css-loader less-loader style-loader react react-dom babel-preset-react babel-preset-stage-0 babel-preset-es2015 react-hot-loader webpack-dev-server

## routes.rb
Rails.application.routes.draw do
    get 'react/index'
    root 'react#index'
    # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    namespace :api do
        namespace :v1 do
            resources :items, only: [:index, :create, :destroy, :update]
        end
    end
end

## seeds.rb
# db/seeds.rb

10.times { Item.create(name: "Hao", description: "Liu") }

# run $ rake db:seed

## webpack.config.dev.js
/* global __dirname */
var webpack = require('webpack');

module.exports = {
    entry: [
        'webpack/hot/only-dev-server',
        './src/entry.jsx'
    ],
    output: {
        publicPath: 'http://localhost:8080/static/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.jsx$/,
            loaders: ['babel'],
            exclude: /node_modules/
        }, {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel'
        }, {
            test: /\.less$/,
            loader: 'style!css!less'
        }, {
            test: /\.(css)$/,
            loader: 'style!css'
        }, {
            test: /\.(png|jpg|jpeg|svg)$/,
            loader: 'file'
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};
	{
	"presets": ["es2015", "react", "stage-0"],
	"plugins": ["react-hot-loader/babel"]
	}
	# base_controller.rb
	class Api::V1::BaseController < ApplicationController
	protect_from_forgery with: :null_session
	respond_to :json
	end
	$ rails new someapp
	$ rails g model Item name:string description:text
	$ rake db:migrate

	# gemfile
	gem 'responders'

	$ bundle


	# react part
	$ bin/rails generate controller React index
	// src/entry.js

	import React from 'react';
	import ReactDOM from 'react-dom';

	import App from './components/App/App.jsx';

	ReactDOM.render((
	<App/>
	), document.getElementById('container')
	);
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Test</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	</head>

	<body>
	<div id="container"></div>
	</body>
	<script src="http://localhost:8080/webpack-dev-server.js"></script>
	<script src="http://localhost:8080/bundle.js"></script>

	</html>
	#items_controller.rb
	class Api::V1::ItemsController < Api::V1::BaseController
	def index
	respond_with Item.all
	end

	def create
	respond_with :api, :v1, Item.create(item_params)
	end

	def destroy
	respond_with Item.destroy(params[:id])
	end

	def update
	item = Item.find(params["id"])
	item.update_attributes(item_params)
	respond_with item, json: item
	end

	private

	def item_params
	params.require(:item).permit(:id, :name, :description)
	end
	end
	...
	"scripts": {
	"dev": "webpack-dev-server --config webpack.config.dev.js --hot --inline --colors --progress",
	"build": "webpack --config webpack.config.prod.js -p --progress --colors"
	}
	...
	$ npm init
	$ npm install --save-dev babel-loader babel-core webpack css-loader less-loader style-loader react react-dom babel-preset-react babel-preset-stage-0 babel-preset-es2015 react-hot-loader webpack-dev-server
	Rails.application.routes.draw do
	get 'react/index'
	root 'react#index'
	# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
	namespace :api do
	namespace :v1 do
	resources :items, only: [:index, :create, :destroy, :update]
	end
	end
	end
	# db/seeds.rb

	10.times { Item.create(name: "Hao", description: "Liu") }

	# run $ rake db:seed