Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="app"></div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://fb.me/react-0.13.3.min.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script type="text/jsx">
    /** @jsx React.DOM */
​
​
    // The list of the Items
    var ContentList = React.createClass({
​
        render: function() {
            var commentNodes = this.props.data.map(function(content) {
                        return <ItemRow title={content.owner.login} body={content.description} slug={content.owner.avatar_url}></ItemRow>
                })
            return (
                <div className='contentList'>
                    {commentNodes}
                </div>
            )
        }
    })
​
​
    // Item row
    var ItemRow = React.createClass({
        render: function() {
            return (
                <div>
                    <h2>
                      <a href={this.props.slug}>
                        {this.props.title}
                      </a>
                    </h2>
                     <img width="55" src={this.props.slug}/>
                     {this.props.body}
​
                </div>
            )
        }
    })
​
    // The search input
    var SearchBar = React.createClass({
        handleChange: function() {
            this.props.onUserInput(
                this.refs.filterTextInput.getDOMNode().value
            );
        },
        render: function() {
            return (
                <form>
                    <input
                        type="text"
                        placeholder="Search..."
                        value={this.props.filterText}
                        ref="filterTextInput"
                        onChange={this.handleChange}
                    />
                </form>
            );
        }
    });
​
​
    // The table container
    var TheAppFilter = React.createClass({
        loadContentsFromServer: function() {
            jQuery.ajax({
                url: this.props.url,
                dataType: 'json',
                success: function(data) {
                    this.setState({data: data})
                }.bind(this)
            })
        },
​
        getInitialState: function() {
            return {
              //filterText: ''
              data: []
            }
        },
        componentWillMount: function() {
            this.loadContentsFromServer()
            setInterval(this.loadContentsFromServer, this.props.pollInterval)
        },
​
        handleUserInput: function(filterText) {
            this.setState({
                filterText: filterText
            });
        },
​
        render: function() {
​
            return (
                <div className='contentBox'>
                    <SearchBar
                      filterText={this.state.filterText}
                      onUserInput={this.handleUserInput}
                    />
                    <h1>Contents</h1>
                    <ContentList
                      data={this.state.data}
                      filterText={this.state.filterText}
                    />
​
                </div>
            )
        }
    });
​
​
​
​
​
    React.render(
        <TheAppFilter url='https://api.github.com/users/octocat/gists' pollInterval={2000}/>,
        document.getElementById('app')
    )
​
</script>
​
</body>
</html>
​
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers