React Base Fiddle (JSX)

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

by Tomoyuki Murakami

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>

CSS

#container {
    margin-top: 15px;
}

form {
    margin:15px 0px;
}

.title {
    width:300px;
    margin-left:-15px;
}

JavaScript 1.7

//Title components
var Title = React.createClass({
    render: function() {
        return (
            <div class="row">
                <div className="col-sm-10 col-sm-offset-1">
                <img className="img-responsive title" src={this.props.src} />
                </div>
            </div>
        );
    }
});

//Form components
var SearchForm = React.createClass({
    handleSubmit: function(e){
        e.preventDefault();
        var keyword = React.findDOMNode(this.refs.keyword).value.trim();
        if (!keyword) {
            return;
        }
        this.props.onKeywordSubmit({keyword: keyword});
        React.findDOMNode(this.refs.keyword).value = '';
        return;
    },
    render: function(){
        return (
            <div className="row">
                <div className="col-sm-10 col-sm-offset-1">
                    <form className="searchForm" onSubmit={this.handleSubmit}>
                        <div className="form-group">
                            <input className="form-control" type="text" placeholder="Whats interested in ?" ref="keyword" />
                        </div>
                        <input className="btn btn-default" type="submit" value="Search" />
                    </form>
                </div>
            </div>
        );
    }
});

//Event list components
var Event = React.createClass({
    render: function(){
        return (
              <tr>
                  <td>{this.props.event_id}</td>
                  <td>{this.props.title}</td>
                  <td>{this.props.limit}</td>
                  <td>{this.props.address} {this.props.place}</td>
                  <td>{this.props.description}</td>
              </tr>
        );
    }
});

var EventList = React.createClass({
    render: function(){
        var eventNodes = this.props.data.map(function(event){
            return (
                <Event event_id={event.event_id} title={event.title} description={event.catch} limit={event.limit}...