⚡

React组件开发指南Skill react-component-dev

这个技能提供React/TypeScript组件开发的最佳实践指南，适用于前端开发，涵盖组件架构、TailwindCSS样式、状态管理、性能优化和可访问性。关键词：React, TypeScript, 前端开发, 组件开发, TailwindCSS, 性能优化, 可访问性。

前端开发 0 次安装 0 次浏览 更新于 3/18/2026

name: react-component-dev description: 用于Gemini-Subtitle-Pro的React/TypeScript组件开发指南。在创建组件、页面、模态框、表单或使用TailwindCSS、钩子和React 19模式时使用。涵盖组件架构、Tailwind样式、状态管理、性能优化和可访问性。

React 组件开发指南

目的

使用React 19、TypeScript 5.8和TailwindCSS 4为Gemini-Subtitle-Pro建立React组件的一致性和最佳实践。

何时使用此技能

在以下工作中自动激活：

  • 创建或修改React组件
  • 构建页面、模态框、对话框、表单
  • 使用TailwindCSS进行样式设计
  • 使用React钩子
  • 实现状态管理
  • 性能优化

快速开始

新组件清单

  • [ ] 位置: 放置在 src/components/[feature]/
  • [ ] TypeScript: 定义正确的props接口
  • [ ] 样式: 使用TailwindCSS配合 clsx 和 tw-merge
  • [ ] 路径别名: 使用 @components/*, @hooks/* 等
  • [ ] 状态: 使用适当的状态模式（本地、上下文等）
  • [ ] i18n: 对所有面向用户的文本使用 useTranslation

组件架构

文件组织

src/components/
├── common/              # 共享组件 (Button, Modal, 等)
├── layout/              # 布局组件 (Header, Sidebar, 等)
├── subtitle/            # 字幕相关组件
├── settings/            # 设置组件
├── workspace/           # 工作空间组件
└── [feature]/           # 特定功能组件

命名约定

  • 组件: PascalCase - SubtitleEditor.tsx
  • 钩子: camelCase 带有 use 前缀 - useSubtitleParser.ts
  • 工具: camelCase - formatTimestamp.ts

核心原则

1. 始终使用路径别名

// ❌ 永远不要: 相对路径
import { Button } from '../../components/common/Button';

// ✅ 始终: 路径别名
import { Button } from '@components/common/Button';
import { useWorkspace } from '@hooks/useWorkspace';
import { SubtitleEntry } from '@types/subtitle';

2. 定义Props接口

// ✅ 始终: 清晰的prop类型
interface SubtitleEditorProps {
  entries: SubtitleEntry[];
  onUpdate: (index: number, entry: SubtitleEntry) => void;
  isReadOnly?: boolean;
}

export function SubtitleEditor({ entries, onUpdate, isReadOnly = false }: SubtitleEditorProps) {
  // ...
}

3. 使用TailwindCSS配合clsx

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

// ✅ 条件类
<div className={twMerge(clsx(
  'rounded-lg p-4',
  isActive && 'bg-blue-500 text-white',
  isDisabled && 'opacity-50 cursor-not-allowed'
))}>

4. 对所有文本使用i18n

import { useTranslation } from 'react-i18next';

export function SettingsPanel() {
  const { t } = useTranslation();

  return (
    <h1>{t('settings.title')}</h1>
  );
}

资源文件

有关详细指南，请参阅资源目录：