著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Reactアプリは拡張と拡張が迅速に行われるように作られているため、微妙なバグがコードに侵入しやすくなります。 React Developer Toolsブラウザー拡張機能は、各コンポーネントの現在の状態をより深く理解できるようにすることで、これらのバグを追跡するのに役立ちます。 React Developer Toolsは、個々のコンポーネントの現在の props 、状態、および context とともに、Reactコンポーネントツリーを探索するためのインターフェースを提供します。 React Developer Toolsを使用すると、どのコンポーネントが再レンダリングされているかを判断したり、個々のコンポーネントのレンダリングにかかる時間を示すグラフを生成したりすることもできます。 この情報を使用して、非効率的なコードを追跡したり、データ量の多いコンポーネントを最適化したりできます。

このチュートリアルは、ReactDeveloperToolsブラウザー拡張機能をインストールすることから始まります。 次に、テキストアナライザーをテストアプリケーションとして構築します。このアナライザーは、テキストのブロックを取得し、単語数、文字数、文字数などの情報を表示します。 最後に、React Developer Toolsを使用して、テキストアナライザーのコンポーネントを探索し、変化する小道具とコンテキストを追跡します。 例ではChromeブラウザを使用しますが、Firefoxのプラグインを使用することもできます。

このチュートリアルが終了するまでに、React Developer Toolsを使用して、Reactプロジェクトのデバッグと探索を開始できるようになります。

前提条件