React.js - HAML風に書く方法 ref: http://qiita.com/mnishiguchi/items/5f5cd8d9d07f56a7360c

file1.txt

@Records = React.createClass
  #...
  render: ->
     <div>
       <table className='table table-bordered'>
         <thead>
           <tr>
             <th>Name</th>
             <th>Vol</th>
             <th>Qty</th>
             <th>Subtotal</th>
             <th>Room</th>
             <th>Category</th>
             <th>Description</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
           { for record in @state.records
               <Record key={record.id} record={record}
                       handleDeleteRecord={this.deleteRecord}
                       handleEditRecord={this.updateRecord} />
           }
         </tbody>
       </table>
     </div>

records-1.js.coffee

@Records = React.createClass

  #...（中略）

  render: ->
     <div className='moving_records table-responsive'>
       <table className='table table-bordered table-condensed'>
         <thead>
           <tr>
             <th>Name</th>
             <th>Vol</th>
             <th>Qty</th>
             <th>Subtotal</th>
             <th>Room</th>
             <th>Category</th>
             <th>Description</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
           { for record in @state.records
               <Record key={record.id} record={record}
                       handleDeleteRecord={this.deleteRecord}
                       handleEditRecord={this.updateRecord} />
           }
         </tbody>
       </table>
     </div>

records-2.js.coffee

@Records = React.createClass
  #...
  render: ->
    React.DOM.div null,
      React.DOM.table
        className: 'table table-bordered'
        React.DOM.thead null,
          React.DOM.tr null,
            React.DOM.th null, 'Name'
            React.DOM.th null, 'Vol'
            React.DOM.th null, 'Qty'
            React.DOM.th null, 'Subtotal'
            React.DOM.th null, 'Room'
            React.DOM.th null, 'Category'
            React.DOM.th null, 'Description'
            React.DOM.th null, ''
        React.DOM.tbody null,
          for record in @state.records
            React.createElement Record,
              key:    record.id,
              record: record,
              handleDeleteRecord: @deleteRecord,
              handleEditRecord:   @updateRecord

records-3.js.coffee

@Records = React.createClass
  #...
  render: ->
    div   = React.DOM.div
    table = React.DOM.table
    thead = React.DOM.thead
    tr    = React.DOM.tr
    th    = React.DOM.th
    tbody = React.DOM.tbody

    div null,
      table
        className: 'table table-bordered'
        thead
          tr null,
            th null, 'Name'
            th null, 'Vol'
            th null, 'Qty'
            th null, 'Subtotal'
            th null, 'Room'
            th null, 'Category'
            th null, 'Description'
            th null, ''
        tbody null,
          for record in @state.records
            React.createElement Record,
              key:    record.id,
              record: record,
              handleDeleteRecord: @deleteRecord,
              handleEditRecord:   @updateRecord

records-4.js.coffee

R = React.DOM

@Records = React.createClass
  #...
  render: ->
    div null,
      table
        className: 'table table-bordered'
        R.thead
          R.tr null,
            R.th null, 'Name'
            R.th null, 'Vol'
            R.th null, 'Qty'
            R.th null, 'Subtotal'
            R.th null, 'Room'
            R.th null, 'Category'
            R.th null, 'Description'
            R.th null, ''
        R.tbody null,
          for record in @state.records
            React.createElement Record,
              key:    record.id,
              record: record,
              handleDeleteRecord: @deleteRecord,
              handleEditRecord:   @updateRecord

records.js.coffee

@Records = React.createClass

  #...（中略）

  render: ->
    div   = React.DOM.div
    hr    = React.DOM.hr
    table = React.DOM.table
    thead = React.DOM.thead
    tr    = React.DOM.tr
    th    = React.DOM.th
    tbody = React.DOM.tbody

    div
      className: 'moving_records table-responsive'
      table
        className: 'table table-bordered table-condensed'
        thead
          tr
            th null, 'Name'
            th null, 'Vol'
            th null, 'Qty'
            th null, 'Subtotal'
            th null, 'Room'
            th null, 'Category'
            th null, 'Description'
            th null, ''
        tbody null,
          for record in @state.records
            React.createElement Record,
              key:    record.id,
              record: record,
              handleDeleteRecord: @deleteRecord,
              handleEditRecord:   @updateRecord

records.js.jsx

@Records = React.createClass

  #...（中略）

  render: ->
    return
     <div className='moving_records table-responsive'>
       <table className='table table-bordered table-condensed'>
         <thead>
           <tr>
             <th>Name</th>
             <th>Vol</th>
             <th>Qty</th>
             <th>Subtotal</th>
             <th>Room</th>
             <th>Category</th>
             <th>Description</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
           { for record in @state.records
               <Record key={record.id} record={record}
                       handleDeleteRecord={this.deleteRecord}
                       handleEditRecord={this.updateRecord} />
           }
         </tbody>
       </table>
     </div>

こんな風にReactの部品が書けたらいいなー

div
  table
    thead
      tr
        th 'Name'
        th 'Vol'
        th 'Qty'
        th 'Subtotal'
        th 'Room'
        th 'Category'
        th 'Description'
        th ''
    tbody
      for record in @state.records
        React.createElement Record

目標

%div
  %table
    %thead
      %tr
        %th 'Name'
        %th 'Vol'
        %th 'Qty'
        %th 'Subtotal'
        %th 'Room'
        %th 'Category'
        %th 'Description'
        %th ''
    %tbody
      = render @records