Creating Props

In notebook:
FrontEndMasters React
Created at:
2016-06-14
Updated:
2016-06-21
Tags:
libraries React JavaScript
Moving to 2-props/ directory. 

All of the UI elements in React are just functions that you can give arguments. These are ​props​. 

He argues that ​props​ are the most important concept to understand in React. 
Think about props in the light of the DOM
For example (JSX):
​var input = <input type=“checkbox|password|text”>​ Changes how the ​input​ is actually displayed. These attributes in HTML are properties that change the look and behaviour. Props in React are exactly the same: 
​React.DOM.input({type: “checkbox”});​ 
To the exercise. 
  var React = require('react');

var Gravatar = React.createClass({
  render () {
    // 2. uses the email property 
    return <span>{this.props.email}</span>
  }
});

// 1. the exercise is to add an email address
var element = <Gravatar email="hisemail@gmailcom"/>

React.render(element, document.body);
Moves to the “real” exercise app.js file.
He wants to render the avatars of people. 
  var React = require('react');
var md5 = require('MD5');
var validateEmail = require('./validateEmail');
var warning = require('react/lib/warning');

var GRAVATAR_URL = "http://gravatar.com/avatar";

var USERS = [
  { id: 1, name: 'Ryan Florence', email: 'rpflorencegmail.com' },
  { id: 2, name: 'Michael Jackson', email: 'mjijackson@gmail.com' }
];

var App = React.createClass({
  render () {
    var users = USERS.map((user) => {
      var size = 36;
      // need to hash to  md5 to use the Gravatar API
      var hash = md5(user.email);
      // uses ES6 string interpolation
      var url = `${GRAVATAR_URL}/${hash}?s=${size*2}`;
      return (
        <li key={user.id}>
          <img src={url} width={size} /> {user.name}
        </li>
      );
    });
    return (
      <div>
        <h1>Users</h1>
        <ul>{users}</ul>
      </div>
    );
  }
});

React.render(<App />, document.body);
When a function gets to big, you refactor move it outside and pass arguments to it. 
Refactors the Gravatar variable.
  var React = require('react');
var md5 = require('MD5');
var validateEmail = require('./validateEmail');
var warning = require('react/lib/warning');

var GRAVATAR_URL = "http://gravatar.com/avatar";

var USERS = [
  { id: 1, name: 'Ryan Florence', email: 'rpflorencegmail.com' },
  { id: 2, name: 'Michael Jackson', email: 'mjijackson@gmail.com' }
];

var emailType = (props, propName, componentName) => {
  warning(
    validateEmail(props.email),
    `Invalid email '${props.email}' sent to 'Gravatar'. Check the render method of '${componentName}'.`
  );
};

var Gravatar = React.createClass({
  // 2. ++-- move 1. to here
  render () {
    var size = 36;
    // 4. ++++ use the passed `user.email` (this.props.email)
    var hash = md5(this.props.email);
    var url = `${GRAVATAR_URL}/${hash}?s=${size*2}`;
    return <img src={url} width={size} />
  }
});

var App = React.createClass({
  render () {
    var users = USERS.map((user) => {
      // 1. --++ move all these up to Gravatar
      //- var size = 36;
      //- var hash = md(user.email);
      //- var url = `${GRAVATAR_URL}/${hash}?s=${size*2}`;
      //- return (
      //-   <li key={user.id}>
      //-     <img src={url} width={size} /> {user.name}
      //-   </li>
      //- );
      
    //   3. ++++ map the Gravatars
    // need to pass the `user` object to `Gravatar`
        return <li><Gravatar email={user.email}/> {user.name}</li>
    });
    return (
      <div>
        <h1>Users</h1>
        <ul>{users}</ul>
      </div>
    );
  }
});

React.render(<App />, document.body);
Explains ES6 string interpolation. When he does ​return <Gravatar email={user.email}/>​ , inside the Gravatar component it looks like a normal DOM attribute (even if ​email​ is not a valid HTML attribute): ​domNode.getAttribute('email')​ 

Refactoring

Components are just functions. When the variables are getting too big and ugly, you can just refactor and put them in an outside function.
Just copy-paste and pass some variables.