ReactJS学习系列课程（React 整体流程使用案例）

对于一门语言的学习，少不了动手练习，今天我们就尝试一下，如何用React编写一个简单的程序，实现功能包括网络请求数据，绑定数据进行增删改查，并进行相应的路由操作。

下面我们来年代码：

package.json

我们创建一个package.json, 里面包含一些开发库还有核心库：

{
  "name": "demo4",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server --progress --colors --hot --inline -d",
    "build": "webpack --progress --colors --minify"
  },
  "license": "ISC",
  "dependencies": {
    "classnames": "2.1.2",
    "react": "0.13.3",
    "react-router": "^2.5.1"
  },
  "devDependencies": {
    "babel-core": "5.6.18",
    "babel-eslint": "^5.0.4",
    "babel-loader": "5.1.4",
    "node-args": "1.0.2",
    "node-libs-browser": "^1.0.0",
    "raw-loader": "0.5.1",
    "eslint": "^1.10.3",
    "eslint-config-rackt": "^1.1.1",
    "eslint-plugin-react": "^3.16.1",
    "style-loader": "0.12.3",
    "todomvc-app-css": "2.0.1",
    "webpack": "1.9.11",
    "webpack-dev-server": "1.11.0"
  }
}

react 和react-router是我们一定要添加的核心库，react-router是路由功能的核心库，如果我们要进行页面跳转，一定要用到。

还有一些开发库，比如webpack， 用于打包工作，babel用于我们要把ES6代码转化，webpack-dev-server主要负责本地测试服务器功能，可以把我们的测试部署到上面，配置hot-reload进行实时刷新工作。

对于这个package.json，我们配置好以后，可以执行npm install进行全部安装。

webpack.config.js

然后我们在看一下webpack.config.js的编写: