React開発ツールの使用方法

Reactアプリケーションを構築するときに絶対にインストールする必要があるこの非常に便利なツールを学びましょう。

たとえばNext.jsアプリケーションのようなReactアプリケーションを構築するときに絶対にインストールする必要がある非常に便利なツールの1つは、React DeveloperToolsです。

両方で利用可能クロムそしてFirefox、React Developer Toolsは、Reactアプリケーションを検査するために使用できる重要な手段です。

これらは、ページを構築するReactコンポーネントツリーを明らかにするインスペクターを提供し、コンポーネントごとに、小道具、状態、フックなどを確認できます。

React Developer Toolsをインストールしたら、通常のブラウザーdevtoolsを開くことができます(Chromeでは、ページを右クリックして、Inspect)そしてあなたは2つの新しいパネルを見つけるでしょう:コンポーネントそしてプロファイラー

コンポーネントの上にマウスを移動すると、ページ内で、ブラウザがそのコンポーネントによってレンダリングされるパーツを選択することがわかります。

ツリー内のコンポーネントを選択すると、右側のパネルにへの参照が表示されます親コンポーネント、およびそれに渡された小道具:

コンポーネント名をクリックすると、簡単にナビゲートできます。

開発者ツールツールバーの目のアイコンをクリックしてDOM要素を調べることができます。また、最初のアイコンであるマウスアイコン(同様の通常のDevToolsアイコンの下にある便利なアイコン)を使用する場合は、で要素にカーソルを合わせることができます。ツールバーのUIを使用して、レンダリングするReactコンポーネントを直接選択します。

あなたは使用することができますbugアイコンを使用して、コンポーネントデータをコンソールに記録します。

データを印刷したら、任意の要素を右クリックして[グローバル変数として保存]を押すことができるので、これは非常に素晴らしいことです。たとえば、ここで私はそれをurl小道具、そしてそれに割り当てられた一時変数を使用してコンソールでそれを検査することができました、temp1

使用するソースマップ、開発モードでNext.jsによって自動的にロードされる、コンポーネントパネルからクリックできます<>コードとDevToolsが[ソース]パネルに切り替わり、コンポーネントのソースコードが表示されます。

ザ・プロファイラー可能であれば、タブはさらに素晴らしいです。それは私たちがすることを可能にします相互作用を記録するアプリで、何が起こるかを確認します。インタラクションを作成するには少なくとも2つのコンポーネントが必要であり、現在は1つしかないため、まだ例を示すことはできません。これについては後で話します。

Chromeを使用してすべてのスクリーンショットを表示しましたが、React DeveloperToolsはFirefoxでも同じように機能します。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: