{"id":21253693,"url":"https://github.com/wasichris/tp-react-lab","last_synced_at":"2025-09-15T03:47:58.787Z","repository":{"id":44226542,"uuid":"237150078","full_name":"wasichris/tp-react-lab","owner":"wasichris","description":"透過練習項目更了解 Javascript 與 ES 6 語法並且實際練習使用 React.js","archived":false,"fork":false,"pushed_at":"2023-05-07T21:34:18.000Z","size":7301,"stargazers_count":1,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T05:43:18.546Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/wasichris.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}},"created_at":"2020-01-30T06:05:16.000Z","updated_at":"2022-05-15T14:21:38.000Z","dependencies_parsed_at":"2022-09-03T13:41:42.447Z","dependency_job_id":null,"html_url":"https://github.com/wasichris/tp-react-lab","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wasichris/tp-react-lab","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasichris%2Ftp-react-lab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasichris%2Ftp-react-lab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasichris%2Ftp-react-lab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasichris%2Ftp-react-lab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wasichris","download_url":"https://codeload.github.com/wasichris/tp-react-lab/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wasichris%2Ftp-react-lab/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275202437,"owners_count":25423009,"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","status":"online","status_checked_at":"2025-09-15T02:00:09.272Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-21T03:52:40.565Z","updated_at":"2025-09-15T03:47:58.732Z","avatar_url":"https://github.com/wasichris.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React.js Labs #\n本專案使用 **creaet-react-app 3.2.0** 建立專案，提供可運作的開發環境，透過練習項目更了解 Javascript 與 ES 6 語法並且實際練習使用 React.js，以達到熟悉使用 React.js 開發之目的；此練習專案重點會放在 React.js 上面，對於 javascript 的語言特性與新版語法沒有太多著墨。文件最後會附上所有相關的參考資料連結，可依需要自行查閱。\n\n\n[Online Lab Demo Here](https://wasichris-react-lab.netlify.app/ \"Lab\")\n\n\u0026nbsp;\n## 行前準備 ##\n1. 了解 **nvm** 為何？如何使用。\n2. 了解 **npm** 為何？如何使用。\n3. 具備**網頁**開發的基本知識(**HTML**、**CSS**、**Javascript**)。\n4. 了解 **Javascript** 與 **ES 6** 語法。  \n5. 了解 **git** 版本控管的原理與操作。\n6. 了解 **react** 的 API 與生命周期。\n\n\u0026nbsp;\n## 環境準備 ##\n1. 安裝 **git**。\n2. 安裝 **nvm**，管理 nodejs 版本。\n3. 使用 nvm 安裝 **nodejs** ，nodejs 建議版本為 **10.16.0 以上**。\n4. 安裝 **Visual Studio Code**。\n5. Visual Studio Code 安裝擴充功能：**ESLint**、**Path Autocomplete**。\n6. Chrome 安裝 **redux-devtools** ，用來 debug。 \n\n\u0026nbsp;\n\n## 專案安裝 ##\n* clone 此專案至本地端。\n* 移除專案內的 .git 資料夾，並且在 bitbucket 新增一個私有的 repository，將程式碼簽入。  \n* 在命令提示字元/終端機將目錄移至專案資料夾。\n* 執行下列指令安裝 npm package 。  \n```\nnpm install\n```\n\n\u0026nbsp;\n\n## 啟動 Mock Api 服務 ##\n請使用 tp-react-lab-mock-api 專案作為 mock api 提供者。\n```\nnpm start\n```\n**啟動成功後請不要關閉命令提示字元/終端機視窗，網站服務才能使用**  \n練習項目時會使用到，於開發期間啟動此服務  \n執行成功後開啟 http://localhost:8888/ ，畫面如下  \n![mock api首頁](src/assets/images/readme/mock.png )  \n\n\u0026nbsp;\n\n## 專案執行(開發) ##\n```\nnpm run start\n```\n**啟動成功後請不要關閉命令提示字元/終端機視窗，網站才能使用**  \n執行成功後開啟 http://localhost:3310/ ，畫面如下  \n![網站首頁|100x](src/assets/images/readme/home.png)  \n\n\u0026nbsp;\n\n## 專案結構 ##\n* **public/** – 靜態檔案資料夾，直接複製到打包後的資料夾  \n* **src/assets/** – 程式使用到的 全域css、字型、圖片檔案  \n* **src/components/** – 共用組件  \n* **src/constants/** – 常數設定  \n* **src/model/** – 定義全域狀態 redux, saga 位置，依功能做檔案區分   \n* **src/services/** – 共用邏輯服務，例如：呼叫 API 的服務、共用(商業)邏輯  \n* **src/setup/** – 全域 plugin 設定  \n* **src/utils/** – 共用 helper 工具  \n* **src/views/** – 功能頁面  \n* **src/App.js** – 主組件  \n* **src/index.js** – 程式進入點  \n\n\u0026nbsp;\n## 練習項目01 - 輸入控制 ##\n![輸入控制](src/assets/images/readme/practice01.png)  \n\n\u0026nbsp;\n## 練習項目02 - 父子組件溝通 ##\n![父子組件溝通](src/assets/images/readme/practice02.png)  \n\n\u0026nbsp;\n## 練習項目03 - 於子組件中插入區塊 ##\n![於子組件中插入區塊](src/assets/images/readme/practice03.png)  \n\n\u0026nbsp;\n## 練習項目04 - 存取前端資訊 ##\n![存取前端資訊](src/assets/images/readme/practice04.png)  \n\n\u0026nbsp;\n## 練習項目05 - 路由設定及轉址 ##\n![路由設定及轉址](src/assets/images/readme/practice05.png)  \n\n\u0026nbsp;\n## 練習項目06 - Redux 全域狀態控制 ##\n![Redux 全域狀態控制](src/assets/images/readme/practice06.png)  \n\n\u0026nbsp;\n## 練習項目07 - 呼叫 API 取得資訊 ##\n![呼叫 API 取得資訊](src/assets/images/readme/practice07.png)  \n\n\u0026nbsp;\n## 練習項目08 - 使用 saga 完成登入流程 ##\n![使用 saga 完成登入流程](src/assets/images/readme/practice08.png)  \n\n\u0026nbsp;\n## 練習項目09 - 表單驗證 ##\n![表單驗證](src/assets/images/readme/practice09.png)  \n\n\u0026nbsp;\n## 練習項目10 - 熟悉 Hook 操作方式 ##\n![熟悉 Hook 操作方式](src/assets/images/readme/practice10.png)  \n\n\u0026nbsp;\n## 練習項目11 - 熟悉 styled-components 操作方式 ##\n![熟悉 styled-components 操作方式](src/assets/images/readme/practice11.png)  \n\n\u0026nbsp;\n## 練習項目12 - 熟悉 Context 操作方式 ##\n![熟悉 Context 操作方式](src/assets/images/readme/practice12.png)  \n\n\u0026nbsp;\n## 練習項目13 - 打造 Wizard 共用組件 ##\n![打造 Wizard 共用組件](src/assets/images/readme/practice13.png)  \n\n\u0026nbsp;\n## 練習項目14 - 打造 Modal 共用組件 ##\n![打造 Modal 共用組件](src/assets/images/readme/practice14.png)  \n\n\u0026nbsp;\n## 練習項目15 - 打造 Upload File 共用組件 ##\n![打造 Upload File 共用組件](src/assets/images/readme/practice15.png)  \n\n\u0026nbsp;\n## 練習項目16 - 打造 Tabs 共用組件 ##\n![打造 Tabs 共用組件](src/assets/images/readme/practice16.png)  \n\n\u0026nbsp;\n## 參考資料 ##\n* 為你自己學 Git - https://gitbook.tw\n* Bitbucket - https://bitbucket.org\n* Visual Studio Code Tips and Tricks - https://code.visualstudio.com/docs/getstarted/tips-and-tricks  \n* nvm for ios - https://github.com/creationix/nvm \n* nvm for windows: https://github.com/coreybutler/nvm-windows \n* npm - https://docs.npmjs.com\n* ECMAScript 6 入門 - http://es6.ruanyifeng.com\n* Sass - https://sass-lang.com\n* axios - https://github.com/axios/axios  \n* react - https://reactjs.org/\n* react router - https://reacttraining.com/react-router/web/guides/quick-start\n* redux - https://chentsulin.github.io/redux/\n* redux saga - https://redux-saga.js.org/\n* formik - https://jaredpalmer.com/formik/docs/overview\n* yup - https://github.com/jquense/yup \n* Hook - https://en.reactjs.org/docs/hooks-intro.html\n* useEffect 的完整指南 - https://overreacted.io/zh-hant/a-complete-guide-to-useeffect/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwasichris%2Ftp-react-lab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwasichris%2Ftp-react-lab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwasichris%2Ftp-react-lab/lists"}