かずきのBlog@hatena

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

Visual Studio上でTypeScript JSXを使ってReact.js「低レベルなタグの組み立て」

createElementメソッドを使ってせっせとタグを組み立てることができます。タグ名、属性、子要素という感じみたいです。

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

var h1 = React.createElement('h1', { className: 'header' }, 'これはReactです');
var p = React.createElement('p', null, 'Reactで快適なSPA生活を!');
var section = React.createElement('section', null, h1, p);
ReactDOM.render(section, document.getElementById('content'));

これで

<section>
  <h1 class="header">これはReactです</h1>
  <p>Reactで快適なSPA生活を!</p>
</section>

こんな感じのタグが組み立てられます。