annotated

app.js

// u need react 4 react apps m8
var React = require('react');
// md5 is for verifying the e-mail address input? Seems to be required for gravatar.
var md5 = require('MD5');
// this just validates whether the input itself is actually an e-mail (regex magic)
var validateEmail = require('./validateEmail');
// I think this is just to write informative error msgs in console
var warning = require('react/lib/warning');

// saves you having to write the url every time (if this was used in more than 1 place)
var GRAVATAR_URL = "http://gravatar.com/avatar";

// dat app data
var USERS = [
  { id: 1, name: 'Ryan Florence', email: '[email protected]' },
  { id: 2, name: 'Michael Jackson', email: '[email protected]' }
];

// Function for checking if email is in fact an email. The parameters are a React thing.
var emailType = (props, propName, componentName) => {
  // everything encapsulated in a (react) warning prompt
  warning(
    validateEmail(props.email),
    `Invalid email '${props.email}' sent to 'Gravatar'. Check the render method of '${componentName}'.`
  );
};

// created the <Gravatar /> component
var Gravatar = React.createClass({
  // calls the emailType function, not really sure how it works though...
  propTypes: {
    email: emailType
  },

  // size="16" (if nothing is entered)
  getDefaultProps () {
    return {
      size: 16
    };
  },

  // what is actually rendered in the <Gravatar /> component
  render () {
    // sets up email= size= in the <Gravatar> tag
    var { email, size } = this.props;
    // Code tidyness? E.g. could have just used md5(email) or...?
    var hash = md5(email);
    // creates url for img src
    var url = `${GRAVATAR_URL}/${hash}?s=${size*2}`;
    // the sum html output (sans prop values)
    return <img src={url} width={size} />;
  }
});

// dat app
var App = React.createClass({
  render () {
    // creates a new object with a map of all users in USERS (line 13)
    var users = USERS.map((user) => {
      return (
        // puts a key value on each mapped user from USERS
        <li key={user.id}>
          // creates the Gravatar component with the email and name. Uses custom size value.
          <Gravatar email={user.email} size={36} /> {user.name}
        </li>
      );
    });
    return (
      <div>
        <h1>Users</h1>
        // renders the users object above
        <ul>{users}</ul>
      </div>
    );
  }
});

// dat app tho
React.render(<App />, document.body);