Creating Props
Moving to 2-props/ directory.
To the exercise.
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”});
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.