この章を読み進める前に、Onsen UIをはじめようとOnsen UIの基礎に目を通して頂くことを推奨いたします。心配ありません、読み終わるまで5分もかかりません。
Reactバインディングは、Web Componentsをラッピングし、Reactとの親和性の高いAPIを提供するものです。
Reactバインディングはreact-onsenuiパッケージを通じて提供されます。下記のようにしてNPMを通じてダウンロードしてください。
$ npm install onsenui react-onsenui --save-dev
他にもCDN経由で使ったり、Onsen UIのリリースに含まれている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モジュールシステムを用いることもできます。この場合、reactとreact-domパッケージに加えて、onsenuiとreact-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';
では簡単な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>
);
この例のように、すべての<Ons.*>コンポーネントはReactコンポーネントで、react-onsenui.jsで呼び出されます。すべてのReactコンポーネントの一覧は、リファレンスを参照してください。
これらをまとめると、index.htmlがブラウザーで呼び出されると、JSXコードがコンパイルされ、body要素に組み込み、内容がレンダリングされます。
ReactやJSXに関する詳細については、Reactドキュメントも参照してください。