手把手教你用React寫一個簡易訂單管理系統系列-開始

技術棧

react + antd + eslint + react-router + immutable + redux + redux-immutablejs + webpack + fetch

開始

1.請在開始以前，先安裝node.js和npm。

node：v11.4.0
npm：6.5.0
複製代碼

2.各大庫的版本信息

"@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "antd": "^3.19.2",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.0",
    "babel-plugin-import": "^1.9.1",
    "classnames": "^2.2.6",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^2.1.1",
    "echarts": "^4.2.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-standard": "^4.0.0",
    "file-loader": "^1.1.11",
    "flux-standard-action": "^2.1.0",
    "history": "^4.7.2",
    "html-webpack-plugin": "^3.2.0",
    "immutable": "^4.0.0-rc.12",
    "is-promise": "^2.1.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.4",
    "npm": "^6.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "prop-types": "^15.6.1",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-hot-loader": "^4.5.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "^3.0.0",
    "redux": "^3.7.2",
    "redux-immutablejs": "0.0.8",
    "style-loader": "^0.20.3",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.1.4",
    "whatwg-fetch": "^2.0.4"
複製代碼

3.開發工具 Mac + iTerm2 + Visual Studio Code + 阿里雲ECS

注意

• 若是想跳過教程，請點擊完整案例
• 須要有點基礎的看，起碼要懂react，新手的話(我我的以爲不太適合)。

結語

目前技術棧更新的太快了，好比說react-router的更新、webpack的更新。然而不少文檔還停留在2.0、3.0等版本，甚至webpack官方文檔都沒馬上更新上，因此給開發者形成了極大的困擾，每次更新都帶來了很大的改動。因此在此記錄下如何使用Reac技術棧搭建訂單管理系統