Create android app can send SMS and Email by React Natice

1. 1
React Native
Pham Van Dong

2. 目次
I. Reactとは？
II. React-Nativeとは？
III. 欠席通知アプリ作成
IV. まとめ
2

3. Reactとは？
•Facebook のチームが開発している、ユーザインタフェー
スを構築する為の JavaScript ライブラリです。
⇒ http://facebook.github.io/react/
• MVCのViewのみサポート
– 他のライブラリと容易に組み合わせられる
• Virtual DOM (仮想DOM)
– React.createClass: render() -> コンポーネント作成
– React.createElement -> Virtual DOM作成
– JSX
3

4. Reactとは？
4

5. Reactとは？
5

6. React-Nativeとは？
6
JavaScript
ReactJs
React-Native
no HTML
no Browser
no WebView

7. React-Nativeとは？
7
White once
run any where
Learn once
white any where

8. React-Nativeとは？
8
ReacJS JavascriptCore
RCTBridge
Native
Method

9. React-Nativeとは？
9
React-Native

10. React-Native使い方
•時間チェック
RN開発
10

11. 欠席通知アプリ作成
•Demo
•Database(SQLite)
11
template
title
content
boss
name
email
phone_number

12. 欠席通知アプリ作成
•https://github.com/chirag04/react-native-
mail
•https://github.com/jbrodriguez/react-native-
android-sqlite
•https://www.npmjs.com/package/react-
native-sms-android
12

13. まとめ
•メリット
–ランタイムでJS => NativeUIをブリッジ
–AndroidのようなXMLレイアウト
–Stylesでの共通スタイルの定義
–Data Binding
–Live Reload
•デメリット
–トレーニング時間がかかる(JS ->ReactJs ->ReactNative)
–Facebookのに依存
13

14. まとめ
•出来たこと
–React-Nativeキャッチアップ
–欠席通知アプリ作成
•コンポーネントとスタイルの使用
•SMS,Email,SQLiteについてモジュール追加
•やりたいこと
–Flux利用
–iOSでビルド
–Trelloカード追加
–GoogleCalendar同期
14

15. 15
Thank you!