React.js 写経2

http://qiita.com/koba04/items/bc13d1f42964278ae14e

by FiNGAHOLiC

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var Avatar = React.createClass({
    propTypes: {
        user: React.PropTypes.shape({
            id: React.PropTypes.number.isRequired,
            name: React.PropTypes.string.isRequired,
            imgSize: React.PropTypes.string.isRequired,
        })
    },
    render() {
        var imgAvatar = `//placehold.it/${this.props.user.imgSize}`;
        return (
            <div>
                <span>{this.props.user.name}</span>
                <img src={imgAvatar} />
            </div>
        );
    },
});

var user = {
    id: 10,
    name: 'fingaholic',
    imgSize: '100x100'
}

React.render(<Avatar user={user} />, document.body);