React Base Fiddle (JSX)

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

by Ian Campbell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.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 Meeting = React.createClass({

    getInitialState: function() {
        return {
            rsvps: false,
            memberRsvp: "Yes",
            memberRating: 5,
            averageRating: 6,
            numberAttending: 6,
        };
    },
    _onVote: function(vote) {
        this.setState({voteCalled: true});
    },
    _onRSVP: function(rsvp) {
        this.setState({rsvpCalled: true});
    },
    render: function() {

        var choices = ['----'];
        for (var x = 1; x<11; x++) {
            choices = choices.concat(x);
        }
        var options = choices.map(function(choice, index) {
            return (
                <option value={choice} key={index}>{choice}</option>
            );
        });
        
        var rsvpNode;
            rsvpNode =          <select 
                                    className="form-control member-rsvp" 
                                    defaultValue={this.state.memberRsvp} 
                                    onChange={this._onRSVP}>
                                    <option value="----">----</option>
                                    <option value="Yes">Yes</option>
                                    <option value="No">No</option>
                                </select>;

        var ratingNode;
            ratingNode =         
                                <select 
                                    className="form-control member-rating" 
                                    defaultValue={this.state.memberRating} 
                                    onChange={this._onVote}>
                                    {options}
                                </select>;
        
        return (
            <div>
                            <div>
                                <label>My RSVP:</label>
                                {rsvpNode}
                            </div>
                            <div>
                                <label>My Vote:</label>
                           ...