ReactJS ToDoList

ReactJS-ToDoList

介紹

該專案使用 React JS 庫以及替換純 CSS 的樣式元件實現了一個簡單的待辦事項清單 Web 應用程式的前端。
它包括登入頁面和應用程式的一般用戶介面。
由於該專案僅旨在作為前端研究，因此未實現每個使用者的登入驗證邏輯和任務資料庫。

示範

演示.mp4

靈感

登入頁面的設計靈感來自 Jordan Hughes。主頁的設計靈感來自 Mik Skuza。

特徵

• 登入頁面，包括登入按鈕，可重新導向至主應用程式；
• 應用程式使用者介面，具有導覽側邊欄和待辦事項清單區域；
• 新增任務，設定名稱和類別屬性；
• 刪除任務，並附有確認操作的模式；
• 透過複選框檢查任務是否完成；
• 依「已完成」、「未完成」或「全部」篩選待辦事項清單中顯示的任務；
• 透過在側邊欄上進行選擇，按類別過濾待辦事項清單中顯示的任務；
• 授權：使用者登入前不能存取主頁，登入後也不能存取登入頁面。

Obs.：目前，「編輯任務」和新增或刪除類別功能尚未實現，因為我認為這對我的個人學習沒有太大貢獻，而且會非常耗時。也許我稍後會實現這個。

用法

如果您想親自嘗試這個項目：

1. 透過 https://nodejs.org/en/ 在您的電腦上安裝 Node。
2. 透過終端命令在您的電腦上安裝 Yarn： sudo npm install -g yarn
3. 透過 https://git-scm.com/downloads 在您的電腦上安裝 Git。
4. 將此存儲庫克隆到您的電腦。 （更多關於如何做到這一點的資訊請點擊這裡）
5. 在終端機上下載專案的資料夾內執行yarn install ，以安裝所有使用的依賴項。
6. 執行yarn start在瀏覽器上執行該專案。