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
42
Frontend Resource Intergration and Sharing
l443018
1
48
GSS Frontend Project Management
l443018
2
130
JSDC 2015 Generation of Frontend
l443018
1
120
Other Decks in Technology
See All in Technology
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
FastConnect の冗長性
ocise
1
9.6k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
Culture Deck
optfit
0
330
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
High Performance PHP
cmuench
0
140
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
Featured
See All Featured
RailsConf 2023
tenderlove
29
1k
Fireside Chat
paigeccino
34
3.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Building Your Own Lightsaber
phodgson
104
6.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
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