React のチュートリアルをやってみた

  • 19
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

公式チュートリアルを参考に、ところどころカスタマイズしならが試行錯誤してみたメモ。

react-tools のインストール

チュートリアルでは JSXTransformer を使って JSX のオンライン変換しているが、パフォーマンスが出ないので production では非推奨である。ここでは実用を意識して precomplile する方針をとる。

precompile に用いる react-tools は

$ npm i -g react-tools

でインストール可能 (要npm)

index.html

まず public/index.html を作る。

<html>
  <head>
    <title>Hello React</title>
    <script src="https://fb.me/react-0.13.2.js"></script>
    <!-- precompile するので不要 --> 
    <!-- <script src="https://fb.me/JSXTransformer-0.13.2.js"></script> -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <!-- precompile 済みの JavaScript を読み込む -->
    <script src="build/example.js"></script>
  </body>
</html>

JSX の記述

src/example.js に JSX のコードを記述していく。
まずは簡単に、<div> タグに囲まれた ConmmentBox を作ってみる。

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

src/example.js を保存した後、

$ jsx --watch --harmony src public/build

コマンドを叩くことで、src/example.js が JavaScript にコンパイルされ、public/buid に展開される。
watch コマンドはsrc以下のファイルを更新する度に自動的にコンパイルが走るので開発に便利。

この状態でブラウザからindex.htmlにアクセスすると、Hello World が表示される。

Screen Shot 2015-04-24 at 00.26.49.png

何が起こっているかのおさらい

  • React.createClass で React Component を生成
  • React.createClass に渡している render メソッドが React Component のツリーを返していて、それらが DOM を紐づくことで表示が行われる
    • React Component について詳しくは koba04 さんの記事を参考
  • JSX のコードでは一見<div>のように HTML タグを直接記述しているように見えるが、これもまた div の React Component である。

今日はここまで

現時点でのサンプルファイルはこちら