경위

요 전날 한 기사을 읽고 조금 궁리하는 것만으로 React.js를 HAML 스타일로 쓸 수 있다는 것을 깨달았다.

하고 싶은 일

React.js를 평소에 사용한다 HAML 처럼 쓰고 싶다.



목표

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

보통 JSX + CoffeeScript로 쓰면 다음과 같다. ＜＞를 배제하고 싶다.

@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>

하는 방법

1. JSX를 사용하지 않고 CoffeeScript로 작성

JSX는 선택사항으로서 준비되어 있지만, 필요조건이 아니라고 다큐멘테이션에 쓰여져 있다.

JSX is optional and not required to use React.
You don't have to use JSX with React. You can just use plain JS.

먼저 JSX를 사용하지 않고 쓰면 이런 느낌이 든다. 당연하지만, 이것만으로 <>를 배제 가능.

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

2. React.DOM.xxx를 로컬 변수로 바꾸면 HAML 스타일이됩니다.

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

3. React.DOM 부분만을 로컬 변수로 바꾸고 다음과 같이 쓸 수도 있습니다.

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

자료

ht tp // // 펑세보오 k. 기주 b. 이오/레아 ct/도 cs/와 pぇゔぇl-아피. HTML

htps //w w. 아이 rpai r. 코 m / Rea ctjs / Po sts / Rea ctjs - Agui-fu-r-ls-s