KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

react-quick-tutorial

★ 625 Open GitHub ↗

:rocket: 讓你用最短時間，充分體會 React 的脈絡思維

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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) ｜

![Analytics](https://shining-ga-beacon.appspot.com/UA-77436651-1/home?pixel)

react-quick-tutorial

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README