Exercise 1: Rendering Data
Exercise
Starting point is the 1-your-first-component/app.js file on the repo. It has a Data object in it. Task is to render it on the page.
Sketches up some code:
var React = require('react');
var numbers = ['one', 'two', 'three'];
var App = React.createClass({
render () {
var items = numbers.map((n) => <li>{n}</li>);
return (
<div>
<ul>
{items}
</ul>
</div>
);
}
});
React.render(<App/>, document.body);
Talks about the map
transformation. This is just JavaScript. No templating loops, or ng-repeat
. Testing
In his setup, if you put ?test at the end of the url in the browser, you should see some assertions in the console.log.