[webpack+React]效率轻应用---ReallyDo

每天养成一个好习惯，从创建一个todolist开始。

ReallyDo的页面UI借鉴于todoist ，是基于React全家桶，以leancloud作后端数据部署的轻量级Todo webApp

在线体验

技术栈

• React全家桶： React + Redux + React-router
• styled-components : css in js，让样式也能成为组件。
• immutable : 解决js对象引用赋值的特性给redux state所带来的问题。
• redux-thunk: 异步处理state的解决方案。
• CSS 3 & react-transition-group: 使用CSS3 的transform/animation等创建动画，并结合 react-transition-group 实现组件过场动画效果
• leancloud : 用户数据 & todolist数据部署。
• webpack: 搭配 react-hot-loader 实现热加载局部更新，加上 DllPlugin 提高开发体验感。
• underscore : 使用了里面一些 工具 函数处理一些数据。

目录结构

.
├─ build/                        # webpack配置目录
│   ├─── webpack.base.conf.js    # 基本配置
│   ├─── webpack.dev.conf.js     # 开发环境下特有的配置
│   ├─── webpack.prod.conf.js    # 生产环境下特有的配置
│   └─── webpack.dll.conf.js     # 分离打包不常用的第三方库
├─ dist/                         # 编译后的代码
├─ src/                          # 源码
│   ├─── components/             # 页面上可复用的组件
│   ├─── config/                 # app配置文件
│   │     ├─── api.js            # leancloud的api文件
│   │     ├─── AVConfig.js       # 初始化leancloud AV的key
│   │     ├─── Router.js         # SPA app的路由配置
│   │     └─── SvgConfig.js      # Svg icon的实例脚本
│   ├─── container/              # 需要共享store的组件，一般是router-component
│   ├─── store/                  # redux store配置
│   │     ├─── constants.js      # 所有 action type
│   │     ├─── reducer.js        # 将各个container分割的reducer combine成一个大的reducer
│   │     └─── utils.jsx         # 对todolist数据的处理
│   ├─── styled/                 # styled-component
│   ├─── app.jsx                 # app root component
│   └─── index.js                # 入口文件
├─── template/                   # html template
├─── .babelrc
├─── .gitignore
├─── jsconfig.json
├─── package.json
├─── README.md
└─── server.js
复制代码

预览

• 登陆 & 登陆中

• 主要页面 & 新增待办

• 用户页面

• 响应式

功能

• SPA应用
• 含简单用户系统，当前无用户状态下，不可使用reallyDo功能。
• todoItem实现增删改功能，所有数据同步到云
• 所有item按日期先后分组，日期为今天的优先显示第一组。
• 根据用户完成情况切换视图。

项目复盘总结

1. 关于todolist的数据设计略显拙劣。state上的todolist是一个二维数组。 todoitem的查找策略不仅要遍历id，还要遍历due（到期时间）。在对数据的处理过程中往往需要经过两次遍历甚至是嵌套遍历。在数据量还不大的现状下，性能损耗方面尚未凸显出问题。但当以后数据庞大之后，这应该是一个坑。数据的处理、数据结构与算法能力是我的瓶颈。以后一定要突破它。

2. 每个router component都会有用户的检测、及登陆成功后，注销用户后等都需要js操控路由的跳转。在react-router 文档中没有提供到相关的API给我们操作。后来发现每个router component的props都有history这个对象，尝试了一下直接在history中push跳转的路由，发现成功了。于是解决方案是在异步 action 中通过传过来的history对象直接push路由。这样的解决方法总感觉不太优雅，先留一个疑问，以后待解决。

3. 最后打包生产环境的代码时，虽然将第三方库抽离出来了。但vendor这个集合第三方库的文件略大。在网上搜索了一些解决方案。尝试了一两种，也许是自己的知识体系还不够庞大，有些理解起来略略困难，另外由于时间问题，没有继续探索下去。之后希望有一个更优解决方案。

最后碎碎念

几个月前，我第一次接触React，就是做一个 todolist应用 。当时我刚开始接触框架知识，所拥有的知识储备并不能让我很好地理解这些框架的原理及使用，因此作品十分粗糙。虽然基本功能已经实现，但那是的我早已暗下决心，等以后一定要做个更好一点点的。

通过这次项目的实践，初次尝试自己从零搭建一个项目的实践，包括webpack开发环境的搭配、优化构建速度等。在开展一个项目之前，首先第一步要明确自己要做什么功能的APP，其次要有一个大概的UI稿件。第二步，确认自己的技术栈，并根据自己的技术栈规划大致的目录结构（之后在项目开展过程中一般都会有小调整）。第三步，确认技术栈 & 目录结构 就可以开始使用webpack搭建开发环境了。最后就可以开始愉快地coding了~

过程中也能发现自己的各种不足与短板，比如在查阅资料的时候，稍显浮躁，没有仔细查看文档，导致开发过程中出现不该出现的bug，但好在对bug的解决能力尚可，能快速定位bug的原因，再不然就向帅气的谷哥哥求助。现在越来越感觉到，不轻易向别人求助，靠自己解决bug所带来的能力提升了。刚开始的时候，可能会花费的时间很长，长到甚至一天都没解决。但是当你坚持下来，起码你会知道，当自己出现问题时，应该使用什么样的关键字向谷歌个求助吧~ 最后，一定要坚持coding。learn by doing 于我，是最好的学习方法。但是事后总结也是必不可少的,只有通过总结，你才会发现自己的问题所在，并且确定自己下一步该前进的方向。