Skip to content

Instantly share code, notes, and snippets.

@jordwalke

jordwalke/gist:6350319

Last active September 10, 2016 16:27
Download ZIP

Revisions

  1. jordwalke revised this gist Jan 29, 2014. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -39,4 +39,6 @@ var PeopleList = React.createClass({
    * - Just expressions.
    * - Just plain Arrays and Objects.
    * - React JavaScript: Just like you've always done it.
    */
    */

    // Fork at: https://github.com/facebook/react
  2. jordwalke revised this gist Jan 29, 2014. 1 changed file with 8 additions and 4 deletions.
    12 changes: 8 additions & 4 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,12 @@
    /**
    * 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.
    * 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({
  3. jordwalke revised this gist Jan 29, 2014. 1 changed file with 21 additions and 17 deletions.
    38 changes: 21 additions & 17 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,9 @@
    // 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.
    /**
    * 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() {
    @@ -20,15 +21,18 @@ var PeopleList = React.createClass({
    }
    });

    // 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 Arrays. Just JavaScript.
    // - Just like you've always done it.

    /**
    * 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.
    */
  4. jordwalke revised this gist Jan 29, 2014. No changes.
  5. jordwalke revised this gist Jan 29, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ var PeopleList = React.createClass({
    .sort(function(one, two) {return one.followCount - two.followCount;})
    .slice(0, 10)
    .map(function(person) {
    return div({className: person.isVerified ? 'star' : 'gray'});
    return div({className: person.isVerified ? 'star' : 'gray'}, person.name);
    })
    );
    }
  6. jordwalke revised this gist Aug 27, 2013. 1 changed file with 2 additions and 8 deletions.
    10 changes: 2 additions & 8 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,8 @@
    // Renders your top ten most followed friends/followers, `filter`ing only your favorites,
    // putting a star on all verified accounts.

    // When using the React API, any time any of the data changes through state
    // updates, the `render` function will always be satisfied. If new followers
    // or friends are added, the UI automatically updates. If the ranking by
    // followCount changes, the ordering of rendering automatically moves
    // nodes to their proper place in the ordering. If a person becomes "verified"
    // they automatically get a star. Any of this could happen at any point in
    // time and the UI will always be updated, and React computes the minimum set
    // of DOM mutations needed to make it happen.
    // 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() {
  7. jordwalke revised this gist Aug 27, 2013. No changes.
  8. jordwalke revised this gist Aug 27, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -33,8 +33,8 @@ var PeopleList = React.createClass({
    // React uses plain JavaScript *expressions* to compute values.

    // Instead of making you use "collections":
    // React uses plain JavaSctript *arrays* to model changing lists.
    // React uses plain JavaSctript *Arrays* to model changing lists.

    // - Just regular Arrays. Just Functions. Just JavaScript.
    // - Just Functions. Just expressions. Just Arrays. Just JavaScript.
    // - Just like you've always done it.

  9. jordwalke revised this gist Aug 27, 2013. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -28,12 +28,13 @@ var PeopleList = React.createClass({

    // 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 like you've always done it.
    //
    // Just regular arrays. Just Functions. Just JavaScript.

    // - Just regular Arrays. Just Functions. Just JavaScript.
    // - Just like you've always done it.

  10. jordwalke revised this gist Aug 27, 2013. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -26,7 +26,6 @@ var PeopleList = React.createClass({
    }
    });

    // No bindings or "computed values" to model.
    // 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":
  11. jordwalke revised this gist Aug 27, 2013. 1 changed file with 13 additions and 3 deletions.
    16 changes: 13 additions & 3 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -10,9 +10,6 @@
    // time and the UI will always be updated, and React computes the minimum set
    // of DOM mutations needed to make it happen.

    // No bindings to automatically setup. No dependency tracking to configure.
    // Just JavaScript. Just regular arrays. Just Functions.

    var PeopleList = React.createClass({
    render: function() {
    var friends = this.props.friends;
    @@ -28,3 +25,16 @@ var PeopleList = React.createClass({
    );
    }
    });

    // No bindings or "computed values" to model.
    // 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 like you've always done it.
    //
    // Just regular arrays. Just Functions. Just JavaScript.

  12. jordwalke renamed this gist Aug 27, 2013. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.js
    View file
    File renamed without changes.
  13. jordwalke created this gist Aug 27, 2013.
    30 changes: 30 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    // Renders your top ten most followed friends/followers, `filter`ing only your favorites,
    // putting a star on all verified accounts.

    // When using the React API, any time any of the data changes through state
    // updates, the `render` function will always be satisfied. If new followers
    // or friends are added, the UI automatically updates. If the ranking by
    // followCount changes, the ordering of rendering automatically moves
    // nodes to their proper place in the ordering. If a person becomes "verified"
    // they automatically get a star. Any of this could happen at any point in
    // time and the UI will always be updated, and React computes the minimum set
    // of DOM mutations needed to make it happen.

    // No bindings to automatically setup. No dependency tracking to configure.
    // Just JavaScript. Just regular arrays. Just Functions.

    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'});
    })
    );
    }
    });