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>
<script src="//fb.me/react-0.12.2.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/0.4.0/Showdown.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div id="react-content">
    </div>
  </div>
</body>
</html>
 
#react-content {
  border: 1px solid #ECECEC;
  border-radius: 2px;
  background: #F7F5F5;
  padding: 10px;
  
  h1, h2, h3 {
    color: #487EA5;
  }
  
  p {
    line-height: 1.3em;
  }
}
​
 
/** @jsx React.DOM */
​
// Lets use my Application to populate a panel with some of the latest news.
​
/**
 * Tell people this is fetching posts.
 */
var LoadingState = React.createClass({
  render: function() {
    if (this.props.fetchedObject !== null){
      return (<div></div>)
    }
​
    return (
      <div>
        <i className="fa fa-cog fa-spin"></i> {this.props.loadingMessage}
      </div>
    );
  }
});
​
/**
 * A component to display the individual post.
 */
var DisplayPosts = React.createClass({
  render: function() {
    if (this.props.posts === null) {
      return (<div></div>);
    }
​
    var markDown = new Showdown.converter();
​
    var post = this.props.posts.slice(0, 4).map(function(post) {
      var content = markDown.makeHtml(post.content)
      return (
        <div>
          <div className="single-post" key={post.id}>
            <h3><a href={"http://writer.aisisplatform.com/blog#post/" + post.title}>{post.title}</a></h3>
            <span dangerouslySetInnerHTML={{__html: content.split(/\s+/).slice(0, 40).join(' ') + '...'}} />
            <hr />
            <div className="float-right">
              <i className="fa fa-comments"></i> {post.comments.length}
            </div>
          </div>
        </div>
      );
    });
    
    return (
      <div>{post}</div>
    )
  }
});
​
​
/**
 * The actual application it's self.
 *
 * This is whats called and rendered.
 *
 * Whats special is we poll every 15 seconds.
 */
var LatestNews = React.createClass({
​
  getInitialState: function () {
    return {
      error_code: null,
      error_message: null,
      posts: null
    };
  },
​
  shouldComponentUpdate: function(nextProps, nextState) {
    if (nextState.error !== this.state.error ||
        nextState.posts !== this.state.posts ||
        nextState.error_code !== this.state.error_code
      ) {
      return true;
    }
​
    return false;
  },
​
  componentDidMount: function() {
    this.startPolling();
  },
​
  componentWillUnmount: function() {
    if (this._timer) {
      clearInterval(this._timer);
      this._timer = null;
    }
  },
​
  startPolling: function() {
    var self = this;
    setTimeout(function() {
      self.poll();
      if (!self.isMounted()) {
        return;
      }
      self._timer = setInterval(self.poll.bind(self), 15000);
    }, 1000);
  },
​
  poll: function() {
    if (!this.isMounted()) {
      return;
    }
​
    var self = this;
    $.get(self.props.source, function(result) {
      if (self.isMounted()) {
        self.setState({
          error_code: null,
          error_message: null,
          posts: result.blog.posts
        });
      }
    }.bind(self)).fail(function(response) {
      self.setState({
        error_code: response.status,
        error_message: response.statusText
      });
    }.bind(self));
  },
​
  render: function() {
    return (
      <div>
        <h2>Latest News</h2>
        <hr />
        <LoadingState fetchedObject={this.state.posts} loadingMessage={"Fetching News"}/>
        <DisplayPosts posts={this.state.posts} />
      </div>
    );
  }
});
​
/**
 * Finally load the application.
 */
$(document).ready(function(){
  if (document.getElementById('react-content') !== null){
    React.renderComponent (
      <LatestNews source={'http://api.writer.aisisplatform.com/v1/blogs/6'} />,
      document.getElementById('react-content')
    );
  }
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers