cordova + create-react-app + onsenui

クラウドでできるHTML5ハイブリッドアプリ開発 Cordova/Onsen UIで作るiOS/Android両対応アプリ (Monaca公式ガイドブック) | 永井 勝則, アシアル株式会社 |本 | 通販 | Amazon

cordovaプロジェクトを作り、iOSエミュレータで動作確認する

npm install -g cordova
cordova create example com.example Example
cd example
cordova platform add ios –save
cordova build
cordova emulate ios

cordovaプロジェクトの中にcreate-react-appでアプリを作る

npm install -g create-react-app
create-react-app src
cd src
npm start

cordovaの中でreactアプリを動かす

vi package.json
npm run build
vi src/public/index.html
npm run build

cd ..
rm -r www
ln -s src/build www

cd ..
cordova build
cordova emulate ios

redux, onsenuiを入れる

cd src
npm install redux react-redux –save
npm install onsenui react-onsenui –save-dev
npm install babel –save-dev
npm install babelify –save-dev
npm install babel-preset-es2015 babel-preset-react –save-dev

onsenuiのcssをインポートして、UIコンポーネントを使ったスクリプトを書く

vi src/index.js
import “onsenui/css/onsenui.css”
import “onsenui/css/onsen-css-components.css”

cordova + react + onsenuiの動作確認

npm run build
cd ..
cordova emulate ios