mohi planet: ReactJS : Bootstrap List Example

Demo Code Download .

Javascript/JSX(app.js):

'use strict';
// lets populate list with this JSON array dynamically
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"},
{author: "Pete Hunt", text: "This is second comment"}
];
var Comment = React.createClass({
render: function() {
return (
<li className="list-group-item">
<b>{this.props.text}</b> : by - <span className="author-look">{this.props.author}</span>
</li>
);
}
});
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (comment) {
return (
<Comment author={comment.author} text={comment.text}></Comment>
);
});
return (
<ul className="list-group list-look">
{commentNodes}
</ul>
);
}
});
ReactDOM.render(<CommentList data={data}/>, document.getElementById('myListDiv'));

Simplest index.html to get us started :)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Integration</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/example.css" type="text/css" />
</head>
<body>
<div id="myListDiv"></div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.min.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js" charset="utf-8"></script>
<script type="text/babel" src="js/app.js"></script>
</body>
</html>

References:
https://facebook.github.io/react/docs/tutorial.html#hook-up-the-data-model

mohi planet