Septeni Engineer's Blog

セプテーニエンジニアが綴る技術ブログ

React.jsに触れてみた

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

今回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>

ブラウザで確認した結果は先ほどのソースと同じだったか思います。

今回はReactDOM.renderの中に 直接

<h1>Hello React</h1>

と書かずに、

<Hello />

として、 React.createClassでHelloを定義してレンダリングしています。
この記述の方がすっきりしますね。

React.jsはこういったコンポーネントを作成していくだけで作り上げていくことができます。

以上となります。
最後まで読んでいただきありがとうございました。