整体分析

  • 整体分析有 config、dist、node modules、src 四个部分。

(1) config 是项目的整体配置文件 (2) dist 指编译后的文件，可以理解为压缩发布版
(3) node modules是 npm 项目加载的项目依赖的模块。(4)src 目录是要开发的目录/源码文件
还有一些其他的：
（1）docs 文档
（2）examples 示例文件
（3）test 测试脚本
（4）.gitignore 告诉git哪些文件不要上传到 GitHub，比如数据库配置文件等
（5）LICENSE.txt 授权协议
（6）README.md 自述文件，整个项目的简介、使用方法等
（7）bower.json Bower 包管理器配置文件
（8）package.json npm 包管理器配置文件

  • GitHub 下 dist 和 src,dest 目录的区别

    dist是编译后的文件，压缩版； src是源码文件；
    压缩源（src）文件，生成压缩包到（dest），dest一般和src配对出现。

reduce

资源：
reduce1:菜鸟教程
reduce2:简书教程
reduce3:经典用法实例
reduce4:高级技巧

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

  1. callback （执行数组中每个值的函数，包含四个参数）
  2.     1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
  3.     2、currentValue （数组中当前被处理的元素）
  4.     3、index （当前元素在数组中的索引）
  5.     4、array （调用 reduce 的数组）
  6. initialValue （作为第一次调用 callback 的第一个参数。）

educe() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。

架构

