react项目,文件夹和组件命名,有什么好的规范

在React项目中,文件夹和组件的命名规范对于保持代码的可读性和可维护性至关重要。以下是一些建议的规范:

文件夹命名规范

1、使用小写字母: 所有文件夹名称都应使用小写字母,避免使用大写字母或特殊字符。

2、使用短而描述性的名称: 尽量使用简洁且能够描述文件夹内容的名称。例如,存放所有组件的文件夹可以命名为components,存放公共样式文件的文件夹可以命名为styles。

3、按功能或类型分组: 将相关或同类型的文件放在同一个文件夹中,以便于查找和管理。例如,可以将所有与特定页面相关的组件和样式放在同一个文件夹中。

4、避免使用冗余的命名: 尽量避免在文件夹名称中包含冗余的信息,例如项目名称或前缀。这些信息可以通过文件路径或包管理工具来明确。

组件命名规范

1、使用PascalCase: React组件的名称应该使用PascalCase(大驼峰命名法)。这是React的一个约定,用于区分JSX中的普通HTML标签和React组件。

2、描述性名称: 组件名称应该具有描述性,能够清晰地表达组件的功能或用途。避免使用过于通用或含糊不清的名称。

3、避免使用保留字: 不要使用JavaScript的保留字或React的内置组件名称作为组件名称,以避免冲突或混淆。

4、前缀或后缀: 在某些情况下,可以使用前缀或后缀来进一步区分不同类型的组件。例如,可以使用Button、ListItem等作为具体组件的名称。

以下是一个简单的React项目结构示例,展示了如何应用上述规范:

my-react-project/  
├── src/  
│   ├── components/  
│   │   ├── Button/  
│   │   │   ├── Button.js  
│   │   │   └── Button.css  
│   │   ├── List/  
│   │   │   ├── List.js  
│   │   │   └── ListItem.js  
│   │   └── index.js  
│   ├── pages/  
│   │   ├── HomePage/  
│   │   │   ├── HomePage.js  
│   │   │   └── HomePage.css  
│   │   └── AboutPage/  
│   │        ├── AboutPage.js  
│   │        └── AboutPage.css  
│   ├── App.js  
│   └── index.js  
└── package.json

在这个示例中,我们按照功能将组件分组在components文件夹中,每个组件都有一个单独的文件夹来存放相关的JS和CSS文件。同时,我们使用了描述性的名称来命名组件和文件夹,并遵循了PascalCase命名规范。页面相关的组件和样式则放在pages文件夹中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/3012.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LLM 安全 | 大语言模型应用安全入门

一、背景 2023年以来,LLM 变成了相当炙手可热的话题,以 ChatGPT 为代表的 LLM 的出现,让人们看到了无限的可能性。ChatGPT能写作,能翻译,能创作诗歌和故事,甚至能一定程度上做一些高度专业化的工作&#x…

BUUCTF-Misc20

[ACTF新生赛2020]NTFS数据流1 1.打开附件 是一堆文件,随便打开一个内容是flag不在这 2.pyton脚本 编写查找文件夹下一堆文件中那个文件藏有flag的Python脚本 import os def search_flag_files(folder_path, flag): flag_files [] for root, dirs, files …

HAL STM32 SSI/SPI方式读取MT6701磁编码器获取角度例程

HAL STM32 SSI/SPI方式读取MT6701磁编码器获取角度例程 📍相关篇《HAL STM32 I2C方式读取MT6701磁编码器获取角度例程》📌当前最新MT6701数据手册:https://www.magntek.com.cn/upload/MT6701_Rev.1.8.pdf📜SSI协议读角度&#xff…

【stomp实战】搭建一套websocket推送平台

前面几个小节我们已经学习了stomp协议,了解了stomp客户端的用法,并且搭建了一个小的后台demo,前端页面通过html页面与后端服务建立WebSocket连接。发送消息给后端服务。后端服务将消息内容原样送回。通过这个demo我们学习了前端stomp客户端的…

剑指 Offer 03.:数组中重复的数字

剑指 Offer 03. 数组中重复的数字 找出数组中重复的数字。 在一个长度为 n 的数组 nums 里的所有数字都在 0~n-1 的范围内。数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。…

DIN特征加权、POSO特征增强、SENET特征选择

本文转自:DIN、POSO、SENet 聊聊推荐模型中常用的Attention-腾讯云开发者社区-腾讯云 一、前言 聊起模型结构的时候,经常听做推荐的同学说: "这里加了个self-attention" "类似于一个SENet" "一个魔改的POSO"…

第6章 Mybatis高级查询(详解篇)

