![３．サンプルアプリ 作成
環境構築 （Mac)
・ HomeBrew を 入れる
[HomeBrew インストール Mac] [検索]
・ パッケージを入れる
$ brew install node
$ brew install watchman
・ React Native CLI を入れる。
$ npm install -g react-native-cli
30](https://image.slidesharecdn.com/reactnative-170723041501/85/ReactNative-30-320.jpg)
ReactNative はじめの一歩
- 2. おしながき 2
- 3. 本日のお品書き １． あばうとみー ２． ReactNativeとは ３． サンプルアプリ を 動かしてみる 3
- 4. １．あばうとみー 4
- 5. １．あばうとみー 高橋 一騎 ( @ikkitang ) ・ 岡山の SIer 勤務 ・ PHPer🐘、Swiftの人🐣 ・ JPUG 中国支部長 5
- 6. １．あばうとみー 6
- 8. １．あばうとみー 第２１回 中国地方DB勉強会 in 山口 http://dbstudychugoku.github.io/ 8
- 9. １．あばうとみー 第２１回 中国地方DB勉強会 in 山口 ・ Amazon Web Services ・ Google Cloud Platform ・ Microsoft Azure 主要クラウドにおける データベースマネジメントサービスを 最強の講師陣によってお伝えします！ 9
- 11. ２．ReactNative とは React： Facebookが開発したJavaScriptの フレームワーク. “Learn Once, Write Anywhere” React Native： React を モバイルで使えるようにしたもの. 11
- 12. ２．ReactNative とは React： Facebookが開発したJavaScriptの フレームワーク. “Learn Once, Write Anywhere” React Native： React を モバイルで使えるようにしたもの. 12
- 13. アプリ + JavaScript といえば・ ・ 13
- 14. 14
- 15. ハイブリッドアプリとの違い 15 Cordova Monaca React Native 動作 ローカルのWebView ネイティブ UI作成 HTML・CSS jsx形式で作成したコンポーネントを 組み合わせて定義 言語 JavaScript JavaScript
- 16. ハイブリッドアプリとの違い 16 Cordova Monaca React Native 動作 ローカルのWebView ネイティブ UI作成 HTML・CSS jsx形式で作成したコンポーネントを 組み合わせて定義 言語 JavaScript JavaScript
- 17. ２．ReactNative とは React Native と ハイブリッドアプリ ReactNativeはネイティブ上で動くので UIのパフォーマンスはネイティブアプリと ほぼ同レベルで かつ、 ハイブリッドアプリよりも 高速 に動作する。 17
- 18. ハイブリッドアプリとの違い 18 Cordova Monaca React Native 動作 ローカルのWebView ネイティブ UI作成 HTML・CSS jsx形式で作成したコンポーネントを 組み合わせて定義 言語 JavaScript JavaScript
- 20. ２．ReactNative とは コンポーネント の 組み合わせ ※ 今回はLTなので イメージだけ。 例えば、 右のようなUIの アプリを作る時。 20
- 21. ２．ReactNative とは コンポーネント の 組み合わせ ※ 今回はLTなので イメージだけ。 例えば、 右のようなUIの アプリを作る時。 21 TimeLine コンポーネント TimeLine コンポーネント TimeLine コンポーネント TimeLine コンポーネント TimeLine コンポーネント
- 22. ２．ReactNative とは コンポーネント の 組み合わせ ※ 今回はLTなので イメージだけ。 例えば、 右のようなUIの アプリを作る時。 22 { “icon”: “ikki_icon.png”, “name”: “ikkitang”, “tweet”: “中国地方DB勉強会〜” }
- 23. ２．ReactNative とは React Native のメリット React を ベースに開発されているので 元々の React の 開発時のノウハウを そのまま活かす事ができる。 23
- 25. っておもーじゃん！？ 25
- 26. ２．React Native とは React Native のデメリット まだ、枯れていない。 ・ バージョンアップの追従がつらい (らしい) １ヶ月に１回、バージョンが上がる (今 0.45 ) ・ まだまだ、情報量が少ない (らしい) 26
- 27. ２．ReactNative とは まとめ ReactNativeは Facebook 製の フレームワーク。 メリット UIのパフォーマンスはネイティブアプリと ほぼ同レベルで 高速 に動作する。 React で培ったノウハウをそのまま活かせる。 デメリット バージョンアップ頻度が高く、枯れていない。 27
- 28. ３．サンプルアプリ 作成 28
- 29. まずは、環境構築 29
- 30. ３．サンプルアプリ 作成 環境構築 （Mac) ・ HomeBrew を 入れる [HomeBrew インストール Mac] [検索] ・ パッケージを入れる $ brew install node $ brew install watchman ・ React Native CLI を入れる。 $ npm install -g react-native-cli 30
- 31. ３．サンプルアプリ 作成 アプリの新規作成 ・ ターミナルで以下コマンド実行 $ react-native init HelloWorld フォルダ構成はこんな感じ 31
- 32. ３．サンプルアプリ 作成 アプリの新規作成 ・ ターミナルで以下コマンド実行 $ react-native init HelloWorld フォルダ構成はこんな感じ 32 エントリポイントエントリポイント各OS用 ファイル
- 33. ３．サンプルアプリ 作成 アプリの実行 実行するには： インストール後に表示される指示に従う ・ To run your app on iOS 具体的には ・ $ react-native run-ios を実行。 33
- 35. ちょっと、修正してみる 35
- 38. ３．サンプルアプリ 作成 コードの修正 38 Hello World を 追加
- 39. コードの修正が完了した => シミュレーター で 確認 39
- 40. ３．サンプルアプリ 作成 コード修正の反映 右の画面で、 ⌘ + R キーを押す！ 40
- 41. ３．サンプルアプリ 作成 コード修正の反映 右の画面で、 ⌘ + R キーを押す！ 41 コード修正が 反映
- 42. ３．サンプルアプリ 作成 まとめ ・ 開発環境のセットアップが死ぬほど簡単だった。 ・ コード修正の反映が XCode での 開発の時と違い コマンドを入力するだけで出来る。 (しかも、高速) 42
- 43. 次回は React Native を 使って Todo 管理 アプリとかを 作ってみたいと思います！ 43