React文件名和目录规范最佳实践记录(总结篇)
React在使用时非常灵活,如果没有一个规范约束项目,在开发过程中会非常混乱,本文将介绍几个优秀的规范。
文件类型
介绍文件名和目录前,需要先简述一下几种通用的类型,用来区分文件的功能。
- component 组件文件
- page 如果有路由(React Router、NextJS等),则有页面文件
- util 需要复用的工具函数
- helper 一段特定逻辑,不是通用工具,可复用也可仅作为代码拆分片段
- hook 自定义React Hook
- constant 定义常量,大写+下划线命名
CONSTANT_VALUE
处理index文件
在做组件或者页面的时候,你可能会划分组件,并把主组件用index.tsx
导出。这样做的时候有一个好处就是可以按照文件夹名引入,从结构上看是很清晰的。
但是事实上,在编辑器中会有多个index.tsx
文件,开发时需要看文件所在的文件夹,非常难受。
我的解决方案是,你的主组件应该和原来一样导出,index.ts
文件二次导出主组件。
你的 index.ts
应该这样写:
export * from './MainComponent'; export { default } from './MainComponent';
虽然把一个文件变成了两个文件,但是有效地减少了开发时的心智负担。
接下来规范中所有的
index.ts
都是这个作用
规范
类型文件夹
这应该是一个比较官方的规范,很多项目都在使用。
此处使用大驼峰命名组件(component)和页面(page),其他文件通常用小驼峰
如果你有路由,那么此时component中的组件应为通用组件。
src/ ├── components/ │ ├── MyHeader.tsx │ └── MyFooter.tsx ├── pages/ │ ├── Home.tsx │ ├── About.tsx │ └── Widget/ │ ├── components/ │ │ ├── Tool.tsx │ │ └── Option.tsx │ ├── helpers/ │ │ └── setOptionStorage.ts │ ├── Widget.tsx │ └── index.ts ├── hooks/ │ └── useTheme.ts ├── utils/ │ └── getRamdomNumber.ts └── constants.ts
这个规范在小项目中尚可实行。但是如果相对复杂的项目,由于文件夹层数多,会导致引入混乱。接下来会推荐特性分类的规范。
示例项目:Ant Design Pro
特性文件夹
特性文件夹分类很好地解决了层数过多的问题,增加平铺的可能。并更直观地展示了代码逻辑,方便维护。
大驼峰命名
这种命名规范中,除了组件和页面以外,所有的文件都需要添加类型后缀。
并且在一个特性中,可以将类型相同的函数放在一个文件内。
例如 Widget.helper.ts
Widget.util.ts
如果是通用的或复用的代码,都建议放到 common
文件夹统一管理,其余特性文件夹均大写。
非组件或页面的独立的文件,请使用烧烤串命名(中划线分割)
同一个特性的组件可以不另设 components
文件夹
src/ ├── common/ │ ├── components/ │ │ ├── MyHeader.tsx │ │ └── MyFooter.tsx │ ├── utils/ │ │ └── get-random-number.util.ts │ ├── hooks/ │ │ └── use-theme.hook.ts │ └── constants.ts ├── Home/ │ └── Home.tsx ├── Widget/ │ ├── Tool.tsx │ ├── Option.tsx │ ├── Widget.helpers.ts │ ├── Widget.utils.ts │ ├── Widget.constants.ts │ ├── Widget.tsx │ └── index.ts └── About/ └── About.tsx
参考文章:Delightful React File/Directory Structure
烧烤串命名
这个实际上是参考了Angular规范,如果你对上面这个规范的大小写命名强迫症,不妨试试这个更严苛的规范。
- 所有文件名、文件夹名都小写,使用烧烤串命名(中划线分割)。
- 所有的文件都需要添加类型后缀。
- 只有主要的页面组件可以放在特性文件夹底层,其余文件都需要在特性文件夹中再设置类型文件夹。
- 每个函数都应该是一个文件,不要把相同功能的函数放在一个文件内。
- 移除
index.ts
导出,因为文件名变长且有类型后缀,引入方便判断类型
src/ ├── common/ │ ├── components/ │ │ ├── my-header.component.tsx │ │ └── my-footer.component.tsx │ ├── utils/ │ │ └── get-random-number.util.ts │ ├── hooks/ │ │ └── use-theme.hook.ts │ └── constants.ts ├── home/ │ └── home.page.tsx ├── widget/ │ ├── components/ │ │ ├── tool.component.tsx │ │ └── option.component.tsx │ ├── helpers/ │ │ └── set-option-storage.helper.ts │ └── widget.page.tsx └── about/ └── about.page.tsx
示例项目
到此这篇关于几种React文件名和目录规范最佳实践的文章就介绍到这了,更多相关React文件名和目录实践内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://juejin.cn/post/7095980489160261639
相关文章
- 今天小编就为大家分享一篇解决Pycharm的项目目录突然消失的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-22
- 这篇文章主要介绍了cmd下过滤文件名称的两种方法,需要的朋友可以参考下...2020-06-30
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要介绍了C#路径,文件,目录及IO常见操作,较为详细的分析并汇总了C#关于路径,文件,目录及IO常见操作,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21docker 启动elasticsearch镜像,挂载目录后报错的解决
这篇文章主要介绍了docker 启动 elasticsearch镜像,挂载目录后报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-20- 这篇文章主要介绍了idea out目录与target目录的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-08
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 今天小编大家分享一篇C#获得程序的根目录以及判断文件是否存在的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
- 这篇文章介绍的是一个小技巧来获取node.js项目根目录,这个技巧非常实用。有需要的朋友们可以参考借鉴,下面来一起看看吧。...2016-10-02
- 我的第一个感觉就是用递归创建,具体思路如下: function Directory($dir){ if(is_dir($dir) || @mkdir($dir,0777)){ //查看目录是否已经存在或尝试创建,加一个@抑制符号是因为第一次创建失败,会报一个“父目录不存...2015-11-08
- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
使用GetInvalidFileNameChars生成文件名
这篇文章主要介绍了一个很实用的函数Path.GetInvalidFileNameChars(),他可以很方便的生成一个有效的文件名称...2020-06-25- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了解决docker挂载的目录无法读写问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-19
- 这篇文章主要介绍了python import 上级目录的导入,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-03
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21