Bootstrap mit reactjs im Browser verwenden

Question

Ich arbeite an einem Django-Projekt in Python. Ich versuche Bootstrap3.3 mit ReactJS zu verwenden. Ich benutze keinen Paketmanager, weil ich ReactJS für wenige Seiten im Browser verwenden möchte, also habe ich es einfach gemacht.

I enthalten Javascript-Bibliotheken in folgender Reihenfolge

<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"> 

Jetzt, in meiner app/template/app Ordner erstellen, ich login.html und einige html mit Bootstrap wie folgt schreiben:

<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> 

und ich habe bilden ziemlich auf meiner Seite

Jetzt versuche ich

Ich habe keine Ahnung, verschwundene gleichen html durch ReactJS sondern ganze CSS Färbung zu injizieren, was ich falsch mache, kann mir jemand helfen?

Es folgt 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') 
); 

Und Code html:

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

Answer 1

Try 'classname' als Attribut statt 'Klasse' als 'Klasse' ist ein reserviertes Wort in javascript und JSX basiert auf Javascript. Gleiches gilt für das Attribut 'for'. Sie müssten stattdessen "htmlFor" verwenden.