title: Bootstrap classes do not work in ReactJS component
body: <p>I just started learning to use ReactJS to render views, but I found the bootstrap CSS classes don't work as expected if I insert the attributes directly into the ReactJS components. For example, in the below code, I wish to generate a panel with the classes: panel-default and panel-heading; however, the generated view doesn't carry the bootstrap style. I was wondering why and how to fix, if possible. Please note that I've compiled my ReactJS code and included the compiled JS in the HTML code (see at the bottom).</p>
  
  <pre><code>var taxonGroups = {
    identifier: 'ABC-x981',
    sources: [
      {segmentName: 'segment1', length: 1090},
      {segmentName: 'segment2', length: 98},
      {segmentName: 'segment3', length: 2091},
      {segmentName: 'segment4', length: 1076},
    ],
  
    fields: ['Taxon Name', 'Taxon ID', 'Taxon source'],
  
    collectionDate: '2001-09-10'
  };
  
  var Taxon = React.createClass({
    render: function() {
      return (
        &lt;div class="panel panel-default"&gt; &lt;div class="panel-heading"&gt;&lt;p&gt;{this.props.data.identifier}&lt;/p&gt;&lt;/div&gt;
          &lt;table class="table table-bordered table-striped table-hover"&gt;
                {
                  this.props.data.sources.map(function(source) {
                    return &lt;Segment name={source.segmentName} length={source.length}/&gt;
                  })
                  }
            &lt;/table&gt;
  
        &lt;/div&gt;
      );
    }
  });
  
  
  var Segment = React.createClass({
    render: function() {
      return &lt;tr&gt;&lt;td&gt;{this.props.name}&lt;/td&gt;&lt;td&gt;{this.props.length}&lt;/td&gt;&lt;/tr&gt;
    }
  
    });
  
  React.render(&lt;Taxon data={taxonGroups} /&gt;, document.getElementById('container'));
  </code></pre>
  
  <p><strong>The HTML code:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head lang="en"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"&gt;
    &lt;script src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="bower_components/react/react.js"&gt;&lt;/script&gt;
    &lt;script src="bower_components/react/JSXTransformer.js"&gt;&lt;/script&gt;
    &lt;title&gt;reactJS 3 - Rendering data with bootstrap styles&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;span&gt;Is there anything?&lt;/span&gt;
  
  &lt;div id="container"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;This is Panel Heading!&lt;/div&gt;
    &lt;div class="panel-body"&gt;
      This is panel body
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="scripts/ReactJS/build/taxon.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>