ReactJS <List /> — Simple

Demonstrating a List View built in React, taking advantage of Composition to customize behavior of base List component.

HTML

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

JavaScript 1.7

/** @jsx React.DOM */
'use strict';

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

var ListView = React.createClass({
    
    render: function() {
        return <ul>
            {this.renderItems()}
        </ul>;
    },
    
    renderItems: function () {
        return this.props.items.map(function (item) {
            return new ListItem({
                text: item
            });
        });
    }
});

var items = [
    'Frogger',
    'Mario Bros',
    'Metroid'
];

React.renderComponent(<ListView items={items} />, document.body);

// Output:
// • Frogger
// • Mario Bros
// • Metroid