ababup1192
2/24/2015 - 7:40 AM

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

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

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
// Comment
// プロパティを自由に持って描画することが可能。
// childrenは、innerHTML(描画時は<span>タグに囲まれていた。)に対応している。
// おそらく全てreactiveなオブジェクトとするため。
var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
          {this.props.children}
      </div>
    );
  }
});

// ComponentList
// プロパティは、以下のように埋めることが可能。
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment</Comment>
      </div>
    );
  }
});

// ComponentForm
var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});

// Compornentを組み合わせる。
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

// 組み合わせたComponentを描画。
// 以下のようなHTMLを生成
/*
<div id="content">
  <div class="commentBox" data-reactid=".0">
    <h1 data-reactid=".0.0">Comments</h1>
    <div class="commentList" data-reactid=".0.1">
      <div class="comment" data-reactid=".0.1.0">
        <h2 class="commentAuthor" data-reactid=".0.1.0.0">Pete Hunt</h2>
        <span data-reactid=".0.1.0.1">This is one comment</span>
      </div>
    <div class="comment" data-reactid=".0.1.1">
      <h2 class="commentAuthor" data-reactid=".0.1.1.0">Jordan Walke</h2>
      <span data-reactid=".0.1.1.1">This is *another* comment</span>
    </div>
  </div>
  <div class="commentForm" data-reactid=".0.2">Hello,  world! I am a CommentForm.</div>
  </div>
</div>
*/

React.render(
  <CommentBox />,
  document.getElementById('content')
);
README.md
content_copyfile_download
  • Rendered
  • Source

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

- CommentBox
  - CommentList
  - Comment
- CommentForm