react-ui-patterns は何をしますか？
最新のReact UIパターン：ローディング状態、エラーハンドリング、データフェッチ。UIコンポーネントの構築、非同期データの処理、UI状態の管理時にお使いください。
概要
このスキルは、Reactアプリケーションにおける一般的なUIパターン（特に非同期データの取得と状態管理に焦点を当てたもの）の実装を支援します。コンポーネントのロジックを整理し、ユーザーに一貫した体験を提供するのに役立ちます。
主な機能
- ローディング状態:
useLoadingフックを使用して、非同期処理中にローディングインジケーターを表示します。 - エラーハンドリング:
try-catchブロックとErrorBoundaryコンポーネントを組み合わせて、エラーを適切にキャッチし、ユーザーにわかりやすいエラーメッセージを表示します。 - データフェッチ:
useEffectとカスタムフックuseFetchを使用して、APIからデータを取得し、そのデータをコンポーネントの状態に反映させます。 - 状態管理: ローディング中、エラー時、データ取得成功時、空データ時の4つの状態を明確に定義し、それぞれの状態に応じたUIをレンダリングします。
使用例
function UserProfile({ userId }) {
const { data, loading, error } = useFetch(`/api/users/${userId}`);
if (loading) return <LoadingSkeleton />;
if (error) return <ErrorMessage message={error.message} />;
if (!data) return <EmptyState message="ユーザーが見つかりません" />;
return (
<div>
<h1>{data.name}</h1>
<p>{data.email}</p>
</div>
);
}
サポートするプラットフォーム
- React
- React Native (適宜調整が必要な場合があります)