5 ms·

>Over 1 Billion people use a React application everyday (Facebook + Instagram web) It's fun to actually see which parts of public websites are written with reac

by e1g 12y ago

>Over 1 Billion people use a React application everyday (Facebook + Instagram web) It's fun to actually see which parts of public websites are written with react by running this in the browser console: setInterval(function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }, 500) Some pages to try it on: https://instagram.com/natgeo https://instagram.com/natgeo https://www.facebook.com https://www.facebook.com https://www.airbnb.com.au/go/US https://www.airbnb.com.au/go/US edit: the snippet is from Pete Hunt who is on the core React team (https://twitter.com/floydophone/status/557348616080076800 https://twitter.com/floydophone/status/557348616080076800)

zghst 12y ago
Fake test. React Components don't always return a DOM element, also not every element shows up all the time, instead you should download the React dev tools. There are at least 30-40 top level components on Facebook. Nice try though.
- e1g 12y ago
  You are of course correct that some React components will not be caught by this single-line test. It is impossible to truly know unless you are the author of the app, and that's the case even with React tools (e.g. you would not be able to identify my server-rendered components that are not mounted on the front-end). The intent was not to provide a debugging tool - it's just to provide people with limited exposure to React a simple one-liner to help them understand what is meant when someone says Facebook/Instagram use React, and see some components in the wild. To that goal, using a simple test for data-reactid attribute will catch the overwhelming majority of in-the-wild use cases.
  - zghst 12y ago
    I'm sorry I attacked you, thought you were saying different
bsummer4 12y ago
Thanks! That's really cool.
polskibus 12y ago
You can download react tools for chrome and check react usage by just launching developer tools.
PSeitz 12y ago
That killed my facebook tab
- runeks 12y ago
  function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) } is executed every 500 ms using command in question. So if the above function takes 500 ms or more to execute, the tab will get stuck (I would think). Try just executing this command once: Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; })
  - PSeitz 12y ago
    Yes, the attribute selector could be slow and/or the non-opaque drawing, I guess.
  - PSeitz 12y ago
    Yes, the attribute selector could be slow and/or the non-opaque drawing, I guess.
  - dcherman 12y ago
    Instead of using a timer or a one time selector, just add a new CSS rule via a style tag (function() { var style = document.createElement( "style" ); style.innerHTML = "[data-reactid] { background: rgba(255,0,0,0.1); }"; document.head.appendChild( style ); }());

by e1g 12y ago

zghst 12y ago

Fake test. React Components don't always return a DOM element, also not every element shows up all the time, instead you should download the React dev tools. There are at least 30-40 top level components on Facebook. Nice try though.

e1g 12y ago
You are of course correct that some React components will not be caught by this single-line test. It is impossible to truly know unless you are the author of the app, and that's the case even with React tools (e.g. you would not be able to identify my server-rendered components that are not mounted on the front-end). The intent was not to provide a debugging tool - it's just to provide people with limited exposure to React a simple one-liner to help them understand what is meant when someone says Facebook/Instagram use React, and see some components in the wild. To that goal, using a simple test for data-reactid attribute will catch the overwhelming majority of in-the-wild use cases.
- zghst 12y ago
  I'm sorry I attacked you, thought you were saying different

bsummer4 12y ago

Thanks! That's really cool.

polskibus 12y ago

You can download react tools for chrome and check react usage by just launching developer tools.

PSeitz 12y ago

That killed my facebook tab

runeks 12y ago
function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) } is executed every 500 ms using command in question. So if the above function takes 500 ms or more to execute, the tab will get stuck (I would think). Try just executing this command once: Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; })
- PSeitz 12y ago
  Yes, the attribute selector could be slow and/or the non-opaque drawing, I guess.
- PSeitz 12y ago
  Yes, the attribute selector could be slow and/or the non-opaque drawing, I guess.
- dcherman 12y ago
  Instead of using a timer or a one time selector, just add a new CSS rule via a style tag (function() { var style = document.createElement( "style" ); style.innerHTML = "[data-reactid] { background: rgba(255,0,0,0.1); }"; document.head.appendChild( style ); }());