How to tell if a web application is using ReactJs

I had the same problem, and in my case, I found it better to rely on the React Developer Tools.

You can install it in Google Chrome, access the website you want to check, and open the Chrome DevTools.

If the website uses React, the React Developer Tools will include two tabs in the Chrome DevTools:

Otherwise, the React Developer Tools won't include the tabs:

This answer doesn't detect the React 18 CRA apps that I've tried it on.

I can't edit that answer (stack overflow says too many pending edits) but it should also have a check for window.__REACT_DEVTOOLS_GLOBAL_HOOK__.

After adding that check it looks like this:

if(!!window.React || 
   !!window.__REACT_DEVTOOLS_GLOBAL_HOOK__ ||
   !!document.querySelector('[data-reactroot], [data-reactid]'))
  console.log('React.js');

if(!!document.querySelector('script[id=__NEXT_DATA__]'))
  console.log('Next.js');

if(!!document.querySelector('[id=___gatsby]'))
  console.log('Gatsby.js');

if(!!window.angular ||
   !!document.querySelector('.ng-binding, [ng-app], [data-ng-app], [ng-controller], [data-ng-controller], [ng-repeat], [data-ng-repeat]') ||
   !!document.querySelector('script[src*="angular.js"], script[src*="angular.min.js"]'))
  console.log('Angular.js');

if (!!window.getAllAngularRootElements ||
    !!window.ng?.coreTokens?.NgZone)
  console.log('Angular 2+');

if(!!window.Backbone) console.log('Backbone.js');
if(!!window.Ember) console.log('Ember.js');
if(!!window.Vue) console.log('Vue.js');
if(!!window.Meteor) console.log('Meteor.js');
if(!!window.Zepto) console.log('Zepto.js');
if(!!window.jQuery) console.log('jQuery.js');

There is an extension in Chrome named 'React Developer Tools' which allows you to inspect the React component hierarchies in the Chrome Developer Tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

There is also another extension named 'React-detector' as well :)

https://chrome.google.com/webstore/detail/react-detector/jaaklebbenondhkanegppccanebkdjlh

Other answers that involve checking for globals like globalThis.React will work fine if the website uses react via a dedicated script HTML element, but will otherwise face the problem that bundlers like webpack can wrap dependency code inside immediately-invoked-function-expressions or other mechanisms for encapsulating their details and preventing them from unnecessarily bleeding into the global scope. Such encapsulation is very often desirable.

One can try to get around this by testing if DOM elements have properties on them that get set in React contexts, such as _reactRootContainer. Like so:

Array.from(document.querySelectorAll('*'))
  .some(e => e._reactRootContainer !== undefined)

A page can have tons of elements, so one can try to optimize based on an assumption that React code will call ReactDOM.createRoot and pass it an element queried via HTML id. Ie. instead of checking all DOM elements, only check those that have an id attribute. Like so:

Array.from(document.querySelectorAll('[id]'))
  .some(e => e._reactRootContainer !== undefined)

Be aware that the id-filtering optimization will not always work because the id assumption will not always hold.

Important: Since this method relies on the react DOM already having been created, it should be careful not to be applied until one thinks the react DOM has been created. Once can try to apply techniques like the defer attribute on scripts, or using document.onload, or setTimeout, or a combination of them.

Note that wrapping the nodelist from the query to turn it into an array is probably sub-optimal performance-wise, but I feel that to try to optimize it might be micro-optimizing. A check for the presence of react should probably be saved to a variable and never performed again anyway.