├── .gitignore
├── images
├── flux.png
├── mockup.png
└── react-lifecycle.jpg
├── .gitmodules
├── gulpfile.babel.js
├── package.json
├── README.md
├── index.html
└── slide
└── index.md
/.gitignore:
--------------------------------------------------------------------------------
1 | .ignore
2 | node_modules
3 |
--------------------------------------------------------------------------------
/images/flux.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiningjason/ReactFlux123/HEAD/images/flux.png
--------------------------------------------------------------------------------
/images/mockup.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiningjason/ReactFlux123/HEAD/images/mockup.png
--------------------------------------------------------------------------------
/images/react-lifecycle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shiningjason/ReactFlux123/HEAD/images/react-lifecycle.jpg
--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "examples/todos"]
2 | path = examples/todos
3 | url = https://github.com/shiningjason1989/ReactTodosTutorial
4 |
--------------------------------------------------------------------------------
/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | import gulp from 'gulp';
2 | import browserSync from 'browser-sync';
3 |
4 | const server = browserSync.create();
5 | const reload = server.reload;
6 |
7 | gulp.task('serve', function() {
8 | server.init({ server: './' });
9 |
10 | gulp
11 | .watch(['index.html', 'slide/*'])
12 | .on('change', reload);
13 | });
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-flux-123",
3 | "version": "1.0.0",
4 | "description": "2015年達暉資訊教育訓練 - React & Flux 123",
5 | "scripts": {
6 | "start": "gulp serve"
7 | },
8 | "author": "shiningjason1989@gmail.com",
9 | "license": "MIT",
10 | "devDependencies": {
11 | "babel": "^5.8.23",
12 | "browser-sync": "^2.8.2",
13 | "gulp": "^3.9.0"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 2015年達暉資訊教育訓練 - React & Flux 123
2 | 這裡存放的是 React 系列教學的 [投影片](https://shiningjason1989.github.io/ReactFlux123) 原始碼 : )
3 |
4 | ## 相關連結
5 | 1. [ReactTodosTutorial](https://github.com/shiningjason1989/ReactTodosTutorial): 教學範例
6 | 2. [ReactNativeTodos](https://github.com/shiningjason1989/ReactNativeTodos): 示範如何將 React 版本的範例轉成 ReactNative
7 | 3. [ExponentTodos](https://github.com/shiningjason1989/ExponentTodos/tree/master): 示範如何利用 ExponentJS 發佈 React Native 到實機上測試
8 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Slides | React & Flux Tutorials
12 |
15 |
16 |
17 |
27 |
28 |
29 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/slide/index.md:
--------------------------------------------------------------------------------
1 | *2015年達暉資訊教育訓練*
2 | # React & Flux 123
3 |
4 | >>
5 |
6 | # 0. 開始前
7 | 提示：往下滑動看章節內容，往右滑動切換章節
8 |
9 | vv
10 |
11 | ## 0.1 你今天會學到
12 | - React/Flux 的觀念
13 | - 一些 ES6 和 ES7 的新語法
14 | - React Native 經驗分享
15 | - 前端工程的冰山一角
16 |
17 | vv
18 |
19 | ## 0.2 範例程式
20 | - [React Todos Tutorial](https://github.com/shiningjason1989/ReactTodosTutorial)
21 | - [React Native Todos](https://github.com/shiningjason1989/ReactNativeTodos)
22 | - [Exponent Todos](https://github.com/shiningjason1989/ExponentTodos)
23 |
24 | vv
25 |
26 | ## 0.3 準備開始～了唷
27 | > Enjoy and Have Fun
28 |
29 | >>
30 |
31 | # 1. 安裝環境
32 | 考考你：往下滑動可以看？？，往右滑動可以切換？？
33 |
34 | vv
35 |
36 | ## 1.1 安裝開發工具 (opt.)
37 | 1. [Sublime Text 3](http://www.sublimetext.com/3)
38 | 2. [Chromium](https://www.chromium.org/)
39 |
40 | vv
41 |
42 | ## 1.2 安裝 nodejs
43 | 1. [Node 官方網站](https://nodejs.org/en/)
44 | 2. [Homebrew](http://brew.sh/)：適合 Mac 使用者
45 | 3. [nvm](https://github.com/creationix/nvm)：方便管理及切換 node、iojs 的版本
46 | 4. 而我的安裝方法是：
47 |
48 | ```cmd
49 | $ brew install nvm // 使用 Homebrew 下載 nvm
50 | $ nvm install stable // 使用 nvm 下載 node
51 | ```
52 |
53 | vv
54 |
55 | ## 1.3 安裝 generator-rf
56 | 1. 下載 [Yeoman](http://yeoman.io/)：
57 | 前端工具組，包含用來產生專案骨架的工具
58 |
59 | 2. 下載 [generator-rf](https://github.com/taiansu/generator-rf)：
60 | 產生 React/Flux 專案架構的工具
61 |
62 | ```cmd
63 | $ npm install -g yo generator-rf
64 | ```
65 |
66 | vv
67 |
68 | ## 1.4 初始化專案
69 | ```cmd
70 | $ yo rf TodosApp // 1. 產生專案
71 | $ cd TodosApp
72 | $ npm run dev // 2. 執行專案
73 | ```
74 |
75 | vv
76 |
77 | ## 1.5 專案介紹
78 | 1. npm & package.json
79 | - [npm 基本指令](http://dreamerslab.com/blog/tw/npm-basic-commands/)
80 | - `npm install --save moduleName`
81 | - `npm install --save-dev moduleName`
82 | 2. webpack & webpack dev server
83 | 3. [Babel](https://babeljs.io/)
84 | 4. [CommonJS](http://webpack.github.io/docs/commonjs.html)
85 |
86 | vv
87 |
88 | ## 1.6 本次的課程範例
89 | 
90 |
91 | >>
92 |
93 | # 2. React
94 |
95 | vv
96 |
97 | ## 2.1 第一個元件
98 | 1. 撰寫第一個元件 Header
99 | 2. 讓 Header 元件顯示在 App 元件中
100 | 3. [範例與詳解](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%231_first_component)
101 |
102 | vv
103 |
104 | ## 2.2 組合元件
105 | 1. 讓 Header 顯示由 App 傳來的 props
106 | （username: 使用者名稱, todoNumber: 待辦事項數量）
107 | 2. 定義 Header 的「propTypes」與「defaultProps」
108 | 3. [範例與詳解](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%232_component_composition)
109 |
110 | vv
111 |
112 | ## 2.3 動態小孩元件
113 | 1. 完成 TodoItem 元件
114 | 2. 完成 TodoList 元件
115 | （該元件可以接收上層傳遞的 todos，並且動態顯示 TodoItem）
116 | 3. [範例與詳解](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%233_dynamic_children)
117 |
118 | vv
119 |
120 | ## 2.4 定義樣式在元件中
121 | 1. 使用 JS 定義所有元件（App, Header, TodoList, TodoItem）的樣式
122 | 2. [範例與詳解](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%234_inline_css)
123 |
124 | vv
125 |
126 | ## 2.5 控制元件
127 | 1. 新增 Input 元件，讓使用者可以登打新的待辦事項
128 | 2. 在 App 元件中，使用 State 來儲存待辦事項
129 | 3. 在 App 元件中，加入處理新增待辦事項的邏輯，並加入新的待辦事項至 State
130 | 5. [範例與詳解](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%235_controlled_component)
131 |
132 | vv
133 |
134 | ## 2.6 完成範例
135 | 1. 下載 React dev tool
136 | 2. 完成切換待辦事項狀態的功能
137 | 3. 完成刪除待辦事項的功能
138 | 4. 完成編輯待辦事項的功能
139 | 5. [範例程式](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%236_complete_sample)
140 |
141 | vv
142 |
143 | ## 2.7. 元件生命週期
144 | 
145 |
146 | vv
147 |
148 | ## 2.8 回顧
149 | 1. 專案架構
150 | 2. 建立第一個元件（React.render(), jsx）
151 | 3. 組裝元件（props, 元件可以層層組裝）
152 | 4. 動態小孩元件（key, VDOM）
153 | 5. 定義樣式在元件中
154 | 6. 控制元件（state）
155 | 7. 元件生命週期
156 |
157 | vv
158 |
159 | ## 2.9 兩大心法
160 | 1. Thinking in Components
161 | 2. Always Redraw（in VDOM）
162 |
163 | >>
164 |
165 | # 3. Flux
166 |
167 | vv
168 |
169 | ## 3.1 Flux 概觀
170 | 
171 |
172 | vv
173 |
174 | ## 3.2 Flux / Dispatcher
175 | 1. 新增 AppDispatcher:
176 | 繼承 flux 中的 dispatcher 實例
177 |
178 | 2. [範例程式](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%237_flux_dispatcher)
179 |
180 | vv
181 |
182 | ## 3.3 Flux / Actions
183 | 1. 新增 ActionTypes:
184 | 存放專案中的 action type 常數
185 |
186 | 2. 新增 TodoActions:
187 | 主要工作是為建立 action 物件，並將 action 傳遞給 Dispatcher
188 |
189 | 3. [範例程式](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%238_flux_actions)
190 |
191 | vv
192 |
193 | ## 3.4 Flux / Stores
194 | 1. 新增 TodoStore
195 | 1. 繼承 EventEmitter 的實例
196 | 2. 建立 addListener 和 removeListener 等便利的方法
197 | 3. 將待辦事項存放在該 store 中，並提供一個 getAll 的方法給外部
198 | 4. 根據 action type 處理業務邏輯，並修改待辦事項的值
199 | 5. 將 TodoStore 註冊到 AppDispatcher 中
200 | 2. [範例程式](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%239_flux_stores)
201 |
202 | vv
203 |
204 | ## 3.5 Flux / Controller-View
205 | 1. 修改 App 元件
206 | 1. 呼叫 TodoAction 來處理使用者操作行為
207 | 2. 傾聽 TodoStore 來修改內部的 state
208 | 2. [範例程式](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%2310_flux_controller_view)
209 |
210 | vv
211 |
212 | ## 3.6 回顧
213 | 1. Flux 架構
214 | 2. Dispatcher
215 | 3. Actions
216 | 4. Stores
217 | 5. Controller-View
218 |
219 | vv
220 |
221 | ## 3.7 再看一次
222 | 
223 |
224 | vv
225 |
226 | ## 3.8 最後大心法
227 | 1. Single Source of Truth
228 |
229 | >>
230 |
231 | # 4. Container
232 | 1. 建立 Component 的 Container，讓他們主要負責傾聽 Store 的變化，和維護內部的 State
233 | 2. [範例程式](https://github.com/shiningjason1989/ReactTodosTutorial/blob/%2311_container_pattern)
234 |
235 | >>
236 |
237 | # 99. 總結與回顧
238 | 1. 三大心法
239 | - Thinking in Components
240 | - Always Redraw（in VDOM）
241 | - Single Source of Truth
242 |
243 | >>
244 |
245 | # 101. 延伸學習
246 | 1. [Redux](https://github.com/rackt/redux)
247 | - [範例程式](https://github.com/shiningjason1989/ReactTodosTutorial/tree/%2314_redux_reducer)
248 | 2. Isomorphic App
249 |
250 | >>
251 |
252 | # THE END
253 | > Enjoy Javascript & React
254 |
255 | - [React Todos Tutorial](https://github.com/shiningjason1989/ReactTodosTutorial)
256 | - [React Native Todos](https://github.com/shiningjason1989/ReactNativeTodos)
257 | - [Exponent Todos](https://github.com/shiningjason1989/ExponentTodos)
258 |
259 | >>
260 |
261 | > 番外篇
262 |
263 | >>
264 |
265 | # a. React Native
266 |
267 | vv
268 |
269 | ## 為什麼我們喜歡 Native Apps
270 | 1. 效能好
271 | 2. 有原生的複雜手勢和柔順的動畫支援
272 | 3. 用起來跟原生平台的感覺一致
273 |
274 | vv
275 |
276 | ## 那對我這個開發者呢
277 | 1. 我必須學習 iOS 和 Android
278 | 2. 這兩者的開發觀念及語言特性都不太一樣
279 | 3. 開發速度緩慢
280 |
281 | vv
282 |
283 | ## 我是一個前端工程師
284 | 1. 我熟悉 HTML/CSS/JS
285 | 2. React 的開發觀念也是我熟悉的
286 | 3. 我愛 Live reload 的開發模式
287 | 4. React 讓我的 App 可以擴展
288 |
289 | vv
290 |
291 | ## 那如果我寫 Hybrid App 呢
292 | 1. 效能實在不怎麼理想
293 | 2. 使用者經驗也不是很理想
294 | 3. 無法在 WebView 中使用 Native 的元件
295 |
296 | vv
297 |
298 | ## 所以，我服用了 React Native
299 | 1. 開發經驗像前端工程
300 | 2. 產出結果是 Native App
301 |
302 | vv
303 |
304 | ## 參考
305 | 1. [React Native: Under the Hood](https://speakerdeck.com/frantic/react-native-under-the-hood)
306 | 2. [從「學習一次，隨處應用」談 React Native 帶來的開發與典範轉移](http://static.itho.me/modernweb/2015/slides/R0_0516_1330-1355_Jeremy%20Lu.pdf)
307 |
--------------------------------------------------------------------------------