React NativeでiOSアプリ開発入門

React Nativeとは？

Build native mobile apps using JavaScript and React

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

ネイティブモバイルアプリをJavaScriptとReactで作る

React Nativeを使うと、JavaScriptだけでモバイルアプリを開発できます。Reactと同じ設計を採用していて、宣言的なコンポーネントからリッチなUIを構成できます。
公式サイトより

すごそう

今までだって、そんなんあったじゃん！

WebViewでWebアプリ動かせば同じようなこと出来るんじゃないの？Monacaとか。

React Nativeは、NativeのUIを使用する。

NativeのGUI APIラッパーのようなReact Componentが提供される。

描画におけるパフォーマンスが良い。

かなりネイティブアプリに近いアプリが、Webの技術で開発できる。

なにするの

iOSのTodoアプリ作る

どうやって開発するの

PCはMacとWindows、実機はiPhoneで開発する。

環境はNode.jsがあればとりあえずOK。すごい。

Macはファイルの監視のために、Watchmanが必要だった気もする。

スケルトン作ろう

Assuming that you have Node installed, you can use npm to install the create-react-native-app command line utility

Nodeのインストールが終わると、create-react-native-appがコマンドラインで使えるようになります。
Getting Started

巷で出回っている入門記事と違うが、今は create-react-native-app というのがあるらしい。

使ってみる

ERROR: npm 5 is not supported yet

npmのバージョンが新しすぎたらしい。おとなしく4系に落とす。

Macではnodebrew、Windowsではnodistでnodeのバージョン管理をすることにした。

npm startすると

コンソールに謎のQRコードが

expo？

Easily build apps with React Native

Our tools enable developers to build and share truly native apps that work across both iOS and Android. Everything is open source, free and uses React Native.

React Nativeでアプリを簡単にビルドする

私達のツールは、iOSとAndroidの両方で動作する、本当のネイティブアプリを、開発者がビルド、共有できるようにします。すべてはオープンソースで無料、そしてReact Nativeを使っています。

とりあえずexpoをiPhoneに入れて、さっきのQRコードを読み込んでみると、スケルトンが動作した。

console.logはnpm startしたコンソールに出た。ホットリロードがデフォルトで有効になっていた。

いい感じ。

開発！

試行錯誤しながら4時間

完成！

React NativeでiOSアプリ開発入門 https://t.co/dse4BrcfYb pic.twitter.com/pvhW4i6y06

— 七十 (@sititou70) September 1, 2017

• テキストボックスに文字を入れて、AddでTodo追加。
• ✕ ボタンでTodoを個別に削除。
• Todoの情報は端末のストレージに保存してあるから、アプリや端末を再起動しても保持される。
• delete allを押すと、すべてのTodoを削除

感想

実機で動くのおもろい。

エラー画面が真っ赤で怖い。びびる。

UIのスタイリングが面倒。CSSのFlexっぽいけど全く別物。結構ハマった。 でもネイティブ開発よりは格段に楽だよね。多分。

深夜に雰囲気で開発しても結構大丈夫な手軽さに驚いた。