Tweet
Tweet

Slide 1

Slide 1 text

@1coin178 WWN 2019-07-18 React + Redux + TypeScript 開門から入門まで

Slide 2

Slide 2 text

いま 開発 ● UIフレームワーク: React ● アーキテクチャ: Redux ● 言語: TypeScript

Slide 3

Slide 3 text

用語 おさらい

Slide 4

Slide 4 text

React - Facebook社が開発したUIフレームワーク JavaScriptライブラリ - 2013 にオープンソース化 - UI Component管理、宣言的なUI - 仮想DOMが特徴 DOM差分によるUIレンダリング パフォーマンス最適化 - 最新バージョン: v16.8.6 - 成熟してきた印象 - create-react-appコマンドで面倒な環境構築をやってくれる - webpack怖い....

Slide 5

Slide 5 text

React Component管理なにがうれしい? - UI 再利用性向上 - ロジック、デザインをパーツごとにまとめ、閉じこめる (そんなくらい 理解)

Slide 6

Slide 6 text

Reactで宣言的(Declarative) UIなにがうれしい? - どうしたいか(命令)でなく、どうなっていてほしいか(結果) - コードやUI 見通しが良くなる - デバッグもしやすい - 再利用性向上 Introduction to declarative UI - Flutter - https://flutter.dev/docs/get-started/flutter-for/declarative

Slide 7

Slide 7 text

Store Redux - アプリケーション 状態管理 フレームワーク - React + Reduxによる状態管理 一元化 - React: UI ComponentごとにStateを管理 - Redux: すべて State管理を単一 State = Storeに任せる - データ 流れを一方通行に、シンプルに Action Reducer State new State UI

Slide 8

Slide 8 text

一元管理できると何がうれしい か ● 状態管理しているStoreに(すべて )React Componentがアクセス可能 ● Componentがネストしていた場合、state値 連続橋渡しを回避 ● アプリ 状態を把握、再現しやすい

Slide 9

Slide 9 text

TypeScript - 型があるJS - トランスパイルする で、JS バージョンやブラウザごと 対応が容易そう - ES2015 - モダンな書き方ができる - VSCodeがサポートしている

Slide 10

Slide 10 text

開門 よし、入門だ

Slide 11

Slide 11 text

使い方

Slide 12

Slide 12 text

React App(ts) 環境構築 ~ 起動まで

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

VSCode F12で宣言元へジャンプ！

Slide 16

Slide 16 text

Functional ComponentとComponent - 関数としてシンプルに記述できる - 単にComponent 場合 classとextends - Stateを持たない。React Component Lifecycleがない - Components and Props – React - https://reactjs.org/docs/components-and-props.html#function-and-class-components

Slide 17

Slide 17 text

Count Up アプリ

Slide 18

Slide 18 text

Count Up アプリ setState countup render state {count: x} +1 new state {count: x +1}

Slide 19

Slide 19 text

React + Redux ActionCreator Store Reducer React Component - this.props mapStateToProps mapDispatchToProps Action

Slide 20

Slide 20 text

Store Redux ( 再掲) - アプリケーション 状態管理 フレームワーク - React + Reduxによる状態管理 一元化 - React: UI ComponentごとにStateを管理 - Redux: すべて State管理を単一 State = Storeに任せる - データ 流れを一方通行に、シンプルに Action Reducer State new State UI

Slide 21

Slide 21 text

React-Redux ライブラリ導入

Slide 22

Slide 22 text

#1 ActionType・ActionCreator 作成

Slide 23

Slide 23 text

#2 Redux Store 定義

Slide 24

Slide 24 text

#3 Reducer実装

Slide 25

Slide 25 text

#4 Store 作成・Componentと結合

Slide 26

Slide 26 text

#4 Store 作成・Componentと結合

Slide 27

Slide 27 text

#5 Store 値を参照

Slide 28

Slide 28 text

github sample code https://github.com/1coin178/react-redux-ts-super-simple-countup

Slide 29

Slide 29 text

Redux デバッグ Redux DevTools ● Chrome拡張機能 ● 飛んだAction 確認 ● Store 構造把握 ● タイムライン https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja

Slide 30

Slide 30 text

Redux デバッグ Redux DevTools (導入方法)

Slide 31

Slide 31 text

Redux デバッグ redux-logger ● consoleログにAction・Stata 状態を出力してくれる。 https://github.com/LogRocket/redux-logger

Slide 32

Slide 32 text

Redux デバッグ redux-logger ( 導入方法)

Slide 33

Slide 33 text

学習: オンライン講座 egghead ● 月額: 5000円くらい

Slide 34

Slide 34 text

学習: オンライン講座 egghead ● 月額: 5000円くらい

Slide 35

Slide 35 text

React + Redux + TSを使ってみて 良かったこと - Redux: 流れを理解すれ 簡単 - Redux: ど Componentでもすべて Stateにアクセスできる - TS: 宣言元ジャンプOK、定義ファイルを見るとIFがわかる 悩んだこと - Redux: 理解が難しかった... - Redux: Store 構造設計... - Redux: ディレクトリ構造... - ducks, re-duck, actions/reducers - Redux: ボイラープレート多し... - redux-actions - TS: interface定義どこでやる?

Slide 36

Slide 36 text

Fin.

Slide 37

Slide 37 text

Appendix

Slide 38

Slide 38 text

github sample code https://github.com/1coin178/react-redux-ts-super-simple-countup