Olga Olga - 5 months ago 36
HTML Question

React and bootstrap: component not rendering

I'm trying to render simple bootstrap components using react.

This is index.html:



<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/react/react.js"></script>
<script src="js/react/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<meta charset="utf-8">
<title>To Do List</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>

<body>
<div class="container" id="headContainer">
<div class="row">
<div class="col-sm-1">
<img src="Panter.jpg" class="img-responsive">
</div>
<div class="col-sm-8">
<h1 style="color:Pink">To do, to do, to doooo</h1>
</div>
</div>
<div id="list">

</div>
</div>
<script type="text/babel" src="js/app.js" ></script>
</body>
</html>





This is app.js:



var ListOfActionsRendering=React.createClass({
render: function() {
return (
<div class="accordion" id="listOfActions">
<div class="accordion-group">
<div class="row">
<div class="col-sm-2">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#listOfActions" href="#defaultList">
<h4 id="nameOfGroup"> Основной список </h4>
</a>
</div>

<div class="col-sm-2">
<div class="btn-group">
<button class="btn" onclick="onEditListOfActionClick()"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn"><i class="glyphicon glyphicon-remove"></i></button>
</div>
</div>
</div>
</div>

<div class="accordion-body collapse in" id="defaultList">
<div class="accordion-inner">
<a href="#defaultList">
<h5> </h5>
</a>
</div>
</div>
</div>

);
}
});

ReactDOM.render (
<ListOfActionsRendering />,
document.getElementById("list")
);





I dont have any errors in chrome console, but components are not shown.

In snipper I have an Error:

message: Uncaught SyntaxError: Unexpected token <,
filename: http://stacksnippets.net/js,
lineno: 16,
colno: 6

Answer Source

You need to include babel standalone script, to transcompile the code, use this script in head section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

Check the working example:

<!doctype html>
<html>
 <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <meta charset="utf-8">
    <title>To Do List</title>
    <link href="css/bootstrap.css" rel="stylesheet">
 </head>
 
 <body>
    <div class="container" id="headContainer">
      <div class="row">
          <div class="col-sm-1">
              <img src="Panter.jpg" class="img-responsive">
	      </div>
          <div class="col-sm-8">
               <h1 style="color:Pink">To do, to do, to doooo</h1>
          </div>
       </div> 
	   <div id="list">
	      
	   </div>
    </div>	
    <script type="text/babel" >
        var App = React.createClass({
           render: function(){
             return <p>Hello</p>          
           }
        })
        ReactDOM.render(<App/>, document.getElementById('list'))
   </script>
 </body>
</html>