React 絶好調ですね。以前はちゃんとした開発環境を整えるには Webpack や Babel などを設定する必要があり面倒でしたが、Facebook の create-react-app の登場により一発で環境構築ができるようになり、大変便利になりました。
create-react-app そのものは
Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する
や、
Facebook 公式ツール Create React App を使って React 開発の初歩を学ぶチュートリアル
などを参照いただければと思いますが、この記事では Cordova と組み合わせてネイティブアプリとしてパッケージする方法を書いています。
環境は OS X Yosemite 10.10.5 です。
Cordova のインストール
https://cordova.apache.org/docs/en/latest/guide/cli/
の手順通り、Cordova をインストールします。
% sudo npm install -g cordova
...
% cordova --version
6.4.0
...
% cordova create myapp de.georepublic.myapp MyApp
% cd myapp
% cordova platform add ios --save #ios環境の追加
% cordova platform add android --save #android 環境の追加
cordova requirements を実行すると、ビルドするのに足りないライブラリなどが出てくるので、インストールします。
私の場合は ios-deploy が足りませんでした。
指示通りsudo npm install --global ios-deployを実行してみた所エラーになったのですが、
https://github.com/phonegap/ios-deploy/issues/109
にあるように
sudo npm install --global --unsafe-perm ios-deploy
を実行したらインストールできました。
この時点で、
% cordova build
を叩いてみて、色々でたあとに
** BUILD SUCCEEDED **
と表示されればビルド成功。
cordova emulate android
で android のエミュレータが、
cordova emulate ios
でiOSのエミュレータが立ち上がりデフォルトのページが表示されます。
create-react-app でアプリを作る
では、いよいよ create-react-app をインストールします。
% npm install -g create-react-app
...
% create-react-app --version
create-react-app version: 0.6.0
React app を作成します。
# cordova アプリの root にて
% create-react-app src # src フォルダに React アプリを作成
npm start を実行すると、ブラウザが立ち上がりデフォルトのページが見れるはずです。
% cd src
% npm start
Compiled successfully!
The app is running at:
http://localhost:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.
とりあえずビルドしてみますが、 その前に、"homepage" の設定を package.json に加え、相対パスで js などのファイルを読み込む設定に変更しましょう。
これをやっておかないと、後で Cordova から読み込んだ時にページが表示されません。（Cordova で開いたindex.htmlのルートパスは違う場所にあるため）
{
"name": "src",
"version": "0.1.0",
"private": true,
"homepage": ".", #この行を追加
"devDependencies": {
....
% npm run build
> src@0.1.0 build your_source_path
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
47.15 KB (-1 B) build/static/js/main.309660ee.js
289 B build/static/css/main.9a0fe4f1.css
The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
うまくビルドできたようです。
次に、cordova.js を読み込む文を index.html に追加しておきましょう。
% vi src/public/index.html
<script type="text/javascript" src="cordova.js"></script>
の行を </body>の前に追加する
改めてビルドをしておきます
% npm run build
では、cordova から React の build フォルダを読み込むようにしましょう。
% cd .. # cordova のルートに戻る
% mv www www.org # 既存のファイルを移動
% ln -s src/build/ www #build フォルダを、www で参照できるようにする
Reactアプリの build フォルダにシンボリックリンクを貼っています。
これで、cordova の build を行います。
% cordova build
....
** BUILD SUCCEEDED **
注：最初に私が実行したときには、 /platforms/android/build/intermediates/assets/debug/www/static/css/ が見つからないといったエラーがでました。そのときは、
mkdir -p ./platforms/android/build/intermediates/assets/debug/www/static/css/
を実行して再度実行したらビルドに成功しました。
ビルドに成功したら、emulator を起動してみます。
cordova emulate android
cordova emulate ios
無事表示がされました!