title: How to use leader-line (an external javascript library) in react?
body: <p>I want to use leader-line in my React web project. It is an external javascript library, but I don't know how to integrate it into the project with the JSX syntax.<br>
  For example, <a href="https://anseki.github.io/leader-line/" rel="noreferrer">its documentation</a> tells us the general implementation:</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div id="start"&gt;start&lt;/div&gt;
  &lt;div id="end"&gt;end&lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>// Add new leader line from `start` to `end` (HTML/SVG elements, basically).
  new LeaderLine(
    document.getElementById('start'),
    document.getElementById('end')
  );
  </code></pre>
  
  <p>How should I write in JSX file?<br>
  I try to write below, but failed.</p>
  
  <pre><code>import React, { Component } from 'react';
  import LeaderLine from 'leader-line'
  
  class Page extends Component {
  
    constructor(props) {
      super(props);
    }
  
    componentDidMount() {
      new LeaderLine(document.getElementById('start'),
                     document.getElementById('end'));
    }
  
    render() {
      return (
        &lt;div className="Page"&gt;
          &lt;div id="start"&gt;&lt;/div&gt;
          &lt;div id="end"&gt;&lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Page;
  </code></pre>
  
  <p><a href="https://www.npmjs.com/package/leader-line" rel="noreferrer">This is the npm package page of leader-line.</a></p>