React Base Fiddle (JSX)

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

by edgardleal

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>
<div id="list"></div>

JavaScript 1.7

var d = document;
$ = function (selector) {


};
var Hello = React.createClass({
    render: function () {
        return <div > Hello {
            this.props.name
        } < /div>;
    }
});

var Nome = React.createClass({
   shouldComponentUpdate : function(nextProps, nextState){
       return true;
   },
   getInitialState : function(){ return {text : "__"};},
   change : function(event){
      / / event.preventDefault();
        this.setState({
            text: event.target.value
        });
    },
    render: function () {
        var value = this.state.text;
        var func = this.change;
        return ( < div > < input type = "text"
        onChange = {
            func
        }
        value = {
            value
        }
        /><br/ > < span > {
            this.state.text
        } < /span>
         </div > );
    }

});

var Lista = React.createClass({
    displayName: 'Lista',
    render: function () {
        var items = [];
        for (i = 0; i < 10; i++) {
            items[i] = React.createElement('li', null, i);
        }
        var l = React.createElement('ul', null, items);
        return l;
    }
});

React.render(React.createElement(Lista),
d.getElementById('list'));

React.render(React.createElement(Nome), d.getElementById('container'));