Improve this

React

この章を読み進める前に、Onsen UIをはじめようOnsen UIの基礎に目を通して頂くことを推奨いたします。心配ありません、読み終わるまで5分もかかりません。

Reactバインディングは、Web Componentsをラッピングし、Reactとの親和性の高いAPIを提供するものです。

Reactバインディングのダウンロード

Reactバインディングはreact-onsenuiパッケージを通じて提供されます。下記のようにしてNPMを通じてダウンロードしてください。

$ npm install onsenui react-onsenui --save-dev

他にもCDN経由で使ったり、Onsen UIのリリースに含まれているReactバインディングを使うこともできます。

Reactバインディングのセットアップ

Onsen UIを<script></script><link>タグを使って、下記のように読み込めます:

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="onsenui.js"></script>
<script src="react-onsenui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>

もしくは、BrowserifyやWebpackといったCommonJSモジュールシステムを用いることもできます。この場合、reactreact-domパッケージに加えて、onsenuireact-onsenuiパッケージを取り込んでください。下記の例では、onsにOnsen UIのコアインスタンスを、OnsにReactのコンポーネントをセットしています。

var React = require('react');
var ReactDOM = require('react-dom');
var ons = require('onsenui');
var Ons = require('react-onsenui');

他にも、ES6インポートを用いて、react-onsenuiパッケージから必要なモジュールだけを読み込むことができます。

import {Page, Toolbar, Button} from 'react-onsenui';

ReactでHello World

では簡単なHello Worldアプリを開発してみましょう。下記のコードは、Onsen UIとReactを用いたHello Worldコードの例になります。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/onsenui.css">
  <link rel="stylesheet" href="css/onsen-css-components.css">
  <script src="react.js"></script>
  <script src="react-dom.js"></script>
  <script src="onsenui.js"></script>
  <script src="react-onsenui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel">
    var App = React.createClass({
      handleClick: function() {
        ons.notification.alert('Hello world!');
      },

      render: function() {
        return (
          <Ons.Page>
            <Ons.Button onClick={this.handleClick}>Tap me!</Ons.Button>
          </Ons.Page>
        );
      }
    });
    ReactDOM.render(<App />, document.getElementById('app'));
  </script>
</body>
</html>

この例では、<body>タグの中に<div>タグが配置されており、アプリのIDが指定されています。下の方のJavaScriptコードに記述されているように、ここにReactはコンテンツを描画します。

また、<script></script>text/babelという形式が指定されています。これは、このスクリプトはブラウザがサポートする(通常はECMAScript5)JavaScriptではなく、JSX形式に対応したECMAScript6(ES2015)であることを示しています。BabelはこのコードをES5に変換します。パフォーマンス向上のために、Node.jsを用いてコードをトランスパイルすることができます。

コードでは、React.createClass()関数を用いて、”App”という名前を持つReactコンポーネントを定義しています。このコンポーネントはrenderというメソッドを持ち、アプリが描画される時にはこの関数が呼び出されます。戻り値はJavaScriptを拡張したXML風の言語である、JSXで定義されています。今回の例では、<Ons.Button>コンポーネントが含まれた<Ons.Page>コンポーネントを返しています。onClick Propを使って、ユーザーがボタンをタップした際にhandleClickメソッドを呼び出します。

return (
  <Ons.Page>
    <Ons.Button onClick={this.handleClick}>Tap me!</Ons.Button>
  </Ons.Page>
);

この例のように、すべてのコンポーネントはReactコンポーネントで、react-onsenui.jsで呼び出されます。すべてのReactコンポーネントの一覧は、リファレンスを参照してください。

これらをまとめると、index.htmlがブラウザーで呼び出されると、JSXコードがコンパイルされ、body要素に組み込み、内容がレンダリングされます。

ReactやJSXに関する詳細については、Reactドキュメントも参照してください。