首先

最近我想学习前端框架，于是在Udemy上进行了一番学习。
然而，我感觉学到的东西并没有真正掌握，而且我想做一些更实践性的事情，
于是我尝试了@Sicut_study（渡辺仁）先生发布的React100本挑战。

以前的文章

规则 (guī zé)

• React, TypeScriptを使う

その他ツールやライブラリの使用は自由

创建的东西 de

创建一个TODO列表应用程序

抜粋的目的

由于需要管理多个任务，所以TODO清单非常适合初学状态管理。如果使用React，可以通过使用像useState和useReducer等Hooks来学习状态管理的方法。

成功的要求（摘录）

1. 输入字段：用户用于输入任务的文本字段。如果任务名不超过1个字符，则进行验证。
2. 添加按钮：将输入的任务添加到TODO列表中的按钮。
3. 显示任务列表：添加的任务将以列表形式显示。
4. 删除按钮：每个任务旁边都有一个删除按钮，点击它可以将相应的任务从列表中删除。

项目的产出

运用科技

• React 18.2.0

• TypeScript 4.9.5

Chakra-UI 2.8.5

网址

捕捉

最初的布局

点击按钮（显示任务注册模态框）。

点击保存按钮时未填写（会显示验证错误）。

在完成其他任务之后，还需完成TODO任务。

执行步骤

设置项目

# React×TypeScriptのプロジェクト作成
npx create-react-app todo --template typescript

# ディレクトリ変更
cd todo

# Chakra-UIのインストール
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

# react-helmetのインストール
npm i react-helmet

创建组件

请确认存储库中的src文件夹。

部署

使用 Netlify 将 GitHub 进行集成并部署。

最后

我在React100本教程的第三部分创建了一个Todo清单应用。

由于以前在学习教材中创建过待办清单，所以在这个项目中，我采用了其中的显示功能、添加功能和删除功能。

我想在这一点上继续使用Chakra UI来设计布局，特别是对于模态框的使用方法，我认为你可能已经理解了。

我有意识地对原子组件进行了组件分割，
但是，输入模态框的内容必须传递给显示TODO列表的组件，
这个分割问题花费了我很多时间去思考。
问题的创建者据说在2个小时内完成了答案，但我大约花费了5到6个小时。