Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shiningjason/react-quick-tutorial
:rocket: 讓你用最短時間，充分體會 React 的脈絡思維
https://github.com/shiningjason/react-quick-tutorial
flux immutablejs react redux
Last synced: about 13 hours ago
JSON representation
:rocket: 讓你用最短時間，充分體會 React 的脈絡思維
- Host: GitHub
- URL: https://github.com/shiningjason/react-quick-tutorial
- Owner: shiningjason
- Created: 2016-04-19T04:27:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-09-01T09:21:08.000Z (over 8 years ago)
- Last Synced: 2024-12-15T08:07:17.687Z (8 days ago)
- Topics: flux, immutablejs, react, redux
- Language: JavaScript
- Homepage:
- Size: 1.37 MB
- Stars: 631
- Watchers: 52
- Forks: 133
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 24 小時，React 快速入門
> :bowtie:：Wish you have a happy learning!
## 在這趟旅程中，你可以學到
1. React
2. Flux
3. Redux
4. ImmutableJS
5. ES6/ES7 語法
## 教學關卡
#### 章節一. 從模仿開始，完成第一個 React 應用 TodoApp
[Level 01. 用元件思維設計應用程式](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-01_react)
[Level 02. 建置簡易的開發環境](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-02_initial-project)
[Level 03. 使用 JSX 印出 hello, world](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-03_hello-react)
[Level 04. 完成第一個 React 元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-04_first-component)
[Level 05. 組合多個 React 元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-05_component-composition)
[Level 06. 使用 props 傳遞元件參數](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-06_transferring-props)
[Level 07. 培養好習慣，設計防呆的 React 元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-07_prop-types-n-default-values)
[Level 08. 動態產生多個 React 元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-08_dynamic-children)
[Level 09. 管理 React 元件的內部狀態](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-09_stateful-component)
[Level 10. 使用 React 表單元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-10_forms)
[Level 11. 瞭解 React 元件的生命週期](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-11_component-lifecycle)
#### 章節二. 往實戰再邁向一步，完成 React + Flux 的應用
[Level 12. 深入淺出 Flux](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-12_flux)
[Level 13. 完成 Dispatcher：Flux 最重要的角色](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-13_flux-dispatcher)
[Level 14. 完成 Actions：集中所有應用行為](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-14_flux-actions)
[Level 15. 完成 Stores：統一管理業務邏輯和資料](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-15_flux-stores)
[Level 16. 完成 Controller View：讓元件同步資料狀態](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-16_flux-controller-view)
[Level 17. 引進 Container Pattern：必學的設計模式](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-17_container-pattern)
[Level 18. 使用 Flux 提供的 Utils](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-18_flux-utils)
#### 章節三. 完成業界最夯的 React + Redux 的應用
[Level 19. 深入淺出 Redux](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-19_redux)
[Level 20. 完成 Reducers：讓狀態的改變可預測化](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-20_redux-reducers)
[Level 21. 完成 Store：Redux 的重要角色](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-21_redux-store)
[Level 22. 修改 Actions：讓它們做更簡單的事](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-22_redux-actions)
[Level 23. 加入 Middlewares：動態擴充 dispatch 行為](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-23_redux-middlewares)
[Level 24. 讓 React 應用連結 Redux 系統](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-24_react-redux)
[Level 25. 整合 ImmutableJS](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-25_immutablejs)
#### 延伸章節
[使用 Webpack 建置 React 應用](https://github.com/shiningjason1989/react-build-systems-tutorial/tree/master/2_webpack)
## :rocket: 開始冒險吧 :flashlight:
｜ [Level 01. 用元件思維設計應用程式](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-01_react) ｜
