【React应用程序百本挑战】03 待办事项

首先
你好!我是@Sicut_study!
这篇文章让很多人看了,让我感到高兴。这让我深切地认识到React正在引起很多初学者的关注。
正如我在我的文章中多次提到的那样
如果要最快速度学习,就必须立刻开始做些什么。
我认为重要的是这一点。所以我想尝试一下“React应用100次训练”。逐渐提高难度,看看能够创建多少题目,以此来考验我们的能力。
这次我们将会更加深入地应用useState函数进行修改。
上一次的话题
React应用程序的100个基本规则。
-
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ(例: Redux, Next.js, Styled Componentsなど)を組み合わせて使用することは自由
- TypeScriptを利用する
03. 待办事项

请问有什么疑问吗?
创建一个待办事项应用程序
目标
由于需要管理多个任务,TODO列表是学习状态管理的基础选择。当使用React时,可以使用useState或useReducer等Hooks来学习状态管理的方法。
实现条件
-
- 输入字段: 存在一个文本字段,供用户输入任务。如果任务名称不超过1个字符,则进行验证。
-
- 添加按钮: 用于将输入的任务添加到TODO列表的按钮。
-
- 任务列表显示: 添加的任务以列表形式显示。
- 删除按钮: 每个任务旁边都有一个删除按钮,通过点击该按钮可以将相应的任务从列表中删除。
我亲自尝试解决了这个问题。
使用技术
-
- React
-
- TypeScript
-
- Vite
- Emotion
解答时间为2小时。
我考虑了移动设备设计,
并且尝试从头实现了模态框,也有一些挑战的地方。

下一次
最后
我打算继续坚持发布 React100本练习的文章,如果有人想一起挑战的话,请关注 @Sicut_study,我会非常高兴的。如果您已经读到这里,请务必点赞并保存。
稍微做点宣传?????
我想要尝试一个挑战,全力以赴辅导想要成为工程师的人,使他们在三个月的时间内成为优秀的工程师。
如果有人真心想成为工程师,并希望接受辅导指导,我希望您可以在Twitter上发送一条类似于“我想学习编程”的回复。
本周继续加油,一起努力学习编程吧!
