Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/react.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.10.0/JSXTransformer.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">
  /** @jsx React.DOM */
  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function (comment){
        return (
          <div>
            <h1>{comment.author}</h1>
          </div>
        );
      });
      return (
        <div className="commentList">
          {commentNodes}
        </div>
      );
    }
  });
var CommentBox = React.createClass({
    getInitialState: function(){
      return {data: {comments:[]}};
    },
    getComments: function(){
      // mock ajax operation
      var success = function(){
         var data = {
           comments : [
               { author : 'Mark Twein' },
               { author : 'Ernest Hemingway' },
               { author : 'Lewis Carroll' }
           ]  
         };
         this.setState( {data: data} );
      }.bind(this);
      setTimeout(success, 100);
    /*
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data){
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err){
          console.error(url, status, err.toString());
        }.bind(this)
      });*/
    },
  componentWillMount: function(){
      this.getComments();
  },
  render: function() {
    return (
      <div className="commentBox">
          {/*this.state.data.comments*/}
          {<CommentList data={this.state.data.comments}/>}
      </div>
    );
  }
});
​
  React.renderComponent(
    <CommentBox url="comments.json" />,
    document.getElementById('content')
  );
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers