react学习-编写一个todo小项目

git地址觉得可以的话，可以给个star哦~

前言

公司项目是用vue技术栈的，个人对react也很有兴趣，但是目前项目中没有使用到，之前有空也看了下react官方文档，但是一直没有机会练手，这次学习完react官网文档之后，打算找个项目练下手，巩固下。在github上参考了下，决定先从经典的todo上手，且之后可以通过这个安排自己的每日计划，完成未完成情况。

项目截图：

项目功能：

1.新增代办事项

2.查询代办事项

3.根据状态显示代办事项

项目说明

项目整体划分为，容器组件，数据承载组件，ui组件

import React, { Component } from "react";
import StateProvider from "./wrappers/StateProvider";
import KeyStrokeHandler from "./wrappers/KeyStrokeHandler";
import TodoList from "./ui/TodoList";
class App extends Component {
  render() {
    return (
      <StateProvider>
        <KeyStrokeHandler>
          <TodoList />
        </KeyStrokeHandler>
      </StateProvider>
    );
  }
}
export default App;

数据承载组件：项目中所用到数据传递没有通过redux进行状态管理，而是在顶层，定义了一个 StateProvider class组件，在组件中，定义全局state和action，下发给子孙组件. 通过 React.Children.map 遍历生成子组件和数据方法传递。

 export function wrapChildrenWith(children, props) {
  return React.Children.map(children, (child) =>
    React.cloneElement(child, props)
  );
}

容器组件：在StateProvider组件内定义了 KeyStrokeHandler 组件，该组件用来监听键盘输入，并修改当前模式(默认为空，可改为创建模式，查询模式),同样也通过 React.Children.map 遍历生成子组件和数据方法传递。

ui组件：页面中的视图部分由TodoList class组件以及拆分的多个子模块组合而成，如：Header,Footer,FilteredList等多个小模块，

数据部分目前在services/todo.js里模拟定义，后期计划通过，导入导出json文件来保存每天的事项明细

编写一个react todo小项目

react学习-编写一个todo小项目

前言

项目功能：

项目说明