このスキルとほか 2,500+ 件を、チャットの中で
$9/月 いつでも解約可能、または年額 $59
- 2,500+ のスキル、プロンプトパック、エージェントすべてを、頼んだ瞬間に読み込み
- ダウンロードも貼り付けも不要。Claude、ChatGPT、Claude Code、Cursor で一度接続するだけ
- 毎週新しいスキルを追加、カタログのファイルを月10件までダウンロード可能
AI Reactチューター
$19
商品情報へスキップ
AI Reactチューター
どのコンポーネントが再レンダリングされた理由も説明でき、状態を最初から適切な場所に配置できます。
$19
このスキル
1回払い
ずっとあなたのもの
プロンプトファイル すぐにダウンロード
Library プラン
このスキルとほか2,500+点を手に入れる
$9/月 または年額 $59
Library を始める · $9/月Library を始める
このスキルを7日間無料で試す無料で試す
- 7日間無料、カード不要
- いつでも解約可能
- 初回のお支払いは30日間返金保証
請求は一切ありません。トライアル終了の2日前に、初回のお支払いに使える−30%コードが届きます。
- 1つのコネクタで Claude、ChatGPT、Claude Code、Codex、Cursor の中で使えます
- すべてのスキル、プロンプトパック、エージェントに加え、トライアル中は AI CRM とツールも
- いつでも解約可能
このスキルだけが必要ですか？
ファイル1点、買い切り。アップデートなし、コネクタなし。
Library の約2か月分と同じくらいの価格です。
$19
Pay once, keep foreverInstant download30-day money-back guarantee
Stripe による安全な決済
各商標はそれぞれの所有者に帰属します。KissMySkillsはこれらの企業と提携しておらず、承認も受けていません。
使い方
Ask it something hard.
再レンダリングが多すぎて、何がループしているのか分かりません。
CLAUDE · WITH THIS SKILL
コンポーネント全体のリクエストを受け取る。その行のエラーを指しているわけではない -> set 関数を呼び出している行と、そのうちレンダー中に実行されるものがあるかどうかについての質問 -> onClick={setOpen(true)} はボタン上にあるという回答 -> 関数を渡すことと関数を呼び出すことの違いを簡単に説明 -> 別のコンポーネントで、両方の形式を横並びにした実例を示す -> 次に、レンダー時に onClick プロパティが実際に受け取る値を答えてもらう -> setOpen を呼び出した結果を受け取っていることを確認する -> その概念の名称を示す。イベントハンドラーが受け取るのは関数であり、その結果ではない -> 次のアクション：ファイル内のすべてのハンドラーを確認し、同じ形式になっていないか調べる。
または、すべてのスキルを AI の中に。
購入前のご質問は？ 担当者が通常その日のうちにお答えします： hello@kissmyskills.com
// ファイルそのもの
購入前に中身を読めます。
AI が読むファイルの冒頭部分を、納品されるそのままの形で掲載しています。ページ用の書き換えは一切ありません。
名前で呼びましょう
ファイルを読み込んだら、名前で話しかけてください：「Serge、このページを見て。」名前はそのためにあります。1つのチャットで複数のスキルを使い分けるのにも役立ちます。
ファイルを読み込んだら、名前で話しかけてください：「Serge、このページを見て。」名前はそのためにあります。1つのチャットで複数のスキルを使い分けるのにも役立ちます。
// あなたのAIを動かすskill
あなたはソクラテス式のReactチューターです。学習者はすでにJavaScriptを書けるため、フックの前にレンダリングモデルを教えます。コンポーネントがなぜ実行されたのか、またその状態をどこに置くべきかを説明するよう起動されました。
// 中身
このスキルの中身
- フックを使う前に学ぶべきレンダリングモデル
- おそらく、そのuseEffectは必要ありません。その理由を説明します
- キー、古いクロージャ、過剰な再レンダリングを原因から解説
- メモ化は最後に。問題を測定できる場合にのみ使いましょう
フロントエンド開発に移行するJavaScript開発者、チュートリアル段階を終えたブートキャンプ卒業生、そしてUIに触れる必要があるバックエンド開発者。
// 2つの入手方法
AI の中で使うか、一度だけダウンロードするか。
このスキルだけをファイルで
$19 1回払い
- 購入後にダウンロードして、どの AI チャットにも貼り付けられます
- ファイル1つ、アップデートなし、コネクタなし
- 30日間返金保証
Library または Both をご利用中ですか？ これは含まれているので、ファイルを購入する必要はありません。
実際に購入するもの
このReact JSチューターは、ToDoリストは作れるものの、なぜコンポーネントが4回レンダリングされたのか、なぜuseEffect内の値が古いままなのか、あるいはそのstateを本当はどこに置くべきなのかを説明できない段階の人向けです。ほぼすべてのReactの問題は、根底では1つの問題に行き着きます。だからこのファイルは、まずそこから始まります。最初にレンダリングモデル、次にフック、最後にライブラリです。
これをClaude、ChatGPT、またはGeminiに貼り付けると、再レンダリングを引き起こすものについての質問を1つして、あなたの理解度を見極めます。その後、レッスンは順番に進みます。stateと再レンダリング、propsとstateのリフトアップ、リストとkey、制御された入力、useEffectと、実際にはuseEffectが不要な、はるかに一般的なケース、フックのルール、contextとその限界、データ取得、そして何かを測定できるようになってから行うメモ化です。コンポーネントがループするときは、修正方法を説明する前に、レンダリング中にstateを設定している行はどれかを尋ねます。
同じファイルで、Claude、ChatGPT、Geminiのどれでも同じ動作をします。支払いは1回のみで、サブスクリプションは不要。セットアップには約1分かかります。
// インストール方法
2分未満
4つのステップ。どんなAIチャットでも。
- 01ファイルをダウンロード
購入後、ダウンロードリンクがメールで届きます。.txtファイルを端末の好きな場所に保存してください。
- 02AIチャットを開く
すでに使っているAIチャットならどれでも：Claude、ChatGPT、Gemini、Grok、Copilot など。
- 03プロンプトを貼り付ける
.txtファイルを開き、プロンプト部分をコピーしてClaudeやChatGPTに貼り付けます。プロジェクトに追加しておけばいつでも使えます。
- 04作業を開始する
あなたのAIは専門家として設定されています。専門分野について何でも質問してください。
技術的な知識は必要ありません。サブスクリプション不要。一度支払えば、ずっと使えます。.
Libraryなら、ダウンロードは不要です。 AIを一度接続すれば、あとはどのスキルも名前で呼び出せます。
// faq
この製品についての質問
このReact JSチューターは、私の代わりにコンポーネントを作ってくれますか？+
このファイルでは、それを禁じています。課題を出すと、チューターは別のコンポーネントで同じパターンを示せますが、あなたのものは書きません。壊れたコードを貼り付けると、どの行が状態を変更し、その行がいつ実行されるのかを尋ねます。修正はあなた自身が行います。大切なのは、来週には自力でレンダリングループをデバッグできるようになることです。
フックとクラスコンポーネントのどちらを教えますか？+
関数コンポーネントとフックだけです。クラスは、リポジトリ内の古いコードを見ても混乱しないように、一度だけ簡単に登場します。順番には意図があります。まずレンダリングモデル、次にuseState、その後にpropsと状態のリフトアップ、そしてかなり後になってからuseEffectです。初心者が書くuseEffectの呼び出しの多くは、そもそも必要ないからです。
Next.jsやReduxなど、エコシステムの他のものについてはどうですか？+
まずReact、その後にツールです。基礎が固まったら、ルーティング、TanStack Queryを使ったデータ取得、Contextで十分な場合と状態管理ライブラリを使う価値がある場合、そしてNext.jsのServer Componentによって何が変わるのかを扱います。このエコシステムはどんなファイルよりも速く変化するため、パッケージのバージョンは慎重に示し、不確かな場合はそう明記します。
自分で読まなければいけませんか？+
いいえ。このファイルはあなたが読むためではなく、あなたのAIが読むために書かれています。アップロードするか、一度貼り付ければ、AIがその役割を引き受けます。その後は、普段どおりに質問するだけです。開いて読んでも構いませんが、ここにある内容は、あなたが読むことを前提としていません。
AIを専門化する準備はできましたか？
これとほか 2,500+ 件を、Claude・ChatGPT・Claude Code・Codex・Cursor の中で。いつでも解約できます。