Code Monkey home page Code Monkey logo

mytodo's Introduction

MyTODO

采用官方提供的creat-react-app脚手架,基于React实现的在线TODO应用。此次开发的TODO 是在第一个todolist上进行功能拓展的项目。

功能实现

  • 单页面应用
  • 在线应用,可登陆注册;数据存储到leancloud
  • todoList可增删改,数据同步到leancloud
  • 根据todolitem状态/用户交互实现视图切换

PS:todolist的增删改中的删,这里并不是真正意义的“删”,而是改变它的状态,(用户总想把以前删掉的东西找回来,他们就是这么喜欢后悔)。

项目预览

存在问题

  1. 视图方面:视图切换太过生硬,用户体验并不算十分完美,我曾尝试使用CSS 3 来增添交互效果,结果发现动画流畅度并不如意,由于知识短板缘故,这个有待优化,后续会结合CSSTransitionGroup来创建组件过场动画,优化体验。
  2. 路由设置:由于这是第二次使用react开发的项目,目的更多是体验并深入学习react,很多react生态下的技术栈并没有使用,如react-router等。
  3. 数据传递与管理:当一个项目的功能/交互实现越多,或组件划分越细致,你就会迫切地感觉到Redux的重要性了。由于react的单一数据流的缘故,数据只能经由props自上而下流动,很多时候数据的传递显得特别冗长。

最后碎碎念

在开始做这个项目之前,我曾想过先学习React的技术生态再来做这个项目。但当我翻阅资料学习的时候,才发现,在纸上/屏幕上看到的知识或者技术点自己完全不能感同身受。如果完全按照它的套路去做,也许会做出一个作品出来,但是对于API的存在意义及作用可能并不会更深入了解。所以我后来更倾向去先尝试,哪怕有些地方并不是特别熟练,然后再回头翻阅资料,得到的知识会更牢固。 比如,在完成这个项目之后,我才开始感受到redux、React-Motion等的迫切需要。

Anyway,学习的道路总不会有尽头,唯有在路上保持激情吧~

mytodo's People

Contributors

lynchuh avatar lynn-chuh avatar

Watchers

James Cloos avatar Corn avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.