As React is a single page application (SPA) that runs as static page inside a browser runtime environment, and inside a browser, there is nothing like a runtime variables that could be used by SPA.
The other method is also straightforward, you can check the React app version by heading over to node_modules/react/cjs/react. development. js. You can see the react project version in the commented section as showing given below.
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
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>
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).
From the command line:
npm view react version
npm view react-native version
With the React Devtools installed you can run this from the browser console:
__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))
Which outputs something like:
react-dom: 16.12.0
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.
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:
Method 2: Use a DOM breakpoint:
Inspect Element
Elements
paneBreak On… - subtree modifications
Sources
paneCall Stack
sub-panerender
entry, this is ReactDOM.render
render
, ie. the code that invokes renderreact-dom
module exports object
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With