reactHook实例之TodoList

上手reackHooks实现一个todolist

用到的hooks:useContext、useReducer、useState

reactHook实例之TodoList_第1张图片

项目结构:  

----nav组件            头部输入框和点击添加按钮

-----content组件     内容区域主要是渲染全局state数据的列表

----footer组件         底部,实现全选、全不选按钮,提示当前勾选了多少个条目

---------------------------  todo.js(整个todo项目的根文件,todo.js将会被导入到app.js文件中)-----------------------------------------------------

reactHook实例之TodoList_第2张图片

----------------------------------------------------------actions-------------------------------------------------------------------------

reactHook实例之TodoList_第3张图片

----------------------------------------------------------reducer-------------------------------------------------------------------------

reactHook实例之TodoList_第4张图片

----------------------------------------------------------nav-------------------------------------------------------------------------

reactHook实例之TodoList_第5张图片----------------------------------------------------------content-------------------------------------------------------------------------

reactHook实例之TodoList_第6张图片

----------------------------------------------------------footer-------------------------------------------------------------------------

reactHook实例之TodoList_第7张图片

你可能感兴趣的:(react)