ブラウザーで実行時に実行されているReactのバージョンを確認するにはどうすればよいですか？

ブラウザーでReactのランタイムバージョンを確認する方法はありますか？

React.version あなたが探しているものです。

ただし、（私が知る限り）文書化されていないため、安定した機能ではない可能性があります（つまり、可能性は低いですが、将来のリリースで消えたり変更される可能性があります）。

例Reactのスクリプトとしてインポート

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>React version: {REACT_VERSION}</div>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Reactモジュールとしてインポートされた例

import React from 'react';

console.log(React.version);

明らかに、Reactモジュールとしてインポートする場合、グローバルスコープには含まれません。上記のコードは、たとえばwebpackを使用するなど、アプリの残りの部分とバンドルすることを目的としています。ブラウザーのコンソールで使用された場合は、実質的に機能しません（裸の入力を使用しています）。

この2番目の方法が推奨されます。ほとんどのウェブサイトはそれを使用します。create-react-appがこれを行います（舞台裏でwebpackを使用しています）。この場合、Reactはカプセル化されており、通常、バンドルの外部（たとえば、ブラウザのコンソール）ではまったくアクセスできません。

コマンドラインから：

npm view react version
npm view react-native version

Chrome Dev Toolsまたは同等のツールを開きrequire('React').version、コンソールで実行します。

これはFacebookなどのWebサイトでも機能し、使用しているバージョンを確認できます。

React Devtoolsがインストールされていると、ブラウザーコンソールからこれを実行できます。

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))

これは次のようなものを出力します：

react-dom: 16.12.0

グローバルECMAScript変数がエクスポートされたかどうかは不明であり、html / cssが必ずしもReactを示しているとは限りません。.jsを見てください。

方法1：ECMAScriptを確認します。

バージョン番号は、react-domとreactの両方のモジュールによってエクスポートされますが、これらの名前はバンドルによって削除されることが多く、バージョンはアクセスできない実行コンテキスト内に隠されます。巧妙なブレークポイントで値を直接明らかにするか、ECMAScriptを検索できます。

1. Webページをロードします（https://www.instagram.comを試すことができます。これらは完全なCoolaidersです）
2. [ソース]タブでChrome開発者ツールを開きます（control + shift + iまたはcommand + shift + i）
   1. [ソース]タブで開発ツールが開きます
3. 上部のメニューバーの右にある縦の省略記号をクリックし、[ すべてのファイルを検索 ]を選択します
4. 彼は左のタイプのボックスの下の検索では、解雇のチェックボックスをオフにし、大文字でケースを無視する形で、入力します
   1. 1つ以上の一致が下に表示されます。バージョンは、バージョン「16.0.0」のような検索文字列に非常に近いエクスポートです。
5. バージョン番号がすぐに表示されない場合：行番号で始まる行をダブルクリックします
   1. 中央のペインにECMAScriptが表示されます
6. バージョン番号がすぐに表示されない場合：ECMAScriptペインの左下にある2つの中括弧をクリックします{}
   1. ECMAScriptが再フォーマットされ、読みやすくなりました
7. バージョン番号がすぐに表示されない場合：数行上下にスクロールして見つけるか、別の検索キーを試してください。
   1. コードが縮小されていない場合は、ReactVersionを検索し ます。同じ値のヒットが2つあるはずです。
   2. コードが縮小されている場合は、SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIREDまたはreact-domを検索します
   3. または、可能性のあるバージョン文字列自体を検索します。「15。」または「16。または「0.15

方法2：DOMブレークポイントを使用します。

1. Reactによってレンダリングされたページをロードする
2. React要素（入力フィールドやボックスなど）を右クリックして、 Inspect Element
   1. ChromeデベロッパーツールにElementsペインが表示されます
3. 選択した要素からできるだけツリーの上の方にありますが、Reactルート要素（多くの場合、ID root：<div id = "root">のボディのすぐ内側にあるdiv ）以下で、要素を右クリックして選択しますBreak On… - subtree modifications
   1. 注：[要素]タブ（DOMの現在の状態）の内容を、[ネットワーク]タブで同じリソースの応答と比較することができます。これはReactのルート要素を明らかにするかもしれません
4. アドレスバーの左の再読み込みをクリックしてページを再読み込みします
   1. Chromeデベロッパーツールはブレークポイントで停止し、Sourcesペインを表示します
5. 一番右のペインで、調べてCall Stackサブペイン
6. コールスタックのできるだけ下には、renderエントリがあるはずです。これはReactDOM.render
7. 下の行をクリックしてくださいrender。レンダーを呼び出すコード
8. 中央のペインに、.renderを含む式が強調表示されたECMAScriptが表示されます
9. レンダーの呼び出しに使用するオブジェクトの上にマウスカーソルを合わせます。react-domモジュールの輸出オブジェクト
   1. コード行が次の場合：Object（u.render）（…、uにカーソルを合わせます
10. を含むツールチップウィンドウが表示されますversion: "15.6.2"。によってエクスポートされたすべての値react-dom

このバージョンはReact開発ツールにも挿入されていますが、私の知る限り、どこにも表示されません。

コンソールを開き、を実行しwindow.React.versionます。

これは、SafariとChromeで0.12.2から16.2.0にアップグレードするときに機能しました。

index.jsファイルで、Appコンポーネントを「React.version」に置き換えます。例えば

ReactDOM.render(React.version, document.getElementById('root'));

私はこれをReact v16.8.1で確認しました

create-react- appで作成したアプリの場合、バージョンを確認できました。

1. Chrome Dev Tools / Firefox Dev Toolsを開きます。
2. main.XXXXXXXX.jsファイルを検索して開きます。XXXXXXXXはビルドハッシュです/異なる場合があります。
3. オプション：{}をクリックしてソースをフォーマットし、フォーマットされたソースを表示します。
4. ソース内のテキストとしてreact-domを検索し、
5. Chromeで見つかりました： "react-dom"： "^ 16.4.0"、
6. Firefoxで見つかりました： 'react-dom'： '^ 16.4.0'

アプリはソースマップなしでデプロイされました。

既存のプロジェクトでReactバージョンを確認する簡単なrender方法は、任意のコンポーネントのメソッドに移動して、以下を追加することです。

<p>{React.version}</p>

これは、Reactを次のようにインポートすることを前提としています。 import React from 'react'

インストールされていない場合は、最初にReact開発ツールをインストールしてから、ブラウザーコンソールで以下のコードを実行します。

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version