ThumbnailList

Thumbnail list in ReactJS

by Niranjan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.12.2.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div class="container">
  <div clas="row">
    <div class="col-sm-5 target">

    </div>
  </div>
</div>

JavaScript 1.7

var Badge = React.createClass({

  render: function() {
    return <button className = "btn btn-primary"
    type = "button" > {
      this.props.title
    } < span className = "badge" > {
      this.props.number
    } < /span> < /button >
  }
});

var Thumbnail = React.createClass({
  render: function() {
    return <div className = "thumbnail" >
      < img src = {this.props.imageUrl}
    alt = "..." />
      < div className = "caption" >
      < h3 > {this.props.header} < /h3> < p > {this.props.description} < /p> < p > <Badge title={this.props.title} number={this.props.number}/> < /p> < /div> < /div>
  }
});

var thumbnailList = React.createClass({
	render: function(){
  	var list = this.props.thumbnailData.map(function(thumbnailProps){
    	return <Thumbnail {...thumbnailProps} />
    });
    return <div>{list}</div>
  }
});

var options = {
	thumbnailData : [
  {
  title: 'React tutorials',
  number: 12,
  header: 'Learn React',
  description: 'React is easy to learn',
  imageUrl: 'https://talks.artificial.io/cross-platform-react/images/react.svg'
  },
  {
  title: 'Awe.js tutorials',
  number: 22,
  header: 'Learn AR',
  description: 'AR is easy to learn',
  imageUrl: 'http://img.ceus-now.com/upload/c/43/c43a223e2fbece11dec8c47df38e3d43.jpg'
  }
  ]
};
var element = React.createElement(thumbnailList, options);

ReactDOM.render(element, document.querySelector('.target'));