fuermosi777 · September 7, 2016 17:29
diff --git a/.babelrc b/.babelrc
 {
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["react-hot-loader/babel"]
 }
diff --git a/base_controller.rb b/base_controller.rb
 # base_controller.rb
 class Api::V1::BaseController < ApplicationController
  protect_from_forgery with: :null_session  
  respond_to :json
 end
diff --git a/commands.txt b/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
diff --git a/entry.jsx b/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')
 );
diff --git a/index.html.erb b/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>
diff --git a/item_controller.rb b/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
diff --git a/package.json b/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"
 }
 ...
diff --git a/react_commands.txt b/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
diff --git a/routes.rb b/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
diff --git a/seeds.rb b/seeds.rb
 # db/seeds.rb

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

 # run $ rake db:seed
diff --git a/webpack.config.dev.js b/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