MonacaアプリでReactを使ってみよう

最近何かと話題になっているのがReactです。フレームワークという訳ではなく、ビューのライブラリですが、DOMの状態(ステータス)を意識せずに使える点がうけています。従来のサーバサイドのようにHTMLをレンダリングすれば後はReactが処理を行ってくれるのが便利です。

 

今回はそんなReactをMonacaアプリ開発で使ってみます。なお、開発環境としてMonaca Localkitを使っています。

 

Localkitで新規プロジェクト作成

 

まずはMonacaアプリの新規プロジェクトを作成します。今回は最低限のテンプレートを選択しています。

 

 

wwwの下にsrcとjsというフォルダを作成しています。srcにはReact用のjsxファイルが、jsフォルダにはjsxから変換したjsファイルが入ります。

 

npmで設定

 

必要なライブラリはnpmでそろえます。あらかじめnode.jsをインストールしておいてください。

 


npm init
npm install --save react react-dom babelify babel-preset-react
npm install -g browserify babelify watchify

 

browserifyはrequireするファイルの連結、babelifyはES6に準拠した書き方の展開、watchifyは差分ビルド用に使います。構成は次のようになります。

 

 

ファイルの作成

 

ではjsxファイルを作成します。www/src/index.jsxとして作成します。

 


var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

 

そしてこのjsxファイルを変換します。

 


$ watchify -[ babelify --presets [ react ] ]  www/src/index.jsx -o www/js/index.js -v
666455 bytes written to www/js/index.js (1.84 seconds)

 

-vをつけておくと簡単なメッセージが流れますのでちゃんと動いているか確認しやすいです。

 

HTMLファイルの修正

 

続いてHTMLファイルを修正します。

 


<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
    </script>
  </head>
  <body>
<div id="content">
      This is a template for Monaca app.
    </div>
    <script src="js/index.js"></script>
  </body>
</html>

 

一番下でwatchifyによって生成されたindex.jsを読み込んでいます。これをプレビューで確認すると、Hello, world!と表示されるはずです。

 

 

もう少し複雑にする

 

Reactの特徴としてコンポーネントを連携する機能が知られています。例えば以下のようにコンポーネントを分割することで再利用性を高めたり、リスト表示をシンプルにできます。

 


var React = require('react');
var ReactDOM = require('react-dom');
var React = require('react');
var ReactDOM = require('react-dom');
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});
var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});
var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello, world! I am a CommentForm.
      </div>
    );
  }
});
ReactDOM.render(
  React.createElement(CommentBox, null),
  document.getElementById('content')
);

 

 


 

Reactでは素のJavaScriptではなく、JSXを使って書くのが基本です。Webブラウザ上でもReactの文法やBabelを解釈する方法はありますが、実行速度が若干落ちてしまいます。そのため、オフラインで変換する方が良いでしょう。そんな時にはMonaca Localkitを使って書いてみてください。

author img for asial

asial

前の記事へ

次の記事へ

一覧へ戻る
PAGE TOP