osmelmora · May 23, 2016 17:38
diff --git a/contact-list-propTypes.html b/contact-list-propTypes.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React</title>
        <script src="https://fb.me/react-15.0.2.js"></script>
        <script src="https://fb.me/react-dom-15.0.2.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    </head>
    <body>
        <div id="app-container"></div>
        <script type="text/babel">
            var list = [
                {id: 1463777842462, name: 'Jordan Walke', email: '[email protected]'},
                {id: 1463777853704, name: 'Dan Abramov', email: '[email protected]'},
                {id: 1463777863341, name: 'Sebastian Markbage', email: '[email protected]'},
                {id: 1463777872559, name: 'Pete Hunt', email: '[email protected]'}
            ];
            
            var ContactItem = React.createClass({
                render: function() {
                    return (
                        <li className='contact-item'>
                            <span> Name: {this.props.name} </span>
                            <span> Email: {this.props.email} </span>
                        </li>
                    );
                },
                
                propTypes: {
                    name: React.PropTypes.string.isRequired,
                    email: React.PropTypes.string.isRequired
                }
            });

            var ContactList = React.createClass({
                render: function() {
                    var contacts = this.props.items.map(function(item) {
                        return (
                            <ContactItem key={item.id}  name={item.name}  email={item.email} />
                        );
                    });
            
                    return (
                        <ul className='contact-list'>{contacts}</ul>
                    );
                },
                
                propTypes: {
                    items: React.PropTypes.array.isRequired
                }
            });


            ReactDOM.render(
                <ContactList items={list}/>,
                document.getElementById('app-container')
            );
            
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello React</title>
	<script src="https://fb.me/react-15.0.2.js"></script>
	<script src="https://fb.me/react-dom-15.0.2.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
	</head>
	<body>
	<div id="app-container"></div>
	<script type="text/babel">
	var list = [
	{id: 1463777842462, name: 'Jordan Walke', email: '[email protected]'},
	{id: 1463777853704, name: 'Dan Abramov', email: '[email protected]'},
	{id: 1463777863341, name: 'Sebastian Markbage', email: '[email protected]'},
	{id: 1463777872559, name: 'Pete Hunt', email: '[email protected]'}
	];

	var ContactItem = React.createClass({
	render: function() {
	return (
	<li className='contact-item'>
	<span> Name: {this.props.name} </span>
	<span> Email: {this.props.email} </span>
	</li>
	);
	},

	propTypes: {
	name: React.PropTypes.string.isRequired,
	email: React.PropTypes.string.isRequired
	}
	});

	var ContactList = React.createClass({
	render: function() {
	var contacts = this.props.items.map(function(item) {
	return (
	<ContactItem key={item.id} name={item.name} email={item.email} />
	);
	});

	return (
	<ul className='contact-list'>{contacts}</ul>
	);
	},

	propTypes: {
	items: React.PropTypes.array.isRequired
	}
	});


	ReactDOM.render(
	<ContactList items={list}/>,
	document.getElementById('app-container')
	);

	</script>
	</body>
	</html>