{"id":20599862,"url":"https://github.com/shiningjason/react-quick-tutorial","last_synced_at":"2025-04-05T09:08:45.950Z","repository":{"id":78230633,"uuid":"56564600","full_name":"shiningjason/react-quick-tutorial","owner":"shiningjason","description":":rocket: 讓你用最短時間，充分體會 React 的脈絡思維","archived":false,"fork":false,"pushed_at":"2016-09-01T09:21:08.000Z","size":1439,"stargazers_count":631,"open_issues_count":8,"forks_count":132,"subscribers_count":51,"default_branch":"master","last_synced_at":"2025-03-29T08:08:05.368Z","etag":null,"topics":["flux","immutablejs","react","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shiningjason.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-19T04:27:04.000Z","updated_at":"2025-03-06T16:57:53.000Z","dependencies_parsed_at":"2023-03-02T12:45:44.965Z","dependency_job_id":null,"html_url":"https://github.com/shiningjason/react-quick-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiningjason%2Freact-quick-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiningjason%2Freact-quick-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiningjason%2Freact-quick-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiningjason%2Freact-quick-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shiningjason","download_url":"https://codeload.github.com/shiningjason/react-quick-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312081,"owners_count":20918344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flux","immutablejs","react","redux"],"created_at":"2024-11-16T08:34:24.910Z","updated_at":"2025-04-05T09:08:45.914Z","avatar_url":"https://github.com/shiningjason.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 24 小時，React 快速入門\n\n\u003e :bowtie:：Wish you have a happy learning!\n\n\n## 在這趟旅程中，你可以學到\n\n1. React\n2. Flux\n3. Redux\n4. ImmutableJS\n5. ES6/ES7 語法\n\n\n## 教學關卡\n\n#### 章節一. 從模仿開始，完成第一個 React 應用 TodoApp\n\n[Level 01. 用元件思維設計應用程式](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-01_react)  \n[Level 02. 建置簡易的開發環境](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-02_initial-project)  \n[Level 03. 使用 JSX 印出 hello, world](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-03_hello-react)  \n[Level 04. 完成第一個 React 元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-04_first-component)  \n[Level 05. 組合多個 React 元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-05_component-composition)  \n[Level 06. 使用 props 傳遞元件參數](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-06_transferring-props)  \n[Level 07. 培養好習慣，設計防呆的 React 元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-07_prop-types-n-default-values)  \n[Level 08. 動態產生多個 React 元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-08_dynamic-children)  \n[Level 09. 管理 React 元件的內部狀態](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-09_stateful-component)  \n[Level 10. 使用 React 表單元件](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-10_forms)  \n[Level 11. 瞭解 React 元件的生命週期](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-11_component-lifecycle)  \n\n#### 章節二. 往實戰再邁向一步，完成 React + Flux 的應用\n\n[Level 12. 深入淺出 Flux](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-12_flux)  \n[Level 13. 完成 Dispatcher：Flux 最重要的角色](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-13_flux-dispatcher)  \n[Level 14. 完成 Actions：集中所有應用行為](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-14_flux-actions)  \n[Level 15. 完成 Stores：統一管理業務邏輯和資料](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-15_flux-stores)  \n[Level 16. 完成 Controller View：讓元件同步資料狀態](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-16_flux-controller-view)  \n[Level 17. 引進 Container Pattern：必學的設計模式](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-17_container-pattern)  \n[Level 18. 使用 Flux 提供的 Utils](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-18_flux-utils)  \n\n#### 章節三. 完成業界最夯的 React + Redux 的應用\n\n[Level 19. 深入淺出 Redux](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-19_redux)  \n[Level 20. 完成 Reducers：讓狀態的改變可預測化](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-20_redux-reducers)  \n[Level 21. 完成 Store：Redux 的重要角色](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-21_redux-store)  \n[Level 22. 修改 Actions：讓它們做更簡單的事](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-22_redux-actions)  \n[Level 23. 加入 Middlewares：動態擴充 dispatch 行為](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-23_redux-middlewares)  \n[Level 24. 讓 React 應用連結 Redux 系統](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-24_react-redux)  \n[Level 25. 整合 ImmutableJS](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-25_immutablejs)  \n\n#### 延伸章節\n\n[使用 Webpack 建置 React 應用](https://github.com/shiningjason1989/react-build-systems-tutorial/tree/master/2_webpack)  \n\n\n## :rocket: 開始冒險吧 :flashlight:\n\n｜ [Level 01. 用元件思維設計應用程式](https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-01_react) ｜\n\n\n![Analytics](https://shining-ga-beacon.appspot.com/UA-77436651-1/home?pixel)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiningjason%2Freact-quick-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshiningjason%2Freact-quick-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiningjason%2Freact-quick-tutorial/lists"}