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
Flux+ReactJS Development
Search
Laura Lee
October 19, 2015
Technology
1
98
Flux+ReactJS Development
讓網⾴頁變成畫布
Flux架構+ReactJS開發實作
201510
Laura Lee
October 19, 2015
Tweet
Share
More Decks by Laura Lee
See All by Laura Lee
Front-end Project Development -- from install, development to production
l443018
0
44
Frontend Resource Intergration and Sharing
l443018
1
50
GSS Frontend Project Management
l443018
2
130
JSDC 2015 Generation of Frontend
l443018
1
130
Other Decks in Technology
See All in Technology
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
220
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
1k
技育祭2025【秋】 企業ピッチ/登壇資料(高橋 悟生)
hacobu
PRO
0
120
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
470
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
400
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.9k
React19.2のuseEffectEventを追う
maguroalternative
2
520
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
現場データから見える、開発生産性の変化コード生成AI導入・運用のリアル〜 / Changes in Development Productivity and Operational Challenges Following the Introduction of Code Generation AI
nttcom
0
360
Liquid AI Hackathon Tokyo プレゼン資料
aratako
0
110
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
100
事業開発におけるDify活用事例
kentarofujii
3
850
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
How GitHub (no longer) Works
holman
315
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Six Lessons from altMBA
skipperchong
29
4k
Side Projects
sachag
455
43k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Scaling GitHub
holman
463
140k
RailsConf 2023
tenderlove
30
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
讓網⾴頁變成畫布 Flux架構+ReactJS開發實作 Laura Lee CSBU . FED
⼤大綱 ⾃自我介紹 ⼯工作⼼心得分享 ReactJS開發⼼心得分享
Laura Lee 畢業於清⼤大資⼯工系 興趣是⼈人機互動網⾴頁開發 ⾃自我介紹
⼩小學三年級 第⼀一次寫網⾴頁
⼩小學四年級 做了⼈人⽣生中第⼀一個個⼈人網站
None
None
這是⼀一個... 流⾏行烘焙雞(FrontPage)⾴頁框 和網⾴頁素材的時代
None
None
上了⼤大學才知道 html, css, JavaScript 是⼀一種叫做”程式語⾔言”的東⻄西
None
之後因為⼀一些緣份 我幸運的來到了叡揚 開始前端設計師的奇幻旅程
學習sass語法 農委會專案成果 撰寫README, Change Log ⼯工作⼼心得分享
basic.scss … _mixin.scss basic.css SASS Compiler SASS讓CSS變得⽅方便管理!
scss/ basic.scss _block.scss _col.scss _main.scs _mixin.scss _mod.scss _utility.scss … scss/
basic.scss core/ _variable.scss _main.scss … module/ _col.scss … pages/ map.scss … 整理農委會專案架構
None
None
None
撰寫讀我⽂文件, Change Log
ReactJS開發⼼心得分享 React簡介 Flux架構 VS MVC架構 React + Flux開發實作
Facebook開發的JavaScript Library ⽤用於設計網⾴頁介⾯面 What’s React
即時反應 重複使⽤用 效能強⼤大 Why React
即時反應 this.setState()
CommentBox CommentList Comment CommentForm 重複使⽤用 React.creatClass()
效能強⼤大 Virtual Dom 資料來源: React vs AngularJS vs KnockoutJS: a
Performance Comparison by Chris Harrington 2015/01/13
效能強⼤大 Virtual Dom 資料來源
效能強⼤大 Virtual Dom
傳統HTML + JS + CSS VS React + CSS 同時控制
UI 和 Function 元件個別分開設計 可重複使⽤用 彈性增減 JS 和 UI 分開 不易管理 html code要⼀一再複製
傳統HTML + JS + CSS VS React + CSS
None
Flux VS MVC 只多了Dispatcher?
Flux MVC 多對多互動 不容易追蹤資料流 難Debug view階層不明確 Action以API的⽅方式運作 ⼀一對多/多對⼀一 單向資料流 容易追朔bug位置
React + Flux Flux 為了 React 開發環境打造 發揮了 React ⽗父⼦子階層的好處
當 Store 改變 會觸發 Top-level View 由上⽽而下檢查更新
CommentBox CommentList Comment CommentForm Store
React + Flux 飯糰樹 實作
Action <Tick> <CreateChild> <CreateSibling> View <TreeApp> Store <CounterStore> Dispatcher Store
<TreeStore> View <CounterApp>
和後端如何銜接?
Thanks for listening
Q & A