React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by hokuma

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<script src="https://jquery-json.googlecode.com/files/jquery.json-2.2.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="content"></div>

JavaScript 1.7

var converter = new Showdown.converter();
var Comment = React.createClass({
    render: function() {
        var rawMarkup = converter.makeHtml(this.props.children.toString());
        return (
            <div className="comment">
                <h2 className="commentAuthor">
                    {this.props.author}
                </h2>
                <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
            </div>
        );
    }    
});

var CommentList = React.createClass({
  render: function() {
      var commentNodes = this.props.data.map(function (comment) {
          return (
              <Comment author={comment.author}>
                  {comment.text}
              </Comment>
          );
      });
      return (
          <div className="commentList">
              {commentNodes}
          </div>
      );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      type: 'POST',
      dataType: 'json',
      data: {
          json: $.toJSON([
                  {author: "Pete Hunt", text: "This is one comment"},
                  {author: "Jordan Walke", text: "This is *another* comment"}
              ])
      },
      success: function(data) {
        console.log(data);
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});

React.render(
  <CommentBox url="/echo/json/" />,
 ...