React Developer Toolsを使用してReact.jsエクスプローラをChromeに追加する

すべてのWeb開発者はすでに驚くべきことについて知っているはずです Chromeデベロッパーツール. この機能は Chromeに組み込まれている そしてそれは開発者を可能にします ページを調べる そして 要素を編集または削除する ブラウザ内から直接.

それは信じられないほど強力であり、それがするための最良の方法です 学習ページの動作 待ち時間、ページリソース、コンソールコマンドの実行など.

Facebookのチームが作成した React.js フロントエンド開発者のためのレイヤを抽象化するライブラリ 特定のUI要素を再利用する.

そして今、 React開発者ツール あなたはできる これらの要素階層を調べる そして ページ上で編集してください.

これは 完全無料エクステンション そしてそれは Facebookの人々によって開発された だからあなたはそれが良質であることを知っています.

あなたもすることができます オブジェクトツリーのさまざまな状態とパスを研究する どの要素が他の要素の上下にあるかを含む.

サイドバーでは、 小道具や州を閲覧する これにより、同じツリー内の他の要素の動作を調べることができます。これは実際には 新しいReactユーザーのための素晴らしいプラグイン それは彼らが図書館についてもっと理解するのを助けることができるので.

当然、これも含まれています 任意のイベントリスナー 特定のコンポーネントの状態が変わる可能性があります。そしてその 下部のパン粉 親/子要素を簡単に調べてみましょう.

これは完璧なReactツールからは程遠いです。あなたがいるときしかしそれはあなたの仕事をはるかに簡単になります 動的アプリケーションをゼロから構築する.

それは 完全オープンソース Facebookで管理され、頻繁に更新される公式のGitHubリポジトリ.

このChrome拡張機能をインストールすることができます Chromeのどのバージョンでも. Firefoxユーザーの方は、 FFアドオンをチェックする FireFox v38以上をサポートしています。これまでのところ私はSafari / Operaユーザーのためのサポートを見たことがありませんが、これは近い将来に来るかもしれないのでオープンソースの拡張です.