react技术栈实践(1)

本文来自网易云社区 作者:汪洋 背景 最近开发一个全新AB测试平台,思考了下正好可以使用react技术开发。 实践前技术准备 首先遇到一个概念,redux。这货还真不好理解,大体的理解:Store包含所有数据,视图触发一个Action,Store收到Action后,返回一个新的 State,这样视图就发生变化,State计算过程叫做 Reducer,Reducer其实就是一个处理数据的函数,接受 Action和 当前State作为参数,返回一个新的 State。明白这个后,就可以开始实践了。 搭建平台的脚手架 对于我这方面没搞过的菜鸟,还真是不容易。接下来说下作为新手如何实践的。 第一步:依赖包 "devDependencies": { "babel-core": "^6.26.0", "babel-eslint": "^8.2.2", "babel-loader": "^7.1.2", "babel-plugin-import": "^1.6.6", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.7", "eslint": "^4.18.2", "eslint-config-airbnb": "^16.1.0", "eslint-loader": "^2.0.0", "eslint-plugin-import": "^2.9.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-react": "^7.7.0", "extract-text-webpack-plugin": "^3.0.2", "html-webpack-plugin": "^3.0.4", "less": "^2.7.3", "less-loader": "^4.0.6", "style-loader": "^0.19.1", "url-loader": "^1.0.1", "webpack": "^3.1.0"},"dependencies": { "normalize.css": "^8.0.0", "react": "^16.2.0", "react-dom": "^16.2.0", "react-redux": "^5.0.7", "react-router-dom": "^4.2.2", "redux": "^3.7.2"} dependencies 中引入的依赖包,是react的标配了,不用解释。devDependencies 中引入了…