ababup1192
2/24/2015 - 6:30 AM

React.js 公式ページ(http://facebook.github.io/react/index.html) なぞり 02 Tutorial1

React.js 公式ページ(http://facebook.github.io/react/index.html) なぞり 02 Tutorial1

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="https://fb.me/react-0.12.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script src="components.js" type="text/jsx"></script>
  </body>
</html>
components.js
content_copyfile_download
// creatClassメソッドに、renderオブジェクトを渡すとJSXを作ってくれる。
// JSXを返す無名関数を値として持つ。 返すdivタグは、DOMノードではなく、
// Reactのdivコンポーネント。XSS対策も考えて安全な機構になってるらしい。
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

// 作ったJSXを自由に呼び出しできる。このJSコードは、HTMLで以下のように展開される。
// <div class="commentBox" data-reactid=".0">Hello,  world! I am a CommentBox.</div>
React.render(
  <CommentBox />,
  document.getElementById('content')
);

// ↑ のコードは下記のコードのsyntctic sugarである。
/*
var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement('div',  {className: "commentBox"},
        "Hello,  world! I am a CommentBox."
      )
    );
  }
});

React.render(
  React.createElement(CommentBox,  null),
    document.getElementById('content')
);
*/
README.md
content_copyfile_download
  • Rendered
  • Source

Facebookなどのコメントボックスインターフェース(見る、投稿、バックエンド連携)を作る。以下の構造を再現するチュートリアル。

- CommentBox
  - CommentList
  - Comment
- CommentForm