React开发：详解

  1. ├── assets
  2. │ └── index.css //放置一些全局的资源文件 可以是js 图片等
  3. ├── config
  4. │ ├── webpack.config.dev.js 开发环境webpack打包设置
  5. │ └── webpack.config.prod.js 生产环境webpack打包设置
  6. ├── package.json
  7. ├── README.md
  8. ├── server server端渲染文件，如果对不是很了解，建议参考koa教程
  9. │ ├── app.js
  10. │ ├── clientRouter.js // 在此文件中包含了把服务端路由匹配到react路由的逻辑
  11. │ ├── ignore.js
  12. │ └── index.js
  13. └── src
  14. ├── app 此文件夹下主要用于放置浏览器和服务端通用逻辑
  15. │ ├── configureStore.js //redux-thunk设置
  16. │ ├── createApp.js //根据渲染环境不同来设置不同的router模式
  17. │ ├── index.js
  18. │ └── router
  19. │ ├── index.js
  20. │ └── routes.js //路由配置文件！ 重要
  21. ├── assets
  22. │ ├── css 放置一些公共的样式文件
  23. │ │ ├── _base.scss //很多项目都会用到的初始化css
  24. │ │ ├── index.scss
  25. │ │ └── my.scss
  26. │ └── img
  27. ├── components 放置一些公共的组件
  28. │ ├── FloatDownloadBtn 公共组件样例写法
  29. │ │ ├── FloatDownloadBtn.js
  30. │ │ ├── FloatDownloadBtn.scss
  31. │ │ └── index.js
  32. │ ├── Loading.js
  33. │ └── Model.js 函数式组件的写法
  34. │
  35. ├── favicon.ico
  36. ├── index.ejs //渲染的模板 如果项目需要，可以放一些公共文件进去
  37. ├── index.js //包括热更新的逻辑
  38. ├── pages 页面组件文件夹
  39. │ ├── home
  40. │ │ ├── components // 用于放置页面组件，主要逻辑
  41. │ │ │ └── homePage.js
  42. │ │ ├── containers // 使用connect来封装出高阶组件 注入全局state数据
  43. │ │ │ └── homeContainer.js
  44. │ │ ├── index.js // 页面路由配置文件 注意thunk属性
  45. │ │ └── reducer
  46. │ │ └── index.js // 页面的reducer 这里暴露出来给store统一处理 注意写法
  47. │ └── user
  48. │ ├── components
  49. │ │ └── userPage.js
  50. │ ├── containers
  51. │ │ └── userContainer.js
  52. │ └── index.js
  53. └── store
  54. ├── actions // 各action存放地
  55. │ ├── home.js
  56. │ └── thunk.js
  57. ├── constants.js // 各action名称汇集处 防止重名
  58. └── reducers
  59. └── index.js // 引用各页面的所有reducer 在此处统一combine处理
  1. │  App.js                         根组件
  2. │  index.js                       项目入口
  3. │  style.js                       注入到全局的样式, 重置默认样式
  4. ├─store   
  5. |      index.js                   唯一的store
  6. |      reducer.js                 合并各组件的reducer
  7. |
  8. ├─common                          通用组件文件夹
  9. │  ├─header                       头部组件，它独立于页面之外，却又较为复杂，所以单独抽出
  10. │  │  │  index.js                 组件入口，布局与逻辑
  11. │  │  │  style.js                 组件使用标签以及样式
  12. │  │  │
  13. │  │  └─stroe                     header区域所有的数据
  14. │  │          actionCreators.js   统一管理action
  15. │  │          constants.js        用常量替代所有的action的type值
  16. │  │          index.js            导出actionCreators与reducer
  17. │  │          reducer.js          根据不同的action修改state
  18. │  │
  19. │  └─tools                        存放所有的小组件
  20. │      │  index.js                导出所有的工具组件
  21. │      │
  22. │      ├─components               放置通用组件
  23. │      │  └─backTop               回到顶部组件
  24. │      │          index.js        
  25. │      │          style.js        
  26. │      │
  27. │      └─store                    这里打算用一个文件夹来管理所有通用组件的数据，↓
  28. │              actionCreators.js  因为通用组件主要是样式，逻辑是少数
  29. │              contants.js
  30. │              index.js
  31. │              reducer.js
  32. │
  33. ├─pages                           所有的页面
  34. │  │
  35. │  ├─home                         主页
  36. │  │  │  index.js                 主页入口
  37. │  │  │  style.js                 主页样式
  38. │  │  │
  39. │  │  ├─components                首页被划分为下列组件
  40. │  │  │      List.js              列表组件
  41. │  │  │      Recommed.js          推荐组件
  42. │  │  │      Topic.js             话题组件
  43. │  │  │      Writer.js            作者组件
  44. │  │  │
  45. │  │  └─store
  46. │  │          actionCreators.js   统一管理action
  47. │  │          constains.js        用常量替代所有的action的type值
  48. │  │          index.js            导出actionCreators与reducer
  49. │  │          reducer.js          根据不同的action修改state
  50. │  │
  51. │  ├─detail                       文章详情页面
  52. │  │  │  index.js                 
  53. │  │  │  loadable.js              使用loadable包装组件，让其可异步加载代码
  54. │  │  │  style.js
  55. │  │  │
  56. │  │  └─store
  57. │  │          actionCreators.js
  58. │  │          constains.js
  59. │  │          index.js
  60. │  │          reducer.js
  61. │  │
  62. │  ├─login                        登录页
  63. │  │  │  index.js
  64. │  │  │  style.js
  65. │  │  │
  66. │  │  └─store
  67. │  │          actionCreators.js
  68. │  │          constains.js
  69. │  │          index.js
  70. │  │          reducer.js
  71. │  │
  72. │  └─write                        写文章页
  73. │          index.js               没有再往下写了
  74. │
  75. └─statics                         静态资源文件
  76.    │  logo.png                    
  77.    │
  78.    └─iconfont                     iconfont文件，全是美美的图标
  79.            demo.css
  80.            iconfont.css
  81.            iconfont.eot
  82.            iconfont.js
  83.            iconfont.svg
  84.            iconfont.ttf
  85.            iconfont.woff

一般流程：

  1. 构思应用的state结构
  2. actions -> actionCreator
  3. reducers(redux工作完成，开始react组件)
  4. components
  5. containers(index页面，ReactDOM渲染)
  6. 上述完成后，react-redux库连接二者
  7. 中途可能会用到redux devtools调bug，查看状态什么的