react-component-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Component Generator

React 组件生成器

When asked to create a React component, follow this process:

当需要创建React组件时，请遵循以下流程：

Step 1: Understand Requirements

步骤1：理解需求

Before generating code, clarify:

Component name and purpose
Props the component should accept
Whether it needs internal state
If it should fetch data or receive it via props

在生成代码之前，明确以下内容：

组件名称及用途
组件应接收的Props
是否需要内部状态
组件是需要获取数据还是通过Props接收数据

Step 2: Generate Component

步骤2：生成组件

Create a functional component with:

TypeScript interface for all props
Tailwind CSS for styling (no CSS modules)
Semantic HTML elements
ARIA attributes for accessibility
JSDoc comment describing the component

创建一个函数式组件，包含：

用于所有Props的TypeScript接口
使用Tailwind CSS进行样式设计（不使用CSS模块）
语义化HTML元素
用于可访问性的ARIA属性
描述组件的JSDoc注释

Component Template

组件模板

typescript

interface ${ComponentName}Props {
  /** Description of each prop */
}

/** Brief description of what this component does */
export function ${ComponentName}({ ...props }: ${ComponentName}Props) {
  return (
    <div className="...">
      {/* Implementation */}
    </div>
  );
}

typescript

interface ${ComponentName}Props {
  /** Description of each prop */
}

/** Brief description of what this component does */
export function ${ComponentName}({ ...props }: ${ComponentName}Props) {
  return (
    <div className="...">
      {/* Implementation */}
    </div>
  );
}

Step 3: Add Tests

步骤3：添加测试

Generate a co-located test file (

ComponentName.test.tsx

) with:

Render test (component mounts without errors)
Props test (renders correctly with different props)
Interaction test (click handlers, form inputs work)

生成一个同目录的测试文件（

ComponentName.test.tsx

），包含：

渲染测试（组件可正常挂载无错误）
Props测试（传入不同Props时渲染正确）
交互测试（点击事件处理、表单输入功能正常）

Rules

规则

Always use
```
function
```
declarations, not arrow functions, for components
Always export components as named exports, not default
Props interface must be exported separately
Use
```
clsx
```
or template literals for conditional classes, not ternaries in className
Never use
```
any
```
type — define proper types or use
```
unknown
```
Include
```
data-testid
```
attributes on interactive elements

组件始终使用
```
function
```
声明，而非箭头函数
始终以命名导出的方式导出组件，而非默认导出
Props接口必须单独导出
使用
```
clsx
```
或模板字面量处理条件类名，不在className中使用三元表达式
绝不使用
```
any
```
类型——定义合适的类型或使用
```
unknown
```
在可交互元素上添加
```
data-testid
```
属性