かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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>

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