読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

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

制作 javascript reactjs

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

Getting Started | React

いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう! 【前編】 (1/3):CodeZine

React.jsチュートリアル【日本語翻訳】 | mae's blog

バージョン

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')
      );

ということらしい。

今回はここまで。