Exercise 1: Rendering Data

In notebook:
FrontEndMasters React
Created at:
2016-06-14
Updated:
2016-06-21
Tags:
libraries React JavaScript

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.