title: Equivalent of document.querySelectorAll() in React, onScroll
body: <p>What's the equivalent of <code>document.querySelectorAll('.classname')</code> in React? I understand I should use Refs, but how dow I observe multiple Refs <code>onScroll</code>?</p>
  
  <p>I usually use a function like the one below to check the viewport position of multiple elements in the page, and trigger different css animation when each element enters the viewport:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li data-position="below-viewport"&gt;&lt;/li&gt;
    &lt;li data-position="below-viewport"&gt;&lt;/li&gt;
    &lt;li data-position="below-viewport"&gt;&lt;/li&gt;
    &lt;li data-position="below-viewport"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>getPosition: function (element) {
    const rect = element.getBoundingClientRect();
  
    if ((rect.top &gt; -1) &amp;&amp; (rect.top &lt; (window.innerHeight * 0.75))) {
      element.setAttribute('data-js-position','in-viewport');
    } else if ((rect.top &gt; 0) &amp;&amp; (rect.top &lt; window.innerHeight)) {
      element.setAttribute('data-js-position','entering-viewport');
    } else if (rect.top &gt; window.innerHeight) {
      element.setAttribute('data-js-position','below-viewport');
    } else if (rect.bottom &lt; 0) {
      element.setAttribute('data-js-position','above-viewport');
    }
  }
  
  window.addEventListener('scroll', function() {
    [].forEach.call(document.querySelectorAll('[data-js-position]'), el =&gt; {
      positionChecker.getPosition(el);
    })
  });
  </code></pre>
  
  <p>How would I implement something similar in React? Can you give me an example of a function that observes multiple divs in React?</p>
  
  <p>Even better: how can I abstract this function in <code>App.js</code>, so that I can use it also in child Components?</p>