-
-
Save bertomartin/c63fe04650cac51fa8be to your computer and use it in GitHub Desktop.
Thinking in React
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="bower_components/react/react.js"></script> | |
| <script src="bower_components/react/JSXTransformer.js"></script> | |
| <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" type="text/css"/> | |
| </head> | |
| <body> | |
| <div class="container" id="container"> | |
| </div> | |
| <script type="text/jsx"> | |
| /** @jsx REact.DOM **/ | |
| var EpisodeRow = React.createClass({ | |
| render: function(){ | |
| return ( | |
| <tr> | |
| <td>{this.props.episode.title}</td> | |
| <td> | |
| <a href="{this.props.episode.url}">View</a> | |
| </td> | |
| </tr> | |
| ) | |
| } | |
| }); | |
| var EpisodeTable = React.createClass({ | |
| render: function(){ | |
| var props = this.props; //"scope wrangling" ! | |
| var rows = this.props.episodes | |
| .filter(function(episode){ | |
| return (episode.title.toLowerCase().indexOf(props.filterText) > -1); | |
| }) | |
| .map(function(episode){ | |
| return (<EpisodeRow key={episode.title} episode={episode} />); | |
| }); | |
| return( | |
| <div className="row spacer"> | |
| <div className="col-lg-4 col-lg-offset-4"> | |
| <table width="100%"> | |
| <thead> | |
| <tr> | |
| <th>Title</th> | |
| <th>Link</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {rows} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var EpisodeSearch = React.createClass({ | |
| handleChange: function(){ | |
| var filterText = this.refs.filterSearchBar.getDOMNode().value; | |
| this.props.onFilterChange(filterText); | |
| }, | |
| render: function(){ | |
| return( | |
| <div className="row"> | |
| <div className="col-lg-4 col-lg-offset-4"> | |
| <input ref="filterSearchBar" value={this.props.filterText} className="form-control" type="search" placeholder="Search for episode" onChange={this.handleChange}/> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var EpisodeContainer = React.createClass({ | |
| handleFilterChange: function(filterText){ | |
| this.setState({ | |
| filterText: filterText | |
| }); | |
| }, | |
| getInitialState: function(){ | |
| return { | |
| filterText: "" | |
| } | |
| }, | |
| render: function(){ | |
| return ( | |
| <div className="container" id="container"> | |
| <div className="spacer"> | |
| <EpisodeSearch | |
| filterText={this.state.filterText} | |
| onFilterChange={this.handleFilterChange} | |
| /> | |
| <EpisodeTable | |
| filterText={this.state.filterText} | |
| episodes={this.props.episodes} | |
| /> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var episodes = [ | |
| {title: "Thinking in Java", url:"#"}, | |
| {title: "Thinking in Javx", url:"#"}, | |
| {title: "Thinking in Jaffas", url:"#"}, | |
| {title: "Thinking in Juggernauts", url:"#"} | |
| ]; | |
| React.renderComponent(<EpisodeContainer episodes={episodes}/>, document.getElementById('container')); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="bower_components/react/react.js"></script> | |
| <script src="bower_components/react/JSXTransformer.js"></script> | |
| <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" type="text/css"/> | |
| </head> | |
| <body> | |
| <div class="container" id="container"> | |
| </div> | |
| <script type="text/jsx"> | |
| var EpisodeRow = React.createClass({ | |
| render: function(){ | |
| return ( | |
| <tr> | |
| <td>{this.props.episode.title}</td> | |
| <td> | |
| <a href="{this.props.episode.url}">View</a> | |
| </td> | |
| </tr> | |
| ) | |
| } | |
| }); | |
| var EpisodeTable = React.createClass({ | |
| render: function(){ | |
| var props = this.props; //"scope wrangling" ! | |
| var rows = this.props.episodes | |
| .filter(function(episode){ | |
| return (episode.title.toLowerCase().indexOf(props.filterText) > -1); | |
| }) | |
| .map(function(episode){ | |
| return (<EpisodeRow key={episode.title} episode={episode} />); | |
| }); | |
| return( | |
| <div className="row spacer"> | |
| <div className="col-lg-4 col-lg-offset-4"> | |
| <table width="100%"> | |
| <thead> | |
| <tr> | |
| <th>Title</th> | |
| <th>Link</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {rows} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var EpisodeSearch = React.createClass({ | |
| handleChange: function(){ | |
| var filterText = this.refs.filterSearchBar.getDOMNode().value; | |
| this.props.onFilterChange(filterText); | |
| }, | |
| render: function(){ | |
| return( | |
| <div className="row"> | |
| <div className="col-lg-4 col-lg-offset-4"> | |
| <input ref="filterSearchBar" value={this.props.filterText} className="form-control" type="search" placeholder="Search for episode" onChange={this.handleChange}/> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var EpisodeContainer = React.createClass({ | |
| handleFilterChange: function(filterText){ | |
| this.setState({ | |
| filterText: filterText | |
| }); | |
| }, | |
| getInitialState: function(){ | |
| return { | |
| filterText: "" | |
| } | |
| }, | |
| render: function(){ | |
| return ( | |
| <div className="container" id="container"> | |
| <div className="spacer"> | |
| <EpisodeSearch | |
| filterText={this.state.filterText} | |
| onFilterChange={this.handleFilterChange} | |
| /> | |
| <EpisodeTable | |
| filterText={this.state.filterText} | |
| episodes={this.props.episodes} | |
| /> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }); | |
| var episodes = [ | |
| {title: "Thinking in Java", url:"#"}, | |
| {title: "Thinking in Javx", url:"#"}, | |
| {title: "Thinking in Jaffas", url:"#"}, | |
| {title: "Thinking in Juggernauts", url:"#"} | |
| ]; | |
| React.render(<EpisodeContainer episodes={episodes}/>, document.getElementById('container')); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment