react js文件命名

在React项目中，文件命名是一个重要的实践，它有助于保持代码的组织性和可维护性。以下是一些基础概念和相关建议：

基础概念

组件文件命名：
- 使用大驼峰命名法（PascalCase），例如 MyComponent.js。
- 对于函数式组件，通常也会使用大驼峰命名法。

样式文件命名：
- 可以与组件同名，但扩展名为 .css 或 .scss，例如 MyComponent.css。
- 使用CSS模块时，文件名可以包含 -module 后缀，例如 MyComponent.module.css。
测试文件命名：
- 测试文件通常放在与组件相同的目录下，文件名以 .test.js 或 .spec.js 结尾，例如 MyComponent.test.js。
容器组件与展示组件：
- 容器组件（负责数据获取和状态管理）可以命名为 Container 后缀，例如 UserContainer.js。
- 展示组件（仅负责渲染UI）可以命名为 Component 后缀，例如 UserComponent.js。

类型与应用场景

组件文件：适用于所有React组件，无论是函数式还是类组件。
样式文件：与特定组件关联的样式表，支持CSS-in-JS或传统CSS。
测试文件：用于编写单元测试和集成测试，确保组件的正确性。

示例代码

假设我们有一个简单的React函数式组件 Button.js：

// src/components/Button.js
import React from 'react';
import styles from './Button.module.css';

const Button = ({ label, onClick }) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

对应的样式文件 Button.module.css：

/* src/components/Button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

以及测试文件 Button.test.js：

// src/components/Button.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders button with label', () => {
  const { getByText } = render(<Button label="Click me" />);
  const buttonElement = getByText(/Click me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('calls onClick prop when clicked', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button label="Click me" onClick={handleClick} />);
  fireEvent.click(getByText(/Click me/i));
  expect(handleClick).toHaveBeenCalledTimes(1);
});