core.js

// Testing dynamic content
var bookdata = [
  { id: 1, author: "Andy Weir", title: "The Martian", pages: "432", date: "05/23/2016"},
  { id: 2, author: "Ernest Cline", title: "Ready Player One", pages: "531", date: "05/12/2016"},
];

console.log(bookdata);

// Setup all the elements
var Container = React.createClass({
  render: function(data){
    return (
      <div className="container cf">
        <div className="maincol">
          <h1>Booklstr</h1>
          <h2>Book stats for nerds</h2>
          <div className="thelist">
            <BookBox data={this.props.bookdata}/>
          </div>
        </div>
        <div className="sidecol">
          <AddBook />
        </div>
      </div>
    );
  }
});

var BookBox = React.createClass({
  render: function(){
    var bookNodes = this.props.bookdata.map(function(book){
      return(
        <div className="bookbox">
        <small>book date</small>
        <p>{this.props.title} - {this.props.author} - {this.props.pages} - <i className="fa fa-trash-o"></i> - <i className="fa fa-edit"></i></p>
      </div>
      );
    });
    return (
     <div className="bookbox">
       {bookNodes}
     </div>
    );
  }
});

var AddBook = React.createClass({
  render: function(){
    return(
      <div className="newbookbox">
        <h2>Add New Book <i className="fa fa-book"></i></h2>
        <form>
          <p><input type="text" placeholder="Book Title" name="booktitle" /></p>
          <p><input type="text" placeholder="Book Author" name="bookauthor" /></p>
          <p><input type="text" placeholder="Pages" name="bookpages" /></p>
          <p><button>Save</button></p>
        </form>
      </div>
    );
  }
});

// Render them in the viewport
ReactDOM.render(
  <Container data={bookdata} />,
  document.getElementById('app')
);