React.jsのチュートリアルを触る

VirtualDOM Advent Calendar 2014 - Qiitaの14日目です。

まえがき

最近はやりのVirtualDOMというのに触れてみるためにReact.jsのチュートリアルを一通り試してみた。

ここのチュートリアルやるだけで一通り動かすことができるようになる。なんとなく初めて見るにはチュートリアルをやるのが一番。
実際に動くものをJS Binにあげたので詳しくは以下で。

この先は少し細かく見ていく。自分用のメモに近いのでちょっとよみずらいかもしれない。
ちなみにDOMのあたりはJSXの構文を使ってる。JSXはよくわかってないがJS
でそのまま書くとえらい面倒なので採用する方が無難だと思う。

コンポーネントの作成

var CommentBox = React.createClass({
  handleCommentSubmit: function(comment) {

    var comments = this.state.data;
    var newComments = comments.concat([comment]);
    this.setState({data: newComments});

  },
  getInitialState: function() {
    return {data: []};
  },
  loadCommentsFromServer: function() {
    var data = [
      {"author": "Pete Hunt", "text": "This is one comment"}
    ];
    this.setState({data: data});
  },
  componentDidMount : function() {
    this.loadCommentsFromServer();
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>CommentForm</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

まずReact.createClass({}) でコンポーネントを作成する。なにをおいてもそこからはじまる。
createClassの引数にオブジェクトを与える。オブジェクトのキーのgetInitialState componentDidMount renderはReactの機能として必要なところ。それ以外は自由に書いている。
getInitialStateはコンポーネントの持っているStateを初期化する。
Stateについては詳しくは@koba04さんの

React.jsのState

が詳しいのでそこを参照のこと。
ここではdataという配列を入れている。

　componentDidMount　はコンポーネントがレンダリングされた後に実行される。ここでは　loadCommentFromServer　を呼び出している。ここで呼び出している関数は　createClass　に入れたオブジェクトの中に定義してある。処理はできるだけ小分けにするのが良さそう。

ちなみに　loadCommentFromServer　はチュートリアルではajaxを用いてデータを所得する処理がかかれている。

render はレンダリングするコンポーネントのDOMを返している。ここでJSXの構文を使う。
ここではCommentListとかCommentFormとか見慣れないDOMがかかれているが、これはReact.jsで作ったコンポーネント。

var CommentList = React.createClass({});
var CommentForm = React.createClass({});

のようにReact.jsでコンポーネントを作成すれば render の中で呼び出すことができる。こうやってVirtualDOMのツリーを作っていく。

レンダリング

コンポーネントを作成したら React.render でレンダリングを実行する。

React.render(
  <CommentBox />,
  document.getElementById('content')
);

第一引数にコンポーネントの名前。第二引数にコンポーネントをレンダリングする場所を指定する。

おわりに

とりあえずチュートリアルに従って書いてみた。基本的にコンポーネントを作成してそれを組み合わせて最後にレンダリングするという処理の流れになっている。
HTMLを直接編集しないでJavaScriptだけでできるというのがちょっと慣れないけどちょっと新鮮だった。
実際に仕事で採用するにはデザイナーとフロントエンドエンジニアの作業フローを工夫する必要があるかもしれない。デザイナーがDOMの構造を変えたいと思ったらJSを触らなくてはならないので少しハードルが高いかも？（そんなことはないか

VirtualDOMが早いとか効率がいいとかそういうことはまだ実感として感じられていないので、もう少し勉強する必要がある。