技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。

ReactJS の tutorial から学んでみる。

ReactJS 勉強 html5

と言っても昨日 18時から20時までチュートリアルコードを読んで試しただけだが。

まず ReactJS ってなんぞやって話だと、下記を参照。

facebook.github.io

BUILDING USER INTERFACES と銘打ってはいるものの、フロントエンド MVC と言っても過言ではなさそうだ。
で、チュートリアル Tutorial | React をやった感じから、どんなフレームワークなのかを感じたままに書いてみる。

UI とロジックの共存

ユーザインターフェースが最優先だと銘打っているだけあり、JSX を使ったロジックとHTMLの融合が特徴の一つだ。

速攻で理解できるのが下記。

<html>
    <head>
        <title>Example</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
    </head>
    <body>
        <div id="content"></div>
        <script src="/javascripts/jquery.min.js"></script>
        <script src="/javascripts/react-with-addons.min.js"></script>
        <script src="/javascripts/components/example.js"></script>
    </body>
</html>

example.js は下記の JSX ファイルをコンパイルして生成

React.render(
  <h1>Welcome to my broken show</h1>,
  document.getElementById('content')
);

コード内に HTML を書くという行為に最初は思うところもあるが、とりあえず置いておく。
実際ここに書くのはどっちかというとテンプレートに近いのであんまり気にしても仕方ない。

コンポーネント指向

React はコンポーネント指向と言っていい考え方をしている。

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

React.render(
  <Comment author="azalea">ほげっとな</Comment>,
  document.getElementById('content')
);

createClass でコンポーネントを定義して、レンダリング時にタグの一部として呼び出せる。まるで XAML だ。

属性とコンテンツを与えると、呼び出し先では props 経由でアクセス可能。

FLUX による常に一方通行なコンポーネント

flux がどういうものかというと、初期化の完了後に下記のサイクルで画面を更新している。

facebook.github.io

イベント発生 → イベントをディスパッチ → Store にデータを格納 → Store の状態を見て View をレンダリング

という線形的な変更が行われる。
ここで重要な事は、画面の状態をプログラム側で意識せずに、常に「今の状態でどう表示するか」でしかないところだ。

ステートレス！これが最高に気持ちがいい。
（管理する状態が増えればバグが増える、これ関数型の常識）

イベント駆動

コンポーネントごとにイベント管理するスタイルで、イベント駆動の側面がある。
とりあえずチュートリアル上で気づいた createClass 後のハンドラを下記に挙げる。

  • render : レンダリングする
  • getInitialState : コンポーネント初期化時に呼び出される。内部保持している state の初期状態を設定する。
  • componentDidMount : 初期化直後に一度だけ実行される。初期化が実行され、配置完了時に呼び出される。

あと、フォーム上のイベントを下記のような感じで設定してる。

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    // ここでイベント処理
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <!-- 略 -->
      </form>
    );
  }
});

jquery の hover とかどういう風にとるのかまでは少々わからんが…。

なんにせよ、これで色々作れそうな気がする。