Second example

gistfile1.coffee

{DOM} = React

books = [ new Book(1, "Book #1", "Author #1"),
          new Book(2, "Book #2", "Author #2") ]

BookListHeader = React.createClass
  render: ->
    DOM.div
      className: 'book-list-box'
      DOM.h2
        key: 'bookListHeader'
        "Listing #{@props.companyName} Books (#{@props.children.length} titles in stock)"
      DOM.ul
        className: 'list-group'
        @props.children # This component is open.


bookListComponent =
  BookListHeader
    companyName: "Arkency"
    books.map (book) =>
      BookItem
        book: book

BookItem = React.createClass
  renderAuthor: ->
    DOM.div
      key: "bookItem_#{@props.book.id}_Author"
      className: 'pull-right'
      @props.book.author

  renderBookTitle: ->
    DOM.strong
      key: "bookItem_#{@props.book.id}_Title"
      @props.book.title

  render: ->
    DOM.li
      key: "bookItem_#{@props.book.id}"
      className: 'list-group-item'
      @renderAuthor()
      @renderBookTitle()