React.jsをさわりはじめてみた記念日 - 痛風とシステム障害を恐れるエンジニアのブログ

React.jsはFacebook謹製のJSライブラリで半年ほど前にも触ったことがあったのですが、その時は日本語のチュートリアルがなかったのと、後述しますがJSXからのコンパイル環境を整えられなくて、私には使いこなせてないなぁという感じが強かったので遠のいてました。
ところが、ここ最近日本語の公式チュートリアルができていたので、また再チャレンジをしてみた次第。

とりあえず、今作っているサイトのフロント部分で使えるようになりたい・・・。
頑張ろ。

まずは公式の日本語チュートリアル。facebook.github.io

気のせいだろうか・・・本家のと内容が若干違うような？？
まぁいいや。

React.jsの特徴としてJSXという記法で記述できるというのがあるらしいです。
XMLのような形で記述できるので書きやすいんだとか。
（そう思える余裕が今の自分にはないｗ）

流れとしては
JSXで書く→JSにコンパイル→フロントで呼びされる。
という感じで、コンパイルをオンラインでやることもできるけど、その分余分な処理が発生するので本番では使えない。
本番ではJSにコンパイルしたのを用意しておく形になるみたい。

JSXの書き方は

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

タグの中にclassNameというのがあるのがまた特徴的ですな。
classは諸事情により使えないらしい。

jsxファイルをJSファイルにコンパイルする環境がチュートリアルにものってますが、npmありきでかいてるのでnpmから。
npmのインストール

brew install node

Reactの何かのツールのインストール

npm install -g react-tools

環境が整ったところでjsxをコンパイルしてみる。

jsx --watch src/ build/

このコマンドをすると

すると、src/helloword.js に変更を加えるごとに build/helloworld.js が自動で生成されるようになります。

とマニュアルにはあるけど、結局生成されなかった・・・。
最終的に生成できたコマンドは

jsx -x jsx src/ build/

これだと常に監視はせず、都度都度必要に応じて実行する必要があるけど、文法エラーとかもコンパイル時に出てくれるので便利。
マニュアルのはなぜ動かないのか謎だけど、とりあえず、当面はこのスタイルで触っていこうかなーと思ってるところです。