1

React Native

Pham Van Dong

目次

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

2

Reactとは？

•Facebook のチームが開発している、ユーザインタフェースを構築する為の JavaScript ライブラリです。

⇒ http://facebook.github.io/react/

• MVCのViewのみサポート

– 他のライブラリと容易に組み合わせられる

• Virtual DOM (仮想DOM)

– React.createClass: render() -> コンポーネント作成

– React.createElement -> Virtual DOM作成

– JSX

3

Reactとは？

4

Reactとは？

5

React-Nativeとは？

6

JavaScript

ReactJs

React-Native

no HTML

no Browser

no WebView

React-Nativeとは？

7

White once

run any where

Learn once

white any where

React-Nativeとは？

8

ReacJS JavascriptCore

RCTBridge Native Method

React-Nativeとは？

9

React-Native

React-Native使い方

•時間チェック

RN開発

10

欠席通知アプリ作成

•Demo

•Database(SQLite)

11

template

title

content

boss

name

email

phone_number

欠席通知アプリ作成

•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

まとめ

•メリット

–ランタイムでJS => NativeUIをブリッジ

–AndroidのようなXMLレイアウト

–Stylesでの共通スタイルの定義

–Data Binding

–Live Reload

•デメリット

–トレーニング時間がかかる(JS ->ReactJs ->ReactNative)

–Facebookのに依存

13

まとめ

•出来たこと

–React-Nativeキャッチアップ

–欠席通知アプリ作成

•コンポーネントとスタイルの使用

•SMS,Email,SQLiteについてモジュール追加

•やりたいこと

–Flux利用

–iOSでビルド

–Trelloカード追加

–GoogleCalendar同期

14

15

Thank you!