React Component Architecture

aj-geddes/useful-ai-prompts/skills/react-component-architecture

作者 aj-geddes3f5182cfd739无许可证355 个星标收录于 2026年10月8日更新于 2026年10月8日仓库7个月前更新

Design scalable React components using functional components, hooks, composition patterns, and TypeScript. Use when building reusable component libraries and maintainable UI systems.

仅含说明Software Development

AI 生成的概览

指导使用函数组件、Hooks、组合模式和 TypeScript 设计可扩展的 React 组件。

功能: 提供关于使用函数组件、Hooks、组合、高阶组件和渲染属性来组织 React 组件的指导与参考资料，并使用 TypeScript 保证类型安全。内容包含快速入门示例、references 目录中的参考指南以及一个组件模板文件。产出是架构指导与代码模式，而非生成的应用。
适用场景: 适用于设计可复用组件库、构建大型 React 应用，或建立可复用 UI 模式与自定义 Hooks 的场景。也适用于优化组件结构与可维护性。
运行要求: 除智能体外无需脚本或运行时；该技能为说明与参考文档。TypeScript 和 React 是主题内容，而非执行依赖。

Overview

Build scalable, maintainable React components using modern patterns including functional components, hooks, composition, and TypeScript for type safety.

When to Use

Component library design
Large-scale React applications
Reusable UI patterns
Custom hooks development
Performance optimization

Quick Start

Minimal working example:

typescript

// Button.tsximport 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)

// Button.tsximport 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)

Reference Guides

Detailed implementations in the references/ directory:

Guide	Contents
Functional Component with Hooks [blocked]	Functional Component with Hooks
Custom Hooks Pattern [blocked]	Custom Hooks Pattern
Composition Pattern [blocked]	Composition Pattern
Higher-Order Component (HOC) [blocked]	Higher-Order Component (HOC)
Render Props Pattern [blocked]	Render Props Pattern

Best Practices

✅ DO

Follow established patterns and conventions
Write clean, maintainable code
Add appropriate documentation
Test thoroughly before deploying

❌ DON'T

Skip testing or validation
Ignore error handling
Hard-code configuration values

来源与署名

来源：aj-geddes/useful-ai-prompts位于skills/react-component-architecture提交3f5182c

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

React Component Architecture

React Component Architecture

Table of Contents

Overview

When to Use

Quick Start

Reference Guides

Best Practices

✅ DO

❌ DON'T

来源与署名

更多来自 aj-geddes/useful-ai-prompts 的技能

Xss Prevention

Wireframe Prototyping

Web Performance Optimization

Vue Application Structure

Visual Regression Testing

User Persona Creation

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices