ababup1192
2/24/2015 - 7:08 AM

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

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

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
// ComponentList
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </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">Hello, world! I am a CommentList.</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