title: Using a regular javascript library inside a React component
body: <p>I'm curious what's the best way to use a regular javascript library (not written as a React component) inside a React environment.</p>
  
  <p>For example, let's say there's a javascript library that embeds a simple widget to my webpage. The instructions are as follows:</p>
  
  <ol>
  <li>Include the loading tag in the header.</li>
  <li>Embed the snippet anywhere you want.</li>
  </ol>
  
  <p>In a normal webpage, I would do the following:</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="http://karaoke.com/source.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;Hello look at my cool widget library&lt;/h1&gt;
      &lt;karaoke width="600" height="400" /&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How do I achieve the same effect where I have a React component like this?</p>
  
  <pre><code>class MainView extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;I want to show my karaoke widget here, but how?&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>