用 React.js 写一个最简单的 To-do List 应用
2016-08-16 18:08
295 查看
现在很多的 React 项目中已经开始使用 ES6 来写了,不过因为我在学习 React 的时候看的教程大多都是用 ES5 写的,我这里还是用的还是更熟悉的 ES5 写法,虽然有点落伍了,但若想改成 ES6 版本倒也挺方便的。
GitHub
上的项目地址
在线
demo
文件目录
在正式的生产项目中,使用 webpack 可以很方便地对我们的文件进行打包,这里因为程序比较简单,直接用 <script>标签将
React 组件引入了。
首先新建一个
index.html文件,引入相关的资源文件。
再新建一个
js文件夹,我们使用
React 需要这样的两个文件:
react.js和
react-dom.js,你可以使用
cdn 引入,这里直接将文件下载放在了
js文件夹内。
js文件夹内还有一个
script.jsx文件,我们程序的主要内容就放在这个文件中。注意这里的后缀名是
jsx,表示它是使用
React 的
jsx语法来写的,引入它的时候按如下写法:
1 | <script type="text/babel" src="js/script.jsx"></script> |
browser.js文件,它可以让
jsx语法的文件在浏览器中运行。
最后我们再建立一个
css文件夹,存放样式文件,我的项目中使用了
Bootstrap 的样式,所以需要下载 Bootstrap 的样式文件。
程序功能
作为一个最简单的 to-do list,这个程序没有过多的功能。可以从 demo 里看出,它的功能如下:显示每一个任务
可以将任务标记为已完成,以区分未完成的任务
加入任务 / 删除任务
统计任务总数和完成的任务数量
作为一个示例程序,以上就是它的功能了。
组件结构
我们可以使用 React 开发出各种组件(component),利用不同组件的功能来实现一个应用。我们这里创建的组件有:TodoBox -TodoList -TodoItem -TodoFooter -TodoForm
TodoBox 是最外层的组件,其余的都是它的子组件
TodoList 是各个单独的待办任务的集合
TodoItem 即为一条单独的待办事项
TodoFooter 对上述的事项进行统计
TodoForm 用于加入新的项目
属性的传递
React 的组件有两种不同的属性,state和
props。可以用一种简单的方法来区分它们:如果这个属性是其父组件传给它的,那么就是
props,反之如果一个属性是组件自己的,那么就是
state。
具体什么时候用
state,什么时候用
props,可以参考这几条:
Is it passed in from a parent via props? If so, it probably isn’t state.
Does it change over time? If not, it probably isn’t state.
Can you compute it based on any other state or props in your component? If so, it’s not state.
参考来源:Thinking
in React
这里我们从代码来看看,属性是如何从父组件传递到子组件的。
每一条待办事项有这样的几个属性:
id: 任务的编号
task: 任务的具体内容
complete: 任务是否已经完成
我们看看属性的传递过程。
首先在
TodoBox组件的
state中有一个
data对象:
12 | data: [ {"id": "0001", "task":"吃饭", "complete": "false"}, {"id": "0002", "task":"睡觉", "complete": "true"}, ... ] |
TodoBox组件的
render 函数中会有
TodoList组件:
12 | <TodoList data={this.state.data} // 其他的属性及方法写在这里 /> |
TodoBox组件的
data属性就传递给了子组件
TodoBox。在
TodoBox中通过
this.props来引用这一属性,即
this.props.data。
TodoBox组件还有子组件
TodoItem,可以将属性继续传递下去。在
TodoList组件的
render函数中这样写:
12 | var taskList = this.props.data.map(function(listItem) { return ( <TodoItem taskId={listItem.id} key={listItem.id} task={listItem.task} complete={listItem.complete} // 其他的属性及方法 ) }, this); |
TodoItem组件中就可以用
this.props.taskId获得任务的
id 了。
函数的传递
我们的程序中需要的函数有这几个:handleTaskDelete: 根据id删除一项任务
handleToggleComplete: 切换一项任务的完成状态
handleSubmit: 新增一项任务
generateId: 给新增的任务一个随机的id
在 React 的组件中传递方法与传递属性类似,现在
TodoBox组件中有一个
handleToggleComplete函数,将它传递给
TodoList组件:
12 | <TodoList toggleComplete={this.handleToggleComplete} // 其他的属性及方法写在这里 /> |
TodoList组件中通过
this.props.toggleComplete来调用这一方法了,你也可以将这一方法继续向下一层的组件传递。
程序的运行
你可以下载 GitHub上的项目文件,再用 python 开启一个 HTTP 服务器,就可以打开 http://localhost:8000/ 查看运行结果了。
git clone https://github.com/noiron/simplest-react-todolist.git cd simplest-react-todolist python -m SimpleHTTP server // open a server with python
相关文章推荐
- 用 React.js 写一个最简单的 To-do List 应用
- 用 React.js 写一个最简单的 To-do List 应用
- 使用react-native做一个简单的应用-01项目介绍
- 使用react-native做一个简单的应用-06商品界面的实现
- 微信小程序入门之构建一个简单TODOS应用
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(二)
- 使用react-native做一个简单的应用-02项目搭建与运行
- 微信小程序入门之构建一个简单TODOS应用
- 使用react-native做一个简单的应用-04界面主框架
- 创建node.js一个简单的应用实例
- 微信小程序入门之构建一个简单TODOS应用
- 为一个 iOS 应用编写一个简单的 Node.js/MongoDB Web 服务
- 使用react-native做一个简单的应用-05 navigator的使用
- 用ReactJs写一个简单的手风琴菜单效果
- 为一个 iOS 应用编写一个简单的 Node.js/MongoDB Web 服务
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
- 微信小程序入门之构建一个简单TODOS应用
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(一)
- node.js---study1 实现一个简单应用,登录,session
- 为一个 iOS 应用编写一个简单的 Node.js/MongoDB Web 服务