React Base Fiddle (JSX)

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

by santoshpatro

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.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js">


</script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Heading = React.createClass({
  render: function() {
    return <th > {
      this.props.heading
    } < /th>;
  }
});

var Headings = React.createClass({
  render: function() {
    var headings = this.props.headings.map(function(name) {
      return <Heading heading = {
        name
      }
      />
    });
    return <thead > < tr > {
      headings
    } < /tr></thead >
  }
});

var Row = React.createClass({
  render: function() {
    return <tr >
      < td > {
        this.props.changeSet.when
      } < /td> < td > {
    this.props.changeSet.who
  } < /td> < td > {
  this.props.changeSet.description
} < /td> < /tr >
}
});

var Rows = React.createClass({
      render: function() {
        var rows = this.props.changeSets.map(function(changeSet) {
            return ( < Row changeSet = {
                changeSet
              }
              />);
            });
          return ( < tbody > {
              rows
            } < /tbody>)
          }
        });
      var App = React.createClass({
          render: function() {
            return ( < table className = 'table' >
              < Headings headings = {
                this.props.headings
              }
              /> < Rows changeSets = {
              this.props.changeSets
            }
            /> < /table > );
        }
      });

    var data = [{
      "when": "2 minutes ago",
      "who": "Jill Dupre",
      "description": "Created new account"
    }, {
      "when": "1 hour ago",
      "who": "Lose White",
      "description": "Added fist chapter"
    }];

    var headings = ['When', 'Who', 'Description']; ReactDOM.render( < App headings = {
        headings
      }
      changeSets = {
        data
      }
      />,
      document.getElementById('container'));