mcpField
R
react-expert

react-expert

github.com/jeffallan开发12.1k5.5k 次安装今天更新
代码仓库

关于 react-expert

面向 React 应用开发与维护的技能，供工程师使用。内容涵盖 React 19、Server Components、TypeScript、状态和数据获取模式、无障碍、性能优化与测试。

主要功能

  1. 01React 19 与 Server Components
  2. 02TypeScript 组件实现
  3. 03状态管理与数据获取模式
  4. 04性能优化与无障碍设计
  5. 05React Testing Library 测试

适用场景

  1. 01构建 React 组件与功能
  2. 02实现 React 19 表单
  3. 03选择状态管理和数据获取方式
  4. 04测试并优化 React 应用

安装

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

$npx skills add https://github.com/jeffallan/claude-skills --skill react-expert

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

包含的文件

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

references/
hooks-patterns.md
migration-class-to-modern.md
performance.md
react-19-features.md
server-components.md
state-management.md
testing-react.md

详细介绍

React 专家

资深 React 专家，深入掌握 React 19、Server Components 和生产级应用架构。

何时使用此技能

  • 构建新的 React 组件或功能
  • 实现状态管理（本地状态、Context、Redux、Zustand）
  • 优化 React 性能
  • 搭建 React 项目架构
  • 使用 React 19 Server Components
  • 使用 React 19 actions 实现表单
  • 使用 TanStack Query 或 use() 的数据获取模式

核心工作流

  1. 分析需求 - 确定组件层级、状态需求和数据流
  2. 选择模式 - 选择合适的状态管理方式和数据获取方案
  3. 实现 - 编写类型正确的 TypeScript 组件
  4. 验证 - 运行 tsc --noEmit；如果失败，请检查报告的错误，修复所有类型问题，然后重新运行，直至通过后再继续
  5. 优化 - 在需要时应用记忆化，并确保可访问性；如果引入了新的类型错误，则返回步骤 4
  6. 测试 - 使用 React Testing Library 编写测试；如果任何断言失败，请在提交前排查并修复

参考指南

根据上下文加载详细指南：

主题参考资料加载时机
Server Componentsreferences/server-components.mdRSC 模式、Next.js App Router
React 19references/react-19-features.mduse() hook、useActionState、表单
状态管理references/state-management.mdContext、Zustand、Redux、TanStack
Hooksreferences/hooks-patterns.md自定义 hooks、useEffect、useCallback
性能references/performance.mdmemo、lazy、虚拟化
测试references/testing-react.mdTesting Library、模拟
类组件迁移references/migration-class-to-modern.md将类组件转换为 hooks/RSC

关键模式

Server Component（Next.js App Router）
// app/users/page.tsx — Server Component, no "use client"
import { db } from '@/lib/db';

interface User {
  id: string;
  name: string;
}

export default async function UsersPage() {
  const users: User[] = await db.user.findMany();

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
使用 useActionState 的 React 19 表单
'use client';
import { useActionState } from 'react';

async function submitForm(_prev: string, formData: FormData): Promise<string> {
  const name = formData.get('name') as string;
  // perform server action or fetch
  return `Hello, ${name}!`;
}

export function GreetForm() {
  const [message, action, isPending] = useActionState(submitForm, '');

  return (
    <form action={action}>
      <input name="name" required />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Submitting…' : 'Submit'}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
}
带清理逻辑的自定义 Hook
import { useState, useEffect } from 'react';

function useWindowWidth(): number {
  const [width, setWidth] = useState(() => window.innerWidth);

  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler); // cleanup
  }, []);

  return width;
}

约束

必须做到
  • 使用启用严格模式的 TypeScript
  • 实现错误边界，以便优雅地处理故障
  • 正确使用 key 属性（稳定且唯一的标识符）
  • 清理 effect（返回清理函数）
  • 使用语义化 HTML 和 ARIA，确保可访问性
  • 向已记忆化的子组件传递回调/对象时进行记忆化
  • 为异步操作使用 Suspense 边界
禁止事项
  • 直接修改状态
  • 将数组索引用作动态列表的 key
  • 在 JSX 中创建函数（会导致重新渲染）
  • 忘记清理 useEffect（会造成内存泄漏）
  • 忽略 React strict mode 警告
  • 在生产环境中跳过错误边界

输出模板

实现 React 功能时，请提供：

  1. 含 TypeScript 类型的组件文件
  2. 如果逻辑并非简单，则提供测试文件
  3. 对关键决策的简要说明

知识参考

React 19、Server Components、use() hook、Suspense、TypeScript、TanStack Query、Zustand、Redux Toolkit、React Router、React Testing Library、Vitest/Jest、Next.js App Router、可访问性（WCAG）

由 @jeffallan 维护，@jeffallan 是 Synergetic Solutions 的首席顾问。

文档

评论

支持 Markdown