Reactってかっこいい！
HTMLでロボアプリを作ってるけど、読み込みがもっさりしていました。
Reactは高速らしいし、SPAで作れば動きは快適になるかもしれないと思ったので、
create-react-appを使って実験実装。
create-react-appを使うと簡単に環境構築できるらしい。
$ npm i --save create-react-app
Reactは動いた。アプリのレスポンスも改善された。しかし…
pepper開発におなじみのqimessaging.jsはそのままでは、ビルドできません。
例えばこんなコード。
App.js
new QiSession();
ビルドしようとすると、未定義のエラーが出ます。
$ npm run build
...
71:25 error 'QiSession' is not defined no-undef
...
未定義なのは当たり前（ブラウザで実行されるときはグローバルオブジェクトになっているはず）なので、
どうにかして読めないものかと試行錯誤。
同じ状況のjQueryなんかはnpmでインストールして読めました。
App.js
import $ from 'jquery'
どうにもうまくいかないので、ビルド時にはチェックをスキップするようにしました。
まずはpublicフォルダにqimessaging.jsをコピーして、index.htmlに読み込みを追記。
$ ll public
-rw- 24838 2017-03-28 09:33 favicon.ico
-rw- 1342 2017-03-30 21:19 index.html
-rwx 52133 2017-03-30 20:46 qimessaging.js*
public/index.html
<head>
...
<script src="%PUBLIC_URL%/qimessaging.js"></script>
...
</head>
次にjs側でのビルド時のQiSessionのチェックを無効化します。
App.js
// eslint-disable-next-line
new QiSession();
これでビルドが通りました！
ブラウザでの実行時はQiSessionがグローバルオブジェクトになっているので問題ありません。
React楽しい
pepperのアプリを作るのが本筋でしたが、pepper × react 楽しいです。
reactは理解できたのですがreduxの考え方が難しいです。
メモリイベントの類を、どこで管理するかとか、組み合わせを考えるのも楽しいですね。