title: React: How to inject React component into body?
body: <p>I have a React component that I want to inject into the DOM. This is because my JS will be loaded through a script tag by other website owners, not loaded onto a SPA under my control.</p>
  
  <p>What I want to do is append my <code>Root</code> component into the <code>body</code> of the webpage.</p>
  
  <p>If I do something like this, then it replaces all the contents of my body, which is not what I want.</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  class Root extends React.Component {
    render() {
      return &lt;div&gt;heyyyyyyy&lt;/div&gt;;
    }
  }
  
  if (!module.parent) {
      ReactDOM.render(&lt;Root /&gt;, document.querySelector("body")); // &lt;-- wrong
  }
  </code></pre>
  
  <p>I want something like <code>document.querySelector("body").appendChild(&lt;Root /&gt;)</code>. Is this possible?</p>