对于一门语言的学习,少不了动手练习,今天我们就尝试一下,如何用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的编写: