Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React + Redux + Typescipt 開門から入門まで

6df173103ec653407d075aadd39afe5d?s=47 1coin
July 18, 2019

React + Redux + Typescipt 開門から入門まで

第9回若手WEB名古屋 - connpass - https://wakateweb-nagoya.connpass.com/event/135743/

6df173103ec653407d075aadd39afe5d?s=128

1coin

July 18, 2019
Tweet

More Decks by 1coin

Other Decks in Technology

Transcript

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

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

    TypeScript
  3. 用語 おさらい

  4. React - Facebook社が開発したUIフレームワーク JavaScriptライブラリ - 2013 にオープンソース化 - UI Component管理、宣言的なUI

    - 仮想DOMが特徴 DOM差分によるUIレンダリング パフォーマンス最適化 - 最新バージョン: v16.8.6 - 成熟してきた印象 - create-react-appコマンドで面倒な環境構築をやってくれる - webpack怖い....
  5. React Component管理なにがうれしい? - UI 再利用性向上 - ロジック、デザインをパーツごとにまとめ、閉じこめる (そんなくらい 理解)

  6. Reactで宣言的(Declarative) UIなにがうれしい? - どうしたいか(命令)でなく、どうなっていてほしいか(結果) - コードやUI 見通しが良くなる - デバッグもしやすい -

    再利用性向上 Introduction to declarative UI - Flutter - https://flutter.dev/docs/get-started/flutter-for/declarative
  7. Store Redux - アプリケーション 状態管理 フレームワーク - React + Reduxによる状態管理

    一元化 - React: UI ComponentごとにStateを管理 - Redux: すべて State管理を単一 State = Storeに任せる - データ 流れを一方通行に、シンプルに Action Reducer State new State UI
  8. 一元管理できると何がうれしい か • 状態管理しているStoreに(すべて )React Componentがアクセス可能 • Componentがネストしていた場合、state値 連続橋渡しを回避 •

    アプリ 状態を把握、再現しやすい
  9. TypeScript - 型があるJS - トランスパイルする で、JS バージョンやブラウザごと 対応が容易そう - ES2015

    - モダンな書き方ができる - VSCodeがサポートしている
  10. 開門 よし、入門だ

  11. 使い方

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

  13. None
  14. None
  15. VSCode F12で宣言元へジャンプ!

  16. 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
  17. Count Up アプリ

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

    new state {count: x +1}
  19. React + Redux ActionCreator Store Reducer React Component - this.props

    mapStateToProps mapDispatchToProps Action
  20. Store Redux ( 再掲) - アプリケーション 状態管理 フレームワーク - React

    + Reduxによる状態管理 一元化 - React: UI ComponentごとにStateを管理 - Redux: すべて State管理を単一 State = Storeに任せる - データ 流れを一方通行に、シンプルに Action Reducer State new State UI
  21. React-Redux ライブラリ導入

  22. #1 ActionType・ActionCreator 作成

  23. #2 Redux Store 定義

  24. #3 Reducer実装

  25. #4 Store 作成・Componentと結合

  26. #4 Store 作成・Componentと結合

  27. #5 Store 値を参照

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

  29. Redux デバッグ Redux DevTools • Chrome拡張機能 • 飛んだAction 確認 •

    Store 構造把握 • タイムライン https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja
  30. Redux デバッグ Redux DevTools (導入方法)

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

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

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

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

  35. React + Redux + TSを使ってみて 良かったこと - Redux: 流れを理解すれ 簡単

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

  37. Appendix

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