mcpField
R
react

react

github.com/full-stack-skills開発2166 回インストール5 週間前に更新
リポジトリ

react について

reactは、ReactでUIを構築する開発者向けのスキルです。コンポーネント、状態、ライフサイクルに加え、Hooks、ルーティング、状態管理ライブラリ、ビルド設定を扱い、設計とパフォーマンスの指針も示します。

主な機能

  1. 01Reactコンポーネント、JSX、props、state
  2. 02HooksとカスタムHooks
  3. 03ContextまたはReduxによる状態管理
  4. 04React Routerによるルーティング
  5. 05テストとパフォーマンスの指針

活用シーン

  1. 01ReactでUIを構築
  2. 02ViteまたはCRAプロジェクトを設定
  3. 03アプリにルーティングと状態管理を追加

インストール

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

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

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

同梱ファイルagents/openai.yamlLICENSE.txt

詳細

このスキルを使う場面

ユーザーが次のことを希望する場合に、このスキルを使用します。

  • React で UI を構築し、状態とライフサイクルを管理し、Hooks またはクラスコンポーネントを使用する
  • Vite/CRA、ルーティング、状態管理ライブラリ、ビルドの最適化を設定する

このスキルの使い方

  1. 開始：create-react-app または Vite+React を使用し、コンポーネント、JSX、props/state を学びます。
  2. パターン：Hooks（useState、useEffect、カスタム Hooks）、Context または Redux、ルーティング（React Router）を使用します。
  3. 参考資料：公式ドキュメント https://react.dev/ ；テストとパフォーマンス（memo、lazy）。

ベストプラクティス

  • コンポーネントの単一責任と再利用性を意識し、状態を引き上げ、制御コンポーネントを使用します。
  • リストの key と副作用のクリーンアップに注意し、インラインオブジェクトによる再レンダリングを避けます。

キーワード

react, React Hooks, JSX, コンポーネント, 状態

コメント

Markdown 対応