全家桶內裝有：

• react - github
• react-router - github
• redux - github
• react-redux - github
• react-router-redux - github
• redux-saga - github
• immutable - github
• reselect - github
• antd - github

服務端：

json server 作為工具，支持CORS和JSONP跨域請求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查詢方法，如limit，order等。

npm install json-server -g 

安裝完成後可以用 json
 
-server -h 命令檢查是否安裝成功

1. 新建項目目錄reactbox,並初始化

   npm init

2. 新建 mock/ 文件夾，及其下新建db.json
3. 在mock目錄下執行

   json-server db.json -w -p 3000

   或者：

   在mock\下再建一個package.json文件，添加
   {
     "scripts": {
       "mock": "json-server db.json --port 3000"
     }
   }
   在mock\下執行 ： npm run mock
   

   如果用reactbox下的package.json,配置地址：
   "mock": "json-server mock/db.json --port 3000"
    
   
   在reactbox\下執行 ： npm run mock

   通過地址http://localhost:3000/查看

json server以每個”表”為單位註冊一系列標準的RESTFull形式的API接口（路由）,表(.json中的第一級)

操作數據：
1，Get查詢：
jQuery.get 或 fecth({method: "get"}) 訪問http://localhost:3000/news

2，Post:push一條新數據
$.ajax({
    type: ‘post‘,
    url: ‘http://localhost:3000/news‘,
    data: {
      "id": 11，
        ...
    }
  }
)

 
3,PUT:對數據進行修改(id為1)
$.ajax({
    type: ‘put‘,
    url: ‘http://localhost:3000/news/1‘,
    data: {
      "title": "aaa",
       ...
    }
  }
)

4，[DELETE] /user/:id #刪除 等

json server 也可以使用動態數據

# /mock/db.js

module.exports = function() {
  var data = { users: [] }
  // Create 1000 users
  for (var i = 0; i < 1000; i++) {
    data.users.push({ id: i, name: ‘user‘ + i })
  }
  return data
}

/mock 下運行 json-server db.js -p 3000,可以通過http://localhost:3000/users來訪問

react全家桶-1