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在浏览器上运行该项目。