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

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

1coin
July 18, 2019

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

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

1coin

July 18, 2019
Tweet

More Decks by 1coin

Other Decks in Technology

Transcript

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

    - 仮想DOMが特徴 DOM差分によるUIレンダリング パフォーマンス最適化 - 最新バージョン: v16.8.6 - 成熟してきた印象 - create-react-appコマンドで面倒な環境構築をやってくれる - webpack怖い....
  2. Store Redux - アプリケーション 状態管理 フレームワーク - React + Reduxによる状態管理

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

    + Reduxによる状態管理 一元化 - React: UI ComponentごとにStateを管理 - Redux: すべて State管理を単一 State = Storeに任せる - データ 流れを一方通行に、シンプルに Action Reducer State new State UI
  5. Redux デバッグ Redux DevTools • Chrome拡張機能 • 飛んだAction 確認 •

    Store 構造把握 • タイムライン https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja
  6. React + Redux + TSを使ってみて 良かったこと - Redux: 流れを理解すれ 簡単

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