React


First Component


コメントボックス コンポーネントを作成します

コンポーネントの構造は


javascript
JSX Syntax

javascript

  // 新しいReactコンポーネントを生成する
  var CommentBox1 = React.createClass({
    render: function() {
       // HTMLに出力されるReactコンポーネントの系統樹が返される
       return ( 
        <div className="commentBox1">
          Hello, world! I am a CommentBox1.
        </div>
      );
    }
  });

  // ルートコンポーネントのインスタンス化、フレームワークの開始
  // 第2引数で与えられるDOM要素にマークアップを出力する
  React.render(
    <CommentBox1 />,
    document.getElementById('content1')
  );

JSX Syntax

  // 新しいReactコンポーネントを生成する
  var CommentBox2 = React.createClass({displayName: 'CommentBox2',
    render: function() {
      // HTMLに出力されるReactコンポーネントの系統樹が返される
      return (
        React.createElement('div', {className: "commentBox2"},
          "Hello, world! I am a CommentBox2."
        )
      );
    }
  });

  // ルートコンポーネントのインスタンス化、フレームワークの開始
  // 第2引数で与えられるDOM要素にマークアップを出力する
  React.render(
    React.createElement(CommentBox2, null),
    document.getElementById('content2')
  );
ノート:本来のHTML要素名は小文字で始めます、一方Reactのクラス名は大文字で始めます