第6章 Mybatis高级查询_详解篇 1. 一对一映射1.1 自动映射(关联的嵌套结果映射)1.2 使用 resultMap 配置一对一映射resultMap复用1.3 association 标签的嵌套结果映射resultMap复用1.4 association标签的嵌套查询结构分析嵌套查询加载方式延迟记载注意事项延迟记载:利用@Respon…

[Visual Studio 报错] error 找不到指定的 SDK“Microsoft

[Visual Studio 2022 报错] error : 找不到指定的 SDK“Microsoft.NET.Sdk.Web” 问题描述: 在新电脑上安装了VS2022,打开现有项目的解决方案后的时候报了这个错,所有projet文件都加载失败,如图所示: 报错分析及解决 打开项目配…

经验丰富也被裁了,失业快2年找不到工作?

前几天徐工说,他有个邻居,最近逮到他总是要跟他扯上几句。 原因是徐工一直是做嵌入式开发,而他一直做纯软件开发,具体不知道做后端还是前端。 他说,他至少有半年没上班了,之前在一家龙头物流公司上班。 碰上…

Netty websocket配置wss

录音配置https 导致ws连不上 Slf4j Component public class NettyServer {/*** 启动** throws InterruptedException*/private void start() throws InterruptedException {bossGroup new NioEventLoopGroup();workGroup new NioEventLoopGroup();ServerBootstrap bootstrap…

STM32 HAL库F103系列之DAC实验(二)

DAC输出正弦波实验 实验简要 1,功能描述 通过DAC1通道1(PA4)输出正弦波,然后通过DS100示波器查看波形 2,使用定时器7 TRGO事件触发转换 TEN1位置1、TSEL1[2:0]010 3,关闭输出缓冲 BOFF1位置1 4,使用DMA模式 DMAE…

SLMs之Phi-3:Phi-3的简介、安装和使用方法、案例应用之详细攻略

SLMs之Phi-3:Phi-3的简介、安装和使用方法、案例应用之详细攻略 导读:2024年4月23日,微软发布Phi-3,这是微软推出的一款新的开源AI模型家族Phi-3。背景痛点:小语言模型(SLM)尽管规模不大,但在语言理解、代码…

盲盒商城小程序(有米就出)

一款前端采用uniapp,后端采用Django框架开发的小程序,包含后台管理,如有人需要可联系演示功能(个人开发,可商用/学习)。 部分截图如下:

设备驱动-随记

1. dma_alloc_coherent函数是用于在Linux内核中为设备驱动程序分配用于DMA操作的内存区域的函数。DMA是指通过外部设备直接访问系统内存的过程,它通常用于设备之间的数据传输,比如网络数据包的接收和发送,磁盘I/O等。 这个函数在linux/dma-…

【刷题】C++ 版刷题指南

C 刷题指南(自用) 小tips:includestruct节点io输入输出练习其它 库输入迭代器stringvectordeque(双端队列)优先队列priority\_queue优先队列 tuple优先队列 结构体(自定义排序) mapsetpairtup…

文件摆渡:安全、高效的摆渡系统助力提升效率

很多组织和企业都会通过网络隔离的方式来保护内部的数据,网络隔离可以是物理隔离,也可以是逻辑隔离,如使用防火墙、VPN、DMZ等技术手段来实现,隔离之后还会去寻找文件摆渡方式,来保障日常的业务和经营需求。 进行网络隔…

Python的一些高级用法

Python的高级用法涵盖了更深入的编程技巧、设计模式、并发编程、性能优化等方面。以下是Python的一些高级用法: 1.装饰器 用于修改函数或类的行为的函数,常用于日志记录、性能分析等。 def my_decorator(func):def wrapper():print("Something i…

数据库变更时,OceanBase如何自动生成回滚 SQL

背景 在开发中,数据的变更与维护工作一般较频繁。当我们执行数据库的DML操作时,必须谨慎考虑变更对数据可能产生的后果,以及变更是否能够顺利执行。若出现意外数据丢失、操作失误或语法错误等情况,我们必须迅速将数据库恢复到变更…

jsp+springboot+java二手车交易管理系统258u6

设计而成的系统要有以下目标:管理员和用户能够跳转到不同的页面当中。因此要把系统的目标设置为如下几项: (1) 系统在操作上不能过于复杂。 (2) 用户对应着不同的角色 (3) 设计完成的数据库要有能够处理并发和安全的作用 (4) 设计完成的管理…

Python——目标检测标签中的英文名转化为对应的类别编号

Yolov5进行目标检测流程在下文中已做说明: Python——一文详解使用yolov5进行目标检测全流程(无需gpu)_yolo不用gpu-CSDN博客 在Yolov5使用中中,标签数据里类别的中文名,需要转换成类别编号。相关代码如下&#x…