使用react全家桶实现一个todolist 在线应用

写在前面

这款应用是rudux官方示例TodoMVC的拓展，在此基础上又结合redux作者Dan Abramov大神在egghead上对redux的讲解。
UI使用了Material-UI,参考了知乎@黄玄的Vue写的TodoApp，想着重点是为了练手react 和redux。所以UI和交互就没有打算花太多时间。

功能

纯单页面应用。
可在线注册登录，数据保存在leancloud上，数据更改会实时同步到云端。
根据添加的事项的时间信息，对列表进行排序和分类。
切换不同的路由选项，可显示不同完成状态的事项。

在线地址

[预览](https://zev91.github.io/ToDo/build/

源码地址

github

纯单页面应用。
可在线注册登录，数据保存在leancloud上，数据更改会实时同步到云端。
根据添加的事项的时间信息，对列表进行排序和分类。
切换不同的路由选项，可显示不同完成状态的事项。

pc端演示

移动端演示

技术栈

React：生命周期函数，PropTypes 组件参数验证，ref 和 React.js 中的 DOM 操作，组件的动态渲染等
Redux：根据不同的逻辑把不同的state用不同的reducer进行分离，再合并。用 redux-thunk中间件，统一了异步和同步 action 的调用方式，把异步过程放在 action 级别解决。
create-react-app: 基于Webpack+ES6的最简易的React项目模板，方便快速上手。
React-Router 4.0：构建单页面应用的利器，不过3.0版本到4.0版本改动相当大，踩了不少的坑.
Styled-Components：一个React第三方库，可以将样式写成组件的形式，实现在JS上编写CSS。
CSS3: 和CSSTransitionGroup结合，创建组件过渡动画，优化用户体验。
LeanCloud：使用了它的数据存储功能，将用户数据保存在云端。

目录结构

├── build.js                   项目打包后的文件
├── package.json         定义依赖的nodejs模块

├── node_modules               node模块目录
├── public
│   └──index.html
├── src
│   ├── index.js               入口文件
│   ├── actions               所有在需要时需要触发的actction文件
│   ├── api                     请求和接受数据的模块集
│   ├── components      包含样式组件的组件
│   ├── container           包含逻辑的容器组件
│   ├── reducers            redux中的reducer
│   ├── store                  数据仓库的位置
│   ├── styles                 简单的样式组件
├── .gitignore
├── README.md
└── yarn.lock

小结

最初，这款应用只是个逻辑更加简单的react小应用(redux和router以及异步都未涉及)，本着探索react全家桶的目的，刷了遍redux作者在egghead上的redux教程，又参考官方文档。一遍遍的填坑，历时10天，又经过修修补补，终于做成个样子出来了。