React Base Fiddle (JSX)

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

by Nevin Madhukar

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-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.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>
<div id="container-below">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var HelloComponent = React.createClass({

    render: function() {
        return <div > { this.props.user }
        says: Hello { this.props.name } < /div>;
    }
});

ReactDOM.render( < div >
    < HelloComponent user = "Nevin"
    name = "World" / >
    < HelloComponent user = "Raul"
    name = "Uni" / >
    < HelloComponent user = "Zidane"
    name = "Fresh" / >
    < HelloComponent user = "MJ"
    name = "Chicken" / >
    < /div>,
    document.getElementById('container')
);


var ExtraComponent = React.createClass({
doSomething : function(){
alert("Your mission, should you choose to accept it : " + this.props.children);
},
    render: function() {
        return(<div > Here lies the extra component which deals with { this.props.children }
        <a onClick={this.doSomething} href="#">Click Me for magic</a> < /div>);
    }
})

ReactDOM.render( < div >
        <ExtraComponent> Trump </ExtraComponent>
        <ExtraComponent> Hilary </ExtraComponent>
        </div>, 
        document.getElementById('container-below'))