Last active
September 10, 2016 16:27
-
-
Save jordwalke/6350319 to your computer and use it in GitHub Desktop.
ReactJS: JavaScript just like you've always done it.
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
/** | |
* ReactJS: JavaScript like you've always done it. | |
* | |
* This example renders your top ten most followed friends/followers, `filter`ing | |
* only your favorites, and putting a star on all verified accounts. | |
* | |
* With ReactJS, any time your data changes, the UI is always brought up to date | |
* automatically. If friends length changes, or followCount - it always shows what | |
* `render` describes. | |
*/ | |
var PeopleList = React.createClass({ | |
render: function() { | |
var friends = this.props.friends; | |
var followers = this.props.followers; | |
return div({className: 'list'}, | |
friends.concat(followers) | |
.filter(function(person) {return person.isFavorite;}) | |
.sort(function(one, two) {return one.followCount - two.followCount;}) | |
.slice(0, 10) | |
.map(function(person) { | |
return div({className: person.isVerified ? 'star' : 'gray'}, person.name); | |
}) | |
); | |
} | |
}); | |
/** | |
* Instead of making you set up "Bindings" to models: | |
* - React uses plain JavaScript *functions* to bind outputs to inputs. | |
* | |
* Instead of making you set up "computed values": | |
* - React uses plain JavaScript *expressions* to compute values. | |
* | |
* Instead of making you use "collections": | |
* - React uses plain JavaSctript *Arrays* to model changing lists. | |
* | |
* - Just functions. | |
* - Just expressions. | |
* - Just plain Arrays and Objects. | |
* - React JavaScript: Just like you've always done it. | |
*/ | |
// Fork at: https://github.com/facebook/react |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment