Edit in JSFiddle

//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} address={event.address} place={event.place} />
            );
        });
        return (
            <div className="row eventList">
                <div className="col-sm-10 col-sm-offset-1">
                    <table className="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Title</th>
                                <th>Fixed Number</th>
                                <th>Place</th>
                                <th>Description</th>
                            </tr>
                        </thead>
                        <tbody>
                        {eventNodes}
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
});

var EventBox = React.createClass({
    getInitialState: function(){
        return {data: [], postfix: "&callback=?", keyword: "javascript"};
    },
    componentDidMount: function(){
        $.getJSON(this.props.url + this.state.keyword + this.state.postfix, function(response){
            var data = response.events;
            this.setState({data: data});
        }.bind(this));
    },
    handleKeywordSubmit: function(keyword){
        this.setState({keyword: keyword});
        $.getJSON(this.props.url + keyword.keyword + this.state.postfix, function(response){
            var data = response.events;
            this.setState({data: data});
        }.bind(this));
    },
    render: function(){
        return (
            <div className="container eventBox">
                <Title src="https://connpass.com/static/img/api/connpass_logo_2.png" />
                <SearchForm onKeywordSubmit={this.handleKeywordSubmit} />
                <p/>
                <h4>{this.state.keyword}</h4>
                <EventList data={this.state.data} />
            </div>
        );
    }
});

React.render(<EventBox url="http://connpass.com/api/v1/event/?count=30&keyword=" />, document.getElementById('container'));

<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>

#container {
    margin-top: 15px;
}

form {
    margin:15px 0px;
}

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