Difference between createClass and Component

List.jsx

var React = require('react');
var ListItem = require('./ListItem.jsx');

var ingredients = [{"id":1,"text":"ham"}, {"id":2,"text":"cheese"},{"id":3,"text":"Tomato"}];

class List extends React.Component {
    render() {
        const listItems = ingredients.map((item) => (<ListItem key={item.id} ingredient={item.text} />));
        return (
            <ul>{listItems}</ul>
        );
    }
}

// var List = React.createClass({
//     render: function() {
//         var listItems = ingredients.map(function(item) {
//             return <ListItem key={item.id} ingredient={item.text} />;
//         });

//         return (<ul>{listItems}</ul>);
//     }
// });

module.exports = List;

ListItem.jsx

var React = require('react');

class ListItem extends React.Component {
    render() {
        return (
            <li>
                <h4>{this.props.ingredient}</h4>
            </li>
        );
    }
}

// var ListItem = React.createClass({
//     render: function() {
//         return (
//             <li>
//                 <h4>{this.props.ingredient}</h4>
//             </li>
//         );
//     }
// });

module.exports = ListItem;