如何判断 Web 应用程序是否正在使用 ReactJs

Question

我知道有像Wappalyzer和BuiltWith这样的工具可以为您提供有关网站中使用的框架或库的信息。但是我需要一些关于ReactJs是否真的在网站中使用的证据。

经过一番研究，我发现像typeof React或 之类的命令window.React.version，但这些命令并不总是有效。

关于如何检查reactJs是否用于 Web 应用程序的任何想法？

Answer 1

试试下面的代码片段，感谢 rambabusaravanan 列出的每个站点的示例。请参阅以下链接

if(!!window.React ||
   !!document.querySelector('[data-reactroot], [data-reactid]'))
  console.log('React.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.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');

你可以在这里找到更多信息链接

Answer 2

这个答案没有检测到我尝试过的 React 18 CRA 应用程序。

我无法编辑该答案（堆栈溢出表示有太多待处理的编辑），但它还应该检查window.__REACT_DEVTOOLS_GLOBAL_HOOK__.

添加该检查后，它看起来像这样：

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');

Answer 3

我遇到了同样的问题，就我而言，我发现依赖React Developer Tools更好。

您可以在谷歌浏览器中安装它，访问您要查看的网站，然后打开 Chrome DevTools。

如果网站使用 React，React Developer Tools 将在 Chrome DevTools 中包含两个选项卡：

否则，React 开发者工具将不包含这些选项卡：