React Base Fiddle (JSX)

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

by LeZuse

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>

<style>
    .snippet-id-1864 {color:red}
</style>

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

^ try clicking the element; will disappear after first click

JavaScript 1.7

var val = '<span>random2</span>';

var Hello1 = React.createClass({
    render: function() {
    console.log('b prop', this.props.b);

    if (!this.props.b) {
      return (
          <div>
            <span>random</span>
          </div>
      );
    };
    
    var html = {'__html': val};
    // try adding key="foo"; will rerender with "random2" string correctly
    return (
      <div dangerouslySetInnerHTML={html}></div>
    );
    }
});


var Hello2 = React.createClass({
    getInitialState: function() {return {b: false}},
    onContentClick: function() {
        console.log('rerender')
        this.setState({b:!this.state.b});
    },
    render: function() {
    return <div onClick={this.onContentClick}><Hello1 b={this.state.b}  /></div>;
    }
});


 
React.render(<Hello2 />, document.getElementById('container'));