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、組合、高階元件與 render props 來組織 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