寫在前面
這款應用是rudux官方示例TodoMVC的拓展，在此基礎(chǔ)上又結(jié)合redux作者Dan Abramov大神在egghead上對redux的講解脐彩。
UI使用了Material-UI,參考了知乎@黃玄的Vue寫的TodoApp，想著重點是為了練手react 和redux姊扔。所以UI和交互就沒有打算花太多時間。
功能
- 純單頁面應用恰梢。
- 可在線注冊登錄，數(shù)據(jù)保存在leancloud上嵌言，數(shù)據(jù)更改會實時同步到云端。
- 根據(jù)添加的事項的時間信息摧茴，對列表進行排序和分類绵载。
- 切換不同的路由選項苛白，可顯示不同完成狀態(tài)的事項。
在線地址
[預覽](https://zev91.github.io/ToDo/build/
源碼地址
- 純單頁面應用丸氛。
- 可在線注冊登錄，數(shù)據(jù)保存在leancloud上缓窜，數(shù)據(jù)更改會實時同步到云端定续。
- 根據(jù)添加的事項的時間信息禾锤，對列表進行排序和分類。
- 切換不同的路由選項恩掷，可顯示不同完成狀態(tài)的事項。
pc端演示
移動端演示
技術(shù)棧
- React：生命周期函數(shù)峭状，PropTypes 組件參數(shù)驗證，ref 和 React.js 中的 DOM 操作逼争，組件的動態(tài)渲染等
- Redux： 根據(jù)不同的邏輯 把不同的state用不同的reducer進行分離，再合并誓焦。用
redux-thunk中間件，統(tǒng)一了異步和同步 action 的調(diào)用方式，把異步過程放在 action 級別解決移层。 - create-react-app: 基于Webpack+ES6的最簡易的React項目模板，方便快速上手观话。
- React-Router 4.0：構(gòu)建單頁面應用的利器予借，不過3.0版本到4.0版本改動相當大蕾羊，踩了不少的坑.
Styled-Components：一個React第三方庫，可以將樣式寫成組件的形式帽驯，實現(xiàn)在JS上編寫CSS。 - CSS3: 和CSSTransitionGroup結(jié)合尼变，創(chuàng)建組件過渡動畫利凑，優(yōu)化用戶體驗嫌术。
- LeanCloud： 使用了它的數(shù)據(jù)存儲功能，將用戶數(shù)據(jù)保存在云端度气。
目錄結(jié)構(gòu)
├── build.js 項目打包后的文件
├── package.json 定義依賴的nodejs模塊
├── node_modules node模塊目錄
├── public
│ └──index.html
├── src
│ ├── index.js 入口文件
│ ├── actions 所有在需要時需要觸發(fā)的actction文件
│ ├── api 請求和接受數(shù)據(jù)的模塊集
│ ├── components 包含樣式組件的組件
│ ├── container 包含邏輯的容器組件
│ ├── reducers redux中的reducer
│ ├── store 數(shù)據(jù)倉庫的位置
│ ├── styles 簡單的樣式組件
├── .gitignore
├── README.md
└── yarn.lock
小結(jié)
最初，這款應用只是個邏輯更加簡單的react小應用(redux和router以及異步都未涉及)磷籍，本著探索react全家桶的目的，刷了遍redux作者在egghead上的redux教程院领，又參考官方文檔。一遍遍的填坑比然，歷時10天丈氓，又經(jīng)過修修補補强法，終于做成個樣子出來了。
