下面说一说中大型 react 项目中的组织方式.
项目根目录
与几乎所有基于 webpack + Babe + ESLint + Git + 云端构建的项目类似, 会有以下几个文件夹和文件:
src 目录
src 目录固然是放源文件, 第一层放的是各一级子模块 / 应用的根目录
一级子模块 / 应用
如上图所示, 在每一个一级子模块中基本都包含如下几个目录:
actions 目录: 存放 Redux 中的 actions.
reducer 目录: 与 actions 对应, 其中 index.JS 中是 combineReducers() 后的结果, 因此目录名使用单数形式.
API 目录: 与服务端的 Ajax 请求包装部分放在这里.
components 目录: 存放 React 普通组件 (即非 connect 的组件), 每一个组件放在一个目录中, 目录名即为控件名, 目录中固定有 index.JS 和 index.Less 文件. 对于复杂的组件, 则还可以将一些无法被复用(non-reusable) 的子组件也放在这个目录下.
containers 目录: 存放被 connect 后的 React 容器组件, 最典型的就是 App, 即应用组件.
根目录下也会有 index.JS, 通常它会被要求 export 出:
App as default, 即一级子应用的根容器组件(已被 connect).
reducer, 即该应用的根 reducer, 这个 reducer 又有可能会被再次 combineReducers(), 并且连接到最外层的总 store 中.
actions, 暴露出所有允许外部以 action 形式调用的扩展.
id: 当前应用的唯一标识, 通常也会作为 reducer 被 combineReducers() 的键值.
没错, 以上就是一个基于 React + Redux 的具有插件规约的子应用, 在最外层创建一个 Redux Store 和根 React 容器, 子应用就可以通过这样的规约被实例化和集成进来.
真实的项目中, 还会涉及到路由的插件化.
项目没有一个写死的结构, 结构都是根据具体项目进行细化, 不要被条条框框拘束死了, 大体的结构对了, 细化的结构你自己想怎么写, 规则事先规定好, 就不会乱了.
来源: http://www.css88.com/qa/react/14175.html