一、React项目构建

React 快速开始（环境搭建及脚手架配置）

1. 全局安装 yarn： npm install -g yarn；
2. 全局安装 react 官方脚手架 create-react-app： npm install -g create-react-app；
3. 新建react项目（myapp）：create-react-app myapp；
   注：myapp为项目名称；
4. 进入 react 项目根目录 myapp：cd myapp；
5. 显示隐藏的配置文件：npm run eject；
6. 安装项目默认的全部依赖：yarn 或者 yarn install；
   注：此时已可以使用 yarn start 或者 npm start 启动项目了
          项目会运行在 http://localhost:3000/
          之后就是安装 react全家桶相关依赖了；
   
   
7. 路由 react-router-dom：

• 英文文档：https://reacttraining.com/react-router/
• 中文文档（简书）：http://www.jianshu.com/p/e3adc9b5f75c/
• 安装命令：yarn add react-router-dom

8. 状态管理 redux：

• 文档 : http://www.redux.org.cn/
• 安装：
  需要先安装 redux（yarn add redux）
  然后安装 react-redux（yarn add react-redux）
  异步数据 redux-thunk （yarn add redux-thunk）

9. 请求数据 fetch：

• 英文文档：https://github.com/github/fetch
• 中文文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
• 安装：yarn add whatwg-fetch

10. css预处理器 sass：

• 安装：yarn add sass-loader node-sass

• 配置文件路径：config/webpack.config.dev.js config/webpack.config.prod.js
  注：修改位置可通过搜索 oneOf 或者 exclude 来定位，增加内容如下：

    oneOf: [
      { // 配置css预处理器sass
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.scss$/], // 排除sass文件
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
    ],
  

11. 设置开发环境代理（处理开发环境跨域）：
    注：在package.json文件中添加字段proxy，开发环境下dev-server将会自动转发请求

      "proxy": "http://aaa.bbb.com/"