怎么组织react项目目录

怎么组织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项目目录的详细内容，更多请关注易知道|edz.cc其它相关文章！