React.js - HAML風に書く方法

More than 3 years have passed since last update.


経緯

先日ある記事を読んでいて、少し工夫するだけでReact.jsをHAML風に書くことができることに気がついた。


やりたいこと

React.jsを日頃よく使うHAMLのように書きたい。

Screenshot 2015-07-06 09.02.49.png


目標

%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



資料