怎么组织react项目目录
下面说一说中大型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 容器,子应用就可以通过这样的规约被实例化和集成进来。
真实的项目中,还会涉及到路由的插件化。
项目没有一个写死的结构,结构都是根据具体项目进行细化,不要被条条框框拘束死了,大体的结构对了,细化的结构你自己想怎么写,规则事先规定好,就不会乱了。
更多React相关技术文章,请访问React答疑栏目进行学习!
以上就是怎么组织react项目目录的详细内容,更多请关注0133技术站其它相关文章!