Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
React.js・ReactNative・Redux入門
2017/2/9 吉本和弘
自己紹介
キャリアトレック サーバサイドエンジニア(スマホアプリも)
・サーバサイド(Java)、iOS(Swift)、Android(Java)
・AngularJS(1系) + Monaca、ES5
ハイブリッドアプリ
・React.js ...
本日の内容
React.js、Redux
・環境構築
・ES2015、TypeScript
・React.js
・サンプルアプリの説明
ReactNative
・環境構築
・ReactNativeのコンポーネント
・サンプルアプリの説明
サンプルプログラム
サンプルプログラム
Redux(共通のロジック)
React.js ReactNative
Web iOS、Androidアプリ
プレゼンテーション層
ビジネスロジック層
サンプルプログラム一覧
・React.jsサンプルアプリ(Todoアプリ)
https://github.com/KazuhiroYoshimoto/react-redux-todo-sample
・ReactNativeサンプルアプリ(Tod...
React.jsサンプルアプリ
・React.jsサンプルアプリ(Todoアプリ)
https://github.com/KazuhiroYoshimoto/react-redux-todo-sample
・React.jsサンプルコード(Re...
ReactNativeサンプルアプリ
◆起動方法
npm run build
npm start
・ReactNativeサンプルアプリ(Todoアプリ)
https://github.com/KazuhiroYoshimoto/reactNa...
環境構築
・Nodeモジュール
package.json
・webpack
server.js、webpack.config.js、index.html
・TypeScript
tsconfig.json
環境構築
Nodeモジュール一覧
開発用モジュール(development)
・webpack
ビルドツール
・webpack-dev-server
ローカルでビルド、サーバー起動
・tsloader
TypeScriptをJavaScriptに変換
・...
環境構築(Nodeモジュール)
・npm init
・npm i --save react react-dom redux react-redux
・npm i --save @types/react @types/react-dom @typ...
package.json
dependencies
productionパッケージ
本番用
devDependencies
developmentパッケージ
開発用、本番環境ではインストールされない
scripts
実行スクリプト(起動など)
package.json
production development
script
「npm start」でサーバーを起動
webpack
・JavaScript、TypeScriptなどのビルドツール
・webpack-dev-serverを使えば、
ローカル環境でビルド、サーバー起動ができる
・webpack-dev-server
Express製のサーバーでw...
webpack(環境構築)
・server.jsを作成
・webpack.config.jsを作成
・index.htmlを作成
server.js
・webpack-dev-serverを起動
・webpackでビルド
・ビルド設定はwebpack.config.js
・ビルドしたファイルの公開用パスは
webpack.configのoutput.publicPath
webpack.config.js
webpackのビルド設定
・entry
起点となるファイル
・output
ファイルの出力先は「/dist/bundle.js」
公開用パスは「/public/bundle.js」
・loaders
loa...
index.html、Index.tsx
・Index.tsx
ReactDomによって「<div id=“app”></div>」
にComponentsがレンダリングされる
index.html
Index.tsx(webpack.conf...
TypeScript
TypeScript(環境構築)
・tsc -init
・tscconfig.jsonを書き換える
tsconfig.json
・compilerOpsions
「./dist/」にビルドしたファイルを出力
es2015形式で出力
・files
コンパイル対象のファイルを指定
TypeScript
・TypeScriptは最新のJSの仕様であるES2015(ES6)に準拠
・静的型付けやアクセス修飾子がある
・型などのチェックが厳しいため、保守が必要になる大規模開発に向いてる
・TSファイルをコンパイル(トランスパイ...
TypeScript
React.ComponentのProps,Stateの
補完、型チェックができる
DispachActionsクラス
Todoクラス
Props,Stateの型をinterfaceで定義し、
React Componen...
型(TypeScript)
データ型 説明
number 数値
string 文字列
boolean 真偽値
any なんでも可能
let 変数名: 型名
let a: number = 10
let b:string = ‘a’
let c:...
型定義ファイル(TypeScript)
・型情報のみを記述したスクリプトファイルを参照する仕組み
・Javascriptライブラリにその型定義ファイルがあれば、
TypeScriptからでもJSライブラリが扱える
・Typingsや@types...
ES2015、TypeScript(文法)
ES2015、TypeScriptの文法
・クラス(ES2015)
・export、import(ES2015)
・アロー関数(ES2015)
・スプレッド演算子(ES2015)
・Object.assign(ES2015)
・インターフェイス...
クラス(ES2015)
・クラス構文
・constructor
コンストラクタ。
省略した場合は引数を持たない
空の自動コンストラクタ。
TypeScriptだと、
コンストラクタの引数に
public,privateを付けることで
同名のプロ...
export、import(ES2015)
export default
→ import xxx from [ファイル名]
export
→ import {[モジュール名]} from [ファイル名]
アロー関数(ES2015)
function (x) {return ・・・}
無名関数の省略記法
(x) => {return ・・・}
x => ・・・
スプレッド演算子(ES2015)
・配列の中で配列を展開する
Object.assign(ES2015)
・オブジェクトをマージする
・オブジェクトをコピーする
インターフェイス(TypeScript)
・中身の実装を持たず、メンバーや型の定義だけ持つ
ジェネリクス(TypeScript)
・抽象化されたデータ型を表現する
・引数である型を抽象的に使う
React.js
React.js
・Component
・Props
・State
Component
TodoListComponent
TodoComponent
TodoComponent
TodoComponent
・TodoListComponentの中で
各要素のTodoComponent
を表示
Props、State
TodoListComponent
State: Todo[]
TodoComponent
Todo(Props)
タスクをTodo型として定義
TodoListComponent
・Stateにタスクを保持する
Todo型の配列
・各々のタスクを
TodoComponentに受け渡す
TodoComponent
・Propsから受け取ったタスクを
表示する
{this.props.todo.text}
Redux
Redux
Action
Store
Component
(React)
State
Dispacher
Reducer
Provider
(React-Redux)*Middleware関連は省略
Redux
要素 ファイル React or Redux レイヤー
Action ActionTypes.ts
Redux
ビジネスロジック層
(ReactNativeと共通)
Dispatcher Dispatcher.ts
Store St...
Action(ActionTypes.ts)
・Action はStoreの State を変更するためのメッセージ
・Actionの種別を定義する
・Actionの処理はReducerに実装する
Dispatcher(Dispatcher.ts)
・dispach関数が
ActionをReducerに渡す
・dispach関数を呼び出す
Store(Store.ts)
・createStore関数
StoreにReducerを追加する
・combileReducers関数
複数のreducerを統合する
・ActionとReducerをまとめるオブジェクト
State(State.ts)
・アプリケーションの状態を保持する
・Reducerによって更新される
Reducer(Reducer.ts)
・stateとactionを受け取って
stateを返す関数
・(state,action) => state
・Actionの処理を実装
・Stateを変更するときには、
新しいStateデータを作る
...
Provider(Index.ts)
・Store(Redux)とComponent(React)を紐付け
-connect関数
connect(mapStateToProps,mapDispatchToProps)(component)
ma...
Components
Component(Component.tsx)
TodoListComponent
TodoComponent
TodoComponent
TodoComponent
TodoFormComponent
・Compone...
Component(Component.tsx)
Components
TodoFormComponent
TodoListComponent
TodoComponent
Store(Redux)
TodoList(State),Action
...
Components(Component.tsx)
・下記のコンポーネントから構成
-TodoFormComponent
-TodoListComponent
・TodoFormComponent
にActionを受け渡す
・TodoListC...
TodoFormComponent(Component.tsx)
・Stateに入力データを保持
(this.state.text)
・inputタグのonChangeイベント
-コンポーネントのStateを更新
・formのonSubmitイ...
TodoListComponent(Component.tsx)
・各々のタスクを
TodoComponentに受け渡す
・TodoComponentに
Todo(State),Actionを受け渡す
TodoComponent(Component.tsx)
・リストの1つの列を表示
・liタグのonClickイベント
-COMPLETE_TODOアクション
を呼び出す
React Native
React Native
・iOS、AndroidのNativeモバイルアプリケーションを
作成するためのJavaScriptフレームワーク
・JavaScript、React.jsでiOS,Androidアプリを作れる
・iOS、Androi...
環境構築
Nodeモジュール一覧
本番用モジュール(production)
・react
・react-native
・redux
・react-redux
・型定義ファイル(@types)
React Native(環境構築1)
・brew install node
・brew install watchman
・npm install -g react-native-cli
・react-native init [プロジェクト名...
React Native(環境構築2)
・npm i -g typescript
・npm i --save react react-native redux react-redux
・npm i --save @types/react @ty...
React Native(環境構築3)
・node_modules/@types/redux/index.d.tsを配置
(https://github.com/reactjs/redux/blob/master/index.d.ts)
・ts...
package.json
production
scripts ・「npm run build」でビルド
(「--watch」変更を検知して自動的にコンパイル)
・「npm run ios」で実行
(Androidの場合は「npm run an...
tsconfig.json
・compilerOptions
ES2015形式で「build」フォルダに出力
・files
ビルド対象は「./src/Index.tsx」
index.ios.js、index.android.js
・「index.ios.js」「index.android.js」ファイルを呼び出す
Redux
要素 ファイル React or Redux レイヤー
Action ActionTypes.ts
Redux ビジネスロジック層
Dispatcher Dispatcher.ts
Store Store.ts
State Stat...
Components
Components(Component.tsx)
TodoListComponent
TodoComponent
TodoComponent
TodoComponent
TodoFormComponent
・Compon...
Component(Component.tsx)
・コンポーネント構成はWEB版と同じ
・ReactNativeが用意している
Componetを利用してUIを構成する
Components
TodoFormComponent
TodoList...
ReactNativeのComponent
・View
画面を表示するコンポーネント、htmlだとdivのようなもの
・TextInput
テキストを入力するコンポーネント
onChangeTextイベント・・・テキストの値が変わったとき
・T...
ReactNativeのComponent
・ListView
リストを表現するコンポーネント
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})...
Components(Component.tsx)
・下記のコンポーネントから構成
-TodoFormComponent
-TodoListComponent
・TodoFormComponent
にActionを受け渡す
・TodoListC...
TodoFormComponent(Component.tsx)
・Stateに入力データを保持
(this.state.text)
・ButtonのonPressイベント
-this.state.textを取得する
-Todoオブジェクトを作...
TodoListComponent(Component.tsx)
・各々のタスクを
TodoComponentに受け渡す
・TodoComponentに
Todo(State),Actionを受け渡す
TodoComponent(Component.tsx)
・リストの1つの列を表示
・TouchableHighlightのonPressイベント
-COMPLETE_TODOアクション
を呼び出す
参考
・Redux、TypeScript
https://github.com/imagepit/typescript-react-redux-todo-sample
・ReactNative、TypeScript
https://github...
Prochain SlideShare
Chargement dans…5
×

React.js・ReactNative・Redux入門

https://d-cube.connpass.com/event/49935/
2017/2/9実施

  • Soyez le premier à commenter

React.js・ReactNative・Redux入門

  1. 1. React.js・ReactNative・Redux入門 2017/2/9 吉本和弘
  2. 2. 自己紹介 キャリアトレック サーバサイドエンジニア(スマホアプリも) ・サーバサイド(Java)、iOS(Swift)、Android(Java) ・AngularJS(1系) + Monaca、ES5 ハイブリッドアプリ ・React.js + Meteor、ES2015 WEBアプリ、ハイブリッドアプリ 過去の勉強会 今回の勉強会 ・React.js + ReactNative + Redux、TypeScript WEBアプリ、ネイティブアプリ 吉本和弘
  3. 3. 本日の内容 React.js、Redux ・環境構築 ・ES2015、TypeScript ・React.js ・サンプルアプリの説明 ReactNative ・環境構築 ・ReactNativeのコンポーネント ・サンプルアプリの説明
  4. 4. サンプルプログラム
  5. 5. サンプルプログラム Redux(共通のロジック) React.js ReactNative Web iOS、Androidアプリ プレゼンテーション層 ビジネスロジック層
  6. 6. サンプルプログラム一覧 ・React.jsサンプルアプリ(Todoアプリ) https://github.com/KazuhiroYoshimoto/react-redux-todo-sample ・ReactNativeサンプルアプリ(Todoアプリ) https://github.com/KazuhiroYoshimoto/reactNativeTodoSample ・React.jsサンプルコード(React.jsの説明用) https://github.com/KazuhiroYoshimoto/react-todo-sample
  7. 7. React.jsサンプルアプリ ・React.jsサンプルアプリ(Todoアプリ) https://github.com/KazuhiroYoshimoto/react-redux-todo-sample ・React.jsサンプルコード(React.jsの説明用) https://github.com/KazuhiroYoshimoto/react-todo-sample ◆起動方法 npm start ◆環境構築 git clone [リポジトリURL] npm i
  8. 8. ReactNativeサンプルアプリ ◆起動方法 npm run build npm start ・ReactNativeサンプルアプリ(Todoアプリ) https://github.com/KazuhiroYoshimoto/reactNativeTodoSample ◆環境構築 git clone [リポジトリURL] npm i node_modules/@types/redux/index.d.tsを配置 (https://github.com/reactjs/redux/blob/master/index.d.ts)
  9. 9. 環境構築
  10. 10. ・Nodeモジュール package.json ・webpack server.js、webpack.config.js、index.html ・TypeScript tsconfig.json 環境構築
  11. 11. Nodeモジュール一覧 開発用モジュール(development) ・webpack ビルドツール ・webpack-dev-server ローカルでビルド、サーバー起動 ・tsloader TypeScriptをJavaScriptに変換 ・typescript 本番用モジュール(production) ・react React ・react-dom Componentのレンダリング ・redux ・react-redux ・型定義ファイル(@types)
  12. 12. 環境構築(Nodeモジュール) ・npm init ・npm i --save react react-dom redux react-redux ・npm i --save @types/react @types/react-dom @types/redux @types/react-redux ・npm i --save-dev webpack webpack-dev-server ts-loader typescript ・package.jsonを修正
  13. 13. package.json dependencies productionパッケージ 本番用 devDependencies developmentパッケージ 開発用、本番環境ではインストールされない scripts 実行スクリプト(起動など)
  14. 14. package.json production development script 「npm start」でサーバーを起動
  15. 15. webpack ・JavaScript、TypeScriptなどのビルドツール ・webpack-dev-serverを使えば、 ローカル環境でビルド、サーバー起動ができる ・webpack-dev-server Express製のサーバーでwebpack-dev-middlewareを使って webpackのビルドを行う
  16. 16. webpack(環境構築) ・server.jsを作成 ・webpack.config.jsを作成 ・index.htmlを作成
  17. 17. server.js ・webpack-dev-serverを起動 ・webpackでビルド ・ビルド設定はwebpack.config.js ・ビルドしたファイルの公開用パスは webpack.configのoutput.publicPath
  18. 18. webpack.config.js webpackのビルド設定 ・entry 起点となるファイル ・output ファイルの出力先は「/dist/bundle.js」 公開用パスは「/public/bundle.js」 ・loaders loaders:[‘ts’] TypsScrpitのファイルをJavaScriptに変換
  19. 19. index.html、Index.tsx ・Index.tsx ReactDomによって「<div id=“app”></div>」 にComponentsがレンダリングされる index.html Index.tsx(webpack.configのentry) ・index.html 「/public/bundle.js」が実行 ・「localhost:3000」にアクセス 「/index.html」が実行 ・bundle.js webpack.config.entryの「Index.tsx」が実行
  20. 20. TypeScript
  21. 21. TypeScript(環境構築) ・tsc -init ・tscconfig.jsonを書き換える
  22. 22. tsconfig.json ・compilerOpsions 「./dist/」にビルドしたファイルを出力 es2015形式で出力 ・files コンパイル対象のファイルを指定
  23. 23. TypeScript ・TypeScriptは最新のJSの仕様であるES2015(ES6)に準拠 ・静的型付けやアクセス修飾子がある ・型などのチェックが厳しいため、保守が必要になる大規模開発に向いてる ・TSファイルをコンパイル(トランスパイル)してJSファイルとして出力
  24. 24. TypeScript React.ComponentのProps,Stateの 補完、型チェックができる DispachActionsクラス Todoクラス Props,Stateの型をinterfaceで定義し、 React Componentにジェネリクスで渡す
  25. 25. 型(TypeScript) データ型 説明 number 数値 string 文字列 boolean 真偽値 any なんでも可能 let 変数名: 型名 let a: number = 10 let b:string = ‘a’ let c:boolean = true
  26. 26. 型定義ファイル(TypeScript) ・型情報のみを記述したスクリプトファイルを参照する仕組み ・Javascriptライブラリにその型定義ファイルがあれば、 TypeScriptからでもJSライブラリが扱える ・Typingsや@types(typeScript2.0以降)で 型定義ファイルを管理
  27. 27. ES2015、TypeScript(文法)
  28. 28. ES2015、TypeScriptの文法 ・クラス(ES2015) ・export、import(ES2015) ・アロー関数(ES2015) ・スプレッド演算子(ES2015) ・Object.assign(ES2015) ・インターフェイス(TypeScript) ・ジェネリクス(TypeScript) *サンプルアプリで使っているもののみ
  29. 29. クラス(ES2015) ・クラス構文 ・constructor コンストラクタ。 省略した場合は引数を持たない 空の自動コンストラクタ。 TypeScriptだと、 コンストラクタの引数に public,privateを付けることで 同名のプロパティを宣言し、 初期化できる
  30. 30. export、import(ES2015) export default → import xxx from [ファイル名] export → import {[モジュール名]} from [ファイル名]
  31. 31. アロー関数(ES2015) function (x) {return ・・・} 無名関数の省略記法 (x) => {return ・・・} x => ・・・
  32. 32. スプレッド演算子(ES2015) ・配列の中で配列を展開する
  33. 33. Object.assign(ES2015) ・オブジェクトをマージする ・オブジェクトをコピーする
  34. 34. インターフェイス(TypeScript) ・中身の実装を持たず、メンバーや型の定義だけ持つ
  35. 35. ジェネリクス(TypeScript) ・抽象化されたデータ型を表現する ・引数である型を抽象的に使う
  36. 36. React.js
  37. 37. React.js ・Component ・Props ・State
  38. 38. Component TodoListComponent TodoComponent TodoComponent TodoComponent ・TodoListComponentの中で 各要素のTodoComponent を表示
  39. 39. Props、State TodoListComponent State: Todo[] TodoComponent Todo(Props) タスクをTodo型として定義
  40. 40. TodoListComponent ・Stateにタスクを保持する Todo型の配列 ・各々のタスクを TodoComponentに受け渡す
  41. 41. TodoComponent ・Propsから受け取ったタスクを 表示する {this.props.todo.text}
  42. 42. Redux
  43. 43. Redux Action Store Component (React) State Dispacher Reducer Provider (React-Redux)*Middleware関連は省略
  44. 44. Redux 要素 ファイル React or Redux レイヤー Action ActionTypes.ts Redux ビジネスロジック層 (ReactNativeと共通) Dispatcher Dispatcher.ts Store Store.ts State State.ts Reducer Reducer.ts Provider Index.tsx React-Redux プレゼンテーション層 Component Component.tsx React
  45. 45. Action(ActionTypes.ts) ・Action はStoreの State を変更するためのメッセージ ・Actionの種別を定義する ・Actionの処理はReducerに実装する
  46. 46. Dispatcher(Dispatcher.ts) ・dispach関数が ActionをReducerに渡す ・dispach関数を呼び出す
  47. 47. Store(Store.ts) ・createStore関数 StoreにReducerを追加する ・combileReducers関数 複数のreducerを統合する ・ActionとReducerをまとめるオブジェクト
  48. 48. State(State.ts) ・アプリケーションの状態を保持する ・Reducerによって更新される
  49. 49. Reducer(Reducer.ts) ・stateとactionを受け取って stateを返す関数 ・(state,action) => state ・Actionの処理を実装 ・Stateを変更するときには、 新しいStateデータを作る (Object.assign({},original,new))
  50. 50. Provider(Index.ts) ・Store(Redux)とComponent(React)を紐付け -connect関数 connect(mapStateToProps,mapDispatchToProps)(component) mapStateToProps・・・state(Redux)をpropsに変換 mapDispatchToProps・・・dispachの呼び出しをpropsに変換
  51. 51. Components Component(Component.tsx) TodoListComponent TodoComponent TodoComponent TodoComponent TodoFormComponent ・Componentsの中で TodoFormComponentと TodoListComponentを表示 ・TodoListComponentの中で 各要素のTodoComponentを表示
  52. 52. Component(Component.tsx) Components TodoFormComponent TodoListComponent TodoComponent Store(Redux) TodoList(State),Action TodoList(State),Action Todo(State),Action Action Index.tsx (React-Redux) TodoList(State),Action
  53. 53. Components(Component.tsx) ・下記のコンポーネントから構成 -TodoFormComponent -TodoListComponent ・TodoFormComponent にActionを受け渡す ・TodoListComponent にState,Actionを受け渡す
  54. 54. TodoFormComponent(Component.tsx) ・Stateに入力データを保持 (this.state.text) ・inputタグのonChangeイベント -コンポーネントのStateを更新 ・formのonSubmitイベント -this.state.textを取得する -Todoオブジェクトを作成 -ADD_TODOアクションを呼び出す
  55. 55. TodoListComponent(Component.tsx) ・各々のタスクを TodoComponentに受け渡す ・TodoComponentに Todo(State),Actionを受け渡す
  56. 56. TodoComponent(Component.tsx) ・リストの1つの列を表示 ・liタグのonClickイベント -COMPLETE_TODOアクション を呼び出す
  57. 57. React Native
  58. 58. React Native ・iOS、AndroidのNativeモバイルアプリケーションを 作成するためのJavaScriptフレームワーク ・JavaScript、React.jsでiOS,Androidアプリを作れる ・iOS、Androidでコードを共有できる
  59. 59. 環境構築
  60. 60. Nodeモジュール一覧 本番用モジュール(production) ・react ・react-native ・redux ・react-redux ・型定義ファイル(@types)
  61. 61. React Native(環境構築1) ・brew install node ・brew install watchman ・npm install -g react-native-cli ・react-native init [プロジェクト名] https://facebook.github.io/react-native/docs/getting-started.html#content
  62. 62. React Native(環境構築2) ・npm i -g typescript ・npm i --save react react-native redux react-redux ・npm i --save @types/react @types/react-native @types/redux @types/react-redux ・package.jsonを書き換える
  63. 63. React Native(環境構築3) ・node_modules/@types/redux/index.d.tsを配置 (https://github.com/reactjs/redux/blob/master/index.d.ts) ・tsc -init ・tsconfig.jsonを書き換える ・index.ios.js、index.android.jsを書き換える
  64. 64. package.json production scripts ・「npm run build」でビルド (「--watch」変更を検知して自動的にコンパイル) ・「npm run ios」で実行 (Androidの場合は「npm run android」)
  65. 65. tsconfig.json ・compilerOptions ES2015形式で「build」フォルダに出力 ・files ビルド対象は「./src/Index.tsx」
  66. 66. index.ios.js、index.android.js ・「index.ios.js」「index.android.js」ファイルを呼び出す
  67. 67. Redux 要素 ファイル React or Redux レイヤー Action ActionTypes.ts Redux ビジネスロジック層 Dispatcher Dispatcher.ts Store Store.ts State State.ts Reducer Reducer.ts Provider Index.tsx React-Redux プレゼンテーション層 Component Component.tsx React *Component以外は、WEB版と同じ
  68. 68. Components Components(Component.tsx) TodoListComponent TodoComponent TodoComponent TodoComponent TodoFormComponent ・Componentsの中で TodoFormComponentと TodoListComponentを表示 ・TodoListComponentの中で 各要素のTodoComponent を表示
  69. 69. Component(Component.tsx) ・コンポーネント構成はWEB版と同じ ・ReactNativeが用意している Componetを利用してUIを構成する Components TodoFormComponent TodoListComponent TodoComponent Store(Redux) TodoList(State),Action TodoList(State),Action Todo(State),Action Action Index.tsx (React-Redux) TodoList(State),Action
  70. 70. ReactNativeのComponent ・View 画面を表示するコンポーネント、htmlだとdivのようなもの ・TextInput テキストを入力するコンポーネント onChangeTextイベント・・・テキストの値が変わったとき ・TouchableHighlight Tochイベントを検知するコンポーネント onPressイベント・・・コンポーネントが押されたとき ・Button ボタンを表現するコンポーネント onPressイベント・・・ボタンが押されたとき
  71. 71. ReactNativeのComponent ・ListView リストを表現するコンポーネント const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) const dataSource = ds.cloneWithRows( [配列のデータ] ) return ( <ListView dataSource={dataSource} renderRow={(data) => [1列のView] }/> ) https://facebook.github.io/react-native/docs/listview.html
  72. 72. Components(Component.tsx) ・下記のコンポーネントから構成 -TodoFormComponent -TodoListComponent ・TodoFormComponent にActionを受け渡す ・TodoListComponent にState,Actionを受け渡す
  73. 73. TodoFormComponent(Component.tsx) ・Stateに入力データを保持 (this.state.text) ・ButtonのonPressイベント -this.state.textを取得する -Todoオブジェクトを作成 -ADD_TODOアクションを呼び出す ・TextInputのonChangeTextイベント -コンポーネントのStateを更新する
  74. 74. TodoListComponent(Component.tsx) ・各々のタスクを TodoComponentに受け渡す ・TodoComponentに Todo(State),Actionを受け渡す
  75. 75. TodoComponent(Component.tsx) ・リストの1つの列を表示 ・TouchableHighlightのonPressイベント -COMPLETE_TODOアクション を呼び出す
  76. 76. 参考 ・Redux、TypeScript https://github.com/imagepit/typescript-react-redux-todo-sample ・ReactNative、TypeScript https://github.com/mrpatiwi/ReactNativeTS

×