mcpField
R
react-component-architecture

react-component-architecture

github.com/aj-geddes开发373677 次安装34 周前更新
代码仓库

关于 react-component-architecture

react-component-architecture 是面向 React 开发者的组件架构技能，帮助构建可维护、可扩展的组件。内容涵盖函数组件、Hooks、组合模式及 TypeScript 类型安全。

主要功能

  1. 01应用函数组件与 Hooks
  2. 02设计可复用组件模式
  3. 03开发自定义 Hooks
  4. 04使用组合模式组织界面
  5. 05结合 TypeScript 增强类型安全

适用场景

  1. 01规划大型 React 应用的组件架构
  2. 02设计组件库和可复用 UI
  3. 03开发自定义 Hooks
  4. 04优化组件性能与可维护性

安装

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

$npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill react-component-architecture

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
composition-pattern.md
custom-hooks-pattern.md
functional-component-with-hooks.md
higher-order-component-hoc.md
render-props-pattern.md
templates/
component-template.tsx

详细介绍

React 组件架构

目录

概述

使用现代模式构建可扩展、易维护的 React 组件，包括函数组件、hooks、组合模式和用于类型安全的 TypeScript。

适用场景

  • 组件库设计
  • 大型 React 应用
  • 可复用的 UI 模式
  • 自定义 hooks 开发
  • 性能优化

快速开始

最简可运行示例：

// Button.tsx
import React, { useState, useCallback } from 'react';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'md',
  disabled = false,
  onClick,
  children
}) => {
  const variantStyles = {
    primary: 'bg-blue-500 hover:bg-blue-600',
    secondary: 'bg-gray-500 hover:bg-gray-600',
    danger: 'bg-red-500 hover:bg-red-600'
  };

  const sizeStyles = {
// ... (see reference guides for full implementation)

参考指南

references/ 目录中的详细实现：

指南内容
带 Hooks 的函数组件带 Hooks 的函数组件
自定义 Hooks 模式自定义 Hooks 模式
组合模式组合模式
高阶组件（HOC）高阶组件（HOC）
Render Props 模式Render Props 模式

最佳实践

✅ 应该做
  • 遵循既定模式和约定
  • 编写简洁、易维护的代码
  • 添加适当的文档
  • 部署前进行充分测试
❌ 不应该做
  • 跳过测试或验证
  • 忽略错误处理
  • 将配置值硬编码

评论

支持 Markdown