Hello React.js

というわけで、今回はHello World的なComponentを作ってみたいと思います。

基本的にはReact.createClassでComponentを作って、それらのComponentを組み合わせてページを作ってReact.renderでDOMと紐付けることで表示を行います。

JSXを使う

JSXについては明日のAdvent Calendarで書きますが、こんな感じでJSの中にXML likeにマークアップを直接書くことが出来ます。

といってもこのままブラウザで実行すると当然エラーになるので、react-toolsを使って事前にcompileするか、http://fb.me/JSXTransformer-0.12.1.js にあるようなJSXTransformerを事前に読み込んでおく必要があります。

また、browserifyでreactifyを使うなどして変換する方法もあります。

var React = require('react');

var Hello = React.createClass({
  render: function() {
    return (
      <div className="container">Hello {this.props.name}</div>
    );
  }
})

React.render(<Hello name="React" />, document.getElementById("app"));

ちなみにdivもReactのComponentです。

JSX + ES6, 7のsyntax(一部)

JSXのtransformにはharmony optionがあって、これを有効にすることで一部のES6, 7のsyntaxを使用することが出来ます。

var React = require('react');

var Hello = React.createClass({
  render() {
    return (
      <div className="container">Hello {this.props.name}</div>
    );
  }
})

React.render(<Hello name="React" />, document.getElementById("app"));

ArrowFunctionなんかはmapと組み合わせて使うととても便利です。

var items = this.props.items.map((item) => {
  return <div>{item.name}</div>;
});

without JSX

JSXなしで書くとこんな感じです。Hello Componentのrenderメソッド以外にもReact.renderでのHello Componentの指定も変わっているのがわかると思います。

var React = require('react');

var Hello = React.createClass({
  render: function() {
    return React.DOM.div({className: 'container'}, 'Hello ' + this.props.name);
  }
})

React.render(
  React.createFactory(Hello)({name: 'React'}), document.getElementById("app")
);

このAdvent Calendarで紹介するコードはJSXでharmony optionを有効にした状態で書いていきます。

というわけで、明日はJSX周りについてもう少し説明したいと思います。