#yyds干货盘点# 【React工作记录四十六】react中的目录规范

简介: #yyds干货盘点# 【React工作记录四十六】react中的目录规范

前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


日常的工作中 我们难免会有关于工作的一些规范 还是需要遵守的 这边大概展示一下自己项目中的规范 便于查看


图片.png

目录规范


#### 目录规范:
```
config
├── config.js         umi 配置目录
├── plugin.config.js  webpack插件配置目录
└── router.config.js  路由配置目录
src:
静态资源目录: assets 
公共组件目录:common
业务组件目录: components 
主框架目录:layouts
国际化目录:locales
本地数据模拟目录: mocks 
状态管路目录:models
页面目录: pages 
请求接口文件目录:request
服务api接口管理目录: services 
样式目录:style
公共函数方法目录: utils 
icon目录: icons 
```



新增页面文件夹时请遵守此约束!
```
System                模块目录
├── components        当前模块抽取公用组件
├── models            当前模块的数据(可选:页面多的写到页面下),
├── Employee          员工管理
      ├── models      当前页面的数据(可选:页面少的写到),
      ├── employee    员工管理的数据流
      ├── components  当前页面抽取封装组件
      ├── data.js     页面辅助方法或配置(可选) 
      ├── index.js    页面逻辑,只放子组件的封装
      ├── index.less  样式
```
**说明:页面抽取或封装子组件里面,不要写逻辑代码,更不要处理数据。
子组件只做数据展示使用,把逻辑处理和数据处理
都放到 `index.js` 里面。`index.js` 做当前页面的所有数据处理。
数据请求都放到 `models`。这样开发时我们
只需要去关注某个点。逻辑的修改和bug只关注index 文件,页面的展示在子组件里面 。**


总结


任何时候注意自己页面的一个可读性 可维护性


相关文章
|
前端开发 数据处理 API
react中的目录规范
react中的目录规范
112 1
|
前端开发 JavaScript 开发者
React格式化规范
React格式化规范
206 0
|
JavaScript 前端开发 安全
react.ts规范
react.ts规范
121 0
|
前端开发
React框架课时二认识项目的结构目录一
React框架课时二认识项目的结构目录一
179 0
|
JavaScript 前端开发 安全
react.ts规范
react.ts规范
|
JSON 前端开发 JavaScript
【脚手架】从0到1搭建React18+TS4.x+Webpack5项目(三)代码质量和git提交规范
【脚手架】从0到1搭建React18+TS4.x+Webpack5项目(三)代码质量和git提交规范
|
前端开发
【React工作记录四十六】react中的目录规范
【React工作记录四十六】react中的目录规范
152 0
|
资源调度 前端开发 JavaScript
React默认工程的目录说明
React默认工程的目录说明
React默认工程的目录说明
|
前端开发 JavaScript
|
资源调度 前端开发
react中规范类型接口的使用
react中规范类型接口的使用