React and bootstrap: component not rendering

Question

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

Mayank Shukla · Accepted Answer · 2017-05-12 06:44:25Z

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>

thinhvo0108 · Accepted Answer · 2017-05-12 06:42:25Z

1

In JSX, just change class="" to className="":

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

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

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

        );
   }
});

answered May 12, 2017 at 6:42

thinhvo0108

2,2301 gold badge16 silver badges24 bronze badges

1 Comment

thinhvo0108 Over a year ago

You're welcome, if you think my answer is useful, please consider an up-vote, too, thanks! If you have further issues with reactjs, you can let me know, I will try to help if I can!

Collectives™ on Stack Overflow

React and bootstrap: component not rendering

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related