title: Why is materialize not working with reactjs
body: <p>I created a static web page with materialize.css library, when I tried to move some components to react but they are not working. </p>
  
  <p>This is my html boilerplate</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;!--Import materialize.css--&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/&gt;
      &lt;!--Let browser know website is optimized for mobile--&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt;
      &lt;script src="http://fb.me/react-with-addons-0.13.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://fb.me/JSXTransformer-0.13.1.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="button"&gt;&lt;/div&gt;
      &lt;script type=text/jsx src="main.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/materialize.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and this is main.js</p>
  
  <pre><code>var ButtomTest = React.createClass({
    render: function() {
      return (
        &lt;div className="test"&gt;
          &lt;a class="waves-effect waves-light btn"&gt;Stuff&lt;/a&gt;
        &lt;/div&gt;
      );
    }
  });
  React.render(
    &lt;ButtomTest /&gt;,
    document.getElementById('button')
  );
  </code></pre>
  
  <p>In the browser i only see "Stuff" in green color. What am I doing wrong?</p>