Skip to content

Instantly share code, notes, and snippets.

@muhaha3
Forked from coodoo/quick-guide-to-react-flux
Last active August 29, 2015 14:07
Show Gist options
  • Save muhaha3/ee24f9ac3d70d020465c to your computer and use it in GitHub Desktop.
Save muhaha3/ee24f9ac3d70d020465c to your computer and use it in GitHub Desktop.
# 內容
# repo 位置
- https://github.com/facebook/react
- https://github.com/facebook/flux
# 官網
- React
* http://facebook.github.io/react/
- Flux
* http://facebook.github.io/flux/docs/overview.html#content
# 重要簡報
- React: Rethinking Best Practices
* http://www.slideshare.net/floydophone/react-preso-v2
- 這場是最精典的原始介紹,第一次讓世人瞭解 react 的獨特優勢
- 亮點(括號內為頁碼)
- 解釋為何要用 component 而非 template (p9)
- 尤其是關於 separation of concern 的正確方式(p17-p21)
- Component 的巨大優勢(p25-p29)
- JSX 的優點 (p36-p40)
- 為何採取「一律重繪」的原則, 特別注意 p49 後的內容(p43-p46, p49-52)
- VDOM 的運作原理(p56-p57, p62-68)
- 重點整理(p75-p77)
- Flux - action, actionCreator, dispatcher 的深入解釋
* http://goo.gl/j5h7eS
# 影片
- Rethinking Web App Development at Facebook
* http://goo.gl/SZ10b2
# 範例
- flux-chat
* https://github.com/facebook/flux/tree/master/examples/flux-chat
- 這是 flux 最重要的範例,展示了新版 dispatcher 的運作原理
- 也詳細說明了 action - actionCreator - API call 的運作原理
# flux-chat 中文解說版
- https://github.com/coodoo/flux-chat-annotated
# 說明
- 此專案結構很合理,尤其是 js/ 下面的子目錄分類手法,建議可照抄
/actions
/components
/constants
/dispatcher
/stores
/utils
- 程式進入點在 js/app.js
- 基底元件為 js/components/ChatApp.js
- 閱讀順序
- index.html
- app.js
# 入門款流程先這裏
- /components/ThreadSections.js
- /components/ThreadListItem.js
# 進階款流程看這裏
- /components/MessageComposer.js
- /components/ChatMessageActionCreators.js
- /components/MessageStore.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment