html js jquery 项目,ReactJS+Html5+JQuery实现TodoList项目系列教程（一）

最近研究reactjs有两周时间了，为了巩固所学，计划实现一个TODOList的项目：

一、项目功能：主要完成TODO的添加和操作。

1.添加待完成条目

2.提供分类筛选功能

3.删除已完成条目

4.提供本地保存功能

二、项目效果图：

三、UI设计与实现

主要用ReactJs来实现UI的组件化，基本原则是：把页面尽量划分为最小的组件，即按照功能拆分成不同的UI组件。

划分为5个组件：

1.Box:作为外部容器；

2.PickDate:日期选择组件；

3.AddItem:添加条目组件；

4.TodoItem:条目组件；

5.OperationBar:操作栏组件

(PS：主要的css样式比较容易，这里不解释，见最终源码。)

附上组件实现代码：

var Box = React.createClass({

render: function () {

return (

);

}

});

var PickDate = React.createClass({

render: function () {

return (

Pick date:

);

}

});

var AddItem = React.createClass({

render:function(){

return (

Add

);

}

});

var TodoItem = React.createClass({

render:function(){

return (

item.....

);

}

});

var StatusBar = React.createClass({

render:function(){

return (

0 item left

All

Active

Completed

Clear

);

}

});

React.render(

,

document.getElementById('content')

);

未完待续！