React.jsその0001 公式サイトのHello, worldをやってみる

参考にさせて頂いたページ

バージョン

React v0.13.2

ダウンロードする

公式サイトでDownload Starter Kit 0.13.2をクリックしたらreact-0.13.2.zipがダウンロードできて、中に色々入っていた。

公式サイトのHello, worldをやってみる

色々入っていたけど、Hello, worldで使うファイルはbuildディレクトリに入っている2ファイルらしい。

react_sample.htmlを作成して、公式サイトにならって以下のように書いた。

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

ブラウザで開くと、Hello, world!と表示された。

出力されたhtmlソース

以下のような感じで、#exampleの中にh1要素が挿入されたのがわかる。

<div id="example">
  <h1 data-reactid=".0">Hello, world!</h1>
</div>

コンパイル前とコンパイル後

コンパイル前のソースコードが

      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );

コンパイル後のソースコードが

      React.render(
        React.createElement('h1', null, 'Hello, world!'),
        document.getElementById('example')
      );

ということらしい。

今回はここまで。

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。