본문으로 건너뛰기
cccskills
무료GitHub에 공개

React 最佳实践

React 组件设计模式、Hooks 使用指南、性能优化技巧

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(4)

  • SKILL.md1.3 KB
  • chapters/context.md1.4 KB
  • chapters/hooks.md1.3 KB
  • chapters/performance.md1.7 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

React 最佳实践

本技能包含 React 开发的最佳实践,帮助你编写高质量的 React 代码。

目录

当用户需要特定主题时,加载对应章节:

只在用户明确需要时加载完整内容,避免浪费上下文窗口。

核心原则

  1. 组件单一职责:一个组件做一件事
  2. 状态提升最小化:状态放在需要它的最近公共祖先
  3. 避免过早优化:先让它工作,再让它快
  4. 优先组合而非继承:使用 children 和 render props

快速参考

自定义 Hook 命名

// 好的命名
useUser()
useLocalStorage()
useDebounce()

// 不好的命名
fetchUser()      // 不是 use 开头
useData()        // 太模糊

组件文件结构

ComponentName/
├── index.ts           # 导出
├── ComponentName.tsx  # 组件实现
├── ComponentName.test.tsx
├── ComponentName.styles.ts
└── types.ts           # 类型定义

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

API design patterns and conventions for this project. Covers RESTful URL naming, response format standards, error handling, and authentication requirements. Use when writing or reviewing API endpoints, designing new APIs, or making decisions about request/response formats.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

huangjia2019/claude-code-engineering1.1천2026년 7월 23일 업데이트

Generate API documentation from code. Use when the user wants to document APIs, create API reference, generate endpoint documentation, or needs help with OpenAPI/Swagger specs.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

huangjia2019/claude-code-engineering1.1천2026년 7월 23일 업데이트

Generate API endpoint documentation from Express route files. Use when the user asks to generate, update, or review API docs for Express.js routes.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

huangjia2019/claude-code-engineering1.1천2026년 7월 23일 업데이트

Generate API endpoint code and documentation from specifications. Use when the user wants to create new API endpoints, generate route handlers, scaffold REST APIs, or produce OpenAPI/Swagger specs from code.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

huangjia2019/claude-code-engineering1.1천2026년 7월 23일 업데이트

Perform a comprehensive code health check on a directory. Use when the user asks to analyze code quality, find issues, or get a health report.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

huangjia2019/claude-code-engineering1.1천2026년 7월 23일 업데이트

Review code for quality, security, and best practices. Use when the user asks for code review, wants feedback on their code, mentions reviewing changes, or asks about code quality.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

huangjia2019/claude-code-engineering1.1천2026년 7월 23일 업데이트

huangjia2019의 스킬 모두 보기

이 스킬의 문제 신고