這是 jsdc 2014 演講後提供的快速學習指南。有問題請到 [React.tw 中文群組](https://www.facebook.com/groups/reactjs.tw/) 討論

quick-guide-to-react-flux

# 內容
	
	# 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
							

一個小修正

進階款流程看這裏

/components/ChatMessageActionCreators.js -> /actions/ChatMessageActionCreators.js
/components/MessageStore.js -> /stores/MessageStore.js