React.jsに触れてみた - FLINTERS Engineer's Blog

あけましておめでとうございます。村井です。

今回React.jsを触ってみましたので、その内容を書いていきたいと思います。
たいした内容ではありませんが、ぜひこの記事をとっかかりにしていたければ幸いです。
（利用時のReactのバージョンは0.14.3です）

React.jsとは

そもそもですが、React.jsとはFacebook製のJavaScriptライブラリです。

facebook.github.io

フレームワークじゃなくてライブラリですね。
UI構築するためのものなので、MVCのVのところで使用します。

導入

まずは以下からライブラリをダウンロードします。
https://facebook.github.io/react/
ダウンロードしたら解凍し、buildディレクトリの中身を利用したい場所にコピーします。
これで使う準備は整いました。

ちなみに、ダウンロードせずとも
htmlに以下のように書いてもOKです。

<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>

文字表示させる

いきなり何か作るのもあれなんで、簡単に文字を表示させるところをまずやりたいと思います。

<!DOCTYPE html>
  <head>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello React</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Hello Reactと表示されてれば成功です。

表示されたhtmlを見てみると、

<div id="example">
  <h1 data-reactid=".0">Hello React</h1>
</div>

と書かれていると思います。

これは、
ReactDOM.renderで

<h1>Hello React</h1>

を

<div id="example"></div>

にレンダリングしています。
単純ですね。

ソースの方を見てみましょう。

<script type="text/babel">

という箇所がありますが、
以前では

<script type="text/jsx">

でした。
jsxはJavaScriptに変換して実行される、JavaScriptの代替言語です。
同等のJavaScriptより高速とのこと。

現在のサンプルコードを見てみても、Reactではjsxではなくbabelを使用してますね。

もう少し掘り上げると、babelはjsxを理解してるようです。
http://babeljs.io/blog/2015/02/23/babel-loves-react/

応用

応用といってもこういう風にも書けますよっていう話です。

<!DOCTYPE html>
  <head>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var Hello = React.createClass({
         render: function() {
             return (
                 <div>
                     <h1>Hello React</h1>
                 </div>
             );
         }
      });
      ReactDOM.render(
          <Hello />,
          document.getElementById('example')
      );
    </script>
  </body>
</html>