mcpField
R
react-components

react-components

github.com/langchain-ai開発11985 回インストール12 週間前に更新
リポジトリ

react-components について

保守しやすい React コンポーネントの設計パターンを開発者向けに示すスキルです。関数コンポーネント、フック、コンポーネント合成を扱います。

主な機能

  1. 01フックを使った関数コンポーネント
  2. 02再利用可能なカスタムフック
  3. 03プロップドリリングを避ける合成

活用シーン

  1. 01フックを使った React コンポーネントの構成
  2. 02非同期処理のカスタムフック化
  3. 03プロップドリリングを抑えるコンポーネント合成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/langchain-ai/skills-benchmarks --skill react-components

インストール後、Claude Code で/react-componentsを入力して読み込まれたか確認します。

詳細

React コンポーネントのパターン

最新のパターンを使って、保守しやすい React コンポーネントを構築します。

フックを使った関数コンポーネント

クラスコンポーネントよりも、常に関数コンポーネントを優先してください。

import { useState, useEffect, useCallback } from 'react';

interface UserProps {
  userId: string;
  onUpdate?: (user: User) => void;
}

export function UserProfile({ userId, onUpdate }: UserProps) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(setUser).finally(() => setLoading(false));
  }, [userId]);

  const handleSave = useCallback(async (data: UserData) => {
    const updated = await updateUser(userId, data);
    setUser(updated);
    onUpdate?.(updated);
  }, [userId, onUpdate]);

  if (loading) return <Skeleton />;
  if (!user) return <NotFound />;

  return <UserForm user={user} onSave={handleSave} />;
}

カスタムフック

再利用可能なロジックをカスタムフックに切り出します。

function useAsync<T>(asyncFn: () => Promise<T>, deps: any[]) {
  const [state, setState] = useState<AsyncState<T>>({
    loading: true,
    error: null,
    data: null,
  });

  useEffect(() => {
    setState(s => ({ ...s, loading: true }));
    asyncFn()
      .then(data => setState({ loading: false, error: null, data }))
      .catch(error => setState({ loading: false, error, data: null }));
  }, deps);

  return state;
}

コンポーネントの合成

プロパティのバケツリレーよりも、コンポーネントの合成を使用します。

<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>{content}</Card.Body>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card>

コメント

Markdown 対応