MonacaでReactを使う

Monaca上でReactを使ってみました。

通常は新しいプロジェクトを作成するときは、ブラウザ上かLocalKit上でやるかと思いますが、Reactなどのフレームワークを用いたものはMonaca CLI上で新規作成する必要があるみたいです。

概要はココ
Monaca CLI の概要 – Monaca Docs
コマンド一覧はココ
Monaca CLI コマンド – Monaca Docs

ページの説明通りにインストールなどの準備をしていきます。

インストール
$ npm install -g monaca

ログインします。
$ monaca login

IDとPassを求められるので、入力します。
これで事前準備は完了です。

次にプロジェクトを作成していきます。
クラウド上にプロジェクトが作成されるので、フリープランの場合は事前にプロジェクトを3つ以下にしといたほうが良いかもしれません。
では「helloworld」というプロジェクトを作成していきます。
$ monaca create helloworldと入力すると選択肢が出てくるので、矢印キーかvimの移動キーで選択します。

今回は
Onsen UI and React → Onsen UI V2 React Tabbar
と選びました。

これでクラウド上にhelloworldが作成されるのでLocalKitにインポートします。

そこから適当に
src/HomePage.jsxとかをいじってみます。

でいつも通り保存。

 
あれ、プレビューに何も反映されない・・。
プレビューを閉じてLocalKitの「トランスパイラー」タブを見てみるとなにやら大量のエラーが出てました。

ここで発狂しそうになったのですが、冷静に読んでみると
react
react-dom
onsenui
react-onsenui
が入ってないよって書いてあるので言われた通りに入れてみました。

cdでプロジェクトのあるフォルダに移動した後に
$ npm init
$ npm install onsenui react-onsenui --save-dev
$ npm install react react-dom --save-dev
と4つとも入れみて再び適当に編集→保存とすると、

見事自動的にトランスパイルされています。
monaca CLIからReactのテンプレ利用して作っているので自動的にreactとかonsenuiとか入れておいてよ!って感じですが、無事できたので良かったです。