一、创建react项目
1.1 install node
1.2 命令行：npx create-react-app my-app （npx comes with npm 5.2+ and higher）
利用react官方提供的脚手架创建项目，创建完一个项目之后,你会发现为什么没有配置文件呢.这是需要运行npm run eject复制出相关的配置文件
1.3 命令行：npm run eject (可选，618项目暂时不执行)
类似于反编译出配置文件
官方释义：
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
package.json
"dependencies": {
//一个为了兼容浏览器,为样式自动添加前缀的库
"autoprefixer": "7.1.2",
//babel es6->es5
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
//对于这个插件不是很了解，简单看了一下文档，应该是为了兼容引入插件时的路径问题。
"case-sensitive-paths-webpack-plugin": "2.1.1",
//for console
"chalk": "1.1.3",
//css引入插件,将css装载到JavaScript例如 import './index.css'
"css-loader": "0.28.4",
//env 处理
"dotenv": "4.0.0",
//当你运行或者构建的时候，可以检查语法的库。我只能说这个库非常有用，毕竟有时候除了error致命，warning也非常致命（如果你不注意的话）
"eslint": "4.4.1",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
//css 打包插件
"extract-text-webpack-plugin": "3.0.0",
//文件加载打包插件包括图片，js文件等
"file-loader": "0.11.2",
//文件系统扩展模块
"fs-extra": "3.0.1",
//html生成插件，可以自动引入css和js
"html-webpack-plugin": "2.29.0",
//单元测试工具
"jest": "20.0.4",
//目测应该是Object.assign()的兼容库---不懂。。。
"object-assign": "4.1.1",
//一种用于修复flexbug的bug的插件。
"postcss-flexbugs-fixes": "3.2.0",
//css构建中，浏览器兼容库
"postcss-loader": "2.0.6",
//promise库
"promise": "8.0.1",
//内置react相关库
"react": "^15.6.1",
"react-dev-utils": "^4.0.1",
"react-dom": "^15.6.1",
//样式加载库，使JavaScript认识css
"style-loader": "0.18.2",
//不是很了解，搜了一下应该提供一种web前端的缓存方案的库
"sw-precache-webpack-plugin": "0.11.4",
//css和dom属性中 的各种文件引入
"url-loader": "0.5.9",
//webpack
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
//fetch 请求，一种更加优雅异步加载的请求方式
"whatwg-fetch": "2.0.3"
},config目录
–env.js 返回客户端的环境配置
–paths.js 返回各种项目关键的目录位置
–polufills.js 引入promise，fetch，object.assign三种常用方法。
–webpack.config.dev.js webpack开发环境配置文件
–webpack.config.prod.js webpack生产环境配置文件
–webpackDevServer.config.js 小型的Node.js Express服务器
更多介绍见：https://www.jianshu.com/u/1f4b8327d264（从create-react-app学习webpack）
二、react项目开发相关
2.1 装载scss（摘自github：create-react-app官方文档）
命令行：npm install –save node-sass-chokidar
命令行：npm install –save npm-run-all
在package.json中修改
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
- "start": "react-scripts start",
- "build": "react-scripts build",
+ "start-js": "react-scripts start",
+ "start": "npm-run-all -p watch-css start-js",
+ "build-js": "react-scripts build",
+ "build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}然后修改CSS文件为SCSS后缀即可
2.2 装载reate-route（摘自github：create-react-app官方文档）
命令行：npm install –save react-router-dom
更多react-route教程见：https://reacttraining.com/react-router/web/example/basic
2.3 装载mock.js
命令行：npm install mockjs
2.4 装载moment.js
命令行：npm install moment –save
2.5 装载axios
命令行：npm install axios –save
2.6 装载numeral
命令行：npm install numeral –save