React equivalent for ng-repeat

In React, you just write the necessary JavaScript (and potentially build it into a reusable control as you’ll see). It’s very prescriptive and easy to do once you learn the basic patterns (and how they differ from AngularJS).

So, in the render function, you’d need to iterate through the list. In the example below, I’ve used map, but you could use other iterators as needed.

var List = React.createClass({
    render: function() {
        return (<div>
        { this.props.data.map(function(item) {
                return <div>{item}</div>
            })
        }
        </div>);
    }
});

var data =  ['red', 'green', 'blue'];

React.render(<List data={ data }  />, document.body);

Here it is in use.

And, as you can see, you can quickly build a reusable component that can “repeat” through the list.