How can one tell the version of React running at runtime in the browser

Question

Is there a way to know the runtime version of React in the browser

User · Answer

First Install React dev tools if not installed and then use the run below code in the browser console     REACT DEVTOOLS GLOBAL HOOK   renderers get 1  version

User · Answer

Open the console  then run window React version    This worked for me in Safari and Chrome while upgrading from 0 12 2 to 16 2 0

User · Answer

With the React Devtools installed you can run this from the browser console     REACT DEVTOOLS GLOBAL HOOK   renderers forEach r   gt  console log    r rendererPackageName     r version       Which outputs something like   react-dom  16 12 0

User · Answer

Open Chrome Dev Tools or equivalent and run require  React   version in the console    That works on websites like Facebook as well to find out what version they are using

User · Answer

In index js file  simply replace App component with  React version   E g   ReactDOM render React version  document getElementById  root       I have checked this with React v16 8 1

User · Answer

It is not certain that any global ECMAScript variables have been exported and html css does not necessarily indicate React  So look in the  js   Method 1  Look in ECMAScript   The version number is exported by both modules react-dom and react but those names are often removed by bundling and the version hidden inside an execution context that cannot be accessed  A clever break point may reveal the value directly  or you can search the ECMAScript    Load the Web page  you can try https   www instagram com they   re total Coolaiders  Open Chrome Developer Tools on Sources tab  control shift i or command shift i    Dev tools open on the Sources tab  In the very right of the top menu bar  click the vertical ellipsis and select search all files In he search box down on left type FIRED in capital letters  clear the checkbox Ignore case  type Enter   One or more matches appear below  The version is an export very close to the search string looking like version   16 0 0   If the version number is not immediately visible  double click a line that begins with a line number   ECMAScript appears in the middle pane  If the version number is not immediately visible  click the two braces at bottom left of the ECMAScript pane      ECMAScript is reformatted and easier to read  If the version number is not immediately visible  scroll up and down a few lines to find it or try another search key   If the code is not minified  search for ReactVersion There should be 2 hits with the same value     If the code is minified  search for either SECRET INTERNALS DO NOT USE OR YOU WILL BE FIRED or react-dom Or search for the likely version string itself   15  or  16  or even  0 15    Method 2  Use a DOM breakpoint    Load the page rendered by React Right click a React element  anything  like an input field or a box  and select Inspect Element   Chrome Developer Tools displays the Elements pane  As high up in the tree as possible from the selected element  but no higher than the React root element  often a div directly inside body with id root   lt div id  root     right click an element and select Break On    - subtree modifications   Note  It is possible to compare contents of the Elements tab  DOM current state  with the response for the same resouce on the Networks tab  This may reveal React   s root element  Reload the page by clicking Reload left of the address bar   Chrome Developer Tools stops at the breakpoint and displays the Sources pane  In the rightmost pane  examine the Call Stack sub-pane As far down the call stack as possible  there should be a render entry  this is ReactDOM render Click the line below render  ie  the code that invokes render The middle pane now displays ECMAScript with an expression containing  render highlighted Hover the mouse cursor over the object used to invoke render  is  the react-dom module exports object   if the code line goes  Object u render       hover over the u   A tooltip window is displayed containing version   15 6 2   ie  all values exported by react-dom   The version is also injected into React dev tools  but as far as I know not displayed anywhere

User · Answer

For an app created with create-react-app I managed to see the version    Open Chrome Dev Tools   Firefox Dev Tools  Search and open main XXXXXXXX js file where XXXXXXXX is a builds hash  could be different  Optional  format source by clicking on the    to show the formatted source  Search as text inside the source for react-dom  in Chrome was found   react-dom     16 4 0   in Firefox was found   react-dom     16 4 0    The app was deployed without source map

User · Answer

To know the react version  Open package json file in root folder  search the keywork react  You will see like  quot react quot    quot  16 4 0 quot

User · Answer

From command line to view react version  npm view react version

User · Answer

From the command line   npm view react version npm view react-native version

User · Answer

In an existing project a simple way to see the React version is to go to a render method of any component and add    lt p gt  React version  lt  p gt   This assumes you import React like this  import React from  react

User · Answer

React version is what you are looking for  It is undocumented though  as far as I know  so it may not be a stable feature  i e  though unlikely  it may disappear or change in future releases   Example with React imported as a script  x000D   x000D  const REACT VERSION   React version   ReactDOM render     lt div gt React version   REACT VERSION  lt  div gt     document getElementById  root      x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt    lt div id  root  gt  lt  div gt  x000D   x000D   x000D   Example with React imported as a module import React from  react    console log React version    Obviously  if you import React as a module  it won t be in the global scope  The above code is intended to be bundled with the rest of your app  e g  using webpack  It will virtually never work if used in a browser s console  it is using bare imports   This second approach is the recommended one  Most websites will use it  create-react-app does this  it s using webpack behind the scene   In this case  React is encapsulated and is generally not accessible at all outside the bundle  e g  in a browser s console

[javascript] How can one tell the version of React running at runtime in the browser?

Examples related to javascript

Examples related to reactjs