LoginSignup
9
9

More than 5 years have passed since last update.

@mamao(Masashi Amao)

Reactまとめ - QUICK START - ①

Last updated at Posted at 2015-01-20

までのまとめ

Getting Started

実行環境

JSXについて

  • 簡単に言うとJavascriptのコード中に記述できるXMLライクなシンタックス
  • JSXを含むスクリプトの読み込みにはタイプ属性jsx/textを使用
  • JSXTransformer.jsモジュールを使用して、ブラウザ上でjsx -> jsへ翻訳
  • react-toolsを使ってあらかじめコンパイルしておけば、通常のjsファイルとして読み込み可能
  • JSXについての詳細

Tutorial

  • React.createClass()により新規のReactコンポーネントを生成
  • Reactコンポーネントのrender()はツリー化されたReactコンポーネント群を返し、これはHTMLのレンダリングに使用される。
  • render()内にあるdivタグは実際のDOMではなく、React用divコンポーネントのインスタンス
  • ReactはHTML文字列を生成しないので、デフォルトでXSSに対応
  • React.render()はルートコンポーネントをインスタンス化し、第二引数に指定された生のDOMに挿入
  • JSXは名前空間の汚染を防止するため、コンパイル時にHTMLタグをすべてReact.createElement(tagName)に置き換える。
ベースのHTML
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <!-- jqueryは必須ではない -->
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="jsx/text">
      //サンプルコード
    </script>
  </body>
</html>
JSX
//Reactコンポーネントの生成
var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.
        </div>
     );
   }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);
JS
//Reactコンポーネントの生成
var CommentBox = React.createClass({
    render: function() {
      return (
        React.createElement('div', {className: "commentBox"},
          "Hello, world! I am a CommentBox."
        )
     );
   }
});

React.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);
  • props（propertiesの略）を利用してデータを受け渡す。
  • コンポーネントタグの属性にプロパティをセット
  • 指定されたプロパティは、コンポーネント側からthis.props.属性名で取得できる（JSXの場合は{}で囲む）。
JSX
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        //Commentコンポーネントのプロパティにセットされる値
        //this.props.author = 'Pete Hunt'
        //this.props.children = 'This is one comment'
        <Comment author="Pete Hunt">This is one comment</Comment>
        //Commentコンポーネントのプロパティにセットされる値
        //this.props.author = 'Jordan Walke'
        //this.props.children = 'This is *another* comment'
        <Comment author="Jordan Walke">This is another comment</Comment>
      </div>
    );
  }
});

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author} //CommentListでセットしたauthorを取得
        </h2>
        {this.props.children} //CommentListでセットしたchildrenを取得
      </div>
    );
  }
});

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
      </div>
    );
  }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);
JS
var CommentList = React.createClass({
  render: function() {
    return (
      React.createElement(
        'div',
        {className: 'commentList'},
        //Commentコンポーネントのプロパティにセットされる値
        //this.props.author = 'Pete Hunt'
        //this.props.children = 'This is one comment'
        React.createElement(Comment, {author: 'Pete Hunt'}, 'This is one comment'),
        //Commentコンポーネントのプロパティにセットされる値
        //this.props.author = 'Jordan Walke'
        //this.props.children = 'This is *another* comment'
        React.createElement(Comment, {author: 'Jordan Walke'}, 'This is another comment')
      )
    );
  }
});

var Comment = React.createClass({
  render: function() {
    return (
      React.createElement(
        'div',
        {className: 'comment'},
        React.createElement(
          'h2',
          {className: 'commentAuthor'},
          this.props.author //CommentListでセットしたauthorを取得
        ),
        this.props.children //CommentListでセットしたchildrenを取得
      )
    );
  }
});

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement(
        'div',
        {className: "commentBox"}, 
        React.createElement('h1', {}, 'Comments'),
        React.createElement(CommentList)
      )
    );
  }
});

React.render(
  React.createElement(CommentBox),
  document.getElementById('content')
);
  • ルートコンポーネントから外部データを各コンポーネントに受け渡す場合も、コンポーネントタグの属性に値をセットして、コンポーネント側でpropsから取得できる。
JSX
var data = [
  {author: "Pete Hunt", text: "This is one comment by json"},
  {author: "Jordan Walke", text: "This is another comment by json"}
];

var CommentList = React.createClass({
  render: function() {
    //CommentBoxから受け取ったデータをCommentタグにループでセット
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        {this.props.children}
      </div>
    );
  }
});

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        //ルートコンポーネントから受け取ったデータをCommentListタグにセット
        <CommentList data={this.props.data} /> 
      </div>
    );
  }
});

React.render(
  <CommentBox data={data} />, //jsonデータをセット
  document.getElementById('content')
);
JS
var data = [
  {author: "Pete Hunt", text: "This is one comment by json"},
  {author: "Jordan Walke", text: "This is another comment by json"}
];

var CommentList = React.createClass({
  render: function() {
　　//CommentBoxから受け取ったデータをCommentタグにループでセット
    var commentNodes = this.props.data.map(function (comment) {
      return (
        React.createElement(Comment, {author: comment.author}, comment.text)
      )
    });
    return (
      React.createElement(
        'div',
        {className: 'commentList'},
        commentNodes
      )
    );
  }
});

var Comment = React.createClass({
  render: function() {
    return (
      React.createElement(
        'div',
        {className: 'comment'},
        React.createElement(
          'h2',
          {className: 'commentAuthor'},
          this.props.author
        ),
        this.props.children
      )
    );
  }
});

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.createElement(
        'div',
        {className: "commentBox"}, 
        React.createElement('h1', {}, 'Comments'),
        //ルートコンポーネントから受け取ったデータをCommentListタグにセット
        React.createElement(CommentList, {data: this.props.data})
      )
    );
  }
});

React.render(
  React.createElement(CommentBox, {data: data}),//jsonデータをセット
  document.getElementById('content')
);

次回

Tutrial - Reactive state

参考

React
React (Virtual) DOM Terminology

9
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
9