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 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
/** | |
* Renders your top ten most followed friends/followers, `filter`ing only your favorites, | |
* putting a star on all verified accounts. | |
* Any time your data changes, the UI is always brought up to data 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. | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment