title: ReactDOM / getDOMNode() instead of jQuery?
body: <p>How should I structure this ReactJS code to use ReactDOM / <code>getDOMNode()</code> instead of jQuery. This plays a sound when a button is pressed.</p>
  
  <p>Not sure if I should put the <code>.play()</code> in <code>myAudioObject</code> and access it via Refs, or the other way... pass Refs with <code>.getDomNode()</code> into <code>myPlayButton</code>.</p>
  
  <p>Also, is using jQuery they way i have it below considered bad practice with ReactJS? </p>
  
  <pre><code>var myAudioObject = React.createClass({
     render: function() {
        return (
           &lt;audio id="mySoundClip" preload="auto"&gt;
              &lt;source src='audio/thing.mp3'&gt;&lt;/source&gt;
              Your browser does not support audio.
           &lt;/audio&gt;
        );
     } 
  });
  
  
  var myPlayButton = React.createClass({
     handleClickPlay: function() {
        var audio = $("#mySoundClip")[0];
        audio.load(); // This reloads the audio tag in the DOM, so also reloads ReactJS component.
        audio.play();
     },
  
     render: function() {
        return (
           &lt;button onClick={this.handleClickPlay}&gt;Play&lt;/button&gt; 
        );
     } 
  }); 
  
  
  var App = React.createClass({
     render: function() {
        return (
           &lt;div&gt;
              &lt;myAudioObject /&gt;
              &lt;myPlayButton /&gt;
           &lt;/div&gt;
        );
    } 
  }); 
  
  
  React.renderComponent((
     &lt;App /&gt;
  ), document.body);
  </code></pre>