react

Name: react
Author: hairyf

github.com/hairyf開発26192 回インストール3 週間前に更新

リポジトリ

react について

JavaScriptでユーザーインターフェースを構築する開発者向けのReactスキルです。React API、フック、パフォーマンス、DOM描画、テストの資料と利用上の指針をまとめています。

主な機能

01主要なフックとAPIのガイド
02パフォーマンス最適化の資料
03React DOMとサーバーコンポーネント
04テストとコンポーネントの実践

活用シーン

01状態管理やEffectの使い方を調べる
02コード分割やメモ化の方法を確認する
03コンポーネントとフックの実践を確認する

インストール

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

$npx skills add https://github.com/hairyf/skills --skill react

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

GENERATION.md

references/

advanced-profiler.md

advanced-usedebugvalue.md

advanced-useeffectevent.md

advanced-useimperativehandle.md

advanced-useinsertioneffect.md

advanced-usesyncexternalstore.md

best-practices-purity.md

best-practices-rules-of-hooks.md

core-createcontext.md

core-fragment.md

core-memo.md

core-strictmode.md

core-suspense.md

core-usecontext.md

core-useeffect.md

core-usereducer.md

core-useref.md

core-usestate.md

features-activity.md

features-lazy.md

features-starttransition.md

features-use.md

features-useactionstate.md

features-usecallback.md

features-usedeferredvalue.md

features-useid.md

features-uselayouteffect.md

features-usememo.md

features-useoptimistic.md

詳細

React

このスキルはReactに基づいており、2026-01-31に生成されました。

Reactはユーザーインターフェイスを構築するためのJavaScriptライブラリです。「コンポーネント」と呼ばれる小さく独立したコード単位を組み合わせて、複雑なUIを構成できます。Reactは宣言型のパラダイムを採用しているため、アプリケーションを理解しやすく、効率性と柔軟性の両立を目指しています。

コアリファレンス

トピック	説明	リファレンス
useState	直接更新によってコンポーネントの状態を管理するフック	core-usestate
useEffect	外部システムとコンポーネントを同期するフック	core-useeffect
useContext	コンテキストの値を読み取り、更新を購読するフック	core-usecontext
useRef	再レンダーを発生させない値を参照するフック	core-useref
useReducer	reducer関数で複雑な状態を管理するフック	core-usereducer
Suspense	コンテンツの読み込み中にフォールバックUIを表示するコンポーネント	core-suspense
memo	コンポーネントのレンダーをメモ化する高階コンポーネント	core-memo
createContext	コンテキストオブジェクトを作成するAPI	core-createcontext
Fragment	ラッパーノードを追加せずに要素をグループ化するコンポーネント	core-fragment
StrictMode	開発時の追加チェックを有効にするコンポーネント	core-strictmode

機能

パフォーマンスの最適化

トピック	説明	リファレンス
useMemo	コストの高い計算結果をキャッシュするフック	features-usememo
useCallback	関数定義をキャッシュするフック	features-usecallback
lazy	コード分割とコンポーネントの遅延読み込みを行うAPI	features-lazy
useTransition	ブロッキングを伴わない状態更新を行うフック	features-usetransition
useDeferredValue	重要度の低いUI更新を遅延させるフック	features-usedeferredvalue
useLayoutEffect	ブラウザーの再描画前に同期的に実行されるフック	features-uselayouteffect
startTransition	ブロッキングを伴わない状態更新としてマークするAPI	features-starttransition

高度なフック

トピック	説明	リファレンス
useId	アクセシビリティのための一意なIDを生成するフック	features-useid
use	PromiseとContextの値を読み取るAPI	features-use
useActionState	フォームアクションの状態を管理するフック	features-useactionstate
useOptimistic	楽観的なUI更新を行うフック	features-useoptimistic
useInsertionEffect	CSS-in-JSライブラリがスタイルを挿入するためのフック	advanced-useinsertioneffect
useSyncExternalStore	外部ストアの更新を購読するフック	advanced-usesyncexternalstore
useImperativeHandle	refのハンドルをカスタマイズするフック	advanced-useimperativehandle
useEffectEvent	Effectからリアクティブではないロジックを切り出すフック	advanced-useeffectevent
useDebugValue	DevToolsでカスタムフックにラベルを追加するフック	advanced-usedebugvalue

React DOM API

トピック	説明	リファレンス
createRoot	React コンポーネントをレンダリングするルートを作成する API	react-dom-createroot
hydrateRoot	サーバーでレンダリングされた HTML をハイドレーションする API	react-dom-hydrateroot
createPortal	子要素を別の DOM ノードにレンダリングする API	react-dom-createportal
flushSync	同期的な更新を強制する API	react-dom-flushsync

React サーバーコンポーネント

トピック	説明	リファレンス
cache	サーバーコンポーネントで関数の結果をキャッシュする API	rsc-cache

高度なコンポーネント

トピック	説明	リファレンス
Profiler	レンダリングパフォーマンスを測定するコンポーネント	advanced-profiler
Activity	UI の状態を非表示にして復元するコンポーネント	features-activity

テスト

トピック	説明	リファレンス
act	アサーションの前に保留中の更新を適用するテストヘルパー	testing-act

ベストプラクティス

トピック	説明	リファレンス
Rules of Hooks	React Hooks を正しく使用するための基本ルール	best-practices-rules-of-hooks
Component Purity	React コンポーネントとフックを純粋に保つためのルール	best-practices-purity

主な推奨事項

フックはトップレベルで使用する - フックを条件分岐やループ内で呼び出さないでください
コンポーネントを純粋に保つ - コンポーネントは冪等であり、レンダリング中に副作用を持たないようにしてください
副作用には useEffect を使用する - Effects を使用して外部システムと同期します
コストの高い計算をメモ化する - 負荷の高い計算には useMemo を、メモ化されたコンポーネントに渡す関数には useCallback を使用します
lazy でコードを分割する - ルートベースのコード分割には lazy と Suspense を使用します
早すぎる最適化を避ける - まずプロファイルを作成し、必要な場合にのみ最適化します
React Compiler を使用する - 自動メモ化に React Compiler の使用を検討してください
依存関係を正しく処理する - Effect とメモ化の依存関係には、すべてのリアクティブな値を必ず含めてください

Markdown 対応

ログインしてコメント

基本情報

作者: hairyf
リポジトリ: hairyf/skills
カテゴリ: 開発
インストール数: 192
GitHub スター: 26

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

design-mobile-apps

github.com/designed-by-ai

1.2M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

vercel-react-best-practices

github.com/vercel-labs

873.8k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。