-
-
Save philipz/1b5677cf6fd2980eab47 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 內容 | |
# 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