Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React + Redux + Typescipt 開門から入門まで
Search
1coin
July 18, 2019
Technology
0
130
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
「学び」を捉えてマインドアップデート
1coin
0
250
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
72
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
150
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
22k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
370
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
780
私の仕事観 + 今の仕事
1coin
0
53
複雑化したReact hookのデバッグとその対策
1coin
4
1k
G空間APIと地図ライブラリの紹介
1coin
2
560
Other Decks in Technology
See All in Technology
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
900
AWS Lambda のトラブルシュートをしていて思うこと
kazzpapa3
2
180
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
The Rise of LLMOps
asei
8
1.7k
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
170
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
120
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
Engineer Career Talk
lycorp_recruit_jp
0
190
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
A Modern Web Designer's Workflow
chriscoyier
693
190k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
Done Done
chrislema
181
16k
Designing for humans not robots
tammielis
250
25k
Being A Developer After 40
akosma
87
590k
Scaling GitHub
holman
458
140k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Code Review Best Practice
trishagee
64
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