かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Visual Studio上のTypeScript JSXを使ってReact.js「JSXらしい書き方してみよう」

今まで別にTypeScript JSXじゃなくてもいい書き方をしてたのですが、ついにJSXらしい書き方をしてみようと思います。

このコードを

/// <reference path="typings/tsd.d.ts" />

var section = React.DOM.section(
    { className: 'container' },
    React.DOM.h1({ className: 'header' }, 'React!!'),
    React.DOM.ul(
        { className: 'list' },
        React.DOM.li({ className: 'item' }, 'item1'),
        React.DOM.li({ className: 'item' }, 'item2'),
        React.DOM.li({ className: 'item' }, 'item3'),
        React.DOM.li({ className: 'item' }, 'item4')));

ReactDOM.render(section, document.getElementById('content'));

JSXで書くとこうなります。

/// <reference path="typings/tsd.d.ts" />

var section =
    <section className='container'>
        <h1 className='header'>React!!</h1>
        <ul className='list'>
            <li className='item'>item1</li>
            <li className='item'>item2</li>
            <li className='item'>item3</li>
            <li className='item'>item4</li>
            </ul>
        </section>;

ReactDOM.render(section, document.getElementById('content'));

インデントが変なのはVisual Studio先生がそうさせたから。まだこなれてないっぽいですね。

とりあえず最初の感想としては、なにこれキモイ。