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
140
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
260
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
75
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
160
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
23k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
380
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
790
私の仕事観 + 今の仕事
1coin
0
55
複雑化したReact hookのデバッグとその対策
1coin
4
1.1k
G空間APIと地図ライブラリの紹介
1coin
2
570
Other Decks in Technology
See All in Technology
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
700
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
26
11k
ずっと昔に Star をつけたはずの思い出せない GitHub リポジトリを見つけたい!
rokuosan
0
150
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
160
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.2k
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
AIのコンプラは何故しんどい?
shujisado
1
190
生成AIのガバナンスの全体像と現実解
fnifni
1
180
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
250
TSKaigi 2024 の登壇から広がったコミュニティ活動について
tsukuha
0
160
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
Featured
See All Featured
Designing for Performance
lara
604
68k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Automating Front-end Workflow
addyosmani
1366
200k
Designing for humans not robots
tammielis
250
25k
Thoughts on Productivity
jonyablonski
67
4.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
290
Gamification - CAS2011
davidbonilla
80
5.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Writing Fast Ruby
sferik
628
61k
Bash Introduction
62gerente
608
210k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Building Flexible Design Systems
yeseniaperezcruz
327
38k
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