學習React之旅--寫一個todoList

在上次文章中提到，我會學習React的基礎和ant-design的一些元件，并且使用htmls5的web Storage實作一個todoList。

todoList的功能

1. 寫item：寫入title及content
2. 使用checkbox勾選item，表示這一項内容已做，item項的内容需要劃掉
3. 更改item中的content内容
4. 删除某一項item
5. list需要存儲起來，下次通路這個頁面的時候會展示之前的資料

現在完成的效果圖如下：

布局是使用的ant design中的栅格布局，與BootStrap栅格布局裡的相似诶。

資料存儲選擇的是存在localStorage裡。

因為本人對色彩搭配的知識有所欠缺，是以直接在Color hunt網站上找的一組配色。

git動圖是一個ScreenToGif的應用程式制作的。

小結：

通過本次小練習，大概了解React一些基礎，希望以後能夠更加深入的學習。

TodoList源碼位址：https://github.com/cindyHua901/TodoList

效果不是很滿意。後續應該還會修改，并且存在小bug。

待完善：

• 當删除某一項内容的時候checkbox的值沒有更新正确。。。這個問題待解決。(已解決 )
• 另外還有分頁功能也可以添加。
• 做一個選擇框選擇出所有完成或未完成的清單。
• 那個修改的彈窗也很醜，應該會改為Modal元件再修改一下樣式。