React 最佳实践

huangjia2019/claude-code-engineering

This is a structured React reference that breaks best practices into focused chapters on Hooks, Context, and performance optimization. It's designed to load content on demand rather than dumping everything into your context window at once, which is smart for keeping Claude sessions lean. The quick reference sections give you naming conventions for custom Hooks and a sensible component file structure. It covers the fundamentals you'd want junior devs to internalize: single responsibility components, minimal state lifting, and composition over inheritance. The Chinese documentation with English code examples suggests it's targeting Chinese-speaking React developers who want practical patterns without wading through theory.

GitHub stars: 826
last updated: May 30, 2026

View on GitHub

Install

$ npx -y skills add huangjia2019/claude-code-engineering --skill 'React 最佳实践' --agent claude-code

Installs into .claude/skills of the current project.

Files

React 最佳实践

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

核心原则

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

快速参考

自定义 Hook 命名

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

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

组件文件结构

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

SKILL.md on GitHub