title: MDL Component Not working with React
body: <p>I was following the Facebook's react tutorial and was playing around with it.
  When i tried to integrate MDL with my page (from getmdl.io), its not working.</p>
  
  <p>In my index.html; i have added links to their css and js files. I also installed mdl using npm.</p>
  
  <p>My index.html:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
    &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;React Tutorial&lt;/title&gt;
      &lt;!-- Not present in the tutorial. Just for basic styling. --&gt;
      &lt;link rel="stylesheet" href="css/base.css" /&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"&gt;&lt;/script&gt;
  
      &lt;!--Material design things getMdl--&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
      &lt;link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.indigo-pink.min.css"&gt;
      &lt;script defer src="https://code.getmdl.io/1.1.2/material.min.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
    &lt;script type="text/javascript" src="client/public/bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In my index.jsx file, which is being converted to bundle.js by webpack:</p>
  
  <pre><code>const LikeComponent = React.createClass({
        getInitialState : function (){
          return {likesCount2 : this.props.likesCount};
        },
  
        getLikesCount : function (){
          return {likesCount2};
        },
        onLike : function () {
          let newLikesCount = this.state.likesCount2 + 1;
          this.setState ({likesCount2 : newLikesCount});
        },
        componentDidUpdate: function(){
            componentHandler.upgradeDom();
        },
        render : function(){
          return (
            &lt;div&gt;
              Likes : &lt;span&gt;{this.state.likesCount2}&lt;/span&gt;
              &lt;div&gt;
                  {/*&lt;RaisedButton label="Like" onClick={this.onLike}/&gt;*/}
                  &lt;button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onClick={this.onLike}&gt;Like Me&lt;/button&gt;
  
                &lt;/div&gt;
            &lt;/div&gt;
          );
        }
      });
  </code></pre>
  
  <p>I have added the button in render function.</p>
  
  <p>The output should have a material design button, but the button doesn't change. </p>
  
  <p>Output right now: <a href="http://i.stack.imgur.com/tuBOr.png" rel="nofollow">Button is plain HTML button</a></p>
  
  <p>Is there anyone who can help.</p>