mcpField
R
react-coder

react-coder

github.com/majesticlabs-dev开发5063 次安装7 周前更新
代码仓库

关于 react-coder

react-coder 是用于创建现代 React 组件的编码技能，采用 TypeScript、hooks 和可维护的模式。它涵盖组件结构、性能优化方法，以及实现结果的汇报格式。

主要功能

  1. 01使用 hooks 编写函数组件
  2. 02为属性和事件处理器添加类型
  3. 03组织可复用组件
  4. 04记忆化与代码分割
  5. 05实现结果汇报格式

适用场景

  1. 01创建带类型的 React 界面组件
  2. 02整理组件文件
  3. 03优化重复渲染
  4. 04准备组件实现说明

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill react-coder

安装后在 Claude Code 中输入/react-coder确认已加载。

详细介绍

React Coder

使用 TypeScript、hooks 和最佳实践编写现代 React 组件。创建简洁、高性能且易于维护的代码。

技术栈假设

技术默认值
React18+，支持并发特性
TypeScript用于类型安全
组件使用 hooks 的函数组件
包管理器pnpm
构建工具Vite 或 Next.js
样式Tailwind CSS
测试Vitest 或 Jest

组件模式

基本函数组件
import { FC } from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

export const Button: FC<ButtonProps> = ({
  label,
  onClick,
  variant = 'primary',
  disabled = false
}) => {
  const baseClasses = 'px-4 py-2 rounded-md font-medium transition-colors';
  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-400',
    secondary: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
  };

  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`${baseClasses} ${variantClasses[variant]}`}
    >
      {label}
    </button>
  );
};
带子元素的组件
import { FC, ReactNode } from 'react';

interface CardProps {
  title: string;
  children: ReactNode;
  footer?: ReactNode;
}

export const Card: FC<CardProps> = ({ title, children, footer }) => {
  return (
    <div className="bg-white shadow rounded-lg overflow-hidden">
      <div className="px-6 py-4 border-b border-gray-200">
        <h3 className="text-lg font-medium text-gray-900">{title}</h3>
      </div>
      <div className="px-6 py-4">{children}</div>
      {footer && (
        <div className="px-6 py-4 bg-gray-50 border-t border-gray-200">
          {footer}
        </div>
      )}
    </div>
  );
};

TypeScript 模式

使用泛型的 Props
interface SelectProps<T> {
  options: T[];
  value: T;
  onChange: (value: T) => void;
  getLabel: (option: T) => string;
  getValue: (option: T) => string;
}

export function Select<T>({ options, value, onChange, getLabel, getValue }: SelectProps<T>) {
  return (
    <select
      value={getValue(value)}
      onChange={(e) => {
        const selected = options.find(opt => getValue(opt) === e.target.value);
        if (selected) onChange(selected);
      }}
    >
      {options.map((option) => (
        <option key={getValue(option)} value={getValue(option)}>
          {getLabel(option)}
        </option>
      ))}
    </select>
  );
}
事件处理器类型
import { MouseEvent, ChangeEvent, KeyboardEvent } from 'react';

const handleClick = (e: MouseEvent<HTMLButtonElement>) => { ... }
const handleChange = (e: ChangeEvent<HTMLInputElement>) => { ... }
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => { ... }

文件组织

src/
├── components/
│   ├── ui/              # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── Input.tsx
│   ├── forms/           # Form components
│   └── layout/          # Layout components
├── hooks/               # Custom hooks
│   ├── useApi.ts
│   ├── useForm.ts
│   └── useLocalStorage.ts
├── pages/               # Page components
├── types/               # TypeScript types
└── utils/               # Utility functions

性能优化

技术使用场景
useMemo开销较大的计算（排序、筛选）
useCallback传递给经过记忆化处理的子组件的函数
memo经常使用相同 props 重新渲染的纯组件
lazy + Suspense对路由和大型组件进行代码拆分

输出格式

创建组件后：

  1. 创建的文件 - 列出新文件及其路径
  2. 组件 - 关键组件及其用途
  3. Hooks - 创建的自定义 hooks
  4. 类型 - 定义的 TypeScript 接口/类型
  5. 后续步骤 - 测试、集成、样式

评论

支持 Markdown