Created
June 18, 2015 23:17
-
-
Save RobAWilkinson/f42ac8cb7d95eb6d5c66 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>React test</title> | |
| <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> | |
| <script src="https://fb.me/react-0.13.3.js"></script> | |
| <script src="https://fb.me/JSXTransformer-0.13.3.js"></script> | |
| </head> | |
| <body id='container'> | |
| </body> | |
| <script type="text/jsx"> | |
| var PokemonListItem = React.createClass({ | |
| render: function() { | |
| return(<li>{this.props.name} {this.props.number}</li>) | |
| } | |
| }) | |
| var Pokedex = React.createClass({ | |
| render: function() { | |
| var pokemon = this.props.pokedex.map(function(pokemon) { | |
| return { | |
| name: pokemon.name, | |
| number: parseInt(pokemon.resource_uri.replace('api/v1/pokemon/','').replace('/','')) | |
| }; | |
| }); | |
| pokemon.sort(function(a,b) { | |
| return a.number - b.number; | |
| }) | |
| var components = pokemon.map(function(elem) { | |
| return(<PokemonListItem name={elem.name} number={elem.number} />); | |
| }) | |
| return(<ul>{components}</ul>); | |
| } | |
| }); | |
| var ParentComponent = React.createClass({ | |
| getInitialState: function() { | |
| return({ pokedex: []}); | |
| }, | |
| componentDidMount: function() { | |
| var url ="http://pokeapi.co/api/v1/pokedex/"; | |
| function got(data) { | |
| this.setState({ pokedex: data.objects[0].pokemon}); | |
| } | |
| $.ajax({ | |
| method: 'GET', | |
| url: url, | |
| success: got.bind(this) | |
| }); | |
| }, | |
| render: function() { | |
| return(<Pokedex pokedex={this.state.pokedex} />) | |
| } | |
| }); | |
| React.render( | |
| <ParentComponent />, | |
| document.getElementById('container') | |
| ); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment