title: Third-party DOM manipulation in React
body: <p>I am currently in the process of porting a legacy BackboneJS app to ReactJS. The app uses <a href="https://github.com/0xfe/vexflow" rel="nofollow noreferrer">VexFlow</a>, the JavaScript music notation rendering engine. One of the major issues I have encountered is that VexFlow renders everything itself, to SVG, in a similar fashion to D3. There is a lot of info on combining D3 with React, and I am following what seems to be the general practice in that case of using an empty React <code>ref</code> element as the target for my VexFlow rendering, which all takes place in <code>componentDidMount</code>:</p>
  
  <pre><code>export default class ScoreComponent extends React.Component {
  
    constructor(props) {
      super(props);
      // Create a 'ref' object, which allows us to reference the React DOM
      // element we create in the render method.
      this.scoreElem = React.createRef();
      ...
    }
  
    componentDidMount() {
      var score = this.score;
      var elem = this.scoreElem.current;
      score.setElem(elem).render(); // &lt;- All VexFlow rendering happens here...
      ...
    }
  
    render() {
      return (
        &lt;div className="score" id={this.props.scoreId} ref={this.scoreElem}&gt;&lt;/div&gt;
      );
    }
  
  }
  </code></pre>
  
  <p>Although this works, it makes me rather uncomfortable, especially as I have to also add a fair amount of jQuery code to handle user interaction on SVG elements (clicking and dragging complex path objects, for example), none of which React will be aware of.</p>
  
  <p>So my question is: am I heading down a path that will result in me getting burned? I really like React, and am eager to say goodbye to Backbone. I was able to port most of my UI code painlessly in a weekend. I have looked at Angular in the past, but it seems way too complex, and opinionated.</p>