Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React + Redux + Typescipt 開門から入門まで
1coin
July 18, 2019
Technology
0
74
React + Redux + Typescipt 開門から入門まで
第9回若手WEB名古屋 - connpass -
https://wakateweb-nagoya.connpass.com/event/135743/
1coin
July 18, 2019
Tweet
Share
More Decks by 1coin
See All by 1coin
複雑化したReact hookのデバッグとその対策
1coin
3
220
G空間APIと地図ライブラリの紹介
1coin
2
410
Googleアシスタントについて
1coin
0
200
Googleアシスタントの他プラットフォームへの拡張
1coin
0
25
Googleアシスタント最新情報(2019)と他プラットフォームへの拡張
1coin
0
190
Googleアシスタントアプリの基本からマルチデバイス対応まで
1coin
1
110
Product:「wear E arth」@Space Apps Challenge 2018
1coin
0
46
誰でもできるGoogleアシスタントアプリ開発
1coin
0
130
Googleアシスタント アクションの Multi-Modal対応について
1coin
2
150
Other Decks in Technology
See All in Technology
⚡Lightdashを試してみた
k_data_analyst
0
220
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
3
4k
アルプの 認証/認可分離戦略と手法
ma2k8
PRO
2
370
Remixの凄みを紹介したい
aiji42
5
3.4k
KubeCon Recap -Platform migration at Scale-
inductor
0
130
Whats new in Android Media?
myolwin00
2
120
CAMのサービス開発の歴史と共通基盤を使った 開発スタイルへの変遷について
ishikawa_pro
0
110
SRENEXT2022 組織にSREを実装していくまでの道のり
marnie0301
1
880
Stripe Search APIを利用した、LINEとStripeの顧客情報連携/line-dc-202205
stripehideokamoto
0
130
Building smarter apps with machine learning, from magic to reality
picardparis
4
3.1k
E2E自動テスト導入・運用をめぐる先入観と実際に起きたこと / Preconceptions and What Happened with E2E Testing
ak1210
6
1.4k
統計学と機械学習の違いと接点とは?
ueniki
0
250
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Bash Introduction
62gerente
596
210k
Become a Pro
speakerdeck
PRO
3
790
The Invisible Customer
myddelton
110
11k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Gamification - CAS2011
davidbonilla
75
3.9k
Design by the Numbers
sachag
271
17k
Transcript
@1coin178 WWN 2019-07-18 React + Redux + TypeScript 開門から入門まで
いま 開発 • UIフレームワーク: React • アーキテクチャ: Redux • 言語:
TypeScript
用語 おさらい
React - Facebook社が開発したUIフレームワーク JavaScriptライブラリ - 2013 にオープンソース化 - UI Component管理、宣言的なUI
- 仮想DOMが特徴 DOM差分によるUIレンダリング パフォーマンス最適化 - 最新バージョン: v16.8.6 - 成熟してきた印象 - create-react-appコマンドで面倒な環境構築をやってくれる - webpack怖い....
React Component管理なにがうれしい? - UI 再利用性向上 - ロジック、デザインをパーツごとにまとめ、閉じこめる (そんなくらい 理解)
Reactで宣言的(Declarative) UIなにがうれしい? - どうしたいか(命令)でなく、どうなっていてほしいか(結果) - コードやUI 見通しが良くなる - デバッグもしやすい -
再利用性向上 Introduction to declarative UI - Flutter - https://flutter.dev/docs/get-started/flutter-for/declarative
Store Redux - アプリケーション 状態管理 フレームワーク - React + Reduxによる状態管理
一元化 - React: UI ComponentごとにStateを管理 - Redux: すべて State管理を単一 State = Storeに任せる - データ 流れを一方通行に、シンプルに Action Reducer State new State UI
一元管理できると何がうれしい か • 状態管理しているStoreに(すべて )React Componentがアクセス可能 • Componentがネストしていた場合、state値 連続橋渡しを回避 •
アプリ 状態を把握、再現しやすい
TypeScript - 型があるJS - トランスパイルする で、JS バージョンやブラウザごと 対応が容易そう - ES2015
- モダンな書き方ができる - VSCodeがサポートしている
開門 よし、入門だ
使い方
React App(ts) 環境構築 ~ 起動まで
None
None
VSCode F12で宣言元へジャンプ!
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
Count Up アプリ
Count Up アプリ setState countup render state {count: x} +1
new state {count: x +1}
React + Redux ActionCreator Store Reducer React Component - this.props
mapStateToProps mapDispatchToProps Action
Store Redux ( 再掲) - アプリケーション 状態管理 フレームワーク - React
+ Reduxによる状態管理 一元化 - React: UI ComponentごとにStateを管理 - Redux: すべて State管理を単一 State = Storeに任せる - データ 流れを一方通行に、シンプルに Action Reducer State new State UI
React-Redux ライブラリ導入
#1 ActionType・ActionCreator 作成
#2 Redux Store 定義
#3 Reducer実装
#4 Store 作成・Componentと結合
#4 Store 作成・Componentと結合
#5 Store 値を参照
github sample code https://github.com/1coin178/react-redux-ts-super-simple-countup
Redux デバッグ Redux DevTools • Chrome拡張機能 • 飛んだAction 確認 •
Store 構造把握 • タイムライン https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja
Redux デバッグ Redux DevTools (導入方法)
Redux デバッグ redux-logger • consoleログにAction・Stata 状態を出力してくれる。 https://github.com/LogRocket/redux-logger
Redux デバッグ redux-logger ( 導入方法)
学習: オンライン講座 egghead • 月額: 5000円くらい
学習: オンライン講座 egghead • 月額: 5000円くらい
React + Redux + TSを使ってみて 良かったこと - Redux: 流れを理解すれ 簡単
- Redux: ど Componentでもすべて Stateにアクセスできる - TS: 宣言元ジャンプOK、定義ファイルを見るとIFがわかる 悩んだこと - Redux: 理解が難しかった... - Redux: Store 構造設計... - Redux: ディレクトリ構造... - ducks, re-duck, actions/reducers - Redux: ボイラープレート多し... - redux-actions - TS: interface定義どこでやる?
Fin.
Appendix
github sample code https://github.com/1coin178/react-redux-ts-super-simple-countup