React.js・ReactNative・Redux入門
Download as pptx, pdf24 likes8,614 views
https://d-cube.connpass.com/event/49935/ 2017/2/9実施
![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](https://image.slidesharecdn.com/d3-170209081428/85/React-js-ReactNative-Redux-7-320.jpg)
![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)](https://image.slidesharecdn.com/d3-170209081428/85/React-js-ReactNative-Redux-8-320.jpg)
![webpack.config.js
webpackのビルド設定
・entry
起点となるファイル
・output
ファイルの出力先は「/dist/bundle.js」
公開用パスは「/public/bundle.js」
・loaders
loaders:[‘ts’]
TypsScrpitのファイルをJavaScriptに変換](https://image.slidesharecdn.com/d3-170209081428/85/React-js-ReactNative-Redux-18-320.jpg)
![export、import(ES2015)
export default
→ import xxx from [ファイル名]
export
→ import {[モジュール名]} from [ファイル名]](https://image.slidesharecdn.com/d3-170209081428/85/React-js-ReactNative-Redux-30-320.jpg)
![Props、State
TodoListComponent
State: Todo[]
TodoComponent
Todo(Props)
タスクをTodo型として定義](https://image.slidesharecdn.com/d3-170209081428/85/React-js-ReactNative-Redux-39-320.jpg)
![React Native（環境構築１）
・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](https://image.slidesharecdn.com/d3-170209081428/85/React-js-ReactNative-Redux-61-320.jpg)
![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](https://image.slidesharecdn.com/d3-170209081428/85/React-js-ReactNative-Redux-71-320.jpg)
React.js・ReactNative・Redux入門
- 2. 自己紹介 キャリアトレック サーバサイドエンジニア(スマホアプリも) ・サーバサイド（Java）、iOS(Swift)、Android(Java) ・AngularJS(1系) + Monaca、ES5 ハイブリッドアプリ ・React.js + Meteor、ES2015 WEBアプリ、ハイブリッドアプリ 過去の勉強会 今回の勉強会 ・React.js + ReactNative + Redux、TypeScript WEBアプリ、ネイティブアプリ 吉本和弘
- 4. サンプルプログラム
- 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. 環境構築
- 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を修正
- 20. TypeScript
- 25. 型(TypeScript) データ型 説明 number 数値 string 文字列 boolean 真偽値 any なんでも可能 let 変数名: 型名 let a: number = 10 let b:string = ‘a’ let c:boolean = true
- 30. export、import(ES2015) export default → import xxx from [ファイル名] export → import {[モジュール名]} from [ファイル名]
- 31. アロー関数(ES2015) function (x) {return ・・・} 無名関数の省略記法 (x) => {return ・・・} x => ・・・
- 36. React.js
- 42. Redux
- 43. Redux Action Store Component (React) State Dispacher Reducer Provider (React-Redux)＊Middleware関連は省略
- 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. Action（ActionTypes.ts） ・Action はStoreの State を変更するためのメッセージ ・Actionの種別を定義する ・Actionの処理はReducerに実装する
- 55. TodoListComponent（Component.tsx） ・各々のタスクを TodoComponentに受け渡す ・TodoComponentに Todo(State),Actionを受け渡す
- 57. React Native
- 59. 環境構築
- 61. React Native（環境構築１） ・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. 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を書き換える
- 64. package.json production scripts ・「npm run build」でビルド （「--watch」変更を検知して自動的にコンパイル） ・「npm run ios」で実行 （Androidの場合は「npm run android」）
- 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版と同じ
- 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
- 74. TodoListComponent(Component.tsx) ・各々のタスクを TodoComponentに受け渡す ・TodoComponentに Todo(State),Actionを受け渡す