React Base Fiddle (JSX)

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

by mjmitche

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>

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

JavaScript 1.7

var Hello = React.createClass({
    componentDidMount: function(){
    
       $('.blah').append("<h2>Appended to Blah</h2>");
       $('.pokey').append("<h2>Can I append into sub component?</h2>");
       var domnode = this.getDOMNode();
       $(domnode).append("<h2>appended to domnode but it's actually deprecated so what do I use instead?</h2>")
       
       var reactfindDomNode = React.findDOMNode();
       $(reactfindDomNode).append("<h2>can't append to reactfindDomNode</h2>");
       
    },
    render: function() {
        return (
            <div class='blah'>Hi, why isn't the h2 being appended here?
            <SubComponent/>
            </div>
        )
    }
});

var SubComponent = React.createClass({
     
      componentDidMount: function(){
         $('.blah').append("<h2>append to div in parent?</h2>");
      },
     
      render: function(){
         return(
              <div class='pokey'> Hi from Pokey, the h2 from Parent component is not appended here either?            
              </div>
         )
      }
})
 
React.render(<Hello name="World" />, document.getElementById('container'));