脚本宝典收集整理的这篇文章主要介绍了用 React.js 写一个最简单的 To-do List 应用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近在学 React.js,也写了一些练习的项目,之前参考网上的一些代码写了一个很简单的 to-do list。对于初学者来说,写个基本的 to-do list 对于理解 React 中的一些概念及语法倒是挺有帮助的。
现在很多的 React 项目中已经开始使用 ES6 来写了,不过因为我在学习 React 的时候看的教程大多都是用 ES5 写的,我这里还是用的还是更熟悉的 ES5 写法,虽然有点落伍了,但若想改成 ES6 版本倒也挺方便的。
文件目录
在正式的生产项目中,使用 webpack 可以很方便地对我们的文件进行打包,这里因为程序比较简单,直接用 <script>
标签将 React 组件引入了。
首先新建一个 index.htML
文件,引入相关的资源文件。
再新建一个 js
文件夹,我们使用 React 需要这样的两个文件: react.js
和 react-dom.js
,你可以使用 cdn 引入,这里直接将文件下载放在了 js
文件夹内。
js
文件夹内还有一个 script.jsx
文件,我们程序的主要内容就放在这个文件中。注意这里的后缀名是 jsx
,表示它是使用 React 的 jsx
语法来写的,引入它的时候按如下写法:
<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
,可以参考这几条:
这里我们从代码来看看,属性是如何从父组件传递到子组件的。
每一条待办事项有这样的几个属性:
我们看看属性的传递过程。
首先在 TodoBox
组件的 state
中有一个 data
对象:
data: [
{"id": "0001", "task":"吃饭", "complete": "false"},
{"id": "0002", "task":"睡觉", "complete": "true"},
...
]
TodoBox
组件的 render 函数中会有 TodoList
组件:
<TodoList data={this.state.data}
// 其他的属性及方法写在这里
/>
这样 TodoBox
组件的 data
属性就传递给了子组件 TodoBox
。在 TodoBox
中通过 this.props
来引用这一属性,即 this.props.data
。
TodoBox
组件还有子组件 TodoItem
,可以将属性继续传递下去。在 TodoList
组件的 render
函数中这样写:
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 了。
函数的传递
我们的程序中需要的函数有这几个:
在 React 的组件中传递方法与传递属性类似,现在 TodoBox
组件中有一个 handleToggleComplete
函数,将它传递给 TodoList
组件:
<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 SimpleHTTPServer // open a server with python
这篇博客里没有对整个项目所有的代码进行分析,更多内容还是直接看代码更清楚。
以上是脚本宝典为你收集整理的用 React.js 写一个最简单的 To-do List 应用全部内容,希望文章能够帮你解决用 React.js 写一个最简单的 To-do List 应用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。