在浏览器中使用带有reactjs的引导程序

Question

I am working on a Django project in python. I am trying to use bootstrap3.3 with ReactJS. I do not use any package manager because I want to use ReactJS in browser for few pages so I made it simple.

I include javascript libraries in following order

<script src="/static/jquery/3.1.0/jquery.min.js"></script>
<script src="/static/react/15.3.0/react.min.js"></script>
<script src="/static/react-dom/15.3.0/react-dom.min.js"></script>
<script src="/static/babel-standalone/6.12.0/babel.min.js"></script>
<script src="/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/bootstrap/3.3.7/css/bootstrap.min.css">

Now, in my app/template/app folder I create login.html and write some html with bootstrap as follow:

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <div class="login-panel panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Enter email below</h3>
        </div>
        <div class="panel-body">
          <form role="form">
            <fieldset>
              <div class="form-group">
                <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus />
              </div>
              <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

and I got pretty form on my page

Now I try to inject same html through ReactJS but whole CSS coloring vanished

I do not have idea what i am doing wrong, can anybody help me ?

Following is ReactJS code:

var ReactLoginForm = React.createClass({
  render: function() {
    return (
      <div class="row">
        <div class="col-md-4 col-md-offset-4">
          <div class="login-panel panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">Enter email below</h3>
            </div>
            <div class="panel-body">
              <form role="form">
                <fieldset>
                  <div class="form-group">
                    <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus />
                  </div>
                  <a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>
                </fieldset>
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
});

ReactDOM.render(
  <ReactLoginForm />,
  document.getElementById('loginFrm')
);

And html code:

<div class="container">
  <div id="loginFrm"></div>
</div>

Answer 1

Try using 'className' as the attribute instead of 'class' as 'class' is a reserved word in javascript and JSX is based on javascript. Same is the case with the 'for' attribute. You would have to use 'htmlFor' instead.