React Base Fiddle (JSX)

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

by index

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

Add on me (using react render on click)
<div id="react-render"></div>


Add on me (rendered already and using show hide on click)
<div id="rendered-already"></div>


<pre id="logs"></pre>

JavaScript 1.7

var Child = React.createClass({
          _childClicked: function(e) {
            e.stopPropagation();
            $('#logs').append('child clicked\n');
          },
          render: function() {
            return(
              <div onClick={this._childClicked}>Child - click me</div>
            )
          }
      });
    
      var Parent = React.createClass({
          _parentClicked: function(e) {
            e.stopPropagation();
            $('#logs').append('parent clicked\n');
    
            React.render(<Child />, $('#add-on-me')[0]);
          },
          render: function() {
            return(
              <p>
                <div onClick={this._parentClicked}>Parent - click me
                  <div id="add-on-me"></div>
                </div>
              </p>
            )
          }
      });
    
      React.render(<Parent />, $('#react-render')[0]);


      var ChildX = React.createClass({
          _childClicked: function(e) {
            e.stopPropagation();
            $('#logs').append('childX clicked\n');
          },
          componentDidMount: function() {
            $('#child-x').hide();
          },
          render: function() {
            return(
              <div id="child-x" onClick={this._childClicked}>Child - click me</div>
            )
          }
      });

      var ParentX = React.createClass({
          _parentClicked: function() {
            $('#logs').append('parentX clicked\n');
    
            $('#child-x').show();
          },
          render: function() {
            return(
              <p>
                <div onClick={this._parentClicked}>Parent - click me
                  <ChildX />
                </div>
              </p>
            )
          }
      });

      React.render(<ParentX />, $('#rendered-already')[0]);